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

package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -697,7 +697,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v5-c-check__input"
-              id="pf-random-id-16-Mr"
+              id="generated-id-Mr"
               type="checkbox"
             />
             <span
@@ -711,7 +711,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v5-c-check__input"
-              id="pf-random-id-16-Mrs"
+              id="generated-id-Mrs"
               type="checkbox"
             />
             <span
@@ -725,7 +725,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v5-c-check__input"
-              id="pf-random-id-16-Ms"
+              id="generated-id-Ms"
               type="checkbox"
             />
             <span
@@ -739,7 +739,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v5-c-check__input"
-              id="pf-random-id-16-Other"
+              id="generated-id-Other"
               type="checkbox"
             />
             <span
@@ -769,7 +769,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v5-c-check__input"
-              id="pf-random-id-16-Mr"
+              id="generated-id-Mr"
               type="checkbox"
             />
             <span
@@ -783,7 +783,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v5-c-check__input"
-              id="pf-random-id-16-Mrs"
+              id="generated-id-Mrs"
               type="checkbox"
             />
             <span
@@ -797,7 +797,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v5-c-check__input"
-              id="pf-random-id-16-Ms"
+              id="generated-id-Ms"
               type="checkbox"
             />
             <span
@@ -811,7 +811,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v5-c-check__input"
-              id="pf-random-id-16-Other"
+              id="generated-id-Other"
               type="checkbox"
             />
             <span
@@ -1022,7 +1022,7 @@ exports[`checkbox select renders expanded successfully 1`] = `
       >
         <input
           class="pf-v5-c-check__input"
-          id="pf-random-id-13-Mr"
+          id="generated-id-Mr"
           type="checkbox"
         />
         <span
@@ -1036,7 +1036,7 @@ exports[`checkbox select renders expanded successfully 1`] = `
       >
         <input
           class="pf-v5-c-check__input"
-          id="pf-random-id-13-Mrs"
+          id="generated-id-Mrs"
           type="checkbox"
         />
         <span
@@ -1050,7 +1050,7 @@ exports[`checkbox select renders expanded successfully 1`] = `
       >
         <input
           class="pf-v5-c-check__input"
-          id="pf-random-id-13-Ms"
+          id="generated-id-Ms"
           type="checkbox"
         />
         <span
@@ -1064,7 +1064,7 @@ exports[`checkbox select renders expanded successfully 1`] = `
       >
         <input
           class="pf-v5-c-check__input"
-          id="pf-random-id-13-Other"
+          id="generated-id-Other"
           type="checkbox"
         />
         <span
@@ -1129,7 +1129,7 @@ exports[`checkbox select renders expanded successfully with custom objects 1`] =
       >
         <input
           class="pf-v5-c-check__input"
-          id="pf-random-id-15-Mr: User One"
+          id="generated-id-Mr: User One"
           type="checkbox"
         />
         <span
@@ -1143,7 +1143,7 @@ exports[`checkbox select renders expanded successfully with custom objects 1`] =
       >
         <input
           class="pf-v5-c-check__input"
-          id="pf-random-id-15-Mrs: New User"
+          id="generated-id-Mrs: New User"
           type="checkbox"
         />
         <span
@@ -1157,7 +1157,7 @@ exports[`checkbox select renders expanded successfully with custom objects 1`] =
       >
         <input
           class="pf-v5-c-check__input"
-          id="pf-random-id-15-Ms: Test Three"
+          id="generated-id-Ms: Test Three"
           type="checkbox"
         />
         <span
@@ -1239,7 +1239,7 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         >
           <input
             class="pf-v5-c-check__input"
-            id="pf-random-id-14-Mr"
+            id="generated-id-Mr"
             type="checkbox"
           />
           <span
@@ -1253,7 +1253,7 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         >
           <input
             class="pf-v5-c-check__input"
-            id="pf-random-id-14-Mrs"
+            id="generated-id-Mrs"
             type="checkbox"
           />
           <span
@@ -1267,7 +1267,7 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         >
           <input
             class="pf-v5-c-check__input"
-            id="pf-random-id-14-Ms"
+            id="generated-id-Ms"
             type="checkbox"
           />
           <span
@@ -1281,7 +1281,7 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         >
           <input
             class="pf-v5-c-check__input"
-            id="pf-random-id-14-Other"
+            id="generated-id-Other"
             type="checkbox"
           />
           <span
@@ -1877,7 +1877,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   >
                     <span
                       class="pf-v5-c-chip__text"
-                      id="pf-random-id-25"
+                      id="generated-id"
                     >
                       Mr
                     </span>
@@ -1888,12 +1888,12 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                     <button
                       aria-disabled="false"
                       aria-label="Remove"
-                      aria-labelledby="remove_pf-random-id-25 pf-random-id-25"
+                      aria-labelledby="remove_generated-id generated-id"
                       class="pf-v5-c-button pf-m-plain"
                       data-ouia-component-id="Remove"
                       data-ouia-component-type="PF5/Button"
                       data-ouia-safe="true"
-                      id="remove_pf-random-id-25"
+                      id="remove_generated-id"
                       type="button"
                     >
                       <svg
@@ -1927,7 +1927,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   >
                     <span
                       class="pf-v5-c-chip__text"
-                      id="pf-random-id-26"
+                      id="generated-id"
                     >
                       Mrs
                     </span>
@@ -1938,12 +1938,12 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                     <button
                       aria-disabled="false"
                       aria-label="Remove"
-                      aria-labelledby="remove_pf-random-id-26 pf-random-id-26"
+                      aria-labelledby="remove_generated-id generated-id"
                       class="pf-v5-c-button pf-m-plain"
                       data-ouia-component-id="Remove"
                       data-ouia-component-type="PF5/Button"
                       data-ouia-safe="true"
-                      id="remove_pf-random-id-26"
+                      id="remove_generated-id"
                       type="button"
                     >
                       <svg

package/src/helpers/GenerateId/GenerateId.ts

@@ -12,22 +12,36 @@
  */
 
 import * as React from 'react';
+import { getUniqueId } from '../util';
 
 let currentId = 0;
 
-interface GenerateIdProps {
+// gives us a unique (enough) id to add to the generated id that it should prevent issues with duplicate ids
+function getRandomId() {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID();
+  } else {
+    return getUniqueId();
+  }
+}
+
+export interface GenerateIdProps {
   /** String to prefix the random id with */
   prefix?: string;
   /** Component to be rendered with the generated id */
   children(id: string): React.ReactNode;
+  /** Flag to add randomness to the generated id, defaults to true */
+  isRandom?: boolean;
 }
 
 class GenerateId extends React.Component<GenerateIdProps, {}> {
   static displayName = 'GenerateId';
   static defaultProps = {
-    prefix: 'pf-random-id-'
+    prefix: 'pf-random-id-',
+    isRandom: true
   };
-  id = `${this.props.prefix}${currentId++}`;
+  uniqueElement = this.props.isRandom ? getRandomId() : currentId++;
+  id = `${this.props.prefix}${this.uniqueElement}`;
 
   render() {
     return this.props.children(this.id);

package/src/helpers/GenerateId/__mocks__/GenerateId.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GenerateIdProps } from '../GenerateId';
+class GenerateId extends React.Component<GenerateIdProps, {}> {
+  static displayName = 'GenerateId';
+
+  render() {
+    return this.props.children('generated-id');
+  }
+}
+
+export { GenerateId };

package/src/helpers/GenerateId/__tests__/GenerateId.test.tsx

@@ -3,7 +3,9 @@ import { render } from '@testing-library/react';
 import { GenerateId } from '../GenerateId';
 
 test('generates id', () => {
-  const { asFragment } = render(<GenerateId>{(id) => <div id={id}>div with random ID</div>}</GenerateId>);
+  const { asFragment } = render(
+    <GenerateId isRandom={false}>{(id) => <div id={id}>div with random ID</div>}</GenerateId>
+  );
 
   expect(asFragment()).toMatchSnapshot();
 });

package/src/helpers/Popper/Popper.tsx

@@ -449,7 +449,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   React.useEffect(() => {
     // currentPopperContent = {tooltip children} || {dropdown children}
     const currentPopperContent =
-      popper?.props?.children[1]?.props?.children || popper?.props?.children?.props?.children;
+      popper?.props?.children?.[1]?.props?.children || popper?.props?.children?.props?.children;
     setPopperContent(currentPopperContent);
 
     if (currentPopperContent && popperContent && currentPopperContent !== popperContent) {

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from './components';
-export * from './demos';
 export * from './layouts';
 export * from './helpers';
 export * from './styles';

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { GenerateId, PickOptional } from '../../../helpers';
+import { DualListSelectorContext } from './DualListSelectorContext';
+
+/** Acts as a container for all other DualListSelector sub-components when using a
+ * composable dual list selector.
+ */
+
+export interface DualListSelectorProps {
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** ID of the dual list selector. */
+  id?: string;
+  /** Flag indicating if the dual list selector uses trees instead of simple lists. */
+  isTree?: boolean;
+  /** Content to be rendered in the dual list selector. */
+  children?: React.ReactNode;
+}
+
+class DualListSelector extends React.Component<DualListSelectorProps> {
+  static displayName = 'DualListSelector';
+  static defaultProps: PickOptional<DualListSelectorProps> = {
+    children: '',
+    isTree: false
+  };
+
+  constructor(props: DualListSelectorProps) {
+    super(props);
+  }
+
+  render() {
+    const { className, children, id, isTree, ...props } = this.props;
+
+    return (
+      <DualListSelectorContext.Provider value={{ isTree }}>
+        <GenerateId>
+          {(randomId) => (
+            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+              {children}
+            </div>
+          )}
+        </GenerateId>
+      </DualListSelectorContext.Provider>
+    );
+  }
+}
+
+export { DualListSelector };

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export const DualListSelectorContext = React.createContext<{
+  isTree?: boolean;
+}>({ isTree: false });
+
+export const DualListSelectorListContext = React.createContext<{
+  setFocusedOption?: (id: string) => void;
+  isTree?: boolean;
+  ariaLabelledBy?: string;
+  focusedOption?: string;
+  displayOption?: (option: React.ReactNode) => boolean;
+  selectedOptions?: string[] | number[];
+  id?: string;
+  options?: React.ReactNode[];
+  isDisabled?: boolean;
+}>({});
+
+export const DualListSelectorPaneContext = React.createContext<{
+  isChosen: boolean;
+}>({ isChosen: false });

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { Button, ButtonVariant } from '../../../components/Button';
+import { Tooltip } from '../../../components/Tooltip';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+
+/** Renders an individual control button for moving selected options between each
+ * dual list selector pane.
+ */
+
+export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to be rendered in the dual list selector control. */
+  children?: React.ReactNode;
+  /** @hide forwarded ref */
+  innerRef?: React.Ref<any>;
+  /** Flag indicating the control is disabled. */
+  isDisabled?: boolean;
+  /** Additional classes applied to the dual list selector control. */
+  className?: string;
+  /** Callback fired when dual list selector control is selected. */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Accessible label for the dual list selector control. */
+  'aria-label'?: string;
+  /** Content to be displayed in a tooltip on hover of control. */
+  tooltipContent?: React.ReactNode;
+  /** Additional tooltip properties passed to the tooltip. */
+  tooltipProps?: any;
+}
+
+export const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps> = ({
+  innerRef,
+  children,
+  className,
+  'aria-label': ariaLabel,
+  isDisabled = true,
+  onClick = () => {},
+  tooltipContent,
+  tooltipProps = {} as any,
+  ...props
+}: DualListSelectorControlProps) => {
+  const privateRef = React.useRef(null);
+  const ref = innerRef || privateRef;
+  return (
+    <div className={css(styles.dualListSelectorControlsItem, className)} {...props}>
+      <Button
+        isDisabled={isDisabled}
+        aria-disabled={isDisabled}
+        variant={ButtonVariant.plain}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        tabIndex={-1}
+        ref={ref}
+      >
+        {children}
+      </Button>
+      {tooltipContent && <Tooltip content={tooltipContent} position="left" triggerRef={ref} {...tooltipProps} />}
+    </div>
+  );
+};
+DualListSelectorControlBase.displayName = 'DualListSelectorControlBase';
+
+export const DualListSelectorControl = React.forwardRef((props: DualListSelectorControlProps, ref: React.Ref<any>) => (
+  <DualListSelectorControlBase innerRef={ref} {...props} />
+));
+
+DualListSelectorControl.displayName = 'DualListSelectorControl';

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

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+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. */
+  children?: React.ReactNode;
+  /** Additional classes added to the wrapper. */
+  className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.RefObject<HTMLDivElement>;
+  /** Accessible label for the dual list selector controls wrapper. */
+  'aria-label'?: string;
+}
+
+export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualListSelectorControlsWrapperProps> = ({
+  innerRef,
+  children = null,
+  className,
+  'aria-label': ariaLabel = 'Controls for moving options between lists',
+  ...props
+}: DualListSelectorControlsWrapperProps) => {
+  const ref = React.useRef(null);
+  const wrapperRef = innerRef || ref;
+  // Adds keyboard navigation to the dynamically built dual list selector controls. Works when controls are dynamically built
+  // as well as when they are passed in via children.
+  const handleKeys = (event: KeyboardEvent) => {
+    if (
+      !wrapperRef.current ||
+      (wrapperRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`) &&
+        !Array.from(wrapperRef.current.getElementsByClassName(styles.dualListSelectorControls)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`)
+        ))
+    ) {
+      return;
+    }
+    event.stopImmediatePropagation();
+
+    const controls = (Array.from(wrapperRef.current.getElementsByTagName('BUTTON')) as Element[]).filter(
+      (el) => !el.classList.contains('pf-m-disabled')
+    );
+    const activeElement = document.activeElement;
+    handleArrows(
+      event,
+      controls,
+      (element: Element) => activeElement.contains(element),
+      (element: Element) => element,
+      undefined,
+      undefined,
+      true,
+      false
+    );
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleKeys);
+    return () => {
+      window.removeEventListener('keydown', handleKeys);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wrapperRef.current]);
+
+  return (
+    <div
+      className={css(styles.dualListSelectorControls, className)}
+      tabIndex={0}
+      ref={wrapperRef}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapperBase';
+
+export const DualListSelectorControlsWrapper = React.forwardRef(
+  (props: DualListSelectorControlsWrapperProps, ref: React.Ref<HTMLDivElement>) => (
+    <DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} role="group" {...props} />
+  )
+);
+
+DualListSelectorControlsWrapper.displayName = 'DualListSelectorControlsWrapper';

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

@@ -0,0 +1,57 @@
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorListItem } from './DualListSelectorListItem';
+import * as React from 'react';
+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. */
+  children?: React.ReactNode;
+}
+
+export const DualListSelectorList: React.FunctionComponent<DualListSelectorListProps> = ({
+  children,
+  ...props
+}: DualListSelectorListProps) => {
+  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);
+
+  return (
+    <ul
+      className={css(styles.dualListSelectorList)}
+      {...(hasOptions() && {
+        role: isTree ? 'tree' : 'listbox',
+        'aria-multiselectable': true,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-activedescendant': focusedOption
+      })}
+      aria-disabled={isDisabled ? 'true' : undefined}
+      {...props}
+    >
+      {options.length === 0
+        ? children
+        : options.map((option, index) => {
+            if (displayOption(option)) {
+              return (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={(selectedOptions as number[]).indexOf(index) !== -1}
+                  id={`${id}-option-${index}`}
+                  orderIndex={index}
+                  isDisabled={isDisabled}
+                >
+                  {option}
+                </DualListSelectorListItem>
+              );
+            }
+            return;
+          })}
+    </ul>
+  );
+};
+DualListSelectorList.displayName = 'DualListSelectorList';