@patternfly/react-core 6.0.0 → 6.1.0-prerelease.2

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-prerelease.23","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0-prerelease.1","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-prerelease.23","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0-prerelease.1","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-prerelease.23","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0-prerelease.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0",
+  "version": "6.1.0-prerelease.2",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0",
-    "@patternfly/react-styles": "^6.0.0",
-    "@patternfly/react-tokens": "^6.0.0",
+    "@patternfly/react-icons": "^6.1.0-prerelease.1",
+    "@patternfly/react-styles": "^6.1.0-prerelease.1",
+    "@patternfly/react-tokens": "^6.1.0-prerelease.1",
     "focus-trap": "7.6.0",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.7.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0",
+    "@patternfly/patternfly": "6.1.0-prerelease.2",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "69e205707d0228544b9b45467832e11d7a46ab45"
+  "gitHead": "9122c84d11bc44a8af15969c6f5f7f2de011122c"
 }

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -36,8 +36,6 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   const [chosenLeafIds, setChosenLeafIds] = React.useState<string[]>(['beans', 'beef', 'chicken', 'tofu']);
   const [chosenFilter, setChosenFilter] = React.useState<string>('');
   const [availableFilter, setAvailableFilter] = React.useState<string>('');
-  let hiddenChosen: string[] = [];
-  let hiddenAvailable: string[] = [];
 
   // helper function to build memoized lists
   const buildTextById = (node: FoodNode): { [key: string]: string } => {
@@ -82,7 +80,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   };
 
   // Builds a map of child leaf nodes by node id - memoized so that it only rebuilds the list if the data changes.
-  const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeText } = React.useMemo(() => {
+  const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeTexts } = React.useMemo(() => {
     let leavesById = {};
     let allLeaves: string[] = [];
     let nodeTexts = {};
@@ -94,32 +92,49 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     return {
       memoizedLeavesById: leavesById,
       memoizedAllLeaves: allLeaves,
-      memoizedNodeText: nodeTexts
+      memoizedNodeTexts: nodeTexts
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
+  const matchesFilter = (value: string, filter: string) => value.toLowerCase().includes(filter.trim().toLowerCase());
+
+  const getVisibleLeafIds = (leafIds: string[], filter: string) => {
+    const filterMatchingNodeIds = Object.keys(memoizedLeavesById).filter((nodeId) =>
+      matchesFilter(memoizedNodeTexts[nodeId], filter)
+    );
+    const filterMatchingLeafIds = filterMatchingNodeIds.map((nodeId) => memoizedLeavesById[nodeId]).flat();
+    return leafIds.filter((leafId) => filterMatchingLeafIds.includes(leafId));
+  };
+
+  const availableLeafIds = memoizedAllLeaves.filter((leafId) => !chosenLeafIds.includes(leafId));
+  const visibleChosenLeafIds = getVisibleLeafIds(chosenLeafIds, chosenFilter);
+  const visibleAvailableLeafIds = getVisibleLeafIds(availableLeafIds, availableFilter);
+
   const moveChecked = (toChosen: boolean) => {
+    const visibleCheckedChosenLeafIds = checkedLeafIds.filter((leafId) => visibleChosenLeafIds.includes(leafId));
+    const visibleCheckedAvailableLeafIds = checkedLeafIds.filter((leafId) => visibleAvailableLeafIds.includes(leafId));
+
     setChosenLeafIds(
       (prevChosenIds) =>
         toChosen
-          ? [...prevChosenIds, ...checkedLeafIds] // add checked ids to chosen list
-          : [...prevChosenIds.filter((x) => !checkedLeafIds.includes(x))] // remove checked ids from chosen list
+          ? [...prevChosenIds, ...visibleCheckedAvailableLeafIds] // add visible checked ids to chosen list
+          : prevChosenIds.filter((x) => !visibleCheckedChosenLeafIds.includes(x)) // remove visible checked ids from chosen list
     );
 
     // uncheck checked ids that just moved
     setCheckedLeafIds((prevChecked) =>
       toChosen
-        ? [...prevChecked.filter((x) => chosenLeafIds.includes(x))]
-        : [...prevChecked.filter((x) => !chosenLeafIds.includes(x))]
+        ? prevChecked.filter((x) => !visibleCheckedAvailableLeafIds.includes(x))
+        : prevChecked.filter((x) => !visibleCheckedChosenLeafIds.includes(x))
     );
   };
 
   const moveAll = (toChosen: boolean) => {
     if (toChosen) {
-      setChosenLeafIds(memoizedAllLeaves);
+      setChosenLeafIds((prevChosenIds) => [...prevChosenIds, ...visibleAvailableLeafIds]);
     } else {
-      setChosenLeafIds([]);
+      setChosenLeafIds((prevChosenIds) => prevChosenIds.filter((id) => !visibleChosenLeafIds.includes(id)));
     }
   };
 
@@ -149,15 +164,9 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     isChosen: boolean
   ) => {
     const nodeIdsToCheck = memoizedLeavesById[node.id].filter((id) =>
-      isChosen
-        ? chosenLeafIds.includes(id) && !hiddenChosen.includes(id)
-        : !chosenLeafIds.includes(id) && !hiddenAvailable.includes(id)
+      isChosen ? visibleChosenLeafIds.includes(id) : visibleAvailableLeafIds.includes(id)
     );
-    if (isChosen) {
-      hiddenChosen = [];
-    } else {
-      hiddenAvailable = [];
-    }
+
     setCheckedLeafIds((prevChecked) => {
       const otherCheckedNodeNames = prevChecked.filter((id) => !nodeIdsToCheck.includes(id));
       return !isChecked ? otherCheckedNodeNames : [...otherCheckedNodeNames, ...nodeIdsToCheck];
@@ -196,8 +205,8 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       : descendentLeafIds.filter((id) => !chosenLeafIds.includes(id));
 
     const hasMatchingChildren =
-      filterValue && descendentsOnThisPane.some((id) => memoizedNodeText[id].includes(filterValue));
-    const isFilterMatch = filterValue && node.text.includes(filterValue) && descendentsOnThisPane.length > 0;
+      filterValue && descendentsOnThisPane.some((id) => matchesFilter(memoizedNodeTexts[id], filterValue));
+    const isFilterMatch = filterValue && matchesFilter(node.text, filterValue) && descendentsOnThisPane.length > 0;
 
     // A node is displayed if either of the following is true:
     //   - There is no filter value and this node or its descendents belong on this pane
@@ -208,14 +217,6 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       (hasParentMatch && descendentsOnThisPane.length > 0) ||
       isFilterMatch;
 
-    if (!isDisplayed) {
-      if (isChosen) {
-        hiddenChosen.push(node.id);
-      } else {
-        hiddenAvailable.push(node.id);
-      }
-    }
-
     return [
       ...(isDisplayed
         ? [
@@ -242,9 +243,9 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
 
   const buildPane = (isChosen: boolean): React.ReactNode => {
     const options: DualListSelectorTreeItemData[] = buildOptions(isChosen, data, false);
-    const numOptions = isChosen ? chosenLeafIds.length : memoizedAllLeaves.length - chosenLeafIds.length;
+    const numOptions = isChosen ? visibleChosenLeafIds.length : visibleAvailableLeafIds.length;
     const numSelected = checkedLeafIds.filter((id) =>
-      isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)
+      isChosen ? visibleChosenLeafIds.includes(id) : visibleAvailableLeafIds.includes(id)
     ).length;
     const status = `${numSelected} of ${numOptions} options selected`;
     const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';
@@ -285,7 +286,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       {buildPane(false)}
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl
-          isDisabled={!checkedLeafIds.filter((x) => !chosenLeafIds.includes(x)).length}
+          isDisabled={!checkedLeafIds.filter((x) => visibleAvailableLeafIds.includes(x)).length}
           onClick={() => moveChecked(true)}
           aria-label="Add selected"
           icon={<AngleRightIcon />}
@@ -304,7 +305,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         />
         <DualListSelectorControl
           onClick={() => moveChecked(false)}
-          isDisabled={!checkedLeafIds.filter((x) => !!chosenLeafIds.includes(x)).length}
+          isDisabled={!checkedLeafIds.filter((x) => visibleChosenLeafIds.includes(x)).length}
           aria-label="Remove selected"
           icon={<AngleLeftIcon />}
         />

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -20,7 +20,7 @@ export interface MenuToggleCheckboxProps
   /** Flag to set the default checked value of the checkbox when it is uncontrolled by React state.
    * To make the checkbox controlled instead use the isChecked prop, but do not use both.
    */
-  defaultChecked?: boolean | null;
+  defaultChecked?: boolean;
   /** A callback for when the checkbox selection changes */
   onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
   /** Element to be rendered inside the <span> */