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

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"
+
+```

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import {
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl
+} from '@patternfly/react-core';
+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';
+
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
+export const DualListSelectorBasic: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+    { text: 'Option 1', selected: false, isVisible: true },
+    { text: 'Option 2', selected: false, isVisible: true },
+    { text: 'Option 3', selected: false, isVisible: true },
+    { text: 'Option 4', selected: false, isVisible: true }
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
+
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
+      }
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
+
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
+    } else {
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
+    }
+  };
+
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
+  ) => {
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
+    } else {
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
+    }
+  };
+
+  return (
+    <DualListSelector>
+      <DualListSelectorPane
+        title="Available options"
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
+        } options selected`}
+      >
+        <DualListSelectorList>
+          {availableOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`basic-available-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, false)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+      <DualListSelectorControlsWrapper>
+        <DualListSelectorControl
+          isDisabled={!availableOptions.some((option) => option.selected)}
+          onClick={() => moveSelected(true)}
+          aria-label="Add selected"
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={availableOptions.length === 0}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenOptions.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveSelected(false)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
+          aria-label="Remove selected"
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      <DualListSelectorPane
+        title="Chosen options"
+        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          chosenOptions.filter((option) => option.isVisible).length
+        } options selected`}
+        isChosen
+      >
+        <DualListSelectorList>
+          {chosenOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`composable-basic-chosen-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, true)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+    </DualListSelector>
+  );
+};