@patternfly/react-core 4.245.0 → 4.247.0

package/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap

@@ -75,7 +75,6 @@ exports[`renders compact no background successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -126,7 +125,6 @@ exports[`renders compact no background successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -179,7 +177,6 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -230,7 +227,6 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -281,7 +277,6 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -401,7 +396,6 @@ exports[`renders compact successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -452,7 +446,6 @@ exports[`renders compact successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -505,7 +498,6 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -556,7 +548,6 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -607,7 +598,6 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -723,7 +713,6 @@ exports[`renders guides successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -770,7 +759,6 @@ exports[`renders guides successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -819,7 +807,6 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -866,7 +853,6 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -913,7 +899,6 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1025,7 +1010,6 @@ exports[`tree view renders active successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1072,7 +1056,6 @@ exports[`tree view renders active successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1121,7 +1104,6 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1168,7 +1150,6 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1215,7 +1196,6 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1336,7 +1316,6 @@ exports[`tree view renders badges successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1392,7 +1371,6 @@ exports[`tree view renders badges successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1450,7 +1428,6 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1506,7 +1483,6 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1562,7 +1538,6 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1683,7 +1658,6 @@ exports[`tree view renders basic successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1730,7 +1704,6 @@ exports[`tree view renders basic successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1779,7 +1752,6 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1826,7 +1798,6 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1873,7 +1844,6 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1937,7 +1907,6 @@ exports[`tree view renders checkboxes successfully 1`] = `
             class="pf-c-tree-view__node pf-m-selectable"
             for="checkbox-id18"
             id="label-checkbox-id18"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1999,7 +1968,6 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 class="pf-c-tree-view__node pf-m-selectable"
                 for="checkbox-id19"
                 id="label-checkbox-id19"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2058,7 +2026,6 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 class="pf-c-tree-view__node pf-m-selectable"
                 for="checkbox-id20"
                 id="label-checkbox-id20"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2119,7 +2086,6 @@ exports[`tree view renders checkboxes successfully 1`] = `
             class="pf-c-tree-view__node pf-m-selectable"
             for="checkbox-id21"
             id="label-checkbox-id21"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2178,7 +2144,6 @@ exports[`tree view renders checkboxes successfully 1`] = `
             class="pf-c-tree-view__node pf-m-selectable"
             for="checkbox-id22"
             id="label-checkbox-id22"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2237,7 +2202,6 @@ exports[`tree view renders checkboxes successfully 1`] = `
             class="pf-c-tree-view__node pf-m-selectable"
             for="checkbox-id23"
             id="label-checkbox-id23"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2376,7 +2340,6 @@ exports[`tree view renders icons successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2440,7 +2403,6 @@ exports[`tree view renders icons successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2506,7 +2468,6 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2570,7 +2531,6 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2634,7 +2594,6 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2792,7 +2751,6 @@ exports[`tree view renders individual flag options successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2839,7 +2797,6 @@ exports[`tree view renders individual flag options successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2897,7 +2854,6 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2980,7 +2936,6 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -3027,7 +2982,6 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -3161,7 +3115,6 @@ exports[`tree view renders toolbar successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -3208,7 +3161,6 @@ exports[`tree view renders toolbar successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
-                tabindex="-1"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -3257,7 +3209,6 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -3304,7 +3255,6 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -3351,7 +3301,6 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
-            tabindex="-1"
           >
             <span
               class="pf-c-tree-view__node-container"

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -19,8 +19,8 @@ import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 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 avatarImg from './examples/avatarImg.svg';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 
@@ -50,7 +50,12 @@ Composable menus currently require consumer keyboard handling and use of our und
 
 ### Composable typeahead select
 
-```ts file="./examples/ComposableTypeaheadSelect.tsx"
+```ts isBeta file="./examples/ComposableTypeaheadSelect.tsx"
+```
+
+### Composable multiple typeahead select
+
+```ts isBeta file="./examples/ComposableMultipleTypeaheadSelect.tsx"
 ```
 
 ### Composable drilldown menu

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

@@ -0,0 +1,220 @@
+import React from 'react';
+import {
+  Menu,
+  MenuContent,
+  MenuList,
+  MenuItem,
+  MenuItemProps,
+  MenuToggle,
+  MenuToggleElement,
+  Popper,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  ChipGroup,
+  Chip,
+  Button
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+const intitalMenuItems = [
+  { itemId: 'Option 1', children: 'Option 1' },
+  { itemId: 'Option 2', children: 'Option 2' },
+  { itemId: 'Option 3', children: 'Option 3' }
+];
+
+export const ComposableMultipleTypeaheadSelect: 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 [selected, setSelected] = React.useState<string[]>([]);
+  const containerRef = React.useRef<HTMLDivElement>();
+  const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
+  const textInputRef = React.useRef<HTMLInputElement>();
+  const menuRef = React.useRef<HTMLDivElement>();
+
+  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 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) {
+          setIsMenuOpen(prevIsOpen => !prevIsOpen);
+        } else {
+          onMenuSelect(focusedItem.itemId as string);
+        }
+        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 (
+      isMenuOpen &&
+      !menuToggleRef.current?.contains(event?.target as HTMLElement) &&
+      !menuRef?.current?.contains(event.target as Node)
+    ) {
+      setIsMenuOpen(false);
+    }
+  };
+
+  const toggleMenuOpen = () => {
+    setIsMenuOpen(!isMenuOpen);
+    textInputRef.current?.focus();
+  };
+
+  const onTextInputChange = (value: string) => {
+    setInputValue(value);
+  };
+
+  const onMenuSelect = (itemId: string) => {
+    if (itemId) {
+      setSelected(
+        selected.includes(itemId) ? selected.filter(selection => selection !== itemId) : [...selected, itemId]
+      );
+    }
+  };
+
+  const toggle = (
+    <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}
+        >
+          <ChipGroup>
+            {selected.map((selection, index) => (
+              <Chip
+                key={index}
+                onClick={ev => {
+                  ev.stopPropagation();
+                  onMenuSelect(selection);
+                }}
+              >
+                {selection}
+              </Chip>
+            ))}
+          </ChipGroup>
+        </TextInputGroupMain>
+        <TextInputGroupUtilities>
+          {selected.length > 0 && (
+            <Button
+              variant="plain"
+              onClick={() => {
+                setInputValue('');
+                setSelected([]);
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+  const menu = (
+    <Menu
+      ref={menuRef as React.Ref<HTMLDivElement>}
+      id="multiple-typeahead-select-menu"
+      onSelect={(_ev, itemId) => onMenuSelect(itemId?.toString() as string)}
+      selected={selected}
+    >
+      <MenuContent>
+        <MenuList>
+          {menuItems.map((itemProps, index) => (
+            <MenuItem
+              key={itemProps.itemId || itemProps.children}
+              isFocused={focusedItemIndex === index}
+              className={itemProps.className}
+              {...itemProps}
+              ref={null}
+            />
+          ))}
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+  return (
+    <div ref={containerRef as React.Ref<HTMLDivElement>}>
+      <Popper
+        trigger={toggle}
+        popper={menu}
+        appendTo={containerRef.current}
+        isVisible={isMenuOpen}
+        onDocumentClick={onDocumentClick}
+      />
+    </div>
+  );
+};