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

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

@@ -1,130 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-import { css } from '@patternfly/react-styles';
-import { PickOptional } from '../../../helpers/typeUtils';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers';
-import { Spinner } from '../../../components/Spinner';
-
-export interface DropdownToggleCheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
-    OUIAProps {
-  /** Additional classes added to the DropdownToggleCheckbox */
-  className?: string;
-  /** Flag to show if the checkbox selection is valid or invalid */
-  isValid?: boolean;
-  /** Flag to show if the checkbox is disabled */
-  isDisabled?: boolean;
-  /** Flag to show if the checkbox is checked */
-  isChecked?: boolean | null;
-  /** Flag to show if the checkbox is in progress */
-  isInProgress?: boolean | null;
-  /** Alternate Flag to show if the checkbox is checked */
-  checked?: boolean | null;
-  /** A callback for when the checkbox selection changes */
-  onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
-  /** Element to be rendered inside the <span> */
-  children?: React.ReactNode;
-  /** Id of the checkbox */
-  id: string;
-  /** Aria-label of the checkbox */
-  'aria-label': string;
-  /** Text describing current loading status or progress */
-  defaultProgressAriaValueText?: string;
-  /** Aria-label for the default progress icon to describe what is loading */
-  defaultProgressAriaLabel?: 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;
-}
-
-class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckboxProps, { ouiaStateId: string }> {
-  static displayName = 'DropdownToggleCheckbox';
-  static defaultProps: PickOptional<DropdownToggleCheckboxProps> = {
-    className: '',
-    isValid: true,
-    isDisabled: false,
-    onChange: () => undefined as any
-  };
-
-  constructor(props: DropdownToggleCheckboxProps) {
-    super(props);
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(DropdownToggleCheckbox.displayName)
-    };
-  }
-
-  handleChange = (event: React.FormEvent<HTMLInputElement>) => {
-    this.props.onChange?.(event, (event.target as HTMLInputElement).checked);
-  };
-
-  calculateChecked = () => {
-    const { isChecked, checked } = this.props;
-    if (isChecked === null) {
-      // return false here and the indeterminate state will be set to true through the ref
-      return false;
-    } else if (isChecked !== undefined) {
-      return isChecked;
-    }
-    return checked;
-  };
-
-  render() {
-    const {
-      className,
-      isValid,
-      isDisabled,
-      isChecked,
-      isInProgress = false,
-      defaultProgressAriaLabel,
-      defaultProgressAriaValueText = 'Loading...',
-      children,
-      ouiaId,
-      ouiaSafe,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      onChange,
-      checked,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...props
-    } = this.props;
-
-    const spinner = (
-      <Spinner
-        diameter="1em"
-        aria-valuetext={defaultProgressAriaValueText}
-        aria-live="polite"
-        aria-label={defaultProgressAriaLabel}
-      />
-    );
-
-    const text = children && (
-      <span className={css(styles.dropdownToggleText, className)} aria-hidden="true" id={`${props.id}-text`}>
-        {children}
-      </span>
-    );
-    return (
-      <label
-        className={css(styles.dropdownToggleCheck, isInProgress && styles.modifiers.inProgress, className)}
-        htmlFor={props.id}
-      >
-        <input
-          {...props}
-          {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
-          type="checkbox"
-          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
-          aria-invalid={!isValid}
-          disabled={isDisabled}
-          checked={this.calculateChecked()}
-          {...getOUIAProps(
-            DropdownToggleCheckbox.displayName,
-            ouiaId !== undefined ? ouiaId : this.state.ouiaStateId,
-            ouiaSafe
-          )}
-        />
-        {isInProgress && <span className={css(styles.dropdownToggleProgress, className)}>{spinner}</span>}
-        {text}
-      </label>
-    );
-  }
-}
-export { DropdownToggleCheckbox };

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

@@ -1,193 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-import { css } from '@patternfly/react-styles';
-import { DropdownMenu } from './DropdownMenu';
-import { DropdownProps } from './Dropdown';
-import { DropdownContext, DropdownDirection, DropdownPosition } from './dropdownConstants';
-import { getOUIAProps, OUIAProps } from '../../../helpers';
-import { PickOptional } from '../../../helpers/typeUtils';
-import { Popper } from '../../../helpers/Popper/Popper';
-
-class DropdownWithContext extends React.Component<DropdownProps & OUIAProps> {
-  static displayName = 'DropdownWithContext';
-
-  openedOnEnter = false;
-  baseComponentRef = React.createRef<any>();
-  menuComponentRef = React.createRef<any>();
-
-  // seed for the aria-labelledby ID
-  static currentId = 0;
-
-  static defaultProps: PickOptional<DropdownProps> = {
-    className: '',
-    dropdownItems: [] as any[],
-    isOpen: false,
-    isPlain: false,
-    isText: false,
-    isGrouped: false,
-    position: DropdownPosition.left,
-    direction: DropdownDirection.down,
-    onSelect: (): void => undefined,
-    autoFocus: true,
-    menuAppendTo: 'inline',
-    isFlipEnabled: true
-  };
-
-  constructor(props: DropdownProps & OUIAProps) {
-    super(props);
-    if (props.dropdownItems && props.dropdownItems.length > 0 && props.children) {
-      // eslint-disable-next-line no-console
-      console.error(
-        'Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered'
-      );
-    }
-  }
-
-  onEnter = () => {
-    this.openedOnEnter = true;
-  };
-
-  componentDidUpdate() {
-    if (!this.props.isOpen) {
-      this.openedOnEnter = false;
-    }
-  }
-
-  setMenuComponentRef = (element: any) => {
-    this.menuComponentRef = element;
-  };
-
-  getMenuComponentRef = () => this.menuComponentRef;
-
-  render() {
-    const {
-      children,
-      className,
-      direction,
-      dropdownItems,
-      isOpen,
-      isPlain,
-      isText,
-      isGrouped,
-      isFullHeight,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onSelect,
-      position,
-      toggle,
-      autoFocus,
-      minWidth,
-      menuAppendTo,
-      isFlipEnabled,
-      zIndex,
-      ...props
-    } = this.props;
-    const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
-    let component: string;
-    let renderedContent: React.ReactNode[];
-    let ariaHasPopup = false;
-    if (dropdownItems && dropdownItems.length > 0) {
-      component = 'ul';
-      renderedContent = dropdownItems;
-      ariaHasPopup = true;
-    } else {
-      component = 'div';
-      renderedContent = React.Children.toArray(children);
-    }
-
-    const popperRef = React.createRef<HTMLDivElement>();
-    const openedOnEnter = this.openedOnEnter;
-    const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
-    return (
-      <DropdownContext.Consumer>
-        {({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => {
-          const BaseComponent = baseComponent as any;
-          const menuContainer = (
-            <DropdownMenu
-              className={css(isStatic && styles.modifiers.static)}
-              setMenuComponentRef={this.setMenuComponentRef}
-              component={component}
-              isOpen={isOpen}
-              position={position}
-              aria-labelledby={contextId ? `${contextId}-toggle` : id}
-              isGrouped={isGrouped}
-              autoFocus={openedOnEnter && autoFocus}
-              alignments={alignments}
-            >
-              {renderedContent}
-            </DropdownMenu>
-          );
-          const popperContainer = (
-            <div
-              className={css(
-                baseClass,
-                direction === DropdownDirection.up && styles.modifiers.top,
-                position === DropdownPosition.right && styles.modifiers.alignRight,
-                isOpen && styles.modifiers.expanded,
-                className
-              )}
-              ref={popperRef}
-            >
-              {isOpen && menuContainer}
-            </div>
-          );
-          const mainContainer = (
-            <BaseComponent
-              {...props}
-              className={css(
-                baseClass,
-                direction === DropdownDirection.up && styles.modifiers.top,
-                position === DropdownPosition.right && styles.modifiers.alignRight,
-                isOpen && styles.modifiers.expanded,
-                isFullHeight && styles.modifiers.fullHeight,
-                className
-              )}
-              ref={this.baseComponentRef}
-              {...getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)}
-            >
-              {React.Children.map(toggle, (oneToggle) =>
-                React.cloneElement(oneToggle, {
-                  parentRef: this.baseComponentRef,
-                  getMenuRef: this.getMenuComponentRef,
-                  isOpen,
-                  id,
-                  isPlain,
-                  isText,
-                  'aria-haspopup': ariaHasPopup,
-                  onEnter: () => {
-                    this.onEnter();
-                    oneToggle.props.onEnter && oneToggle.props.onEnter();
-                  }
-                })
-              )}
-              {menuAppendTo === 'inline' && isOpen && menuContainer}
-            </BaseComponent>
-          );
-          const getParentElement = () => {
-            if (this.baseComponentRef && this.baseComponentRef.current) {
-              return this.baseComponentRef.current.parentElement;
-            }
-            return null;
-          };
-          return menuAppendTo === 'inline' ? (
-            mainContainer
-          ) : (
-            <Popper
-              trigger={mainContainer}
-              triggerRef={this.baseComponentRef}
-              popper={popperContainer}
-              popperRef={popperRef}
-              direction={direction}
-              position={position}
-              appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
-              isVisible={isOpen}
-              zIndex={zIndex}
-              minWidth={minWidth !== undefined ? minWidth : 'revert'}
-            />
-          );
-        }}
-      </DropdownContext.Consumer>
-    );
-  }
-}
-
-export { DropdownWithContext };

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

@@ -1,292 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import { DropdownContext } from './dropdownConstants';
-import { KEYHANDLER_DIRECTION } from '../../../helpers/constants';
-import { preventedEvents } from '../../../helpers/util';
-import { Tooltip } from '../../../components/Tooltip';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-
-export interface InternalDropdownItemProps extends React.HTMLProps<HTMLAnchorElement> {
-  /** Anything which can be rendered as dropdown item */
-  children?: React.ReactNode;
-  /** Whether to set className on component when React.isValidElement(component) */
-  styleChildren?: boolean;
-  /** Classes applied to root element of dropdown item */
-  className?: string;
-  /** Class applied to list element */
-  listItemClassName?: string;
-  /** Indicates which component will be used as dropdown item. Will have className injected if React.isValidElement(component) */
-  component?: React.ReactNode;
-  /** Role for the item */
-  role?: string;
-  /** Render dropdown item as disabled option */
-  isDisabled?: boolean;
-  /** Render dropdown item as aria disabled option */
-  isAriaDisabled?: boolean;
-  /** Render dropdown item as a 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;
-  index?: number;
-  context?: {
-    keyHandler?: (index: number, innerIndex: number, direction: string) => void;
-    sendRef?: (index: number, ref: any, isDisabled: boolean, isSeparator: boolean) => void;
-  };
-  /** Callback for click event */
-  onClick?: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => void;
-  /** ID for the list element */
-  id?: string;
-  /** ID for the component element */
-  componentID?: string;
-  /** Additional content to include alongside item within the <li> */
-  additionalChild?: React.ReactNode;
-  /** Custom item rendering that receives the DropdownContext */
-  customChild?: React.ReactNode;
-  /** Flag indicating if hitting enter on an item also triggers an arrow down key press */
-  enterTriggersArrowDown?: boolean;
-  /** An image to display within the InternalDropdownItem, 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;
-  /** Events to prevent when the item is disabled */
-  inoperableEvents?: string[];
-}
-
-class InternalDropdownItem extends React.Component<InternalDropdownItemProps> {
-  static displayName = 'InternalDropdownItem';
-  ref = React.createRef<HTMLLIElement>();
-  additionalRef = React.createRef<any>();
-
-  static defaultProps: InternalDropdownItemProps = {
-    className: '',
-    component: 'a',
-    role: 'none',
-    isDisabled: false,
-    isPlainText: false,
-    tooltipProps: {},
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onClick: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => undefined as any,
-    index: -1,
-    context: {
-      keyHandler: () => {},
-      sendRef: () => {}
-    },
-    enterTriggersArrowDown: false,
-    icon: null,
-    styleChildren: true,
-    description: null,
-    inoperableEvents: ['onClick', 'onKeyPress']
-  };
-
-  componentDidMount() {
-    const { context, index, isDisabled, role, customChild, autoFocus } = this.props;
-    const customRef = customChild ? this.getInnerNode(this.ref.current) : this.ref.current;
-    context?.sendRef?.(
-      index,
-      [customRef, customChild ? customRef : this.additionalRef.current],
-      isDisabled,
-      role === 'separator'
-    );
-    autoFocus && setTimeout(() => customRef.focus());
-  }
-
-  componentDidUpdate() {
-    const { context, index, isDisabled, role, customChild } = this.props;
-    const customRef = customChild ? this.getInnerNode(this.ref.current) : this.ref.current;
-    context?.sendRef?.(
-      index,
-      [customRef, customChild ? customRef : this.additionalRef.current],
-      isDisabled,
-      role === 'separator'
-    );
-  }
-
-  getInnerNode = (node: any) => (node && node.childNodes && node.childNodes.length ? node.childNodes[0] : node);
-
-  onKeyDown = (event: any) => {
-    // Detected key press on this item, notify the menu parent so that the appropriate item can be focused
-    const innerIndex = event.target === this.ref.current ? 0 : 1;
-    if (!this.props.customChild) {
-      event.preventDefault();
-    }
-    if (event.key === 'ArrowUp') {
-      this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.UP);
-      event.stopPropagation();
-    } else if (event.key === 'ArrowDown') {
-      this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.DOWN);
-      event.stopPropagation();
-    } else if (event.key === 'ArrowRight') {
-      this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.RIGHT);
-      event.stopPropagation();
-    } else if (event.key === 'ArrowLeft') {
-      this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.LEFT);
-      event.stopPropagation();
-    } else if (event.key === 'Enter' || event.key === ' ') {
-      event.target.click();
-      this.props.enterTriggersArrowDown &&
-        this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.DOWN);
-    }
-  };
-
-  extendAdditionalChildRef() {
-    const { additionalChild } = this.props;
-
-    return React.cloneElement(additionalChild as React.ReactElement<any>, {
-      ref: this.additionalRef
-    });
-  }
-
-  componentRef = (element: HTMLLIElement) => {
-    (this.ref as React.MutableRefObject<any>).current = element;
-    const { component } = this.props;
-    const ref = (component as any).ref;
-    if (ref) {
-      if (typeof ref === 'function') {
-        ref(element);
-      } else {
-        (ref as React.MutableRefObject<any>).current = element;
-      }
-    }
-  };
-
-  render() {
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    const {
-      className,
-      children,
-      context,
-      onClick,
-      component,
-      role,
-      isDisabled,
-      isAriaDisabled,
-      isPlainText,
-      index,
-      href,
-      tooltip,
-      tooltipProps,
-      id,
-      componentID,
-      listItemClassName,
-      additionalChild,
-      customChild,
-      enterTriggersArrowDown,
-      icon,
-      autoFocus,
-      styleChildren,
-      description,
-      inoperableEvents,
-      ...additionalProps
-    } = this.props;
-    /* eslint-enable @typescript-eslint/no-unused-vars */
-    let classes = css(icon && styles.modifiers.icon, isAriaDisabled && styles.modifiers.ariaDisabled, className);
-
-    if (component === 'a') {
-      additionalProps['aria-disabled'] = isDisabled || isAriaDisabled;
-    } else if (component === 'button') {
-      additionalProps['aria-disabled'] = isDisabled || isAriaDisabled;
-      additionalProps.type = additionalProps.type || 'button';
-    }
-    const renderWithTooltip = (childNode: React.ReactNode) =>
-      tooltip ? (
-        <Tooltip content={tooltip} {...tooltipProps}>
-          {childNode}
-        </Tooltip>
-      ) : (
-        childNode
-      );
-
-    const renderClonedComponent = (element: React.ReactElement<any>) =>
-      React.cloneElement(element, {
-        ...(styleChildren && {
-          className: css(element.props.className, classes)
-        }),
-        ...(this.props.role !== 'separator' && { role, ref: this.componentRef })
-      });
-
-    const renderDefaultComponent = (tag: string) => {
-      const Component = tag as any;
-
-      const componentContent = description ? (
-        <>
-          <div className={styles.dropdownMenuItemMain}>
-            {icon && <span className={css(styles.dropdownMenuItemIcon)}>{icon}</span>}
-            {children}
-          </div>
-          <div className={styles.dropdownMenuItemDescription}>{description}</div>
-        </>
-      ) : (
-        <>
-          {icon && <span className={css(styles.dropdownMenuItemIcon)}>{icon}</span>}
-          {children}
-        </>
-      );
-
-      return (
-        <Component
-          {...additionalProps}
-          {...(isDisabled || isAriaDisabled ? preventedEvents(inoperableEvents) : null)}
-          href={href}
-          ref={this.ref}
-          className={classes}
-          id={componentID}
-          role={role}
-        >
-          {componentContent}
-        </Component>
-      );
-    };
-
-    return (
-      <DropdownContext.Consumer>
-        {({ onSelect, itemClass, disabledClass, plainTextClass }) => {
-          if (this.props.role !== 'separator') {
-            classes = css(
-              classes,
-              isDisabled && disabledClass,
-              isPlainText && plainTextClass,
-              itemClass,
-              description && styles.modifiers.description
-            );
-          }
-          if (customChild) {
-            return React.cloneElement(customChild as React.ReactElement<any>, {
-              ref: this.ref,
-              onKeyDown: this.onKeyDown
-            });
-          }
-
-          return (
-            <li
-              {...(listItemClassName && { className: listItemClassName })}
-              role="none"
-              onKeyDown={this.onKeyDown}
-              onClick={(event: any) => {
-                if (!isDisabled && !isAriaDisabled) {
-                  onClick?.(event);
-                  onSelect?.(event);
-                }
-              }}
-              id={id}
-            >
-              {renderWithTooltip(
-                React.isValidElement(component)
-                  ? renderClonedComponent(component)
-                  : renderDefaultComponent(component as string)
-              )}
-              {additionalChild && this.extendAdditionalChildRef()}
-            </li>
-          );
-        }}
-      </DropdownContext.Consumer>
-    );
-  }
-}
-
-export { InternalDropdownItem };

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

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { DropdownToggleProps } from './DropdownToggle';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { Toggle } from './Toggle';
-
-export interface KebabToggleProps extends DropdownToggleProps {
-  /** HTML ID of dropdown toggle */
-  id?: string;
-  /** Anything which can be rendered as dropdown toggle */
-  children?: React.ReactNode;
-  /** Classess applied to root element of dropdown toggle */
-  className?: string;
-  /** Flag to indicate if menu is opened */
-  isOpen?: boolean;
-  /** Label Toggle button */
-  'aria-label'?: string;
-  /** 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?: any;
-  /** The menu element */
-  getMenuRef?: () => HTMLElement;
-  /** Forces active state */
-  isActive?: boolean;
-  /** Disables the dropdown toggle */
-  isDisabled?: boolean;
-  /** Display the toggle with no border or background */
-  isPlain?: boolean;
-  /** Type to put on the button */
-  type?: 'button' | 'submit' | 'reset';
-  /** Allows selecting toggle to select parent */
-  bubbleEvent?: boolean;
-}
-
-export const KebabToggle: React.FunctionComponent<KebabToggleProps> = ({
-  id = '',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  children = null,
-  className = '',
-  isOpen = false,
-  'aria-label': ariaLabel = 'Actions',
-  parentRef = null,
-  getMenuRef = null,
-  isActive = false,
-  isPlain = false,
-  isDisabled = false,
-  bubbleEvent = false,
-  onToggle = () => undefined as void,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
-  ...props
-}: KebabToggleProps) => (
-  <Toggle
-    id={id}
-    className={className}
-    isOpen={isOpen}
-    aria-label={ariaLabel}
-    parentRef={parentRef}
-    getMenuRef={getMenuRef}
-    isActive={isActive}
-    isPlain={isPlain}
-    isDisabled={isDisabled}
-    onToggle={onToggle}
-    bubbleEvent={bubbleEvent}
-    {...props}
-  >
-    <EllipsisVIcon />
-  </Toggle>
-);
-KebabToggle.displayName = 'KebabToggle';