feat(DualListSelector): enabled opt-in animations

Author: Eric Olkowski

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.15",
+    "@patternfly/patternfly": "6.3.0-prerelease.20",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"

packages/react-core/src/components/DualListSelector/DualListSelector.tsx

@@ -17,27 +17,37 @@ export interface DualListSelectorProps {
   isTree?: boolean;
   /** Content to be rendered in the dual list selector. */
   children?: React.ReactNode;
+  /** Flag indicating whether a tree dual list selector has animations. This will always render
+   * nested dual list selector items rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 class DualListSelector extends Component<DualListSelectorProps> {
   static displayName = 'DualListSelector';
   static defaultProps: PickOptional<DualListSelectorProps> = {
     children: '',
-    isTree: false
+    isTree: false,
+    hasAnimations: false
   };
 
   constructor(props: DualListSelectorProps) {
     super(props);
   }
 
   render() {
-    const { className, children, id, isTree, ...props } = this.props;
+    const { className, children, id, isTree, hasAnimations, ...props } = this.props;
 
     return (
-      <DualListSelectorContext.Provider value={{ isTree }}>
+      <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
         <GenerateId>
           {(randomId) => (
-            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+            <div
+              className={css(styles.dualListSelector, hasAnimations && 'pf-m-animate-expand', className)}
+              id={id || randomId}
+              {...props}
+            >
               {children}
             </div>
           )}

packages/react-core/src/components/DualListSelector/DualListSelectorContext.ts

@@ -1,7 +1,8 @@
 import { createContext } from 'react';
 export const DualListSelectorContext = createContext<{
   isTree?: boolean;
-}>({ isTree: false });
+  hasAnimations?: boolean;
+}>({ isTree: false, hasAnimations: false });
 
 export const DualListSelectorListContext = createContext<{
   setFocusedOption?: (id: string) => void;

packages/react-core/src/components/DualListSelector/DualListSelectorTree.tsx

@@ -1,5 +1,7 @@
+import { useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorContext } from './DualListSelectorContext';
 import { DualListSelectorTreeItem } from './DualListSelectorTreeItem';
 
 export interface DualListSelectorTreeItemData {
@@ -68,11 +70,13 @@ export const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeP
   isDisabled = false,
   ...props
 }: DualListSelectorTreeProps) => {
+  const { hasAnimations } = useContext(DualListSelectorContext);
   const dataToRender = typeof data === 'function' ? data() : data;
   const tree = dataToRender.map((item) => (
     <DualListSelectorTreeItem
       key={item.id}
       text={item.text}
+      hasAnimations={hasAnimations}
       id={item.id}
       defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
       onOptionCheck={onOptionCheck}

packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -38,6 +38,11 @@ export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIEle
   isDisabled?: boolean;
   /** Flag indicating the DualListSelector tree should utilize memoization to help render large data sets. */
   useMemo?: boolean;
+  /** Flag indicating whether a tree dual list selector has animations. This will always render
+   * nested dual list selector items rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTreeItemProps> = ({
@@ -53,6 +58,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   badgeProps,
   itemData,
   isDisabled = false,
+  hasAnimations,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo,
   ...props
@@ -156,7 +162,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
           </span>
         </div>
       </div>
-      {isExpanded && children}
+      {(isExpanded || hasAnimations) && children}
     </li>
   );
 };

packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -283,7 +283,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   };
 
   return (
-    <DualListSelector isTree>
+    <DualListSelector hasAnimations isTree>
       {buildPane(false)}
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.15",
+    "@patternfly/patternfly": "6.3.0-prerelease.20",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-icons/package.json

@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.3.0-prerelease.15",
+    "@patternfly/patternfly": "6.3.0-prerelease.20",
     "fs-extra": "^11.3.0",
     "tslib": "^2.8.1"
   },

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.15",
+    "@patternfly/patternfly": "6.3.0-prerelease.20",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },

packages/react-tokens/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.4.2",
-    "@patternfly/patternfly": "6.3.0-prerelease.15",
+    "@patternfly/patternfly": "6.3.0-prerelease.20",
     "fs-extra": "^11.3.0"
   }
 }