@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.49

package/src/components/Dropdown/Dropdown.tsx

@@ -1,115 +1,130 @@
-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';
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import { Menu, MenuContent, MenuProps } from '../Menu';
+import { Popper, PopperProps } from '../../helpers/Popper/Popper';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** Anything which can be rendered in a dropdown */
+export interface DropdownProps extends MenuProps, OUIAProps {
+  /** Anything which can be rendered in a dropdown. */
   children?: React.ReactNode;
-  /** Classes applied to root element of dropdown */
+  /** 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 */
+  /** Renderer for a custom dropdown toggle. Forwards a ref to the toggle. */
+  toggle: (toggleRef: React.RefObject<any>) => React.ReactNode;
+  /** Flag to indicate if menu is opened.*/
   isOpen?: boolean;
-  /** Display the toggle with no border or background */
+  /** Function callback called when user selects item. */
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
+  /** Callback to allow the dropdown component to change the open state of the menu.
+   * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Indicates if the menu should be without the outer box-shadow. */
   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;
+  /** Indicates if the menu should be scrollable. */
+  isScrollable?: boolean;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
   /** 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;
+  /** z-index of the dropdown menu */
+  zIndex?: number;
+  /** Additional properties to pass to the Popper */
+  popperProps?: Partial<PopperProps>;
 }
 
-export const Dropdown: React.FunctionComponent<DropdownProps> = ({
+const DropdownBase: React.FunctionComponent<DropdownProps> = ({
+  children,
+  className,
   onSelect,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
+  isOpen,
+  toggle,
+  onOpenChange,
+  isPlain,
+  isScrollable,
+  innerRef,
   ouiaId,
-  ouiaSafe,
-  alignments,
-  contextProps,
-  minWidth,
-  menuAppendTo = 'inline',
-  isFlipEnabled = true,
+  ouiaSafe = true,
   zIndex = 9999,
+  popperProps,
   ...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}
+}: DropdownProps) => {
+  const localMenuRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
+  const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
+
+  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  React.useEffect(() => {
+    const handleMenuKeys = (event: KeyboardEvent) => {
+      // Close the menu on tab or escape if onOpenChange is provided
+      if (
+        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
+        toggleRef.current?.contains(event.target as Node)
+      ) {
+        if (event.key === 'Escape' || event.key === 'Tab') {
+          onOpenChange(false);
+          toggleRef.current?.focus();
+        }
+      }
+    };
+
+    const handleClick = (event: MouseEvent) => {
+      // toggle was clicked open via keyboard, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+        setTimeout(() => {
+          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
+          firstElement && (firstElement as HTMLElement).focus();
+        }, 0);
+      }
+
+      // If the event is not on the toggle and onOpenChange callback is provided, close the menu
+      if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
+        if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+          onOpenChange(false);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClick);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClick);
+    };
+  }, [isOpen, menuRef, onOpenChange]);
+
+  const menu = (
+    <Menu
+      className={css(className)}
+      ref={menuRef}
+      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
+      isPlain={isPlain}
+      isScrollable={isScrollable}
       {...props}
-    />
-  </DropdownContext.Provider>
-);
+    >
+      <MenuContent>{children}</MenuContent>
+    </Menu>
+  );
+  return (
+    <div ref={containerRef} {...ouiaProps}>
+      <Popper
+        trigger={toggle(toggleRef)}
+        triggerRef={toggleRef}
+        popper={menu}
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        isVisible={isOpen}
+        zIndex={zIndex}
+        {...popperProps}
+      />
+    </div>
+  );
+};
+
+export const Dropdown = React.forwardRef((props: DropdownProps, ref: React.Ref<any>) => (
+  <DropdownBase innerRef={ref} {...props} />
+));
 Dropdown.displayName = 'Dropdown';

package/src/components/Dropdown/DropdownGroup.tsx

@@ -1,36 +1,25 @@
-import * as React from 'react';
+import React from 'react';
 import { css } from '@patternfly/react-styles';
-import { DropdownContext } from './dropdownConstants';
+import { MenuGroupProps, MenuGroup } from '../Menu';
 
-export interface DropdownGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
-  /** Checkboxes within group */
-  children?: React.ReactNode;
-  /** Additional classes added to the DropdownGroup control */
+export interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {
+  /** Anything which can be rendered in a dropdown group. */
+  children: React.ReactNode;
+  /** Classes applied to root element of dropdown group */
   className?: string;
-  /** Group label */
-  label?: React.ReactNode;
+  /** Label of the dropdown group */
+  label?: string;
 }
 
 export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({
-  children = null,
-  className = '',
-  label = '',
+  children,
+  className,
+  label,
+  labelHeadingLevel = 'h1',
   ...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>
+  <MenuGroup className={css(className)} label={label} labelHeadingLevel={labelHeadingLevel} {...props}>
+    {children}
+  </MenuGroup>
 );
 DropdownGroup.displayName = 'DropdownGroup';

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,113 +1,37 @@
-import * as React from 'react';
-import { InternalDropdownItemProps, InternalDropdownItem } from './InternalDropdownItem';
-import { DropdownArrowContext } from './dropdownConstants';
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import { MenuItemProps, MenuItem } from '../Menu';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface DropdownItemProps extends Omit<InternalDropdownItemProps, 'tabIndex'>, OUIAProps {
-  /** Anything which can be rendered as dropdown item */
+export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps {
+  /** Anything which can be rendered in a 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 of the dropdown item */
   description?: React.ReactNode;
+  /** Identifies the component in the dropdown onSelect callback */
+  itemId?: any;
   /** 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> = ({
+export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
   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,
+  description,
+  itemId,
   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>
+    <MenuItem className={css(className)} description={description} itemId={itemId} {...ouiaProps} {...props}>
+      {children}
+    </MenuItem>
   );
 };
-
 DropdownItem.displayName = 'DropdownItem';

package/src/{next/components → components}/Dropdown/DropdownList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
-import { MenuListProps, MenuList } from '../../../components/Menu';
+import { MenuListProps, MenuList } from '../Menu';
 
 export interface DropdownListProps extends MenuListProps {
   /** Anything which can be rendered in a dropdown list */