@patternfly/react-core 4.227.7 → 4.228.0

package/src/components/TreeView/examples/TreeView.md

@@ -88,7 +88,9 @@ class DefaultTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example1-Sources',
-        children: [{ name: 'Application 4', id: 'example1-App4', children: [{ name: 'Settings', id: 'example1-App4Settings' }] }]
+        children: [
+          { name: 'Application 4', id: 'example1-App4', children: [{ name: 'Settings', id: 'example1-App4Settings' }] }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -109,6 +111,106 @@ class DefaultTreeView extends React.Component {
 }
 ```
 
+### With separate selection and expansion
+
+The `hasSelectableNodes` modifier will separate the expansion and selection behaviors, allowing a parent node to be selected or deselected with toggling its expansion.
+
+```js
+import React from 'react';
+import { TreeView, Button } from '@patternfly/react-core';
+
+class SelectableNodesTreeView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { activeItems: {} };
+
+    this.onSelect = (evt, treeViewItem) => {
+      this.setState({
+        activeItems: [treeViewItem]
+      });
+    };
+  }
+
+  render() {
+    const { activeItems, allExpanded } = this.state;
+
+    const options = [
+      {
+        name: 'Application launcher',
+        id: 'SelNodesTreeView-AppLaunch',
+        children: [
+          {
+            name: 'Application 1',
+            id: 'SelNodesTreeView-App1',
+            children: [
+              { name: 'Settings', id: 'SelNodesTreeView-App1Settings' },
+              { name: 'Current', id: 'SelNodesTreeView-App1Current' }
+            ]
+          },
+          {
+            name: 'Application 2',
+            id: 'SelNodesTreeView-App2',
+            children: [
+              { name: 'Settings', id: 'SelNodesTreeView-App2Settings' },
+              {
+                name: 'Loader',
+                id: 'SelNodesTreeView-App2Loader',
+                children: [
+                  { name: 'Loading App 1', id: 'SelNodesTreeView-LoadApp1' },
+                  { name: 'Loading App 2', id: 'SelNodesTreeView-LoadApp2' },
+                  { name: 'Loading App 3', id: 'SelNodesTreeView-LoadApp3' }
+                ]
+              }
+            ]
+          }
+        ],
+        defaultExpanded: true
+      },
+      {
+        name: 'Cost management',
+        id: 'SelNodesTreeView-Cost',
+        children: [
+          {
+            name: 'Application 3',
+            id: 'SelNodesTreeView-App3',
+            children: [
+              { name: 'Settings', id: 'SelNodesTreeView-App3Settings' },
+              { name: 'Current', id: 'SelNodesTreeView-App3Current' }
+            ]
+          }
+        ]
+      },
+      {
+        name: 'Sources',
+        id: 'SelNodesTreeView-Sources',
+        children: [
+          {
+            name: 'Application 4',
+            id: 'SelNodesTreeView-App4',
+            children: [{ name: 'Settings', id: 'SelNodesTreeView-App4Settings' }]
+          }
+        ]
+      },
+      {
+        name: 'Really really really long folder name that overflows the container it is in',
+        id: 'SelNodesTreeView-Long',
+        children: [{ name: 'Application 5', id: 'SelNodesTreeView-App5' }]
+      }
+    ];
+    return (
+      <TreeView
+        hasSelectableNodes
+        data={options}
+        activeItems={activeItems}
+        onSelect={this.onSelect}
+        allExpanded={allExpanded}
+      />
+    );
+  }
+}
+```
+
 ### With search
 
 ```js
@@ -168,7 +270,13 @@ class SearchTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example2-Sources',
-        children: [{ name: 'Application 4', id: 'example2-App4', children: [{ name: 'Settingexample2-s', id: 'example2-App4Settings' }] }]
+        children: [
+          {
+            name: 'Application 4',
+            id: 'example2-App4',
+            children: [{ name: 'Settingexample2-s', id: 'example2-App4Settings' }]
+          }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -357,7 +465,9 @@ class CheckboxTreeView extends React.Component {
         name: 'Really really really long folder name that overflows the container it is in',
         id: 'example3-Long',
         checkProps: { 'aria-label': 'long-check', checked: false },
-        children: [{ name: 'Application 5', id: 'example3-App5', checkProps: { 'aria-label': 'app-5-check', checked: false } }]
+        children: [
+          { name: 'Application 5', id: 'example3-App5', checkProps: { 'aria-label': 'app-5-check', checked: false } }
+        ]
       }
     ];
 
@@ -522,7 +632,9 @@ class IconTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example4-Sources',
-        children: [{ name: 'Application 4', id: 'example4-App4', children: [{ name: 'Settings', id: 'example4-App4Settings' }] }]
+        children: [
+          { name: 'Application 4', id: 'example4-App4', children: [{ name: 'Settings', id: 'example4-App4Settings' }] }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -613,7 +725,9 @@ class BadgesTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example5-Sources',
-        children: [{ name: 'Application 4', id: 'example5-App4', children: [{ name: 'Settings', id: 'example5-App4Settings' }] }]
+        children: [
+          { name: 'Application 4', id: 'example5-App4', children: [{ name: 'Settings', id: 'example5-App4Settings' }] }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -842,7 +956,9 @@ class IconTreeView extends React.Component {
       {
         name: 'Sources',
         id: 'example7-Sources',
-        children: [{ name: 'Application 4', id: 'example7-App4', children: [{ name: 'Settings', id: 'example7-App4Settings' }] }]
+        children: [
+          { name: 'Application 4', id: 'example7-App4', children: [{ name: 'Settings', id: 'example7-App4Settings' }] }
+        ]
       },
       {
         name: 'Really really really long folder name that overflows the container it is in',
@@ -911,7 +1027,9 @@ const GuidesTreeView: React.FunctionComponent = () => {
     {
       name: 'Sources',
       id: 'example8-Sources',
-      children: [{ name: 'Application 4', id: 'example8-App4', children: [{ name: 'Settings', id: 'example8-App4Settings' }] }]
+      children: [
+        { name: 'Application 4', id: 'example8-App4', children: [{ name: 'Settings', id: 'example8-App4Settings' }] }
+      ]
     },
     {
       name: 'Really really really long folder name that overflows the container it is in',

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