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

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.9","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.9","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.9","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0",
+  "version": "6.1.0-prerelease.10",
   "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",
-    "focus-trap": "7.6.0",
-    "react-dropzone": "^14.2.3",
-    "tslib": "^2.7.0"
+    "@patternfly/react-icons": "^6.1.0-prerelease.4",
+    "@patternfly/react-styles": "^6.1.0-prerelease.3",
+    "@patternfly/react-tokens": "^6.1.0-prerelease.3",
+    "focus-trap": "7.6.2",
+    "react-dropzone": "^14.3.5",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0",
+    "@patternfly/patternfly": "6.1.0-prerelease.5",
     "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": "f42db0887bdc1df06fe1677314bb51a4c35f8c7b"
 }

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -84,9 +84,8 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
                   variant="plain"
                   isExpanded={isOpen}
                   aria-label="Action list single group kebab"
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={isOpen}
               onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardExpandable.tsx

@@ -71,9 +71,8 @@ export const CardExpandable: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -67,9 +67,8 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable with icon example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardHeaderInCardHead.tsx

@@ -58,9 +58,8 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card title inline with images and actions example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx

@@ -56,9 +56,8 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header without title example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardWithImageAndActions.tsx

@@ -64,9 +64,8 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Checkbox/examples/CheckboxReversed.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Checkbox } from '@patternfly/react-core';
 
 export const CheckboxReversed: React.FunctionComponent = () => (
-  <Checkbox isLabelBeforeButton label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
+  <Checkbox labelPosition="start" label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
 );

package/src/components/DataList/examples/DataList.md

@@ -23,7 +23,7 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
+import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
 
 ## Examples
 
@@ -83,11 +83,23 @@ import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecate
 
 ### Draggable
 
-Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-demos).
+To enable drag and drop, wrap the `<DataList>` component with `<DragDropSort>`, define the `variant` property as "DataList", and pass both the sortable items and `onDrop` callback to `<DragDropSort>`. `<DragDropSort>` will create the component's usual children internally based on the items property, so children should not be passed to the wrapped component.
 
-Previously, draggable data lists had their own API for the [drag and drop component](/components/drag-and-drop), which wasn't flexible enough to allow custom styling for items as they are dragged. To address this disparity, `<DragDrop>`, `<Draggable>`, and `<Droppable>` components were added to replace our now deprecated HTML5-based API. Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
 
-```ts isDeprecated file="./DataListDraggable.tsx"
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DataListDraggable.tsx"
+
+```
+
+### Draggable with multiple drop zones
+
+To enable multiple drop zones, and create the desired amount of `<Droppable>` components within a `<DragDropContainer>`.
+
+Each `<Droppable>` should define the `wrapper` property as the component that acts as the drop zone, `<DataList>`, and the `items` property of their respective draggable items as an array of `<DraggableObject>` data. `<DragDropContainer>` should be passed the `onDrop`, `onContainerMove`, and `onCancel` callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. `<DragDropContainer>` should also be given a `Record` representing all sortable drop zones' items. Both components should define the `variant` property as "DataList".
+
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
+
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DragDropContainerDataList.tsx"
 
 ```
 

package/src/components/DataList/examples/DataListActions.tsx

@@ -86,9 +86,8 @@ export const DataListActions: React.FunctionComponent = () => {
                     onClick={onToggle}
                     variant="plain"
                     aria-label="Data list with actions example kebab toggle"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen}
                 onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -84,9 +84,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle1}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
               isOpen={isOpen1}
               onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -139,9 +138,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle2}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
               isOpen={isOpen2}
               onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -203,9 +201,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle3}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
               isOpen={isOpen3}
               onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}

package/src/components/DataList/examples/DataListClickableRows.tsx

@@ -76,9 +76,8 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -126,9 +125,8 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -92,9 +92,8 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -163,9 +162,8 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -234,9 +232,8 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 3"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen3}
                 onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -94,9 +94,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -167,9 +166,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -228,9 +226,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen3}
                 onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -103,9 +103,8 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                   isOpen={isOpen1}
                   onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -177,9 +176,8 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                   isOpen={isOpen2}
                   onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}

package/src/components/Dropdown/Dropdown.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
 import { Popper } from '../../helpers/Popper/Popper';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+import { useOUIAProps, OUIAProps, onToggleArrowKeydownDefault } from '../../helpers';
 
 export interface DropdownPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
@@ -51,6 +51,8 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   onOpenChange?: (isOpen: boolean) => void;
   /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
   onOpenChangeKeys?: string[];
+  /** Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. */
+  onToggleKeydown?: (event: KeyboardEvent) => void;
   /** Indicates if the menu should be without the outer box-shadow. */
   isPlain?: boolean;
   /** Indicates if the menu should be scrollable. */
@@ -85,6 +87,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   toggle,
   shouldFocusToggleOnSelect = false,
   onOpenChange,
+  onToggleKeydown,
   isPlain,
   isScrollable,
   innerRef,
@@ -139,6 +142,14 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
           toggleRef.current?.focus();
         }
       }
+
+      if (toggleRef.current?.contains(event.target as Node)) {
+        if (onToggleKeydown) {
+          onToggleKeydown(event);
+        } else if (isOpen) {
+          onToggleArrowKeydownDefault(event, menuRef);
+        }
+      }
     };
 
     const handleClick = (event: MouseEvent) => {
@@ -163,6 +174,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     toggleRef,
     onOpenChange,
     onOpenChangeKeys,
+    onToggleKeydown,
     shouldPreventScrollOnItemFocus,
     shouldFocusFirstItemOnOpen,
     focusTimeoutDelay

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -27,9 +27,8 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggleClick}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={<EllipsisVIcon />}
+        />
       )}
       shouldFocusToggleOnSelect
     >

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -22,7 +22,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
+import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
 
 ## Examples
 
@@ -78,22 +78,24 @@ The dual list selector is built in a composable manner to make customization eas
 
 ```
 
-### Drag and drop
+### Draggable
 
-This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
+To enable drag and drop, wrap the `<DualListSelectorList>` component with `<DragDropSort>`, define the `variant` property as "DualListSelectorList", and pass both the sortable items and `onDrop` callback to `<DragDropSort>`. `<DragDropSort>` will create the component's usual children internally based on the items property, so children inside the `<DualListSelectorList>` should not be passed to the wrapped component.
 
-- wrap the `DualListSelectorPane` in a `DragDrop` component
-- wrap the `DualListSelectorList` in a `Droppable` component
-- wrap the `DualListSelectorListItem` components in a `Draggable` component
-- define an `onDrop` callback which reorders the sortable options.
-  - The `onDrop` function provides the starting location and destination location for a dragged item. It should return
-    true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's
-    old position.
-  - define an `onDrag` callback which ensures that the drag event will not cross hairs with the `onOptionSelect` click
-    event set on the option. Note: the `ignoreNextOptionSelect` state value is used to prevent selection while dragging.
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
 
-Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx"
 
-```ts file="DualListSelectorDragDrop.tsx"
+```
+
+### Draggable with multiple drop zones
+
+To enable multiple drop zones, wrap the `<DualListSelector>` component with `<DragDropContainer>`, and create the desired amount of `<Droppable>` components within `<DragDropContainer>`. `<Droppable>` components should be located where `<DualListSelectorList>` usually would go for each pane to be made draggable.
+
+Each `<Droppable>` should define the `wrapper` property as the component that acts as the drop zone, `<DualListSelectorList>`, and the `items` property of their respective draggable items as an array of `<DraggableObject>` data. `<DragDropContainer>` should be passed the `onDrop`, `onContainerMove`, and `onCancel` callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. `<DragDropContainer>` should also be given a `Record` representing all sortable drop zones' items. Both components should define the `variant` property as "DualListSelectorList".
+
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
+
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx"
 
 ```

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

@@ -166,9 +166,8 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={<EllipsisVIcon aria-hidden="true" />}
+              />
             )}
             isOpen={isAvailableKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
@@ -202,9 +201,8 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={<EllipsisVIcon aria-hidden="true" />}
+              />
             )}
             isOpen={isChosenKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsChosenKebabOpen(isOpen)}

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 />}
         />