@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/components/TreeView/examples/TreeViewWithCheckboxes.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewWithCheckboxes: React.FunctionComponent = () => {
+  const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
+
+  React.useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log('Checked items: ', checkedItems);
+  }, [checkedItems]);
+
+  const options = [
+    {
+      name: 'Application launcher',
+      id: 'example3-AppLaunch',
+      checkProps: { 'aria-label': 'app-launcher-check', checked: false },
+      children: [
+        {
+          name: 'Application 1',
+          id: 'example3-App1',
+          checkProps: { checked: false },
+          children: [
+            {
+              name: 'Settings',
+              id: 'example3-App1Settings',
+              checkProps: { checked: false }
+            },
+            {
+              name: 'Current',
+              id: 'example3-App1Current',
+              checkProps: { checked: false }
+            }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'example3-App2',
+          checkProps: { checked: false },
+          children: [
+            {
+              name: 'Settings',
+              id: 'example3-App2Settings',
+              checkProps: { checked: false }
+            },
+            {
+              name: 'Loader',
+              id: 'example3-App2Loader',
+              checkProps: { checked: false },
+              children: [
+                {
+                  name: 'Loading App 1',
+                  id: 'example3-LoadApp1',
+                  checkProps: { checked: false }
+                },
+                {
+                  name: 'Loading App 2',
+                  id: 'example3-LoadApp2',
+                  checkProps: { checked: false }
+                },
+                {
+                  name: 'Loading App 3',
+                  id: 'example3-LoadApp3',
+                  checkProps: { checked: false }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'example3-Cost',
+      checkProps: { 'aria-label': 'cost-check', checked: false },
+      children: [
+        {
+          name: 'Application 3',
+          id: 'example3-App3',
+          checkProps: { 'aria-label': 'app-3-check', checked: false },
+          children: [
+            {
+              name: 'Settings',
+              id: 'example3-App3Settings',
+              checkProps: { 'aria-label': 'app-3-settings-check', checked: false }
+            },
+            {
+              name: 'Current',
+              id: 'example3-App3Current',
+              checkProps: { 'aria-label': 'app-3-current-check', checked: false }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'example3-Sources',
+      checkProps: { 'aria-label': 'sources-check', checked: false },
+      children: [
+        {
+          name: 'Application 4',
+          id: 'example3-App4',
+          checkProps: { 'aria-label': 'app-4-check', checked: false },
+          children: [
+            {
+              name: 'Settings',
+              id: 'example3-App4Settings',
+              checkProps: { 'aria-label': 'app-4-settings-check', checked: false }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Really really really long folder name that overflows the container it is in',
+      id: 'example3-Long',
+      checkProps: { 'aria-label': 'long-check', checked: false },
+      children: [
+        { name: 'Application 5', id: 'example3-App5', checkProps: { 'aria-label': 'app-5-check', checked: false } }
+      ]
+    }
+  ];
+
+  const onCheck = (event: React.ChangeEvent, treeViewItem: TreeViewDataItem) => {
+    const checked = (event.target as HTMLInputElement).checked;
+
+    const checkedItemTree = options
+      .map((opt) => Object.assign({}, opt))
+      .filter((item) => filterItems(item, treeViewItem));
+    const flatCheckedItems = flattenTree(checkedItemTree);
+
+    setCheckedItems((prevCheckedItems) =>
+      checked
+        ? prevCheckedItems.concat(flatCheckedItems.filter((item) => !checkedItems.some((i) => i.id === item.id)))
+        : prevCheckedItems.filter((item) => !flatCheckedItems.some((i) => i.id === item.id))
+    );
+  };
+
+  // Helper functions
+  const isChecked = (dataItem: TreeViewDataItem) => checkedItems.some((item) => item.id === dataItem.id);
+  const areAllDescendantsChecked = (dataItem: TreeViewDataItem) =>
+    dataItem.children ? dataItem.children.every((child) => areAllDescendantsChecked(child)) : isChecked(dataItem);
+  const areSomeDescendantsChecked = (dataItem: TreeViewDataItem) =>
+    dataItem.children ? dataItem.children.some((child) => areSomeDescendantsChecked(child)) : isChecked(dataItem);
+
+  const flattenTree = (tree: TreeViewDataItem[]) => {
+    let result: TreeViewDataItem[] = [];
+    tree.forEach((item) => {
+      result.push(item);
+      if (item.children) {
+        result = result.concat(flattenTree(item.children));
+      }
+    });
+    return result;
+  };
+
+  const mapTree = (item: TreeViewDataItem) => {
+    const hasCheck = areAllDescendantsChecked(item);
+    // Reset checked properties to be updated
+    if (item.checkProps) {
+      item.checkProps.checked = false;
+
+      if (hasCheck) {
+        item.checkProps.checked = true;
+      } else {
+        const hasPartialCheck = areSomeDescendantsChecked(item);
+        if (hasPartialCheck) {
+          item.checkProps.checked = null;
+        }
+      }
+
+      if (item.children) {
+        return {
+          ...item,
+          children: item.children.map((child) => mapTree(child))
+        };
+      }
+    }
+    return item;
+  };
+
+  const filterItems = (item: TreeViewDataItem, checkedItem: TreeViewDataItem) => {
+    if (item.id === checkedItem.id) {
+      return true;
+    }
+
+    if (item.children) {
+      return (
+        (item.children = item.children
+          .map((opt) => Object.assign({}, opt))
+          .filter((child) => filterItems(child, checkedItem))).length > 0
+      );
+    }
+  };
+  const mapped = options.map((item) => mapTree(item));
+  return <TreeView data={mapped} onCheck={onCheck} hasCheckboxes />;
+};

package/src/components/TreeView/examples/TreeViewWithCustomBadges.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewCustomBadges: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems([treeViewItem]);
+    }
+  };
+  const options = [
+    {
+      name: 'Application launcher',
+      id: 'example6-AppLaunch',
+      customBadgeContent: '2 applications',
+      children: [
+        {
+          name: 'Application 1',
+          id: 'example6-App1',
+          customBadgeContent: '2 children',
+          children: [
+            { name: 'Settings', id: 'example6-App1Settings' },
+            { name: 'Current', id: 'example6-App1Current' }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'example6-App2',
+          customBadgeContent: '2 children',
+          children: [
+            { name: 'Settings', id: 'example6-App2Settings' },
+            {
+              name: 'Loader',
+              id: 'example6-App2Loader',
+              customBadgeContent: '3 loading apps',
+              children: [
+                { name: 'Loading app 1', id: 'example6-LoadApp1' },
+                { name: 'Loading app 2', id: 'example6-LoadApp2' },
+                { name: 'Loading app 3', id: 'example6-LoadApp3' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'example6-Cost',
+      customBadgeContent: '1 applications',
+      children: [
+        {
+          name: 'Application 3',
+          id: 'example6-App3',
+          customBadgeContent: '2 children',
+          children: [
+            { name: 'Settings', id: 'example6-App3Settings' },
+            { name: 'Current', id: 'example6-App3Current' }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'example6-Sources',
+      customBadgeContent: '1 source',
+      children: [
+        {
+          name: 'Application 4',
+          id: 'example6-App4',
+          customBadgeContent: '1 child',
+          children: [{ name: 'Settings', id: 'example6-App4Settings' }]
+        }
+      ]
+    },
+    {
+      name: 'Really really really long folder name that overflows the container it is in',
+      id: 'example6-Long',
+      customBadgeContent: '1 application',
+      children: [{ name: 'Application 5', id: 'example6-App5' }]
+    }
+  ];
+  return <TreeView data={options} activeItems={activeItems} onSelect={onSelect} hasBadges />;
+};

package/src/components/TreeView/examples/TreeViewWithIcons.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
+
+export const TreeViewWithIcons: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems([treeViewItem]);
+    }
+  };
+  const options = [
+    {
+      name: 'Application launcher',
+      id: 'example4-AppLaunch',
+      children: [
+        {
+          name: 'Application 1',
+          id: 'example4-App1',
+          children: [
+            { name: 'Settings', id: 'example4-App1Settings' },
+            { name: 'Current', id: 'example4-App1Current' }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'example4-App2',
+          children: [
+            { name: 'Settings', id: 'example4-App2Settings' },
+            {
+              name: 'Loader',
+              id: 'example4-App2Loader',
+              children: [
+                { name: 'Loading App 1', id: 'example4-LoadApp1' },
+                { name: 'Loading App 2', id: 'example4-LoadApp2' },
+                { name: 'Loading App 3', id: 'example4-LoadApp3' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'example4-Cost',
+      children: [
+        {
+          name: 'Application 3',
+          id: 'example4-App3',
+          children: [
+            { name: 'Settings', id: 'example4-App3Settings' },
+            { name: 'Current', id: 'example4-App3Current' }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'example4-Sources',
+      children: [
+        { name: 'Application 4', id: 'example4-App4', children: [{ name: 'Settings', id: 'example4-App4Settings' }] }
+      ]
+    },
+    {
+      name: 'Really really really long folder name that overflows the container it is in',
+      id: 'example4-Long',
+      children: [{ name: 'Application 5', id: 'example4-App5' }]
+    }
+  ];
+  return (
+    <TreeView
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+      icon={<FolderIcon />}
+      expandedIcon={<FolderOpenIcon />}
+    />
+  );
+};

package/src/components/TreeView/examples/TreeViewWithMemoization.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewWithMemoization: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [allExpanded, setAllExpanded] = React.useState(false);
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    const filtered: TreeViewDataItem[] = [];
+    options.forEach((item) => filterItems(item, treeViewItem.id, filtered));
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems(filtered);
+    }
+  };
+
+  const onToggle = (_event: React.MouseEvent) => {
+    setAllExpanded((prevAllExpanded) => !prevAllExpanded);
+  };
+
+  const filterItems = (item: TreeViewDataItem, input: string | undefined, list: TreeViewDataItem[]) => {
+    if (item.children) {
+      let childContained = false;
+      item.children.forEach((child) => {
+        if (childContained) {
+          filterItems(child, input, list);
+        } else {
+          childContained = filterItems(child, input, list);
+        }
+      });
+      if (childContained) {
+        list.push(item);
+      }
+    }
+
+    if (item.id === input) {
+      list.push(item);
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const options: TreeViewDataItem[] = [];
+  for (let i = 1; i <= 20; i++) {
+    const childNum = 5;
+    const childOptions: TreeViewDataItem[] = [];
+    for (let j = 1; j <= childNum; j++) {
+      childOptions.push({ name: 'Child ' + j, id: `Option${i} - Child${j}` });
+    }
+    options.push({ name: 'Option ' + i, id: i.toString(), children: childOptions });
+  }
+  const tree = (
+    <TreeView data={options} activeItems={activeItems} onSelect={onSelect} allExpanded={allExpanded} useMemo />
+  );
+
+  return (
+    <React.Fragment>
+      <Button variant="link" onClick={onToggle}>
+        {allExpanded && 'Collapse all'}
+        {!allExpanded && 'Expand all'}
+      </Button>
+      {tree}
+    </React.Fragment>
+  );
+};

package/src/components/TreeView/examples/TreeViewWithSearch.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  TreeView,
+  TreeViewDataItem,
+  TreeViewSearch
+} from '@patternfly/react-core';
+export const TreeViewWithSearch: React.FunctionComponent = () => {
+  const options = [
+    {
+      name: 'Application launcher',
+      id: 'example2-AppLaunch',
+      children: [
+        {
+          name: 'Application 1',
+          id: 'example2-App1',
+          children: [
+            { name: 'Settings', id: 'example2-App1Settings' },
+            { name: 'Current', id: 'example2-App1Current' }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'example2-App2',
+          children: [
+            { name: 'Settings', id: 'example2-App2Settings' },
+            {
+              name: 'Loader',
+              id: 'example2-App2Loader',
+              children: [
+                { name: 'Loading App 1', id: 'example2-LoadApp1' },
+                { name: 'Loading App 2', id: 'example2-LoadApp2' },
+                { name: 'Loading App 3', id: 'example2-LoadApp3' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'example2-Cost',
+      children: [
+        {
+          name: 'Application 3',
+          id: 'example2-App3',
+          children: [
+            { name: 'Settings', id: 'example2-App3Settings' },
+            { name: 'Current', id: 'example2-App3Current' }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'example2-Sources',
+      children: [
+        {
+          name: 'Application 4',
+          id: 'example2-App4',
+          children: [{ name: 'Settingexample2-s', id: 'example2-App4Settings' }]
+        }
+      ]
+    },
+    {
+      name: 'Really really really long folder name that overflows the container it is in',
+      id: 'example2-Long',
+      children: [{ name: 'Application 5', id: 'example2-App5' }]
+    }
+  ];
+
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [filteredItems, setFilteredItems] = React.useState(options);
+  const [isFiltered, setIsFiltered] = React.useState(false);
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems([treeViewItem]);
+    }
+  };
+
+  const onSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const input = event.target.value;
+    if (input === '') {
+      setFilteredItems(options);
+      setIsFiltered(false);
+    } else {
+      const filtered = options.map((opt) => Object.assign({}, opt)).filter((item) => filterItems(item, input));
+      setFilteredItems(filtered);
+      setIsFiltered(true);
+    }
+  };
+  const filterItems = (item, input) => {
+    if (item.name.toLowerCase().includes(input.toLowerCase())) {
+      return true;
+    }
+    if (item.children) {
+      return (
+        (item.children = item.children
+          .map((opt) => Object.assign({}, opt))
+          .filter((child) => filterItems(child, input))).length > 0
+      );
+    }
+  };
+  const toolbar = (
+    <Toolbar style={{ padding: 0 }}>
+      <ToolbarContent style={{ padding: 0 }}>
+        <ToolbarItem widths={{ default: '100%' }}>
+          <TreeViewSearch onSearch={onSearch} id="input-search" name="search-input" aria-label="Search input example" />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  return (
+    <TreeView
+      data={filteredItems}
+      activeItems={activeItems}
+      onSelect={onSelect}
+      allExpanded={isFiltered}
+      toolbar={toolbar}
+    />
+  );
+};

package/src/components/Wizard/Wizard.tsx

@@ -84,7 +84,7 @@ export const Wizard = ({
 
   const goToNextStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
     const newStep = steps.find(
-      step => step.index > activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
+      (step) => step.index > activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
     );
 
     if (activeStepIndex >= steps.length || !newStep?.index) {
@@ -136,7 +136,7 @@ export const Wizard = ({
   };
 
   const goToStepById = (steps: WizardStepType[] = initialSteps, id: number | string) => {
-    const step = steps.find(step => step.id === id);
+    const step = steps.find((step) => step.id === id);
     const stepIndex = step?.index;
     const lastStepIndex = steps.length + 1;
 
@@ -146,7 +146,7 @@ export const Wizard = ({
   };
 
   const goToStepByName = (steps: WizardStepType[] = initialSteps, name: string) => {
-    const step = steps.find(step => step.name === name);
+    const step = steps.find((step) => step.name === name);
     const stepIndex = step?.index;
     const lastStepIndex = steps.length + 1;
 
@@ -212,7 +212,7 @@ const WizardInternal = ({
       steps={steps}
       activeStep={activeStep}
       isNavExpanded={isNavExpanded}
-      toggleNavExpanded={() => setIsNavExpanded(prevIsExpanded => !prevIsExpanded)}
+      toggleNavExpanded={() => setIsNavExpanded((prevIsExpanded) => !prevIsExpanded)}
     />
   );
 };

package/src/components/Wizard/WizardContext.tsx

@@ -74,7 +74,10 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
     [initialSteps, currentSteps]
   );
 
-  const activeStep = React.useMemo(() => steps.find(step => step.index === activeStepIndex), [activeStepIndex, steps]);
+  const activeStep = React.useMemo(
+    () => steps.find((step) => step.index === activeStepIndex),
+    [activeStepIndex, steps]
+  );
 
   const close = React.useCallback(() => onClose?.(null), [onClose]);
   const goToNextStep = React.useCallback(() => onNext(null, steps), [onNext, steps]);
@@ -103,12 +106,12 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
     );
   }, [currentFooter, initialFooter, activeStep, goToNextStep, goToPrevStep, close]);
 
-  const getStep = React.useCallback((stepId: string | number) => steps.find(step => step.id === stepId), [steps]);
+  const getStep = React.useCallback((stepId: string | number) => steps.find((step) => step.id === stepId), [steps]);
 
   const setStep = React.useCallback(
     (step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) =>
-      setCurrentSteps(prevSteps =>
-        prevSteps.map(prevStep => {
+      setCurrentSteps((prevSteps) =>
+        prevSteps.map((prevStep) => {
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
           }
@@ -131,12 +134,12 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         goToNextStep,
         goToPrevStep,
         setFooter: setCurrentFooter,
-        goToStepById: React.useCallback(id => goToStepById(steps, id), [goToStepById, steps]),
-        goToStepByName: React.useCallback(name => goToStepByName(steps, name), [goToStepByName, steps]),
-        goToStepByIndex: React.useCallback((index: number) => goToStepByIndex(null, steps, index), [
-          goToStepByIndex,
-          steps
-        ])
+        goToStepById: React.useCallback((id) => goToStepById(steps, id), [goToStepById, steps]),
+        goToStepByName: React.useCallback((name) => goToStepByName(steps, name), [goToStepByName, steps]),
+        goToStepByIndex: React.useCallback(
+          (index: number) => goToStepByIndex(null, steps, index),
+          [goToStepByIndex, steps]
+        )
       }}
     >
       {children}

package/src/components/Wizard/WizardHeader.tsx

@@ -42,7 +42,9 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
       </div>
     )}
     <div className={css(styles.wizardTitle)}>
-      <h2 className={css(styles.wizardTitleText)} id={titleId}>{title || <>&nbsp;</>}</h2>
+      <h2 className={css(styles.wizardTitleText)} id={titleId}>
+        {title || <>&nbsp;</>}
+      </h2>
     </div>
 
     {description && (

package/src/components/Wizard/WizardNavInternal.tsx

@@ -30,7 +30,7 @@ export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavEx
   return (
     <WizardNav {...wizardNavProps}>
       {steps.map((step, stepIndex) => {
-        const hasVisitedNextStep = steps.some(step => step.index > stepIndex + 1 && step.isVisited);
+        const hasVisitedNextStep = steps.some((step) => step.index > stepIndex + 1 && step.isVisited);
         const isStepDisabled = step.isDisabled || (isVisitRequired && !step.isVisited && !hasVisitedNextStep);
         const customStepNavItem = isCustomWizardNavItem(step.navItem) && (
           <React.Fragment key={step.id}>
@@ -43,8 +43,8 @@ export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavEx
           let hasActiveChild = false;
 
           const subNavItems = step.subStepIds?.map((subStepId, subStepIndex) => {
-            const subStep = steps.find(step => step.id === subStepId);
-            const hasVisitedNextStep = steps.some(step => step.index > subStep.index && step.isVisited);
+            const subStep = steps.find((step) => step.id === subStepId);
+            const hasVisitedNextStep = steps.some((step) => step.index > subStep.index && step.isVisited);
             const isSubStepDisabled =
               subStep.isDisabled || (isVisitRequired && !subStep.isVisited && !hasVisitedNextStep);
             const customSubStepNavItem = isCustomWizardNavItem(subStep.navItem) && (
@@ -90,7 +90,7 @@ export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavEx
             }
           });
           const hasEnabledChildren = React.Children.toArray(subNavItems).some(
-            child => React.isValidElement(child) && !child.props.isDisabled
+            (child) => React.isValidElement(child) && !child.props.isDisabled
           );
 
           if (!isProgressive || (isProgressive && step.index <= activeStep.index)) {