@patternfly/react-core 4.227.8 → 4.227.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.227.8",
+  "version": "4.227.9",
   "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.8",
-    "@patternfly/react-styles": "^4.77.8",
-    "@patternfly/react-tokens": "^4.79.8",
+    "@patternfly/react-icons": "^4.78.9",
+    "@patternfly/react-styles": "^4.77.9",
+    "@patternfly/react-tokens": "^4.79.9",
     "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.205.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": "09b80fb1de7a57f0917554a36d2e7422d70f551f"
+  "gitHead": "997f82511b3461fe6b960fc9412b17ee94864352"
 }

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} />
 ));
 

package/src/components/TextInputGroup/TextInputGroup.tsx

@@ -9,6 +9,8 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Adds disabled styling and a disabled context value which text input group main hooks into for the input itself */
   isDisabled?: boolean;
+  /** Flag to indicate the toggle has no border or background */
+  isPlain?: boolean;
   /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
@@ -21,6 +23,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   children,
   className,
   isDisabled,
+  isPlain,
   innerRef,
   ...props
 }: TextInputGroupProps) => {
@@ -30,7 +33,12 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
     <TextInputGroupContext.Provider value={{ isDisabled }}>
       <div
         ref={textInputGroupRef}
-        className={css(styles.textInputGroup, isDisabled && styles.modifiers.disabled, className)}
+        className={css(
+          styles.textInputGroup,
+          isDisabled && styles.modifiers.disabled,
+          isPlain && styles.modifiers.plain,
+          className
+        )}
         {...props}
       >
         {children}

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -37,7 +37,7 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   value?: string | number;
   /** Placeholder value for the input */
   placeholder?: string;
-  /** @hide A reference object to attach to the input box */
+  /** A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
 

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -20,6 +20,9 @@ import pfIcon from './examples/pf-logo-small.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import avatarImg from './examples/avatarImg.svg';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Menu/menu';
 
 ## Demos
 
@@ -45,6 +48,11 @@ Composable menus currently require consumer keyboard handling and use of our und
 ```ts isBeta file="./examples/ComposableSimpleCheckboxSelect.tsx"
 ```
 
+### Composable typeahead select
+
+```ts file="./examples/ComposableTypeaheadSelect.tsx"
+```
+
 ### Composable drilldown menu
 
 ```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"

package/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx

@@ -0,0 +1,196 @@
+import React from 'react';
+
+import {
+  Menu,
+  MenuContent,
+  MenuList,
+  MenuItem,
+  Popper,
+  MenuToggle,
+  TextInputGroup,
+  MenuItemProps,
+  Button,
+  TextInputGroupUtilities,
+  TextInputGroupMain,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
+
+const intitalMenuItems: MenuItemProps[] = [
+  { itemId: 'Option 1', children: 'Option 1' },
+  { itemId: 'Option 2', children: 'Option 2' },
+  { itemId: 'Option 3', children: 'Option 3', icon: <TableIcon aria-hidden /> }
+];
+
+export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState<string>('');
+  const [menuItems, setMenuItems] = React.useState<MenuItemProps[]>(intitalMenuItems);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  React.useEffect(() => {
+    let newMenuItems: MenuItemProps[] = intitalMenuItems;
+
+    // Filter menu items based on the text input value when one exists
+    if (inputValue) {
+      newMenuItems = intitalMenuItems.filter(menuItem =>
+        String(menuItem.children)
+          .toLowerCase()
+          .includes(inputValue.toLowerCase())
+      );
+
+      // When no options are found after filtering, display 'No results found'
+      if (!newMenuItems.length) {
+        newMenuItems = [{ isDisabled: true, children: 'No results found' }];
+      }
+    }
+
+    setMenuItems(newMenuItems);
+  }, [inputValue]);
+
+  const focusOnInput = () => menuToggleRef.current?.querySelector('input')?.focus();
+
+  const onMenuSelect = (_event: React.MouseEvent<Element, MouseEvent>, itemId: string | number) => {
+    if (itemId) {
+      setInputValue(itemId.toString());
+      setIsSelected(true);
+    }
+
+    setIsMenuOpen(false);
+    setFocusedItemIndex(null);
+    focusOnInput();
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus;
+
+    if (isMenuOpen) {
+      if (key === 'ArrowUp') {
+        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+        if (focusedItemIndex === null || focusedItemIndex === 0) {
+          indexToFocus = menuItems.length - 1;
+        } else {
+          indexToFocus = focusedItemIndex - 1;
+        }
+      }
+
+      if (key === 'ArrowDown') {
+        // When no index is set or at the last index, focus to the first, otherwise increment focus index
+        if (focusedItemIndex === null || focusedItemIndex === menuItems.length - 1) {
+          indexToFocus = 0;
+        } else {
+          indexToFocus = focusedItemIndex + 1;
+        }
+      }
+
+      setFocusedItemIndex(indexToFocus);
+    }
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const enabledMenuItems = menuItems.filter(menuItem => !menuItem.isDisabled);
+    const [firstMenuItem] = enabledMenuItems;
+    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+
+    switch (event.key) {
+      // Select the first available option
+      case 'Enter':
+        if (isMenuOpen) {
+          setInputValue(String(focusedItem.children));
+          setIsSelected(true);
+        }
+
+        setIsMenuOpen(prevIsOpen => !prevIsOpen);
+        setFocusedItemIndex(null);
+        focusOnInput();
+
+        break;
+      case 'Tab':
+      case 'Escape':
+        setIsMenuOpen(false);
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        handleMenuArrowKeys(event.key);
+        break;
+      default:
+        !isMenuOpen && setIsMenuOpen(true);
+    }
+  };
+
+  // Close the menu when a click occurs outside of the menu toggle content
+  const onDocumentClick = (event: MouseEvent) => {
+    if (!menuToggleRef.current?.contains(event?.target as HTMLElement)) {
+      setIsMenuOpen(false);
+    }
+  };
+
+  const toggleMenuOpen = () => {
+    setIsMenuOpen(prevIsOpen => !prevIsOpen);
+    textInputRef.current?.focus();
+  };
+
+  const onTextInputChange = (value: string) => {
+    setInputValue(value);
+    setIsSelected(false);
+  };
+
+  return (
+    <Popper
+      trigger={
+        <MenuToggle
+          variant="typeahead"
+          onClick={toggleMenuOpen}
+          innerRef={menuToggleRef}
+          isExpanded={isMenuOpen}
+          isFullWidth
+        >
+          <TextInputGroup isPlain>
+            <TextInputGroupMain
+              value={inputValue}
+              onClick={toggleMenuOpen}
+              onChange={onTextInputChange}
+              onKeyDown={onInputKeyDown}
+              id="typeahead-select-input"
+              autoComplete="off"
+              innerRef={textInputRef}
+            />
+
+            <TextInputGroupUtilities>
+              {!!inputValue && (
+                <Button variant="plain" onClick={() => setInputValue('')} aria-label="Clear input value">
+                  <TimesIcon aria-hidden />
+                </Button>
+              )}
+            </TextInputGroupUtilities>
+          </TextInputGroup>
+        </MenuToggle>
+      }
+      popper={
+        <Menu id="select-menu" onSelect={onMenuSelect} selected={isSelected && inputValue}>
+          <MenuContent>
+            <MenuList>
+              {menuItems.map((itemProps, index) => (
+                <MenuItem
+                  key={itemProps.itemId || itemProps.children}
+                  isFocused={focusedItemIndex === index}
+                  className={itemProps.className}
+                  onClick={() => setIsSelected(true)}
+                  {...itemProps}
+                  ref={null}
+                />
+              ))}
+            </MenuList>
+          </MenuContent>
+        </Menu>
+      }
+      isVisible={isMenuOpen}
+      onDocumentClick={onDocumentClick}
+    />
+  );
+};