@patternfly/react-core 5.3.0-prerelease.3 → 5.3.0-prerelease.4

package/dist/js/next/components/DualListSelector/DualListSelectorTreeItem.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DualListSelectorTreeItem = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const dual_list_selector_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/DualListSelector/dual-list-selector"));
+const react_styles_1 = require("@patternfly/react-styles");
+const Badge_1 = require("../../../components/Badge");
+const angle_right_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/angle-right-icon'));
+const treeUtils_1 = require("./treeUtils");
+const DualListSelectorContext_1 = require("./DualListSelectorContext");
+const DualListSelectorTreeItemBase = (_a) => {
+    var { onOptionCheck, children, className, id, text, defaultExpanded, hasBadge, isChecked, checkProps, badgeProps, itemData, isDisabled = false, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    useMemo } = _a, props = tslib_1.__rest(_a, ["onOptionCheck", "children", "className", "id", "text", "defaultExpanded", "hasBadge", "isChecked", "checkProps", "badgeProps", "itemData", "isDisabled", "useMemo"]);
+    const ref = React.useRef(null);
+    const [isExpanded, setIsExpanded] = React.useState(defaultExpanded || false);
+    const { setFocusedOption } = React.useContext(DualListSelectorContext_1.DualListSelectorListContext);
+    React.useEffect(() => {
+        setIsExpanded(defaultExpanded);
+    }, [defaultExpanded]);
+    return (React.createElement("li", Object.assign({ className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelectorListItem, className, children && dual_list_selector_1.default.modifiers.expandable, isExpanded && dual_list_selector_1.default.modifiers.expanded, isDisabled && dual_list_selector_1.default.modifiers.disabled), id: id }, props, { "aria-selected": isChecked, role: "treeitem" }, (isExpanded && { 'aria-expanded': 'true' })),
+        React.createElement("div", { className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelectorListItemRow, isChecked && dual_list_selector_1.default.modifiers.selected, dual_list_selector_1.default.modifiers.check) },
+            React.createElement("div", { className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelectorItem), ref: ref, tabIndex: -1, onClick: isDisabled
+                    ? undefined
+                    : (evt) => {
+                        onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
+                        setFocusedOption(id);
+                    } },
+                React.createElement("span", { className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelectorItemMain) },
+                    children && (React.createElement("div", { className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelectorItemToggle), onClick: (e) => {
+                            if (children) {
+                                setIsExpanded(!isExpanded);
+                            }
+                            e.stopPropagation();
+                        }, onKeyDown: (e) => {
+                            if (e.key === ' ' || e.key === 'Enter') {
+                                document.activeElement.click();
+                                e.preventDefault();
+                            }
+                        }, tabIndex: -1 },
+                        React.createElement("span", { className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelectorItemToggleIcon) },
+                            React.createElement(angle_right_icon_1.default, { "aria-hidden": true })))),
+                    React.createElement("span", { className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelectorItemCheck) },
+                        React.createElement("input", Object.assign({ type: "checkbox", onChange: (evt) => {
+                                onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
+                                setFocusedOption(id);
+                            }, onClick: (evt) => evt.stopPropagation(), onKeyDown: (e) => {
+                                if (e.key === ' ' || e.key === 'Enter') {
+                                    onOptionCheck && onOptionCheck(e, !isChecked, itemData);
+                                    setFocusedOption(id);
+                                    e.preventDefault();
+                                }
+                            }, ref: (elem) => elem && (elem.indeterminate = isChecked === null), checked: isChecked || false, tabIndex: -1 }, checkProps))),
+                    React.createElement("span", { className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelectorItemText) }, text),
+                    hasBadge && children && (React.createElement("span", { className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelectorItemCount) },
+                        React.createElement(Badge_1.Badge, Object.assign({}, badgeProps), (0, treeUtils_1.flattenTree)(children.props.data).length)))))),
+        isExpanded && children));
+};
+exports.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;
+});
+exports.DualListSelectorTreeItem.displayName = 'DualListSelectorTreeItem';
+//# sourceMappingURL=DualListSelectorTreeItem.js.map

package/dist/js/next/components/DualListSelector/DualListSelectorTreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualListSelectorTreeItem.js","sourceRoot":"","sources":["../../../../../src/next/components/DualListSelector/DualListSelectorTreeItem.tsx"],"names":[],"mappings":"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"}

package/dist/js/next/components/DualListSelector/index.d.ts

@@ -0,0 +1,8 @@
+export * from './DualListSelector';
+export * from './DualListSelectorControl';
+export * from './DualListSelectorControlsWrapper';
+export * from './DualListSelectorPane';
+export * from './DualListSelectorList';
+export * from './DualListSelectorListItem';
+export * from './DualListSelectorTree';
+//# sourceMappingURL=index.d.ts.map

package/dist/js/next/components/DualListSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/DualListSelector/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC"}

package/dist/js/next/components/DualListSelector/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DualListSelector"), exports);
+tslib_1.__exportStar(require("./DualListSelectorControl"), exports);
+tslib_1.__exportStar(require("./DualListSelectorControlsWrapper"), exports);
+tslib_1.__exportStar(require("./DualListSelectorPane"), exports);
+tslib_1.__exportStar(require("./DualListSelectorList"), exports);
+tslib_1.__exportStar(require("./DualListSelectorListItem"), exports);
+tslib_1.__exportStar(require("./DualListSelectorTree"), exports);
+//# sourceMappingURL=index.js.map

package/dist/js/next/components/DualListSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/next/components/DualListSelector/index.ts"],"names":[],"mappings":";;;AAAA,6DAAmC;AACnC,oEAA0C;AAC1C,4EAAkD;AAClD,iEAAuC;AACvC,iEAAuC;AACvC,qEAA2C;AAC3C,iEAAuC"}

package/dist/js/next/components/DualListSelector/treeUtils.d.ts

@@ -0,0 +1,8 @@
+import { DualListSelectorTreeItemData } from './DualListSelectorTree';
+export declare function flattenTree(tree: DualListSelectorTreeItemData[]): string[];
+export declare function flattenTreeWithFolders(tree: DualListSelectorTreeItemData[]): string[];
+export declare function filterFolders(tree: DualListSelectorTreeItemData[], inputList: string[]): string[];
+export declare function filterTreeItems(item: DualListSelectorTreeItemData, inputList: string[]): boolean;
+export declare function filterTreeItemsWithoutFolders(item: DualListSelectorTreeItemData, inputList: string[]): boolean;
+export declare function filterRestTreeItems(item: DualListSelectorTreeItemData, inputList: string[]): boolean;
+//# sourceMappingURL=treeUtils.d.ts.map

package/dist/js/next/components/DualListSelector/treeUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeUtils.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/DualListSelector/treeUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAEtE,wBAAgB,WAAW,CAAC,IAAI,EAAE,4BAA4B,EAAE,GAAG,MAAM,EAAE,CAU1E;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,4BAA4B,EAAE,GAAG,MAAM,EAAE,CASrF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,4BAA4B,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAYjG;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,4BAA4B,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,OAAO,CAWhG;AAED,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,4BAA4B,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,OAAO,CAc9G;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,4BAA4B,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,OAAO,CAYpG"}

package/dist/js/next/components/DualListSelector/treeUtils.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterRestTreeItems = exports.filterTreeItemsWithoutFolders = exports.filterTreeItems = exports.filterFolders = exports.flattenTreeWithFolders = exports.flattenTree = void 0;
+function flattenTree(tree) {
+    let result = [];
+    tree.forEach((item) => {
+        if (item.children) {
+            result = result.concat(flattenTree(item.children));
+        }
+        else {
+            result.push(item.id);
+        }
+    });
+    return result;
+}
+exports.flattenTree = flattenTree;
+function flattenTreeWithFolders(tree) {
+    let result = [];
+    tree.forEach((item) => {
+        result.push(item.id);
+        if (item.children) {
+            result = result.concat(flattenTreeWithFolders(item.children));
+        }
+    });
+    return result;
+}
+exports.flattenTreeWithFolders = flattenTreeWithFolders;
+function filterFolders(tree, inputList) {
+    let result = [];
+    tree.forEach((item) => {
+        if (item.children) {
+            result = result.concat(filterFolders(item.children, inputList));
+        }
+        else {
+            if (inputList.includes(item.id)) {
+                result.push(item.id);
+            }
+        }
+    });
+    return result;
+}
+exports.filterFolders = filterFolders;
+function filterTreeItems(item, inputList) {
+    if (inputList.includes(item.id)) {
+        return true;
+    }
+    if (item.children) {
+        return ((item.children = item.children
+            .map((opt) => Object.assign({}, opt))
+            .filter((child) => filterTreeItems(child, inputList))).length > 0);
+    }
+}
+exports.filterTreeItems = filterTreeItems;
+function filterTreeItemsWithoutFolders(item, inputList) {
+    if (item.children) {
+        return ((item.children = item.children
+            .map((opt) => Object.assign({}, opt))
+            .filter((child) => child.children ? filterTreeItemsWithoutFolders(child, inputList) : filterTreeItems(child, inputList))).length > 0);
+    }
+    if (inputList.includes(item.id)) {
+        return true;
+    }
+}
+exports.filterTreeItemsWithoutFolders = filterTreeItemsWithoutFolders;
+function filterRestTreeItems(item, inputList) {
+    if (item.children) {
+        const child = (item.children = item.children
+            .map((opt) => Object.assign({}, opt))
+            .filter((child) => filterRestTreeItems(child, inputList))).length > 0;
+        return child;
+    }
+    if (!inputList.includes(item.id)) {
+        return true;
+    }
+}
+exports.filterRestTreeItems = filterRestTreeItems;
+//# sourceMappingURL=treeUtils.js.map

package/dist/js/next/components/DualListSelector/treeUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeUtils.js","sourceRoot":"","sources":["../../../../../src/next/components/DualListSelector/treeUtils.ts"],"names":[],"mappings":"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"}

package/dist/js/next/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Modal';
+export * from './DualListSelector';
 //# sourceMappingURL=index.d.ts.map

package/dist/js/next/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC"}

package/dist/js/next/components/index.js

@@ -2,4 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Modal"), exports);
+tslib_1.__exportStar(require("./DualListSelector"), exports);
 //# sourceMappingURL=index.js.map

package/dist/js/next/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":";;;AAAA,kDAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":";;;AAAA,kDAAwB;AACxB,6DAAmC"}

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":"5.3.0-prerelease.2","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":"5.3.0-prerelease.3","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":"5.3.0-prerelease.2","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":"5.3.0-prerelease.3","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":"5.3.0-prerelease.2","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":"5.3.0-prerelease.3","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.3.0-prerelease.3",
+  "version": "5.3.0-prerelease.4",
   "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",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "30a6d2d779a838ab2766be7e89b78202efd0c456"
+  "gitHead": "c07b540a74ca2c9a8b644cfa8bb38fd29ef4b0a7"
 }

package/src/next/components/DualListSelector/DualListSelector.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { GenerateId, PickOptional } from '../../../helpers';
+import { DualListSelectorContext } from './DualListSelectorContext';
+
+/** Acts as a container for all other DualListSelector sub-components when using a
+ * composable dual list selector.
+ */
+
+export interface DualListSelectorProps {
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** ID of the dual list selector. */
+  id?: string;
+  /** Flag indicating if the dual list selector uses trees instead of simple lists. */
+  isTree?: boolean;
+  /** Content to be rendered in the dual list selector. */
+  children?: React.ReactNode;
+}
+
+class DualListSelector extends React.Component<DualListSelectorProps> {
+  static displayName = 'DualListSelector';
+  static defaultProps: PickOptional<DualListSelectorProps> = {
+    children: '',
+    isTree: false
+  };
+
+  constructor(props: DualListSelectorProps) {
+    super(props);
+  }
+
+  render() {
+    const { className, children, id, isTree, ...props } = this.props;
+
+    return (
+      <DualListSelectorContext.Provider value={{ isTree }}>
+        <GenerateId>
+          {(randomId) => (
+            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+              {children}
+            </div>
+          )}
+        </GenerateId>
+      </DualListSelectorContext.Provider>
+    );
+  }
+}
+
+export { DualListSelector };

package/src/next/components/DualListSelector/DualListSelectorContext.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export const DualListSelectorContext = React.createContext<{
+  isTree?: boolean;
+}>({ isTree: false });
+
+export const DualListSelectorListContext = React.createContext<{
+  setFocusedOption?: (id: string) => void;
+  isTree?: boolean;
+  ariaLabelledBy?: string;
+  focusedOption?: string;
+  displayOption?: (option: React.ReactNode) => boolean;
+  selectedOptions?: string[] | number[];
+  id?: string;
+  options?: React.ReactNode[];
+  isDisabled?: boolean;
+}>({});
+
+export const DualListSelectorPaneContext = React.createContext<{
+  isChosen: boolean;
+}>({ isChosen: false });

package/src/next/components/DualListSelector/DualListSelectorControl.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { Button, ButtonVariant } from '../../../components/Button';
+import { Tooltip } from '../../../components/Tooltip';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+
+/** Renders an individual control button for moving selected options between each
+ * dual list selector pane.
+ */
+
+export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to be rendered in the dual list selector control. */
+  children?: React.ReactNode;
+  /** @hide forwarded ref */
+  innerRef?: React.Ref<any>;
+  /** Flag indicating the control is disabled. */
+  isDisabled?: boolean;
+  /** Additional classes applied to the dual list selector control. */
+  className?: string;
+  /** Callback fired when dual list selector control is selected. */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Accessible label for the dual list selector control. */
+  'aria-label'?: string;
+  /** Content to be displayed in a tooltip on hover of control. */
+  tooltipContent?: React.ReactNode;
+  /** Additional tooltip properties passed to the tooltip. */
+  tooltipProps?: any;
+}
+
+export const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps> = ({
+  innerRef,
+  children,
+  className,
+  'aria-label': ariaLabel,
+  isDisabled = true,
+  onClick = () => {},
+  tooltipContent,
+  tooltipProps = {} as any,
+  ...props
+}: DualListSelectorControlProps) => {
+  const privateRef = React.useRef(null);
+  const ref = innerRef || privateRef;
+  return (
+    <div className={css(styles.dualListSelectorControlsItem, className)} {...props}>
+      <Button
+        isDisabled={isDisabled}
+        aria-disabled={isDisabled}
+        variant={ButtonVariant.plain}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        tabIndex={-1}
+        ref={ref}
+      >
+        {children}
+      </Button>
+      {tooltipContent && <Tooltip content={tooltipContent} position="left" triggerRef={ref} {...tooltipProps} />}
+    </div>
+  );
+};
+DualListSelectorControlBase.displayName = 'DualListSelectorControlBase';
+
+export const DualListSelectorControl = React.forwardRef((props: DualListSelectorControlProps, ref: React.Ref<any>) => (
+  <DualListSelectorControlBase innerRef={ref} {...props} />
+));
+
+DualListSelectorControl.displayName = 'DualListSelectorControl';

package/src/next/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { handleArrows } from '../../../helpers';
+
+/** Acts as the container for the DualListSelectorControl sub-components. */
+
+export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content to be rendered inside of the controls wrapper. */
+  children?: React.ReactNode;
+  /** Additional classes added to the wrapper. */
+  className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.RefObject<HTMLDivElement>;
+  /** Accessible label for the dual list selector controls wrapper. */
+  'aria-label'?: string;
+}
+
+export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualListSelectorControlsWrapperProps> = ({
+  innerRef,
+  children = null,
+  className,
+  'aria-label': ariaLabel = 'Controls for moving options between lists',
+  ...props
+}: DualListSelectorControlsWrapperProps) => {
+  const ref = React.useRef(null);
+  const wrapperRef = innerRef || ref;
+  // Adds keyboard navigation to the dynamically built dual list selector controls. Works when controls are dynamically built
+  // as well as when they are passed in via children.
+  const handleKeys = (event: KeyboardEvent) => {
+    if (
+      !wrapperRef.current ||
+      (wrapperRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`) &&
+        !Array.from(wrapperRef.current.getElementsByClassName(styles.dualListSelectorControls)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`)
+        ))
+    ) {
+      return;
+    }
+    event.stopImmediatePropagation();
+
+    const controls = (Array.from(wrapperRef.current.getElementsByTagName('BUTTON')) as Element[]).filter(
+      (el) => !el.classList.contains('pf-m-disabled')
+    );
+    const activeElement = document.activeElement;
+    handleArrows(
+      event,
+      controls,
+      (element: Element) => activeElement.contains(element),
+      (element: Element) => element,
+      undefined,
+      undefined,
+      true,
+      false
+    );
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleKeys);
+    return () => {
+      window.removeEventListener('keydown', handleKeys);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wrapperRef.current]);
+
+  return (
+    <div
+      className={css(styles.dualListSelectorControls, className)}
+      tabIndex={0}
+      ref={wrapperRef}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapperBase';
+
+export const DualListSelectorControlsWrapper = React.forwardRef(
+  (props: DualListSelectorControlsWrapperProps, ref: React.Ref<HTMLDivElement>) => (
+    <DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} role="group" {...props} />
+  )
+);
+
+DualListSelectorControlsWrapper.displayName = 'DualListSelectorControlsWrapper';

package/src/next/components/DualListSelector/DualListSelectorList.tsx

@@ -0,0 +1,57 @@
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorListItem } from './DualListSelectorListItem';
+import * as React from 'react';
+import { DualListSelectorListContext } from './DualListSelectorContext';
+
+/** Acts as the container for DualListSelectorListItem sub-components. */
+
+export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {
+  /** Content rendered inside the dual list selector list. */
+  children?: React.ReactNode;
+}
+
+export const DualListSelectorList: React.FunctionComponent<DualListSelectorListProps> = ({
+  children,
+  ...props
+}: DualListSelectorListProps) => {
+  const { isTree, ariaLabelledBy, focusedOption, displayOption, selectedOptions, id, options, isDisabled } =
+    React.useContext(DualListSelectorListContext);
+
+  const hasOptions = () =>
+    options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0);
+
+  return (
+    <ul
+      className={css(styles.dualListSelectorList)}
+      {...(hasOptions() && {
+        role: isTree ? 'tree' : 'listbox',
+        'aria-multiselectable': true,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-activedescendant': focusedOption
+      })}
+      aria-disabled={isDisabled ? 'true' : undefined}
+      {...props}
+    >
+      {options.length === 0
+        ? children
+        : options.map((option, index) => {
+            if (displayOption(option)) {
+              return (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={(selectedOptions as number[]).indexOf(index) !== -1}
+                  id={`${id}-option-${index}`}
+                  orderIndex={index}
+                  isDisabled={isDisabled}
+                >
+                  {option}
+                </DualListSelectorListItem>
+              );
+            }
+            return;
+          })}
+    </ul>
+  );
+};
+DualListSelectorList.displayName = 'DualListSelectorList';