@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.51

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

@@ -0,0 +1,373 @@
+import React from 'react';
+import {
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl,
+  DualListSelectorTree,
+  DualListSelectorTreeItemData,
+  SearchInput,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateFooter,
+  EmptyStateBody,
+  EmptyStateActions
+} 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';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+interface FoodNode {
+  id: string;
+  text: string;
+  children?: FoodNode[];
+}
+
+interface ExampleProps {
+  data: FoodNode[];
+}
+
+export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProps> = ({ data }: ExampleProps) => {
+  const [checkedLeafIds, setCheckedLeafIds] = React.useState<string[]>([]);
+  const [chosenLeafIds, setChosenLeafIds] = React.useState<string[]>(['beans', 'beef', 'chicken', 'tofu']);
+  const [chosenFilter, setChosenFilter] = React.useState<string>('');
+  const [availableFilter, setAvailableFilter] = React.useState<string>('');
+  let hiddenChosen: string[] = [];
+  let hiddenAvailable: string[] = [];
+
+  // helper function to build memoized lists
+  const buildTextById = (node: FoodNode): { [key: string]: string } => {
+    let textById = {};
+    if (!node) {
+      return textById;
+    }
+    textById[node.id] = node.text;
+    if (node.children) {
+      node.children.forEach((child) => {
+        textById = { ...textById, ...buildTextById(child) };
+      });
+    }
+    return textById;
+  };
+
+  // helper function to build memoized lists
+  const getDescendantLeafIds = (node: FoodNode): string[] => {
+    if (!node.children || !node.children.length) {
+      return [node.id];
+    } else {
+      let childrenIds: string[] = [];
+      node.children.forEach((child) => {
+        childrenIds = [...childrenIds, ...getDescendantLeafIds(child)];
+      });
+      return childrenIds;
+    }
+  };
+
+  // helper function to build memoized lists
+  const getLeavesById = (node: FoodNode): { [key: string]: string[] } => {
+    let leavesById = {};
+    if (!node.children || !node.children.length) {
+      leavesById[node.id] = [node.id];
+    } else {
+      node.children.forEach((child) => {
+        leavesById[node.id] = getDescendantLeafIds(node);
+        leavesById = { ...leavesById, ...getLeavesById(child) };
+      });
+    }
+    return leavesById;
+  };
+
+  // Builds a map of child leaf nodes by node id - memoized so that it only rebuilds the list if the data changes.
+  const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeText } = React.useMemo(() => {
+    let leavesById = {};
+    let allLeaves: string[] = [];
+    let nodeTexts = {};
+    data.forEach((foodNode) => {
+      nodeTexts = { ...nodeTexts, ...buildTextById(foodNode) };
+      leavesById = { ...leavesById, ...getLeavesById(foodNode) };
+      allLeaves = [...allLeaves, ...getDescendantLeafIds(foodNode)];
+    });
+    return {
+      memoizedLeavesById: leavesById,
+      memoizedAllLeaves: allLeaves,
+      memoizedNodeText: nodeTexts
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const moveChecked = (toChosen: boolean) => {
+    setChosenLeafIds(
+      (prevChosenIds) =>
+        toChosen
+          ? [...prevChosenIds, ...checkedLeafIds] // add checked ids to chosen list
+          : [...prevChosenIds.filter((x) => !checkedLeafIds.includes(x))] // remove checked ids from chosen list
+    );
+
+    // uncheck checked ids that just moved
+    setCheckedLeafIds((prevChecked) =>
+      toChosen
+        ? [...prevChecked.filter((x) => chosenLeafIds.includes(x))]
+        : [...prevChecked.filter((x) => !chosenLeafIds.includes(x))]
+    );
+  };
+
+  const moveAll = (toChosen: boolean) => {
+    if (toChosen) {
+      setChosenLeafIds(memoizedAllLeaves);
+    } else {
+      setChosenLeafIds([]);
+    }
+  };
+
+  const areAllDescendantsSelected = (node: FoodNode, isChosen: boolean) =>
+    memoizedLeavesById[node.id].every(
+      (id) => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))
+    );
+  const areSomeDescendantsSelected = (node: FoodNode, isChosen: boolean) =>
+    memoizedLeavesById[node.id].some(
+      (id) => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))
+    );
+
+  const isNodeChecked = (node: FoodNode, isChosen: boolean) => {
+    if (areAllDescendantsSelected(node, isChosen)) {
+      return true;
+    }
+    if (areSomeDescendantsSelected(node, isChosen)) {
+      return false;
+    }
+    return false;
+  };
+
+  const onOptionCheck = (
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    isChecked: boolean,
+    node: DualListSelectorTreeItemData,
+    isChosen: boolean
+  ) => {
+    const nodeIdsToCheck = memoizedLeavesById[node.id].filter((id) =>
+      isChosen
+        ? chosenLeafIds.includes(id) && !hiddenChosen.includes(id)
+        : !chosenLeafIds.includes(id) && !hiddenAvailable.includes(id)
+    );
+    if (isChosen) {
+      hiddenChosen = [];
+    } else {
+      hiddenAvailable = [];
+    }
+    setCheckedLeafIds((prevChecked) => {
+      const otherCheckedNodeNames = prevChecked.filter((id) => !nodeIdsToCheck.includes(id));
+      return !isChecked ? otherCheckedNodeNames : [...otherCheckedNodeNames, ...nodeIdsToCheck];
+    });
+  };
+
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isChosen: boolean) => {
+    const onChange = (value) => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));
+
+    return (
+      <SearchInput
+        value={isChosen ? chosenFilter : availableFilter}
+        onChange={(_event, value) => onChange(value)}
+        onClear={() => onChange('')}
+      />
+    );
+  };
+
+  // Builds the DualListSelectorTreeItems from the FoodNodes
+  const buildOptions = (
+    isChosen: boolean,
+    [node, ...remainingNodes]: FoodNode[],
+    hasParentMatch: boolean
+  ): DualListSelectorTreeItemData[] => {
+    if (!node) {
+      return [];
+    }
+
+    const isChecked = isNodeChecked(node, isChosen);
+
+    const filterValue = isChosen ? chosenFilter : availableFilter;
+    const descendentLeafIds = memoizedLeavesById[node.id];
+    const descendentsOnThisPane = isChosen
+      ? descendentLeafIds.filter((id) => chosenLeafIds.includes(id))
+      : descendentLeafIds.filter((id) => !chosenLeafIds.includes(id));
+
+    const hasMatchingChildren =
+      filterValue && descendentsOnThisPane.some((id) => memoizedNodeText[id].includes(filterValue));
+    const isFilterMatch = filterValue && node.text.includes(filterValue) && descendentsOnThisPane.length > 0;
+
+    // A node is displayed if either of the following is true:
+    //   - There is no filter value and this node or its descendents belong on this pane
+    //   - There is a filter value and this node or one of this node's descendents or ancestors match on this pane
+    const isDisplayed =
+      (!filterValue && descendentsOnThisPane.length > 0) ||
+      hasMatchingChildren ||
+      (hasParentMatch && descendentsOnThisPane.length > 0) ||
+      isFilterMatch;
+
+    if (!isDisplayed) {
+      if (isChosen) {
+        hiddenChosen.push(node.id);
+      } else {
+        hiddenAvailable.push(node.id);
+      }
+    }
+
+    return [
+      ...(isDisplayed
+        ? [
+            {
+              id: node.id,
+              text: node.text,
+              isChecked,
+              checkProps: { 'aria-label': `Select ${node.text}` },
+              hasBadge: node.children && node.children.length > 0,
+              badgeProps: { isRead: true },
+              defaultExpanded: isChosen ? !!chosenFilter : !!availableFilter,
+              children: node.children
+                ? buildOptions(isChosen, node.children, isFilterMatch || hasParentMatch)
+                : undefined
+            }
+          ]
+        : []),
+      ...(!isDisplayed && node.children && node.children.length
+        ? buildOptions(isChosen, node.children, hasParentMatch)
+        : []),
+      ...(remainingNodes ? buildOptions(isChosen, remainingNodes, hasParentMatch) : [])
+    ];
+  };
+
+  const buildPane = (isChosen: boolean): React.ReactNode => {
+    const options: DualListSelectorTreeItemData[] = buildOptions(isChosen, data, false);
+    const numOptions = isChosen ? chosenLeafIds.length : memoizedAllLeaves.length - chosenLeafIds.length;
+    const numSelected = checkedLeafIds.filter((id) =>
+      isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)
+    ).length;
+    const status = `${numSelected} of ${numOptions} options selected`;
+    const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';
+    return (
+      <DualListSelectorPane
+        title={isChosen ? 'Chosen' : 'Available'}
+        status={status}
+        searchInput={buildSearchInput(isChosen)}
+        isChosen={isChosen}
+        listMinHeight="300px"
+      >
+        {filterApplied && options.length === 0 && (
+          <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
+            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+            <EmptyStateFooter>
+              <EmptyStateActions>
+                <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
+                  Clear all filters
+                </Button>
+              </EmptyStateActions>
+            </EmptyStateFooter>
+          </EmptyState>
+        )}
+        {options.length > 0 && (
+          <DualListSelectorList>
+            <DualListSelectorTree
+              data={options}
+              onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
+            />
+          </DualListSelectorList>
+        )}
+      </DualListSelectorPane>
+    );
+  };
+
+  return (
+    <DualListSelector isTree>
+      {buildPane(false)}
+      <DualListSelectorControlsWrapper>
+        <DualListSelectorControl
+          isDisabled={!checkedLeafIds.filter((x) => !chosenLeafIds.includes(x)).length}
+          onClick={() => moveChecked(true)}
+          aria-label="Add selected"
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenLeafIds.length === memoizedAllLeaves.length}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenLeafIds.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveChecked(false)}
+          isDisabled={!checkedLeafIds.filter((x) => !!chosenLeafIds.includes(x)).length}
+          aria-label="Remove selected"
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      {buildPane(true)}
+    </DualListSelector>
+  );
+};
+
+export const DualListSelectorComposableTreeExample: React.FunctionComponent = () => (
+  <DualListSelectorComposableTree
+    data={[
+      {
+        id: 'fruits',
+        text: 'Fruits',
+        children: [
+          { id: 'apple', text: 'Apple' },
+          {
+            id: 'berries',
+            text: 'Berries',
+            children: [
+              { id: 'blueberry', text: 'Blueberry' },
+              { id: 'strawberry', text: 'Strawberry' }
+            ]
+          },
+          { id: 'banana', text: 'Banana' }
+        ]
+      },
+      { id: 'bread', text: 'Bread' },
+      {
+        id: 'vegetables',
+        text: 'Vegetables',
+        children: [
+          { id: 'broccoli', text: 'Broccoli' },
+          { id: 'cauliflower', text: 'Cauliflower' }
+        ]
+      },
+      {
+        id: 'proteins',
+        text: 'Proteins',
+        children: [
+          { id: 'beans', text: 'Beans' },
+          {
+            id: 'meats',
+            text: 'Meats',
+            children: [
+              {
+                id: 'beef',
+                text: 'Beef'
+              },
+              {
+                id: 'chicken',
+                text: 'Chicken'
+              }
+            ]
+          },
+          { id: 'tofu', text: 'Tofu' }
+        ]
+      }
+    ]}
+  />
+);

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

@@ -0,0 +1,7 @@
+export * from './DualListSelector';
+export * from './DualListSelectorControl';
+export * from './DualListSelectorControlsWrapper';
+export * from './DualListSelectorPane';
+export * from './DualListSelectorList';
+export * from './DualListSelectorListItem';
+export * from './DualListSelectorTree';

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

@@ -0,0 +1,81 @@
+import { DualListSelectorTreeItemData } from './DualListSelectorTree';
+
+export function flattenTree(tree: DualListSelectorTreeItemData[]): string[] {
+  let result = [] as string[];
+  tree.forEach((item) => {
+    if (item.children) {
+      result = result.concat(flattenTree(item.children));
+    } else {
+      result.push(item.id);
+    }
+  });
+  return result;
+}
+
+export function flattenTreeWithFolders(tree: DualListSelectorTreeItemData[]): string[] {
+  let result = [] as string[];
+  tree.forEach((item) => {
+    result.push(item.id);
+    if (item.children) {
+      result = result.concat(flattenTreeWithFolders(item.children));
+    }
+  });
+  return result;
+}
+
+export function filterFolders(tree: DualListSelectorTreeItemData[], inputList: string[]): string[] {
+  let result = [] as string[];
+  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;
+}
+
+export function filterTreeItems(item: DualListSelectorTreeItemData, inputList: string[]): boolean {
+  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
+    );
+  }
+}
+
+export function filterTreeItemsWithoutFolders(item: DualListSelectorTreeItemData, inputList: string[]): boolean {
+  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;
+  }
+}
+
+export function filterRestTreeItems(item: DualListSelectorTreeItemData, inputList: string[]): boolean {
+  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;
+  }
+}

package/src/next/components/Modal/Modal.tsx

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { canUseDOM, KeyTypes, PickOptional } from '../../../helpers';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
+import { ModalContent } from './ModalContent';
+import { OUIAProps, getDefaultOUIAId } from '../../../helpers';
+
+export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+  /** The parent container to append the modal to. Defaults to "document.body". */
+  appendTo?: HTMLElement | (() => HTMLElement);
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
+  'aria-describedby'?: string;
+  /**   Adds an accessible name to the modal when there is no title in the ModalHeader. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. This should include the ModalHeader labelId. */
+  'aria-labelledby'?: string;
+  /** Content rendered inside the modal. */
+  children: React.ReactNode;
+  /** Additional classes added to the modal. */
+  className?: string;
+  /** Flag to disable focus trap. */
+  disableFocusTrap?: boolean;
+  /** The element to focus when the modal opens. By default the first
+   * focusable element will receive focus.
+   */
+  elementToFocus?: HTMLElement | SVGElement | string;
+  /** An id to use for the modal box container. */
+  id?: string;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** Add callback for when the close button is clicked. This prop needs to be passed to render the close button */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+  /** Modal handles pressing of the escape key and closes the modal. If you want to handle
+   * this yourself you can use this callback function. */
+  onEscapePress?: (event: KeyboardEvent) => void;
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
+  /** Default width of the modal. */
+  width?: number | string;
+  /** Maximum width of the modal. */
+  maxWidth?: number | string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
+}
+
+export enum ModalVariant {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+  default = 'default'
+}
+
+interface ModalState {
+  container: HTMLElement;
+  ouiaStateId: string;
+}
+
+class Modal extends React.Component<ModalProps, ModalState> {
+  static displayName = 'Modal';
+  static currentId = 0;
+  boxId = '';
+
+  static defaultProps: PickOptional<ModalProps> = {
+    isOpen: false,
+    variant: 'default',
+    appendTo: () => document.body,
+    ouiaSafe: true,
+    position: 'default'
+  };
+
+  constructor(props: ModalProps) {
+    super(props);
+    const boxIdNum = Modal.currentId++;
+    this.boxId = props.id || `pf-modal-part-${boxIdNum}`;
+
+    this.state = {
+      container: undefined,
+      ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
+    };
+  }
+
+  handleEscKeyClick = (event: KeyboardEvent): void => {
+    const { onEscapePress } = this.props;
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
+      onEscapePress ? onEscapePress(event) : this.props.onClose?.(event);
+    }
+  };
+
+  getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
+    if (typeof appendTo === 'function') {
+      return appendTo();
+    }
+    return appendTo || document.body;
+  };
+
+  toggleSiblingsFromScreenReaders = (hide: boolean) => {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    const bodyChildren = target.children;
+    for (const child of Array.from(bodyChildren)) {
+      if (child !== this.state.container) {
+        hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
+      }
+    }
+  };
+
+  isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
+
+  componentDidMount() {
+    const {
+      appendTo,
+      'aria-describedby': ariaDescribedby,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby
+    } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    const container = document.createElement('div');
+    this.setState({ container });
+    target.appendChild(container);
+    target.addEventListener('keydown', this.handleEscKeyClick, false);
+
+    if (this.props.isOpen) {
+      target.classList.add(css(styles.backdropOpen));
+    } else {
+      target.classList.remove(css(styles.backdropOpen));
+    }
+
+    if (!ariaDescribedby && !ariaLabel && !ariaLabelledby) {
+      // eslint-disable-next-line no-console
+      console.error('Modal: Specify at least one of: aria-describedby, aria-label, aria-labelledby.');
+    }
+  }
+
+  componentDidUpdate() {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    if (this.props.isOpen) {
+      target.classList.add(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(true);
+    } else {
+      target.classList.remove(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(false);
+    }
+  }
+
+  componentWillUnmount() {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    if (this.state.container) {
+      target.removeChild(this.state.container);
+    }
+    target.removeEventListener('keydown', this.handleEscKeyClick, false);
+    target.classList.remove(css(styles.backdropOpen));
+    this.toggleSiblingsFromScreenReaders(false);
+  }
+
+  render() {
+    const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      appendTo,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onEscapePress,
+      'aria-labelledby': ariaLabelledby,
+      'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedby,
+      ouiaId,
+      ouiaSafe,
+      position,
+      elementToFocus,
+      ...props
+    } = this.props;
+    const { container } = this.state;
+
+    if (!canUseDOM || !container) {
+      return null;
+    }
+
+    return ReactDOM.createPortal(
+      <ModalContent
+        boxId={this.boxId}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedby}
+        aria-labelledby={ariaLabelledby}
+        ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
+        ouiaSafe={ouiaSafe}
+        position={position}
+        elementToFocus={elementToFocus}
+        {...props}
+      />,
+      container
+    ) as React.ReactElement;
+  }
+}
+
+export { Modal };