feat(DualListSelector): add composable tree example

.eslintrc.json

@@ -120,5 +120,13 @@
         "spaced-comment": "error",
         "use-isnan": "error",
         "patternfly-react/no-layout-effect": "error"
-    }
+    },
+    "overrides": [
+        {
+            "files": ["**/examples/*"],
+            "rules": {
+                "patternfly-react/no-anonymous-functions": "off"
+            }
+        }
+    ]
 }

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

@@ -37,7 +37,7 @@ export interface DualListSelectorTreeItemData {
 
 export interface DualListSelectorTreeProps {
   /** Data of the tree view */
-  data: DualListSelectorTreeItemData[];
+  data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);
   /** ID of the tree view */
   id?: string;
   /** @hide Flag indicating if the list is nested */
@@ -64,7 +64,8 @@ export const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeP
   isDisabled = false,
   ...props
 }: DualListSelectorTreeProps) => {
-  const tree = data.map(item => (
+  const dataToRender = typeof data === 'function' ? data() : data;
+  const tree = dataToRender.map(item => (
     <DualListSelectorTreeItem
       key={item.id}
       text={item.text}
@@ -77,6 +78,7 @@ export const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeP
       badgeProps={item.badgeProps}
       itemData={item}
       isDisabled={isDisabled}
+      useMemo={true}
       {...(item.children && {
         children: (
           <DualListSelectorTree

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

@@ -36,9 +36,11 @@ export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIEle
   itemData?: DualListSelectorTreeItemData;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
+  /** Flag indicating the DualListSelector tree should utilize memoization to help render large data sets. */
+  useMemo?: boolean;
 }
 
-export const DualListSelectorTreeItem: React.FunctionComponent<DualListSelectorTreeItemProps> = ({
+const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTreeItemProps> = ({
   onOptionCheck,
   children,
   className,
@@ -51,12 +53,18 @@ export const DualListSelectorTreeItem: React.FunctionComponent<DualListSelectorT
   badgeProps,
   itemData,
   isDisabled = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  useMemo,
   ...props
 }: DualListSelectorTreeItemProps) => {
   const ref = React.useRef(null);
   const [isExpanded, setIsExpanded] = React.useState(defaultExpanded || false);
   const { setFocusedOption } = React.useContext(DualListSelectorListContext);
 
+  React.useEffect(() => {
+    setIsExpanded(defaultExpanded);
+  }, [defaultExpanded]);
+
   return (
     <li
       className={css(
@@ -150,4 +158,27 @@ export const DualListSelectorTreeItem: React.FunctionComponent<DualListSelectorT
     </li>
   );
 };
+
+export const DualListSelectorTreeItem = React.memo(DualListSelectorTreeItemBase, (prevProps, nextProps) => {
+  if (!nextProps.useMemo) {
+    return false;
+  }
+
+  if (
+    prevProps.className !== nextProps.className ||
+    prevProps.text !== nextProps.text ||
+    prevProps.id !== nextProps.id ||
+    prevProps.defaultExpanded !== nextProps.defaultExpanded ||
+    prevProps.checkProps !== nextProps.checkProps ||
+    prevProps.hasBadge !== nextProps.hasBadge ||
+    prevProps.badgeProps !== nextProps.badgeProps ||
+    prevProps.isChecked !== nextProps.isChecked ||
+    prevProps.itemData !== nextProps.itemData
+  ) {
+    return false;
+  }
+
+  return true;
+});
+
 DualListSelectorTreeItem.displayName = 'DualListSelectorTreeItem';

packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -4487,6 +4487,7 @@ exports[`DualListSelector with tree 1`] = `
                       key="O1"
                       onOptionCheck={[Function]}
                       text="Opt1"
+                      useMemo={true}
                     >
                       <li
                         aria-expanded="true"
@@ -4598,6 +4599,7 @@ exports[`DualListSelector with tree 1`] = `
                               key="O3"
                               onOptionCheck={[Function]}
                               text="Opt3"
+                              useMemo={true}
                             >
                               <li
                                 aria-selected={false}
@@ -4658,6 +4660,7 @@ exports[`DualListSelector with tree 1`] = `
                       key="O2"
                       onOptionCheck={[Function]}
                       text="Opt2"
+                      useMemo={true}
                     >
                       <li
                         aria-selected={false}