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

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

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { getUniqueId } from '../../../helpers';
+import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
+import { DualListSelectorPaneContext } from './DualListSelectorContext';
+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;
+  /** 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;
+  /** 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,
+  title = '',
+  id = getUniqueId('dual-list-selector-pane'),
+  isDisabled = false,
+  listMinHeight,
+  ...props
+}: DualListSelectorPaneProps) => (
+  <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) && (
+      <div className={css(styles.dualListSelectorTools)}>
+        {searchInput && (
+          <div className={css(styles.dualListSelectorToolsFilter)}>
+            {searchInput ? searchInput : <SearchInput isDisabled={isDisabled} />}
+          </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 }}>
+      <DualListSelectorListWrapper
+        aria-labelledby={`${id}-status`}
+        id={`${id}-list`}
+        {...(listMinHeight && {
+          style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
+        })}
+      >
+        {children}
+      </DualListSelectorListWrapper>
+    </DualListSelectorPaneContext.Provider>
+  </div>
+);
+DualListSelectorPane.displayName = 'DualListSelectorPane';

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

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorTreeItem } from './DualListSelectorTreeItem';
+
+export interface DualListSelectorTreeItemData {
+  /** Content rendered inside the dual list selector. */
+  children?: DualListSelectorTreeItemData[];
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** Flag indicating this option is expanded by default. */
+  defaultExpanded?: boolean;
+  /** Flag indicating this option has a badge. */
+  hasBadge?: boolean;
+  /** 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: string;
+  /** Text of the option. */
+  text: string;
+  /** Parent ID of an option. */
+  parentId?: string;
+  /** Checked state of the option. */
+  isChecked: boolean;
+  /** Additional properties to pass to the option checkbox. */
+  checkProps?: any;
+  /** Additional properties to pass to the option badge. */
+  badgeProps?: any;
+  /** Flag indicating whether the component is disabled. */
+  isDisabled?: boolean;
+}
+
+/** Used in place of the DualListSelectorListItem sub-component when building a
+ * composable dual list selector with a tree.
+ */
+
+export interface DualListSelectorTreeProps extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {
+  /** Data of the tree view. */
+  data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);
+  /** ID of the tree view. */
+  id?: string;
+  /** @hide Flag indicating if the list is nested. */
+  isNested?: boolean;
+  /** Flag indicating if all options should have badges. */
+  hasBadges?: boolean;
+  /** Sets the default expanded behavior. */
+  defaultAllExpanded?: boolean;
+  /** Flag indicating if the dual list selector tree is in the disabled state. */
+  isDisabled?: boolean;
+  /** Callback fired when an option is checked. */
+  onOptionCheck?: (
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    isChecked: boolean,
+    itemData: DualListSelectorTreeItemData
+  ) => void;
+}
+
+export const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeProps> = ({
+  data,
+  hasBadges = false,
+  isNested = false,
+  defaultAllExpanded = false,
+  onOptionCheck,
+  isDisabled = false,
+  ...props
+}: DualListSelectorTreeProps) => {
+  const dataToRender = typeof data === 'function' ? data() : data;
+  const tree = dataToRender.map((item) => (
+    <DualListSelectorTreeItem
+      key={item.id}
+      text={item.text}
+      id={item.id}
+      defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
+      onOptionCheck={onOptionCheck}
+      isChecked={item.isChecked}
+      checkProps={item.checkProps}
+      hasBadge={item.hasBadge !== undefined ? item.hasBadge : hasBadges}
+      badgeProps={item.badgeProps}
+      itemData={item}
+      isDisabled={isDisabled}
+      useMemo={true}
+      {...(item.children && {
+        children: (
+          <DualListSelectorTree
+            isNested
+            data={item.children}
+            hasBadges={hasBadges}
+            defaultAllExpanded={defaultAllExpanded}
+            onOptionCheck={onOptionCheck}
+            isDisabled={isDisabled}
+          />
+        )
+      })}
+    />
+  ));
+  return isNested ? (
+    <ul className={css(styles.dualListSelectorList)} role="group" {...props}>
+      {tree}
+    </ul>
+  ) : (
+    <>{tree}</>
+  );
+};
+
+DualListSelectorTree.displayName = 'DualListSelectorTree';

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

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { DualListSelectorTreeItemData } from './DualListSelectorTree';
+import { Badge } from '../../../components/Badge';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { flattenTree } from './treeUtils';
+import { DualListSelectorListContext } from './DualListSelectorContext';
+
+export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIElement> {
+  /** Content rendered inside the dual list selector. */
+  children?: React.ReactNode;
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** Flag indicating this option is expanded by default. */
+  defaultExpanded?: boolean;
+  /** Flag indicating this option has a badge. */
+  hasBadge?: boolean;
+  /** 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: string;
+  /** Text of the option. */
+  text: string;
+  /** Flag indicating if this open is checked. */
+  isChecked?: boolean;
+  /** Additional properties to pass to the option checkbox. */
+  checkProps?: any;
+  /** Additional properties to pass to the option badge. */
+  badgeProps?: any;
+  /** Raw data of the option. */
+  itemData?: DualListSelectorTreeItemData;
+  /** Flag indicating whether the component is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating the DualListSelector tree should utilize memoization to help render large data sets. */
+  useMemo?: boolean;
+}
+
+const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTreeItemProps> = ({
+  onOptionCheck,
+  children,
+  className,
+  id,
+  text,
+  defaultExpanded,
+  hasBadge,
+  isChecked,
+  checkProps,
+  badgeProps,
+  itemData,
+  isDisabled = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  useMemo,
+  ...props
+}: DualListSelectorTreeItemProps) => {
+  const ref = React.useRef(null);
+  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded || false);
+  const { setFocusedOption } = React.useContext(DualListSelectorListContext);
+
+  React.useEffect(() => {
+    setIsExpanded(defaultExpanded);
+  }, [defaultExpanded]);
+
+  return (
+    <li
+      className={css(
+        styles.dualListSelectorListItem,
+        className,
+        children && styles.modifiers.expandable,
+        isExpanded && styles.modifiers.expanded,
+        isDisabled && styles.modifiers.disabled
+      )}
+      id={id}
+      {...props}
+      aria-selected={isChecked}
+      role="treeitem"
+      {...(isExpanded && { 'aria-expanded': 'true' })}
+    >
+      <div
+        className={css(
+          styles.dualListSelectorListItemRow,
+          isChecked && styles.modifiers.selected,
+          styles.modifiers.check
+        )}
+      >
+        <div
+          className={css(styles.dualListSelectorItem)}
+          ref={ref}
+          tabIndex={-1}
+          onClick={
+            isDisabled
+              ? undefined
+              : (evt) => {
+                  onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
+                  setFocusedOption(id);
+                }
+          }
+        >
+          <span className={css(styles.dualListSelectorItemMain)}>
+            {children && (
+              <div
+                className={css(styles.dualListSelectorItemToggle)}
+                onClick={(e) => {
+                  if (children) {
+                    setIsExpanded(!isExpanded);
+                  }
+                  e.stopPropagation();
+                }}
+                onKeyDown={(e: React.KeyboardEvent) => {
+                  if (e.key === ' ' || e.key === 'Enter') {
+                    (document.activeElement as HTMLElement).click();
+                    e.preventDefault();
+                  }
+                }}
+                tabIndex={-1}
+              >
+                <span className={css(styles.dualListSelectorItemToggleIcon)}>
+                  <AngleRightIcon aria-hidden />
+                </span>
+              </div>
+            )}
+            <span className={css(styles.dualListSelectorItemCheck)}>
+              <input
+                type="checkbox"
+                onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+                  onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
+                  setFocusedOption(id);
+                }}
+                onClick={(evt: React.MouseEvent) => evt.stopPropagation()}
+                onKeyDown={(e: React.KeyboardEvent) => {
+                  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}
+              />
+            </span>
+
+            <span className={css(styles.dualListSelectorItemText)}>{text}</span>
+            {hasBadge && children && (
+              <span className={css(styles.dualListSelectorItemCount)}>
+                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement).props.data).length}</Badge>
+              </span>
+            )}
+          </span>
+        </div>
+      </div>
+      {isExpanded && children}
+    </li>
+  );
+};
+
+export const 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;
+});
+
+DualListSelectorTreeItem.displayName = 'DualListSelectorTreeItem';

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

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import { DualListSelectorPane } from '../../DualListSelector';
+import { SearchInput } from '../../../../components/SearchInput';
+import React from 'react';
+
+describe('DualListSelector', () => {
+  test('basic', () => {
+    const { asFragment } = render(<DualListSelectorPane id="basicTest" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with search inputs', () => {
+    const { asFragment } = render(<DualListSelectorPane id="searchTest" searchInput={<SearchInput />} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with custom status', () => {
+    const { asFragment } = render(<DualListSelectorPane id="statusTest" status="Test status1" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('basic with disabled controls', () => {
+    const { asFragment } = render(<DualListSelectorPane id="disabledTest" isDisabled />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/next/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DualListSelector basic 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-dual-list-selector__pane pf-m-available"
+  >
+    <div
+      class="pf-v5-c-dual-list-selector__menu"
+      tabindex="0"
+    >
+      <ul
+        class="pf-v5-c-dual-list-selector__list"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector basic with disabled controls 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-dual-list-selector__pane pf-m-available"
+  >
+    <div
+      class="pf-v5-c-dual-list-selector__menu"
+      tabindex="0"
+    >
+      <ul
+        class="pf-v5-c-dual-list-selector__list"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with custom status 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-dual-list-selector__pane pf-m-available"
+  >
+    <div
+      class="pf-v5-c-dual-list-selector__status"
+    >
+      <div
+        class="pf-v5-c-dual-list-selector__status-text"
+        id="statusTest-status"
+      >
+        Test status1
+      </div>
+    </div>
+    <div
+      class="pf-v5-c-dual-list-selector__menu"
+      tabindex="0"
+    >
+      <ul
+        class="pf-v5-c-dual-list-selector__list"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with search inputs 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-dual-list-selector__pane pf-m-available"
+  >
+    <div
+      class="pf-v5-c-dual-list-selector__tools"
+    >
+      <div
+        class="pf-v5-c-dual-list-selector__tools-filter"
+      >
+        <div
+          class="pf-v5-c-text-input-group"
+        >
+          <div
+            class="pf-v5-c-text-input-group__main pf-m-icon"
+          >
+            <span
+              class="pf-v5-c-text-input-group__text"
+            >
+              <span
+                class="pf-v5-c-text-input-group__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
+              </span>
+              <input
+                aria-label="Search input"
+                class="pf-v5-c-text-input-group__text-input"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-v5-c-dual-list-selector__menu"
+      tabindex="0"
+    >
+      <ul
+        class="pf-v5-c-dual-list-selector__list"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,99 @@
+---
+id: Dual list selector
+section: components
+cssPrefix: 'pf-v5-c-dual-list-selector'
+propComponents:
+  [
+    'DualListSelector',
+    'DualListSelectorPane',
+    'DualListSelectorList',
+    'DualListSelectorListItem',
+    'DualListSelectorControlsWrapper',
+    'DualListSelectorControl',
+    'DualListSelectorTree',
+    'DualListSelectorTreeItemData'
+  ]
+beta: true
+---
+
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+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';
+
+## Examples
+
+The dual list selector is built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
+
+```noLive
+<DualListSelector>
+  <DualListSelectorPane>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+
+  <DualListSelectorControlsWrapper>
+    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
+  </DualListSelectorControlsWrapper>
+
+  <DualListSelectorPane isChosen>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+</DualListSelector>
+```
+
+### Basic
+
+```ts file="./DualListSelectorBasic.tsx"
+
+```
+
+### Basic with tooltips
+
+```ts file="./DualListSelectorBasicTooltips.tsx"
+
+```
+
+### Basic with search
+
+```ts file="./DualListSelectorBasicSearch.tsx"
+
+```
+
+### Using more complex options with actions
+
+```ts file="./DualListSelectorComplexOptionsActions.tsx"
+
+```
+
+### With tree
+
+```ts file="DualListSelectorTree.tsx"
+
+```
+
+### Drag and drop
+
+This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
+
+- 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.
+
+Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
+
+```ts file="DualListSelectorDragDrop.tsx"
+
+```