@patternfly/react-core 6.0.0-alpha.57 → 6.0.0-alpha.58

package/src/deprecated/components/Dropdown/DropdownItem.tsx

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { InternalDropdownItemProps, InternalDropdownItem } from './InternalDropdownItem';
-import { DropdownArrowContext } from './dropdownConstants';
-import { useOUIAProps, OUIAProps } from '../../../helpers';
-
-export interface DropdownItemProps extends Omit<InternalDropdownItemProps, 'tabIndex'>, OUIAProps {
-  /** Anything which can be rendered as dropdown item */
-  children?: React.ReactNode;
-  /** Classes applied to root element of dropdown item */
-  className?: string;
-  /** Class to be applied to list item */
-  listItemClassName?: string;
-  /**
-   * A ReactElement to render, or a string to use as the component tag.
-   * Example: component={<Link to="/components/alert/">Alert</Link>}
-   * Example: component="button"
-   * If React.isValidElement(component) the className prop will be injected unless styleChildren="false"
-   */
-  component?: React.ReactNode;
-  /** ID for the component element */
-  componentID?: string;
-  /** Whether to set className on component when React.isValidElement(component) */
-  styleChildren?: boolean;
-  /** Render dropdown item as disabled option */
-  isDisabled?: boolean;
-  /** Render dropdown item as aria-disabled option */
-  isAriaDisabled?: boolean;
-  /** Render dropdown item as non-interactive item */
-  isPlainText?: boolean;
-  /** Default hyperlink location */
-  href?: string;
-  /** Tooltip to display when hovered over the item */
-  tooltip?: React.ReactNode;
-  /** Additional tooltip props forwarded to the Tooltip component */
-  tooltipProps?: any;
-  /** Additional node to include alongside item within the <li> */
-  additionalChild?: React.ReactNode;
-  /** Custom item rendering that receives the DropdownContext */
-  customChild?: React.ReactNode;
-  /** tabIndex to use, null to unset it */
-  tabIndex?: number | null;
-  /** An image to display within the DropdownItem, appearing before any component children */
-  icon?: React.ReactNode;
-  /** Initial focus on the item when the menu is opened (Note: Only applicable to one of the items) */
-  autoFocus?: boolean;
-  /** A short description of the dropdown item, displayed under the dropdown item content */
-  description?: React.ReactNode;
-  /** 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 const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
-  children,
-  className,
-  component = 'a',
-  isDisabled = false,
-  isAriaDisabled = false,
-  isPlainText = false,
-  href,
-  tooltip,
-  tooltipProps = {},
-  listItemClassName,
-  onClick,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
-  additionalChild,
-  customChild,
-  tabIndex = -1,
-  icon = null,
-  autoFocus,
-  description = null,
-  styleChildren,
-  ouiaId,
-  ouiaSafe,
-  ...props
-}: DropdownItemProps) => {
-  const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
-  return (
-    <DropdownArrowContext.Consumer>
-      {(context) => (
-        <InternalDropdownItem
-          context={context}
-          role="menuitem"
-          tabIndex={tabIndex}
-          className={className}
-          component={component}
-          isDisabled={isDisabled}
-          isAriaDisabled={isAriaDisabled}
-          isPlainText={isPlainText}
-          href={href}
-          tooltip={tooltip}
-          tooltipProps={tooltipProps}
-          listItemClassName={listItemClassName}
-          onClick={onClick}
-          additionalChild={additionalChild}
-          customChild={customChild}
-          icon={icon}
-          autoFocus={autoFocus}
-          styleChildren={styleChildren}
-          description={description}
-          {...ouiaProps}
-          {...props}
-        >
-          {children}
-        </InternalDropdownItem>
-      )}
-    </DropdownArrowContext.Consumer>
-  );
-};
-
-DropdownItem.displayName = 'DropdownItem';

package/src/deprecated/components/Dropdown/DropdownMenu.tsx

@@ -1,254 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-import { css } from '@patternfly/react-styles';
-import { keyHandler, formatBreakpointMods } from '../../../helpers/util';
-import { DropdownPosition, DropdownArrowContext, DropdownContext } from './dropdownConstants';
-
-export interface DropdownMenuProps {
-  /** Anything which can be rendered as dropdown items */
-  children?: React.ReactNode;
-  /** Classess applied to root element of dropdown menu */
-  className?: string;
-  /** Flag to indicate if menu is opened */
-  isOpen?: boolean;
-  /** Flag to indicate if the first dropdown item should gain initial focus, set false when adding
-   * a specific auto-focus item (like a current selection) otherwise leave as true
-   */
-  autoFocus?: boolean;
-  /** Indicates which component will be used as dropdown menu */
-  component?: React.ReactNode;
-  /** Indicates where menu will be alligned horizontally */
-  position?: DropdownPosition | 'right' | 'left';
-  /** Indicates how the menu will align at screen size breakpoints */
-  alignments?: {
-    sm?: 'right' | 'left';
-    md?: 'right' | 'left';
-    lg?: 'right' | 'left';
-    xl?: 'right' | 'left';
-    '2xl'?: 'right' | 'left';
-  };
-  /** Flag to indicate if menu is grouped */
-  isGrouped?: boolean;
-  // Function to call on component mount
-  setMenuComponentRef?: any;
-}
-
-export interface DropdownMenuItem extends React.HTMLAttributes<any> {
-  isDisabled: boolean;
-  disabled: boolean;
-  isHovered: boolean;
-  ref: HTMLElement;
-}
-
-class DropdownMenu extends React.Component<DropdownMenuProps> {
-  static displayName = 'DropdownMenu';
-  context!: React.ContextType<typeof DropdownContext>;
-  refsCollection = [] as HTMLElement[][];
-
-  static defaultProps: DropdownMenuProps = {
-    className: '',
-    isOpen: true,
-    autoFocus: true,
-    position: DropdownPosition.left,
-    component: 'ul',
-    isGrouped: false,
-    setMenuComponentRef: null
-  };
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeyDown);
-    const { autoFocus } = this.props;
-
-    if (autoFocus) {
-      // Focus first non-disabled element
-      const focusTargetCollection = this.refsCollection.find(
-        (ref) => ref && ref[0] && !ref[0].hasAttribute('disabled')
-      );
-      const focusTarget = focusTargetCollection && focusTargetCollection[0];
-      if (focusTarget && focusTarget.focus) {
-        setTimeout(() => focusTarget.focus());
-      }
-    }
-  }
-
-  componentWillUnmount = () => {
-    document.removeEventListener('keydown', this.onKeyDown);
-  };
-
-  static validToggleClasses = [styles.dropdownToggle, styles.dropdownToggleButton] as string[];
-  static focusFirstRef = (refCollection: HTMLElement[]) => {
-    if (refCollection && refCollection[0] && refCollection[0].focus) {
-      setTimeout(() => refCollection[0].focus());
-    }
-  };
-
-  onKeyDown = (event: any) => {
-    if (
-      !this.props.isOpen ||
-      !Array.from(document.activeElement.classList).find((className) =>
-        DropdownMenu.validToggleClasses.concat(this.context.toggleClass).includes(className)
-      )
-    ) {
-      return;
-    }
-    const refs = this.refsCollection;
-    if (event.key === 'ArrowDown') {
-      const firstFocusTargetCollection = refs.find((ref) => ref && ref[0] && !ref[0].hasAttribute('disabled'));
-      DropdownMenu.focusFirstRef(firstFocusTargetCollection);
-      event.stopPropagation();
-    } else if (event.key === 'ArrowUp') {
-      const collectionLength = refs.length;
-      const lastFocusTargetCollection = refs.slice(collectionLength - 1, collectionLength);
-      const lastFocusTarget = lastFocusTargetCollection && lastFocusTargetCollection[0];
-      DropdownMenu.focusFirstRef(lastFocusTarget);
-      event.stopPropagation();
-    }
-  };
-
-  shouldComponentUpdate() {
-    // reset refsCollection before updating to account for child removal between mounts
-    this.refsCollection = [] as HTMLElement[][];
-    return true;
-  }
-
-  childKeyHandler = (index: number, innerIndex: number, position: string, custom = false) => {
-    keyHandler(
-      index,
-      innerIndex,
-      position,
-      this.refsCollection,
-      this.props.isGrouped ? this.refsCollection : React.Children.toArray(this.props.children),
-      custom
-    );
-  };
-
-  sendRef = (index: number, nodes: any[], isDisabled: boolean, isSeparator: boolean) => {
-    this.refsCollection[index] = [];
-    nodes.map((node, innerIndex) => {
-      if (!node) {
-        this.refsCollection[index][innerIndex] = null;
-      } else if (!node.getAttribute) {
-        // eslint-disable-next-line react/no-find-dom-node
-        this.refsCollection[index][innerIndex] = ReactDOM.findDOMNode(node) as HTMLElement;
-      } else if (isSeparator) {
-        this.refsCollection[index][innerIndex] = null;
-      } else {
-        this.refsCollection[index][innerIndex] = node;
-      }
-    });
-  };
-
-  extendChildren() {
-    const { children, isGrouped } = this.props;
-    if (isGrouped) {
-      let index = 0;
-      return React.Children.map(children, (groupedChildren) => {
-        const group = groupedChildren as React.ReactElement;
-        const props: { children?: React.ReactNode } = {};
-        if (group.props && group.props.children) {
-          if (Array.isArray(group.props.children)) {
-            props.children = React.Children.map(group.props.children, (option) =>
-              React.cloneElement(option as React.ReactElement, {
-                index: index++
-              })
-            );
-          } else {
-            props.children = React.cloneElement(group.props.children as React.ReactElement, {
-              index: index++
-            });
-          }
-        }
-        return React.cloneElement(group, props);
-      });
-    }
-    return React.Children.map(children, (child, index) =>
-      React.cloneElement(child as React.ReactElement, {
-        index
-      })
-    );
-  }
-
-  render() {
-    const { className, isOpen, position, children, component, isGrouped, setMenuComponentRef, alignments, ...props } =
-      this.props;
-    return (
-      <DropdownArrowContext.Provider
-        value={{
-          keyHandler: this.childKeyHandler,
-          sendRef: this.sendRef
-        }}
-      >
-        {component === 'div' ? (
-          <DropdownContext.Consumer>
-            {({ onSelect, menuClass }) => (
-              <div
-                className={css(
-                  menuClass,
-                  position === DropdownPosition.right && styles.modifiers.alignRight,
-                  formatBreakpointMods(alignments, styles, 'align-'),
-                  className
-                )}
-                hidden={!isOpen}
-                onClick={(event) => onSelect && onSelect(event)}
-                ref={setMenuComponentRef}
-              >
-                {children}
-              </div>
-            )}
-          </DropdownContext.Consumer>
-        ) : (
-          (isGrouped && (
-            <DropdownContext.Consumer>
-              {({ menuClass, menuComponent }) => {
-                const MenuComponent = (menuComponent || 'div') as any;
-                return (
-                  <MenuComponent
-                    {...props}
-                    className={css(
-                      menuClass,
-                      position === DropdownPosition.right && styles.modifiers.alignRight,
-                      formatBreakpointMods(alignments, styles, 'align-'),
-                      className
-                    )}
-                    hidden={!isOpen}
-                    role="menu"
-                    ref={setMenuComponentRef}
-                  >
-                    {this.extendChildren()}
-                  </MenuComponent>
-                );
-              }}
-            </DropdownContext.Consumer>
-          )) || (
-            <DropdownContext.Consumer>
-              {({ menuClass, menuComponent }) => {
-                const MenuComponent = (menuComponent || component) as any;
-                return (
-                  <MenuComponent
-                    {...props}
-                    className={css(
-                      menuClass,
-                      position === DropdownPosition.right && styles.modifiers.alignRight,
-                      formatBreakpointMods(alignments, styles, 'align-'),
-                      className
-                    )}
-                    hidden={!isOpen}
-                    role="menu"
-                    ref={setMenuComponentRef}
-                  >
-                    {this.extendChildren()}
-                  </MenuComponent>
-                );
-              }}
-            </DropdownContext.Consumer>
-          )
-        )}
-      </DropdownArrowContext.Provider>
-    );
-  }
-}
-
-DropdownMenu.contextType = DropdownContext;
-
-export { DropdownMenu };

package/src/deprecated/components/Dropdown/DropdownSeparator.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { DropdownArrowContext } from './dropdownConstants';
-import { InternalDropdownItem } from './InternalDropdownItem';
-import { Divider, DividerVariant } from '../../../components/Divider';
-import { useOUIAProps, OUIAProps } from '../../../helpers';
-
-export interface SeparatorProps extends React.HTMLProps<HTMLAnchorElement>, OUIAProps {
-  /** Classes applied to root element of dropdown item */
-  className?: string;
-  /** Click event to pass to InternalDropdownItem */
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent | MouseEvent) => void;
-  /** 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 const DropdownSeparator: React.FunctionComponent<SeparatorProps> = ({
-  className = '',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
-  ouiaId,
-  ouiaSafe,
-  ...props
-}: SeparatorProps) => {
-  const ouiaProps = useOUIAProps(DropdownSeparator.displayName, ouiaId, ouiaSafe);
-  return (
-    <DropdownArrowContext.Consumer>
-      {(context) => (
-        <InternalDropdownItem
-          {...props}
-          context={context}
-          component={<Divider component={DividerVariant.div} />}
-          className={className}
-          role="separator"
-          {...ouiaProps}
-        />
-      )}
-    </DropdownArrowContext.Consumer>
-  );
-};
-DropdownSeparator.displayName = 'DropdownSeparator';

package/src/deprecated/components/Dropdown/DropdownToggle.tsx

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import { Toggle } from './Toggle';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-import { DropdownContext } from './dropdownConstants';
-import { css } from '@patternfly/react-styles';
-import { useOUIAProps, OUIAProps } from '../../../helpers';
-
-export interface DropdownToggleProps extends React.HTMLProps<HTMLButtonElement>, OUIAProps {
-  /** HTML ID of dropdown toggle */
-  id?: string;
-  /** Anything which can be rendered as dropdown toggle button */
-  children?: React.ReactNode;
-  /** Classes applied to root element of dropdown toggle button */
-  className?: string;
-  /** Flag to indicate if menu is opened */
-  isOpen?: boolean;
-  /** Callback called when toggle is clicked */
-  onToggle?: (
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
-    isOpen: boolean
-  ) => void;
-  /** Element which wraps toggle */
-  parentRef?: HTMLElement;
-  /** The menu element */
-  getMenuRef?: () => HTMLElement;
-  /** Forces active state */
-  isActive?: boolean;
-  /** Display the toggle with no border or background */
-  isPlain?: boolean;
-  /** Display the toggle in text only mode */
-  isText?: boolean;
-  /** Whether or not the <div> has a disabled state */
-  isDisabled?: boolean;
-  /** Alternate styles for the dropdown toggle button */
-  toggleVariant?: 'primary' | 'secondary' | 'default';
-  /** An image to display within the dropdown toggle, appearing before any component children */
-  icon?: React.ReactNode;
-  /** The icon to display for the toggle, appearing after any component children. Defaults to CaretDownIcon. Set to null to not show an icon. */
-  toggleIndicator?: React.ElementType | null;
-  /** Elements to display before the toggle button. When included, renders the toggle as a split button. */
-  splitButtonItems?: React.ReactNode[];
-  /** Variant of split button toggle */
-  splitButtonVariant?: 'action' | 'checkbox';
-  /** Accessible label for the dropdown toggle button */
-  'aria-label'?: string;
-  /** Accessibility property to indicate correct has popup */
-  'aria-haspopup'?: boolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'tree';
-  /** Type to put on the button */
-  type?: 'button' | 'submit' | 'reset';
-  /** Callback called when the Enter key is pressed */
-  onEnter?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-  /** 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 const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
-  id = '',
-  children = null,
-  className = '',
-  isOpen = false,
-  parentRef = null,
-  getMenuRef = null,
-  isDisabled = false,
-  isPlain = false,
-  isText = false,
-  toggleVariant = 'default',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  isActive = false,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onToggle = (_evt: any, _isOpen: boolean) => undefined as any,
-  icon = null,
-  toggleIndicator: ToggleIndicator = CaretDownIcon,
-  splitButtonItems,
-  splitButtonVariant = 'checkbox',
-  'aria-haspopup': ariaHasPopup,
-  ouiaId,
-  ouiaSafe,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
-  ...props
-}: DropdownToggleProps) => {
-  const ouiaProps = useOUIAProps(DropdownToggle.displayName, ouiaId, ouiaSafe);
-  const toggle = (
-    <DropdownContext.Consumer>
-      {({ toggleTextClass, toggleIndicatorClass, toggleIconClass }) => (
-        <Toggle
-          {...props}
-          id={id}
-          className={className}
-          isOpen={isOpen}
-          parentRef={parentRef}
-          getMenuRef={getMenuRef}
-          isActive={isActive}
-          isDisabled={isDisabled}
-          isPlain={isPlain}
-          isText={isText}
-          toggleVariant={toggleVariant}
-          onToggle={onToggle}
-          aria-haspopup={ariaHasPopup}
-          {...ouiaProps}
-          {...(splitButtonItems && { isSplitButton: true, 'aria-label': props['aria-label'] || 'Select' })}
-        >
-          {icon && <span className={css(toggleIconClass)}>{icon}</span>}
-          {children && <span className={ToggleIndicator && css(toggleTextClass)}>{children}</span>}
-          {ToggleIndicator && (
-            <span className={css(!splitButtonItems && toggleIndicatorClass)}>
-              <ToggleIndicator />
-            </span>
-          )}
-        </Toggle>
-      )}
-    </DropdownContext.Consumer>
-  );
-
-  if (splitButtonItems) {
-    return (
-      <div
-        className={css(
-          styles.dropdownToggle,
-          styles.modifiers.splitButton,
-          splitButtonVariant === 'action' && styles.modifiers.action,
-          toggleVariant === 'primary' && splitButtonVariant === 'action' && styles.modifiers.primary,
-          toggleVariant === 'secondary' && splitButtonVariant === 'action' && styles.modifiers.secondary,
-          isDisabled && styles.modifiers.disabled
-        )}
-      >
-        {splitButtonItems}
-        {toggle}
-      </div>
-    );
-  }
-
-  return toggle;
-};
-DropdownToggle.displayName = 'DropdownToggle';

package/src/deprecated/components/Dropdown/DropdownToggleAction.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-import { css } from '@patternfly/react-styles';
-
-export interface DropdownToggleActionProps {
-  /** Additional classes added to the DropdownToggleAction */
-  className?: string;
-  /** Flag to show if the action button is disabled */
-  isDisabled?: boolean;
-  /** A callback for when the action button is clicked */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  /** Element to be rendered inside the <button> */
-  children?: React.ReactNode;
-  /** Id of the action button */
-  id?: string;
-  /** Aria-label of the action button */
-  'aria-label'?: string;
-}
-
-class DropdownToggleAction extends React.Component<DropdownToggleActionProps> {
-  static displayName = 'DropdownToggleAction';
-
-  static defaultProps: DropdownToggleActionProps = {
-    className: '',
-    isDisabled: false,
-    onClick: () => {}
-  };
-
-  render() {
-    const { id, className, onClick, isDisabled, children, ...props } = this.props;
-
-    return (
-      <button
-        id={id}
-        className={css(styles.dropdownToggleButton, className)}
-        onClick={onClick}
-        {...(isDisabled && { disabled: true, 'aria-disabled': true })}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-}
-
-export { DropdownToggleAction };