@patternfly/react-core 5.0.0-alpha.46 → 5.0.0-alpha.48

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

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
+import { DropdownPosition, DropdownDirection, DropdownContext } from './dropdownConstants';
+import { DropdownWithContext } from './DropdownWithContext';
+import { OUIAProps, useOUIAId } from '../../../helpers';
+
+export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+  /** Anything which can be rendered in a dropdown */
+  children?: React.ReactNode;
+  /** Classes applied to root element of dropdown */
+  className?: string;
+  /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */
+  dropdownItems?: any[];
+  /** Flag to indicate if menu is opened */
+  isOpen?: boolean;
+  /** Display the toggle with no border or background */
+  isPlain?: boolean;
+  /** Display the toggle in text only mode */
+  isText?: boolean;
+  /** Flag indicating that the dropdown should expand to full height */
+  isFullHeight?: boolean;
+  /** Indicates where menu will be aligned horizontally */
+  position?: DropdownPosition | 'right' | 'left';
+  /** Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property. */
+  alignments?: {
+    sm?: 'right' | 'left';
+    md?: 'right' | 'left';
+    lg?: 'right' | 'left';
+    xl?: 'right' | 'left';
+    '2xl'?: 'right' | 'left';
+  };
+  /** Display menu above or below dropdown toggle */
+  direction?: DropdownDirection | 'up' | 'down';
+  /** Minimum width of the dropdown menu. If set to "trigger", the minimum width will be set to the toggle width. */
+  minWidth?: string | 'trigger';
+  /** The container to append the menu to. Defaults to 'inline'.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * menuAppendTo="parent"
+   * menuAppendTo={() => document.body}
+   * menuAppendTo={document.getElementById('target')}
+   */
+  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
+  /** Flag to indicate if dropdown has groups */
+  isGrouped?: boolean;
+  /** Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox> */
+  toggle: React.ReactElement<any>;
+  /** Function callback called when user selects item */
+  onSelect?: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
+  /** 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;
+  /** Props for extreme customization of dropdown */
+  contextProps?: typeof DropdownContext;
+  /** Flag for indicating that the dropdown menu should automatically flip vertically when
+   * it reaches the boundary. This prop can only be used when the dropdown component is not
+   * appended inline, e.g. `menuAppendTo="parent"`
+   */
+  isFlipEnabled?: boolean;
+  /** z-index of the dropdown when menuAppendTo is not inline. */
+  zIndex?: number;
+  /** 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 Dropdown: React.FunctionComponent<DropdownProps> = ({
+  onSelect,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
+  ouiaId,
+  ouiaSafe,
+  alignments,
+  contextProps,
+  minWidth,
+  menuAppendTo = 'inline',
+  isFlipEnabled = true,
+  zIndex = 9999,
+  ...props
+}: DropdownProps) => (
+  <DropdownContext.Provider
+    value={{
+      onSelect: (event) => onSelect && onSelect(event),
+      toggleTextClass: styles.dropdownToggleText,
+      toggleIconClass: styles.dropdownToggleImage,
+      toggleIndicatorClass: styles.dropdownToggleIcon,
+      menuClass: styles.dropdownMenu,
+      itemClass: styles.dropdownMenuItem,
+      toggleClass: styles.dropdownToggle,
+      baseClass: styles.dropdown,
+      baseComponent: 'div',
+      sectionClass: styles.dropdownGroup,
+      sectionTitleClass: styles.dropdownGroupTitle,
+      sectionComponent: 'section',
+      disabledClass: styles.modifiers.disabled,
+      plainTextClass: styles.modifiers.text,
+      ouiaId: useOUIAId(Dropdown.displayName, ouiaId),
+      ouiaSafe,
+      ouiaComponentType: Dropdown.displayName,
+      alignments,
+      ...contextProps
+    }}
+  >
+    <DropdownWithContext
+      menuAppendTo={menuAppendTo}
+      isFlipEnabled={isFlipEnabled}
+      zIndex={zIndex}
+      minWidth={minWidth}
+      {...props}
+    />
+  </DropdownContext.Provider>
+);
+Dropdown.displayName = 'Dropdown';

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { DropdownContext } from './dropdownConstants';
+
+export interface DropdownGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+  /** Checkboxes within group */
+  children?: React.ReactNode;
+  /** Additional classes added to the DropdownGroup control */
+  className?: string;
+  /** Group label */
+  label?: React.ReactNode;
+}
+
+export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({
+  children = null,
+  className = '',
+  label = '',
+  ...props
+}: DropdownGroupProps) => (
+  <DropdownContext.Consumer>
+    {({ sectionClass, sectionTitleClass, sectionComponent }) => {
+      const SectionComponent = sectionComponent as any;
+      return (
+        <SectionComponent className={css(sectionClass, className)} {...props}>
+          {label && (
+            <h1 className={css(sectionTitleClass)} aria-hidden>
+              {label}
+            </h1>
+          )}
+          <ul role="none">{children}</ul>
+        </SectionComponent>
+      );
+    }}
+  </DropdownContext.Consumer>
+);
+DropdownGroup.displayName = 'DropdownGroup';

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

@@ -0,0 +1,113 @@
+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/{components → deprecated/components}/Dropdown/DropdownMenu.tsx

@@ -2,7 +2,7 @@ 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 { keyHandler, formatBreakpointMods } from '../../../helpers/util';
 import { DropdownPosition, DropdownArrowContext, DropdownContext } from './dropdownConstants';
 
 export interface DropdownMenuProps {
@@ -62,7 +62,9 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
 
     if (autoFocus) {
       // Focus first non-disabled element
-      const focusTargetCollection = this.refsCollection.find(ref => ref && ref[0] && !ref[0].hasAttribute('disabled'));
+      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());
@@ -84,7 +86,7 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
   onKeyDown = (event: any) => {
     if (
       !this.props.isOpen ||
-      !Array.from(document.activeElement.classList).find(className =>
+      !Array.from(document.activeElement.classList).find((className) =>
         DropdownMenu.validToggleClasses.concat(this.context.toggleClass).includes(className)
       )
     ) {
@@ -92,7 +94,7 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
     }
     const refs = this.refsCollection;
     if (event.key === 'ArrowDown') {
-      const firstFocusTargetCollection = refs.find(ref => ref && ref[0] && !ref[0].hasAttribute('disabled'));
+      const firstFocusTargetCollection = refs.find((ref) => ref && ref[0] && !ref[0].hasAttribute('disabled'));
       DropdownMenu.focusFirstRef(firstFocusTargetCollection);
       event.stopPropagation();
     } else if (event.key === 'ArrowUp') {
@@ -141,12 +143,12 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
     const { children, isGrouped } = this.props;
     if (isGrouped) {
       let index = 0;
-      return React.Children.map(children, groupedChildren => {
+      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 =>
+            props.children = React.Children.map(group.props.children, (option) =>
               React.cloneElement(option as React.ReactElement, {
                 index: index++
               })
@@ -168,17 +170,8 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
   }
 
   render() {
-    const {
-      className,
-      isOpen,
-      position,
-      children,
-      component,
-      isGrouped,
-      setMenuComponentRef,
-      alignments,
-      ...props
-    } = this.props;
+    const { className, isOpen, position, children, component, isGrouped, setMenuComponentRef, alignments, ...props } =
+      this.props;
     return (
       <DropdownArrowContext.Provider
         value={{
@@ -197,7 +190,7 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
                   className
                 )}
                 hidden={!isOpen}
-                onClick={event => onSelect && onSelect(event)}
+                onClick={(event) => onSelect && onSelect(event)}
                 ref={setMenuComponentRef}
               >
                 {children}

package/src/{components → deprecated/components}/Dropdown/DropdownSeparator.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { DropdownArrowContext } from './dropdownConstants';
 import { InternalDropdownItem } from './InternalDropdownItem';
-import { Divider, DividerVariant } from '../Divider';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+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 */
@@ -26,7 +26,7 @@ export const DropdownSeparator: React.FunctionComponent<SeparatorProps> = ({
   const ouiaProps = useOUIAProps(DropdownSeparator.displayName, ouiaId, ouiaSafe);
   return (
     <DropdownArrowContext.Consumer>
-      {context => (
+      {(context) => (
         <InternalDropdownItem
           {...props}
           context={context}

package/src/{components → deprecated/components}/Dropdown/DropdownToggle.tsx

@@ -4,7 +4,7 @@ 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';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
 
 export interface DropdownToggleProps extends React.HTMLProps<HTMLButtonElement>, OUIAProps {
   /** HTML ID of dropdown toggle */

package/src/{components → deprecated/components}/Dropdown/DropdownToggleCheckbox.tsx

@@ -1,9 +1,9 @@
 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 '../Spinner';
+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'>,

package/src/{components → deprecated/components}/Dropdown/DropdownWithContext.tsx

@@ -4,9 +4,9 @@ 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';
+import { getOUIAProps, OUIAProps } from '../../../helpers';
+import { PickOptional } from '../../../helpers/typeUtils';
+import { Popper } from '../../../helpers/Popper/Popper';
 
 export class DropdownWithContext extends React.Component<DropdownProps & OUIAProps> {
   static displayName = 'DropdownWithContext';

package/src/{components → deprecated/components}/Dropdown/InternalDropdownItem.tsx

@@ -1,9 +1,9 @@
 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 '../Tooltip';
+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> {

package/src/{components → deprecated/components}/Dropdown/Toggle.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownContext } from './dropdownConstants';
 import { css } from '@patternfly/react-styles';
-import { KeyTypes } from '../../helpers/constants';
-import { PickOptional } from '../../helpers/typeUtils';
+import { KeyTypes } from '../../../helpers/constants';
+import { PickOptional } from '../../../helpers/typeUtils';
 
 export interface ToggleProps {
   /** HTML ID of dropdown toggle */
@@ -166,10 +166,10 @@ export class Toggle extends React.Component<ToggleProps> {
               className
             )}
             type={type || 'button'}
-            onClick={event => onToggle?.(event, !isOpen)}
+            onClick={(event) => onToggle?.(event, !isOpen)}
             aria-expanded={isOpen}
             aria-haspopup={ariaHasPopup}
-            onKeyDown={event => this.onKeyDown(event)}
+            onKeyDown={(event) => this.onKeyDown(event)}
             disabled={isDisabled}
           >
             {children}