@patternfly/react-core 4.227.7 → 4.228.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.227.7",
+  "version": "4.228.0",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.78.7",
-    "@patternfly/react-styles": "^4.77.7",
-    "@patternfly/react-tokens": "^4.79.7",
+    "@patternfly/react-icons": "^4.79.0",
+    "@patternfly/react-styles": "^4.78.0",
+    "@patternfly/react-tokens": "^4.80.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.204.3",
+    "@patternfly/patternfly": "4.206.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "86dc74f93f58bd72ce6ac164e9bda25422494ca0"
+  "gitHead": "f02b0e0e72ea0aa326e1d512b1da0397b10e7f9a"
 }

package/src/components/Menu/MenuItem.tsx

@@ -50,6 +50,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   isExternalLink?: boolean;
   /** Flag indicating if the option is selected */
   isSelected?: boolean;
+  /** Flag indicating the item is focused */
+  isFocused?: boolean;
   /** @beta Flyout menu */
   flyoutMenu?: React.ReactElement;
   /** @beta Callback function when mouse leaves trigger */
@@ -88,6 +90,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   isDisabled = false,
   isExternalLink = false,
   isSelected = null,
+  isFocused,
   icon,
   actions,
   onShowFlyout,
@@ -290,6 +293,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
         _isOnPath && styles.modifiers.currentPath,
         isLoadButton && styles.modifiers.load,
         isLoading && styles.modifiers.loading,
+        isFocused && styles.modifiers.focus,
         className
       )}
       onMouseOver={onMouseOver}

package/src/components/MenuToggle/MenuToggle.tsx

@@ -4,8 +4,10 @@ import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
 
+export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
+
 export interface MenuToggleProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<MenuToggleElement>, MenuToggleElement>, 'ref'> {
   /** Content rendered inside the toggle */
   children?: React.ReactNode;
   /** Additional classes added to the toggle */
@@ -19,18 +21,18 @@ export interface MenuToggleProps
   /** Flag indicating the toggle takes up the full width of its parent */
   isFullWidth?: boolean;
   /** Variant styles of the menu toggle */
-  variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary';
+  variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
   /** Optional icon rendered inside the toggle, before the children content */
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
   /** Forwarded ref */
-  innerRef?: React.Ref<HTMLButtonElement>;
+  innerRef?: React.Ref<MenuToggleElement>;
 }
 
 export class MenuToggleBase extends React.Component<MenuToggleProps> {
   displayName = 'MenuToggleBase';
-  static defaultProps = {
+  static defaultProps: MenuToggleProps = {
     className: '',
     isExpanded: false,
     isDisabled: false,
@@ -51,24 +53,63 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       isFullWidth,
       variant,
       innerRef,
-      ...props
+      onClick,
+      'aria-label': ariaLabel,
+      ...otherProps
     } = this.props;
-
     const isPlain = variant === 'plain';
     const isPlainText = variant === 'plainText';
+    const isTypeahead = variant === 'typeahead';
+    const toggleControls = (
+      <span className={css(styles.menuToggleControls)}>
+        <span className={css(styles.menuToggleToggleIcon)}>
+          <CaretDownIcon aria-hidden />
+        </span>
+      </span>
+    );
 
     const content = (
-      <React.Fragment>
+      <>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
-        <span className="pf-c-menu-toggle__text">{children}</span>
-        {badge && <span className={css(styles.menuToggleCount)}>{badge as React.ReactNode}</span>}
-        <span className={css(styles.menuToggleControls)}>
-          <span className={css(styles.menuToggleToggleIcon)}>
-            <CaretDownIcon aria-hidden />
-          </span>
-        </span>
-      </React.Fragment>
+        {isTypeahead ? children : <span className="pf-c-menu-toggle__text">{children}</span>}
+        {badge && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+        {isTypeahead ? (
+          <button
+            type="button"
+            className={css(styles.menuToggleButton)}
+            aria-expanded={isExpanded}
+            onClick={onClick}
+            aria-label="Menu toggle"
+          >
+            {toggleControls}
+          </button>
+        ) : (
+          toggleControls
+        )}
+      </>
     );
+
+    const componentProps = {
+      className: css(
+        styles.menuToggle,
+        isExpanded && styles.modifiers.expanded,
+        variant === 'primary' && styles.modifiers.primary,
+        (isPlain || isPlainText) && styles.modifiers.plain,
+        isPlainText && styles.modifiers.text,
+        isFullHeight && styles.modifiers.fullHeight,
+        isTypeahead && styles.modifiers.typeahead,
+        isFullWidth && styles.modifiers.fullWidth,
+        className
+      ),
+      children: isPlain ? children : content,
+      ...(isDisabled && { disabled: true }),
+      ...otherProps
+    };
+
+    if (isTypeahead) {
+      return <div ref={innerRef as React.Ref<HTMLDivElement>} {...componentProps} />;
+    }
+
     return (
       <button
         className={css(
@@ -82,21 +123,18 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
           isFullWidth && styles.modifiers.fullWidth,
           className
         )}
+        ref={innerRef as React.Ref<HTMLButtonElement>}
         type="button"
-        aria-expanded={false}
-        ref={innerRef}
-        {...(isExpanded && { 'aria-expanded': true })}
-        {...(isDisabled && { disabled: true })}
-        {...props}
-      >
-        {isPlain && children}
-        {!isPlain && content}
-      </button>
+        aria-label={ariaLabel}
+        aria-expanded={isExpanded}
+        onClick={onClick}
+        {...componentProps}
+      />
     );
   }
 }
 
-export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<HTMLButtonElement>) => (
+export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<MenuToggleElement>) => (
   <MenuToggleBase innerRef={ref} {...props} />
 ));