feat(DualListSelector): promoted Next version

packages/react-core/single-packages.config.json

@@ -1,5 +1,5 @@
 {
   "packageName": "@patternfly/react-core",
   "moduleGlob": ["/dist/esm/helpers/**/*.js", "/dist/esm/styles/**/index.js", "/dist/esm/*/*/**/index.js"],
-  "exclude": ["/dist/esm/helpers/Popper/thirdparty"]
+  "exclude": ["/dist/esm/helpers/Popper/thirdparty", "/dist/esm/next"]
 }

packages/react-core/src/components/DualListSelector/DualListSelectorContext.ts

@@ -12,7 +12,6 @@ export const DualListSelectorListContext = React.createContext<{
   displayOption?: (option: React.ReactNode) => boolean;
   selectedOptions?: string[] | number[];
   id?: string;
-  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
   options?: React.ReactNode[];
   isDisabled?: boolean;
 }>({});

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

@@ -29,7 +29,7 @@ export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLD
 
 export const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps> = ({
   innerRef,
-  children = null,
+  children,
   className,
   'aria-label': ariaLabel,
   isDisabled = true,

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

@@ -6,7 +6,7 @@ import { handleArrows } from '../../helpers';
 /** Acts as the container for the DualListSelectorControl sub-components. */
 
 export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HTMLDivElement> {
-  /** Anything that can be rendered inside of the wrapper. */
+  /** Content to be rendered inside of the controls wrapper. */
   children?: React.ReactNode;
   /** Additional classes added to the wrapper. */
   className?: string;
@@ -60,6 +60,7 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wrapperRef.current]);
 
   return (

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

@@ -7,32 +7,16 @@ 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 */
+  /** Content rendered inside the dual list selector list. */
   children?: React.ReactNode;
 }
 
 export const DualListSelectorList: React.FunctionComponent<DualListSelectorListProps> = ({
   children,
   ...props
 }: DualListSelectorListProps) => {
-  const {
-    setFocusedOption,
-    isTree,
-    ariaLabelledBy,
-    focusedOption,
-    displayOption,
-    selectedOptions,
-    id,
-    onOptionSelect,
-    options,
-    isDisabled
-  } = React.useContext(DualListSelectorListContext);
-
-  // only called when options are passed via options prop
-  const onOptionClick = (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => {
-    setFocusedOption(id);
-    onOptionSelect(e, index, id);
-  };
+  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);
@@ -58,7 +42,6 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
                   key={index}
                   isSelected={(selectedOptions as number[]).indexOf(index) !== -1}
                   id={`${id}-option-${index}`}
-                  onOptionSelect={(e, id) => onOptionClick(e, index, id)}
                   orderIndex={index}
                   isDisabled={isDisabled}
                 >

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

@@ -17,19 +17,19 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   className?: string;
   /** Flag indicating the list item is currently selected. */
   isSelected?: boolean;
-  /** Callback fired when an option is selected.  */
+  /** Callback fired when an option is selected. */
   onOptionSelect?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, id?: string) => void;
   /** ID of the option. */
   id?: string;
   /** @hide Internal field used to keep track of order of unfiltered options. */
   orderIndex?: number;
   /** @hide Forwarded ref */
   innerRef?: React.RefObject<HTMLLIElement>;
-  /** Flag indicating this item is draggable for reordring */
+  /** Flag indicating this item is draggable for reordering. */
   isDraggable?: boolean;
-  /** Accessible label for the draggable button on draggable list items */
+  /** Accessible label for the draggable button on draggable list items. */
   draggableButtonAriaLabel?: string;
-  /** Flag indicating if the dual list selector is in a disabled state */
+  /** Flag indicating if the dual list selector is in a disabled state. */
   isDisabled?: boolean;
 }
 

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

@@ -8,21 +8,19 @@ import { DualListSelectorContext, DualListSelectorListContext } from './DualList
 export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes applied to the dual list selector. */
   className?: string;
-  /** Anything that can be rendered inside of the list */
+  /** Anything that can be rendered inside of the list. */
   children?: React.ReactNode;
-  /** Id of the dual list selector list */
+  /** ID of the dual list selector list. */
   id?: string;
-  /** Accessibly label for the list */
+  /** Accessibly label for the list. */
   'aria-labelledby': string;
   /** @hide forwarded ref */
   innerRef?: React.RefObject<HTMLDivElement>;
   /** @hide Options to list in the pane. */
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */
   selectedOptions?: string[] | number[];
-  /** @hide Callback for when an option is selected. Optionally used only when options prop is provided. */
-  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
-  /** @hide Function to determine if an option should be displayed depending on a dynamically built filter value */
+  /** @hide Function to determine if an option should be displayed depending on a custom filter value. */
   displayOption?: (option: React.ReactNode) => boolean;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
@@ -35,7 +33,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   innerRef,
   options = [],
   selectedOptions = [],
-  onOptionSelect,
   displayOption,
   id = getUniqueId('dual-list-selector-list'),
   isDisabled = false,
@@ -46,8 +43,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   const menuRef = innerRef || ref;
   const { isTree } = React.useContext(DualListSelectorContext);
 
-  // sets up keyboard focus handling for the dual list selector menu child of the pane. This keyboard
-  // handling is applied whether the pane is dynamically built or passed via the children prop.
+  // Sets up keyboard focus handling for the dual list selector menu child of the pane.
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !menuRef.current ||
@@ -94,6 +90,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [menuRef.current]);
 
   return (
@@ -108,7 +105,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
           selectedOptions,
           id,
           options,
-          onOptionSelect,
           isDisabled
         }}
       >