@patternfly/react-core 6.0.0-alpha.97 → 6.0.0-alpha.99

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.96","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.98","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.96","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.98","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.96","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.98","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.97",
+  "version": "6.0.0-alpha.99",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5e19008b3872fc1fb2cdea963253d3d48e6cd329"
+  "gitHead": "a74cdba65be61e9f94424de4381af804050c409f"
 }

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -66,6 +66,7 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
           onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              size="sm"
               badge={
                 <Badge isRead screenReaderText="additional items">
                   {dropdownItems.length}

package/src/components/Dropdown/Dropdown.tsx

@@ -104,6 +104,22 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       ? localToggleRef
       : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
 
+  const prevIsOpen = React.useRef<boolean>(isOpen);
+  React.useEffect(() => {
+    // menu was opened, focus on first menu item
+    if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
+      setTimeout(() => {
+        const firstElement = menuRef?.current?.querySelector(
+          'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
+        );
+        firstElement && (firstElement as HTMLElement).focus();
+      }, 0);
+    }
+
+    prevIsOpen.current = isOpen;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
@@ -120,16 +136,6 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     };
 
     const handleClick = (event: MouseEvent) => {
-      // toggle was opened, focus on first menu item
-      if (isOpen && shouldFocusFirstItemOnOpen && toggleRef.current?.contains(event.target as Node)) {
-        setTimeout(() => {
-          const firstElement = menuRef?.current?.querySelector(
-            'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
-          );
-          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)) {

package/src/components/Menu/Menu.tsx

@@ -119,7 +119,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     if (this.context) {
       this.setState({ disableHover: this.context.disableHover });
     }
-    if (canUseDOM) {
+    if (canUseDOM && this.props.containsDrilldown) {
       window.addEventListener('transitionend', this.props.isRootMenu ? this.handleDrilldownTransition : null);
     }
 
@@ -127,7 +127,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
   }
 
   componentWillUnmount() {
-    if (canUseDOM) {
+    if (canUseDOM && this.props.containsDrilldown) {
       window.removeEventListener('transitionend', this.handleDrilldownTransition);
     }
   }

package/src/components/Menu/MenuContainer.tsx

@@ -37,6 +37,8 @@ export interface MenuContainerProps {
   zIndex?: number;
   /** Additional properties to pass to the Popper */
   popperProps?: MenuPopperProps;
+  /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
+  shouldFocusFirstItemOnOpen?: boolean;
 }
 
 /**
@@ -51,8 +53,25 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
   onOpenChange,
   zIndex = 9999,
   popperProps,
-  onOpenChangeKeys = ['Escape', 'Tab']
+  onOpenChangeKeys = ['Escape', 'Tab'],
+  shouldFocusFirstItemOnOpen = true
 }: MenuContainerProps) => {
+  const prevIsOpen = React.useRef<boolean>(isOpen);
+  React.useEffect(() => {
+    // menu was opened, focus on first menu item
+    if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
+      setTimeout(() => {
+        const firstElement = menuRef?.current?.querySelector(
+          'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
+        );
+        firstElement && (firstElement as HTMLElement).focus();
+      }, 0);
+    }
+
+    prevIsOpen.current = isOpen;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
@@ -68,16 +87,6 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
     };
 
     const handleClick = (event: MouseEvent) => {
-      // toggle was opened, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
-        setTimeout(() => {
-          const firstElement = menuRef?.current?.querySelector(
-            'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
-          );
-          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)) {

package/src/components/MenuToggle/MenuToggle.tsx

@@ -14,6 +14,11 @@ export enum MenuToggleStatus {
   warning = 'warning'
 }
 
+export enum MenuToggleSize {
+  default = 'default',
+  sm = 'sm'
+}
+
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
 export interface SplitButtonOptions {
@@ -58,6 +63,8 @@ export interface MenuToggleProps
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
+  /** Adds styling which affects the size of the menu toggle */
+  size?: 'default' | 'sm';
   /** @hide Forwarded ref */
   innerRef?: React.Ref<MenuToggleElement>;
   /** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */
@@ -78,6 +85,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
     isDisabled: false,
     isFullWidth: false,
     isFullHeight: false,
+    size: 'default',
     ouiaSafe: true
   };
 
@@ -104,6 +112,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       'aria-label': ariaLabel,
       ouiaId,
       ouiaSafe,
+      size,
       ...otherProps
     } = this.props;
     const isPlain = variant === 'plain';
@@ -170,6 +179,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isFullHeight && styles.modifiers.fullHeight,
       isFullWidth && styles.modifiers.fullWidth,
       isDisabled && styles.modifiers.disabled,
+      size === MenuToggleSize.sm && styles.modifiers.small,
       className
     );
 

package/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -6,6 +6,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -53,19 +54,25 @@ describe('menu toggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('shows success status', () => {
+  // Old snapshot tests end here; following tests should be kept when refactoring
+  test(`Renders with class ${styles.modifiers.small} when size="sm" is passed`, () => {
+    render(<MenuToggle size="sm">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.small);
+  });
+
+  test(`Renders with class ${styles.modifiers.success} when status="success" is passed`, () => {
     render(<MenuToggle status="success">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass('pf-m-success');
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.success);
   });
 
-  test('shows warning status', () => {
+  test(`Renders with class ${styles.modifiers.warning} when status="success" is passed`, () => {
     render(<MenuToggle status="warning">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass('pf-m-warning');
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.warning);
   });
 
-  test('shows danger status', () => {
+  test(`Renders with class ${styles.modifiers.danger} when status="success" is passed`, () => {
     render(<MenuToggle status="danger">Toggle</MenuToggle>);
-    expect(screen.getByRole('button')).toHaveClass('pf-m-danger');
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.danger);
   });
 
   test('split toggle passes onClick', async () => {

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -39,6 +39,14 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
+### Small toggle
+
+You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as within a [breadcrumb](/components/breadcrumb).
+
+```ts file="./MenuToggleSmall.tsx"
+
+```
+
 ### Disabled toggle
 
 To disable the selection and expansion of a toggle, use the `isDisabled` property.
@@ -193,7 +201,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Split toggle with checkbox
 
-To add a checkbox (or other action/control) to a menu toggle, use a split button. 
+To add a checkbox (or other action/control) to a menu toggle, use a split button.
 
 A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
 

package/src/components/MenuToggle/examples/MenuToggleSmall.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSmall: React.FunctionComponent = () => <MenuToggle size="sm">Small toggle</MenuToggle>;

package/src/components/Select/Select.tsx

@@ -110,6 +110,20 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       ? localToggleRef
       : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
 
+  const prevIsOpen = React.useRef<boolean>(isOpen);
+  React.useEffect(() => {
+    // menu was opened, focus on first menu item
+    if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
+      setTimeout(() => {
+        const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }, 0);
+    }
+
+    prevIsOpen.current = isOpen;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
@@ -127,14 +141,6 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     };
 
     const handleClick = (event: MouseEvent) => {
-      // toggle was opened, focus on first menu item
-      if (isOpen && shouldFocusFirstItemOnOpen && toggleRef.current?.contains(event.target as Node)) {
-        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)) {