@patternfly/react-core 6.0.0-alpha.69 → 6.0.0-alpha.70

package/src/{next → deprecated}/components/DualListSelector/DualListSelectorContext.ts

@@ -12,6 +12,7 @@ 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;
 }>({});

package/src/{next → deprecated}/components/DualListSelector/DualListSelectorControl.tsx

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

package/src/{next → deprecated}/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> {
-  /** Content to be rendered inside of the controls wrapper. */
+  /** Anything that can be rendered inside of the wrapper. */
   children?: React.ReactNode;
   /** Additional classes added to the wrapper. */
   className?: string;
@@ -60,7 +60,6 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wrapperRef.current]);
 
   return (

package/src/{next → deprecated}/components/DualListSelector/DualListSelectorList.tsx

@@ -7,7 +7,7 @@ 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;
 }
 
@@ -15,8 +15,24 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
   children,
   ...props
 }: DualListSelectorListProps) => {
-  const { isTree, ariaLabelledBy, focusedOption, displayOption, selectedOptions, id, options, isDisabled } =
-    React.useContext(DualListSelectorListContext);
+  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 hasOptions = () =>
     options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0);
@@ -42,6 +58,7 @@ 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}
                 >

package/src/{next → deprecated}/components/DualListSelector/DualListSelectorListItem.tsx

@@ -17,7 +17,7 @@ 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;
@@ -25,11 +25,11 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   orderIndex?: number;
   /** @hide Forwarded ref */
   innerRef?: React.RefObject<HTMLLIElement>;
-  /** Flag indicating this item is draggable for reordering. */
+  /** Flag indicating this item is draggable for reordring */
   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;
 }
 

package/src/{next → deprecated}/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -8,11 +8,11 @@ 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>;
@@ -20,7 +20,9 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */
   selectedOptions?: string[] | number[];
-  /** @hide Function to determine if an option should be displayed depending on a custom filter value. */
+  /** @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 */
   displayOption?: (option: React.ReactNode) => boolean;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
@@ -33,6 +35,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   innerRef,
   options = [],
   selectedOptions = [],
+  onOptionSelect,
   displayOption,
   id = getUniqueId('dual-list-selector-list'),
   isDisabled = false,
@@ -43,7 +46,8 @@ 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.
+  // 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.
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !menuRef.current ||
@@ -90,7 +94,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [menuRef.current]);
 
   return (
@@ -105,6 +108,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
           selectedOptions,
           id,
           options,
+          onOptionSelect,
           isDisabled
         }}
       >

package/src/deprecated/components/DualListSelector/DualListSelectorPane.tsx

@@ -0,0 +1,245 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { DualListSelectorTree, DualListSelectorTreeItemData } from './DualListSelectorTree';
+import { getUniqueId } from '../../../helpers';
+import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
+import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
+import { DualListSelectorList } from './DualListSelectorList';
+import { SearchInput } from '../../../components/SearchInput';
+import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight';
+
+/** Acts as the container for a list of options that are either available or chosen,
+ * depending on the pane type (available or chosen). A search input and other actions,
+ * such as sorting, can also be passed into this sub-component.
+ */
+
+export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Additional classes applied to the dual list selector pane. */
+  className?: string;
+  /** A dual list selector list or dual list selector tree to be rendered in the pane. */
+  children?: React.ReactNode;
+  /** Flag indicating if this pane is the chosen pane. */
+  isChosen?: boolean;
+  /** Status to display above the pane. */
+  status?: string;
+  /** Title of the pane. */
+  title?: React.ReactNode;
+  /** A search input placed above the list at the top of the pane, before actions. */
+  searchInput?: React.ReactNode;
+  /** Actions to place above the pane. */
+  actions?: React.ReactNode[];
+  /** Id of the pane. */
+  id?: string;
+  /** @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?: (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean,
+    id?: string,
+    itemData?: any,
+    parentData?: any
+  ) => void;
+  /** @hide Callback for when a tree option is checked. Optionally used only when options prop is provided. */
+  onOptionCheck?: (
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    isChecked: boolean,
+    itemData: DualListSelectorTreeItemData
+  ) => void;
+  /** @hide Flag indicating a dynamically built search bar should be included above the pane. */
+  isSearchable?: boolean;
+  /** Flag indicating whether the component is disabled. */
+  isDisabled?: boolean;
+  /** Callback for search input. To be used when isSearchable is true. */
+  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** @hide A callback for when the search input value for changes.  To be used when isSearchable is true. */
+  onSearchInputChanged?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
+  /** @hide Callback for search input clear button */
+  onSearchInputClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** @hide Filter function for custom filtering based on search string. To be used when isSearchable is true. */
+  filterOption?: (option: React.ReactNode, input: string) => boolean;
+  /** @hide Accessible label for the search input. To be used when isSearchable is true. */
+  searchInputAriaLabel?: string;
+  /** @hide Callback for updating the filtered options in DualListSelector. To be used when isSearchable is true. */
+  onFilterUpdate?: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
+  /** Minimum height of the list of options rendered in the pane. **/
+  listMinHeight?: string;
+}
+
+export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps> = ({
+  isChosen = false,
+  className = '',
+  status = '',
+  actions,
+  searchInput,
+  children,
+  onOptionSelect,
+  onOptionCheck,
+  title = '',
+  options = [],
+  selectedOptions = [],
+  isSearchable = false,
+  searchInputAriaLabel = '',
+  onFilterUpdate,
+  onSearchInputChanged,
+  onSearchInputClear,
+  filterOption,
+  id = getUniqueId('dual-list-selector-pane'),
+  isDisabled = false,
+  listMinHeight,
+  ...props
+}: DualListSelectorPaneProps) => {
+  const [input, setInput] = React.useState('');
+  const { isTree } = React.useContext(DualListSelectorContext);
+
+  // only called when search input is dynamically built
+  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
+    let filtered: React.ReactNode[];
+    if (isTree) {
+      filtered = options
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) => filterInput(item as unknown as DualListSelectorTreeItemData, newValue));
+    } else {
+      filtered = options.filter((option) => {
+        if (displayOption(option)) {
+          return option;
+        }
+      });
+    }
+    onFilterUpdate(filtered, isChosen ? 'chosen' : 'available', newValue === '');
+
+    if (onSearchInputChanged) {
+      onSearchInputChanged(e, newValue);
+    }
+    setInput(newValue);
+  };
+
+  // only called when options are passed via options prop and isTree === true
+  const filterInput = (item: DualListSelectorTreeItemData, input: string): boolean => {
+    if (filterOption) {
+      return filterOption(item as unknown as React.ReactNode, input);
+    } else {
+      if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
+        return true;
+      }
+    }
+    if (item.children) {
+      return (
+        (item.children = item.children
+          .map((opt) => Object.assign({}, opt))
+          .filter((child) => filterInput(child, input))).length > 0
+      );
+    }
+  };
+
+  // only called when options are passed via options prop and isTree === false
+  const displayOption = (option: React.ReactNode) => {
+    if (filterOption) {
+      return filterOption(option, input);
+    } else {
+      return option.toString().toLowerCase().includes(input.toLowerCase());
+    }
+  };
+
+  return (
+    <div
+      className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
+      {...props}
+    >
+      {title && (
+        <div className={css(styles.dualListSelectorHeader)}>
+          <div className={`${styles.dualListSelector}__title`}>
+            <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
+          </div>
+        </div>
+      )}
+      {(actions || searchInput || isSearchable) && (
+        <div className={css(styles.dualListSelectorTools)}>
+          {(isSearchable || searchInput) && (
+            <div className={css(styles.dualListSelectorToolsFilter)}>
+              {searchInput ? (
+                searchInput
+              ) : (
+                <SearchInput
+                  onChange={isDisabled ? undefined : onChange}
+                  onClear={
+                    onSearchInputClear
+                      ? onSearchInputClear
+                      : (e) => onChange(e as React.FormEvent<HTMLInputElement>, '')
+                  }
+                  isDisabled={isDisabled}
+                  aria-label={searchInputAriaLabel}
+                />
+              )}
+            </div>
+          )}
+          {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
+        </div>
+      )}
+      {status && (
+        <div className={css(styles.dualListSelectorStatus)}>
+          <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
+            {status}
+          </div>
+        </div>
+      )}
+      <DualListSelectorPaneContext.Provider value={{ isChosen }}>
+        {!isTree && (
+          <DualListSelectorListWrapper
+            aria-labelledby={`${id}-status`}
+            options={options}
+            selectedOptions={selectedOptions}
+            onOptionSelect={(
+              e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+              index: number,
+              id: string
+            ) => onOptionSelect(e, index, isChosen, id)}
+            displayOption={displayOption}
+            id={`${id}-list`}
+            isDisabled={isDisabled}
+            {...(listMinHeight && {
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
+            })}
+          >
+            {children}
+          </DualListSelectorListWrapper>
+        )}
+        {isTree && (
+          <DualListSelectorListWrapper
+            aria-labelledby={`${id}-status`}
+            id={`${id}-list`}
+            {...(listMinHeight && {
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
+            })}
+          >
+            {options.length > 0 ? (
+              <DualListSelectorList>
+                <DualListSelectorTree
+                  data={
+                    isSearchable
+                      ? (options
+                          .map((opt) => Object.assign({}, opt))
+                          .filter((item) =>
+                            filterInput(item as unknown as DualListSelectorTreeItemData, input)
+                          ) as unknown as DualListSelectorTreeItemData[])
+                      : (options as unknown as DualListSelectorTreeItemData[])
+                  }
+                  onOptionCheck={onOptionCheck}
+                  id={`${id}-tree`}
+                  isDisabled={isDisabled}
+                />
+              </DualListSelectorList>
+            ) : (
+              children
+            )}
+          </DualListSelectorListWrapper>
+        )}
+      </DualListSelectorPaneContext.Provider>
+    </div>
+  );
+};
+DualListSelectorPane.displayName = 'DualListSelectorPane';

package/src/{next → deprecated}/components/DualListSelector/DualListSelectorTree.tsx

@@ -10,26 +10,26 @@ export interface DualListSelectorTreeItemData {
   className?: string;
   /** Flag indicating this option is expanded by default. */
   defaultExpanded?: boolean;
-  /** Flag indicating this option has a badge. */
+  /** Flag indicating this option has a badge */
   hasBadge?: boolean;
-  /** Callback fired when an option is checked. */
+  /** Callback fired when an option is checked */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
     isChosen: boolean,
     itemData: DualListSelectorTreeItemData
   ) => void;
-  /** ID of the option. */
+  /** ID of the option */
   id: string;
-  /** Text of the option. */
+  /** Text of the option */
   text: string;
-  /** Parent ID of an option. */
+  /** Parent id of an option */
   parentId?: string;
-  /** Checked state of the option. */
+  /** Checked state of the option */
   isChecked: boolean;
-  /** Additional properties to pass to the option checkbox. */
+  /** Additional properties to pass to the option checkbox */
   checkProps?: any;
-  /** Additional properties to pass to the option badge. */
+  /** Additional properties to pass to the option badge */
   badgeProps?: any;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
@@ -40,19 +40,19 @@ export interface DualListSelectorTreeItemData {
  */
 
 export interface DualListSelectorTreeProps extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {
-  /** Data of the tree view. */
+  /** Data of the tree view */
   data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);
-  /** ID of the tree view. */
+  /** ID of the tree view */
   id?: string;
-  /** @hide Flag indicating if the list is nested. */
+  /** @hide Flag indicating if the list is nested */
   isNested?: boolean;
-  /** Flag indicating if all options should have badges. */
+  /** Flag indicating if all options should have badges */
   hasBadges?: boolean;
-  /** Sets the default expanded behavior. */
+  /** Sets the default expanded behavior */
   defaultAllExpanded?: boolean;
-  /** Flag indicating if the dual list selector tree is in the disabled state. */
+  /** Flag indicating if the dual list selector tree is in the disabled state */
   isDisabled?: boolean;
-  /** Callback fired when an option is checked. */
+  /** Callback fired when an option is checked */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,

package/src/{next → deprecated}/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -14,25 +14,25 @@ export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIEle
   className?: string;
   /** Flag indicating this option is expanded by default. */
   defaultExpanded?: boolean;
-  /** Flag indicating this option has a badge. */
+  /** Flag indicating this option has a badge */
   hasBadge?: boolean;
-  /** Callback fired when an option is checked. */
+  /** Callback fired when an option is checked */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
     itemData: DualListSelectorTreeItemData
   ) => void;
-  /** ID of the option. */
+  /** ID of the option */
   id: string;
-  /** Text of the option. */
+  /** Text of the option */
   text: string;
   /** Flag indicating if this open is checked. */
   isChecked?: boolean;
-  /** Additional properties to pass to the option checkbox. */
+  /** Additional properties to pass to the option checkbox */
   checkProps?: any;
-  /** Additional properties to pass to the option badge. */
+  /** Additional properties to pass to the option badge */
   badgeProps?: any;
-  /** Raw data of the option. */
+  /** Raw data of the option */
   itemData?: DualListSelectorTreeItemData;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;

package/src/deprecated/components/DualListSelector/__tests__/DualListSelector.test.tsx

@@ -0,0 +1,65 @@
+import { render } from '@testing-library/react';
+import { DualListSelector } from '../DualListSelector';
+import React from 'react';
+
+describe('DualListSelector', () => {
+  test('basic', () => {
+    const { asFragment } = render(<DualListSelector availableOptions={['Option 1', 'Option 2']} id="firstTest" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with search inputs', () => {
+    const { asFragment } = render(
+      <DualListSelector availableOptions={['Option 1', 'Option 2']} id="secondTest" isSearchable />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with custom status', () => {
+    const { asFragment } = render(
+      <DualListSelector
+        availableOptions={['Option 1', 'Option 2']}
+        availableOptionsStatus="Test status1"
+        chosenOptionsStatus="Test status2"
+        id="thirdTest"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('basic with disabled controls', () => {
+    const { asFragment } = render(
+      <DualListSelector isDisabled availableOptions={['Option 1', 'Option 2']} id="disabledTest" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with tree', () => {
+    const { asFragment } = render(
+      <DualListSelector
+        availableOptions={[
+          { id: 'O1', text: 'Opt1', defaultExpanded: true, children: [{ id: 'O3', text: 'Opt3' }] },
+          { id: 'O2', text: 'Opt2' }
+        ]}
+        availableOptionsStatus="Test status1"
+        chosenOptionsStatus="Test status2"
+        id="tree-test"
+        isTree
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with actions', () => {
+    const { asFragment } = render(
+      <DualListSelector
+        availableOptions={['Option 1', 'Option 2']}
+        chosenOptions={['Option 3', 'Option 4']}
+        availableOptionsActions={[<span key={1}>TestNode1</span>]}
+        chosenOptionsActions={[<span key={2}>TestNode2</span>]}
+        id="fourthTest"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});