@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

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

@@ -1,194 +0,0 @@
-import React from 'react';
-import {
-  MenuToggle,
-  Menu,
-  MenuContent,
-  MenuFooter,
-  MenuList,
-  MenuItem,
-  MenuSearch,
-  MenuSearchInput,
-  Popper,
-  Divider,
-  InputGroup,
-  Button,
-  ButtonVariant,
-  SearchInput
-} from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-
-interface ItemData {
-  text: string;
-  href?: string;
-  isDisabled?: boolean;
-}
-
-type ItemArrayType = (ItemData | string)[];
-
-export const ComposableContextSelector: React.FunctionComponent = () => {
-  const items: ItemArrayType = [
-    {
-      text: 'Action'
-    },
-    {
-      text: 'Link',
-      href: '#'
-    },
-    {
-      text: 'Disabled action',
-      isDisabled: true
-    },
-    {
-      text: 'Disabled link',
-      href: '#',
-      isDisabled: true
-    },
-    'My project',
-    'OpenShift cluster',
-    'Production Ansible',
-    'AWS',
-    'Azure',
-    'My project 2',
-    'OpenShift cluster ',
-    'Production Ansible 2 ',
-    'AWS 2',
-    'Azure 2'
-  ];
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState(typeof items[0] === 'string' ? items[0] : items[0].text);
-  const [filteredItems, setFilteredItems] = React.useState<ItemArrayType>(items);
-  const [searchInputValue, setSearchInputValue] = React.useState<string>('');
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuFooterBtnRef = React.useRef<HTMLButtonElement>(null);
-
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (!isOpen) {
-      return;
-    }
-    if (menuFooterBtnRef.current?.contains(event.target as Node)) {
-      if (event.key === 'Tab') {
-        if (event.shiftKey) {
-          return;
-        }
-        setIsOpen(!isOpen);
-        toggleRef.current?.focus();
-      }
-    }
-    if (menuRef.current?.contains(event.target as Node)) {
-      if (event.key === 'Escape') {
-        setIsOpen(!isOpen);
-        toggleRef.current?.focus();
-      }
-    }
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen, menuRef]);
-
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
-    setTimeout(() => {
-      if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector(
-          'li > button:not(:disabled), li > a:not(:disabled), input:not(:disabled)'
-        );
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
-    setIsOpen(!isOpen);
-  };
-
-  const toggle = (
-    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-      {selected}
-    </MenuToggle>
-  );
-
-  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: string | number) => {
-    setSelected(itemId.toString());
-    setIsOpen(!isOpen);
-  };
-
-  const onSearchInputChange = (value: string) => {
-    setSearchInputValue(value);
-  };
-
-  const onSearchButtonClick = () => {
-    const filtered =
-      searchInputValue === ''
-        ? items
-        : items.filter((item) => {
-            const str = typeof item === 'string' ? item : item.text;
-            return str.toLowerCase().indexOf(searchInputValue.toLowerCase()) !== -1;
-          });
-
-    setFilteredItems(filtered || []);
-    setIsOpen(true); // Keep menu open after search executed
-  };
-
-  const onEnterPressed = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      onSearchButtonClick();
-    }
-  };
-
-  const menu = (
-    <Menu ref={menuRef} id="context-selector" onSelect={onSelect} isScrollable>
-      <MenuSearch>
-        <MenuSearchInput>
-          <InputGroup>
-            <SearchInput
-              value={searchInputValue}
-              placeholder="Search"
-              onChange={(_event, value) => onSearchInputChange(value)}
-              onKeyPress={onEnterPressed}
-              aria-labelledby="pf-context-selector-search-button-id-1"
-            />
-            <Button
-              variant={ButtonVariant.control}
-              aria-label="Search menu items"
-              id="pf-context-selector-search-button-id-1"
-              onClick={onSearchButtonClick}
-            >
-              <SearchIcon aria-hidden="true" />
-            </Button>
-          </InputGroup>
-        </MenuSearchInput>
-      </MenuSearch>
-      <Divider />
-      <MenuContent maxMenuHeight="200px">
-        <MenuList>
-          {filteredItems.map((item, index) => {
-            const [itemText, isDisabled, href] =
-              typeof item === 'string' ? [item, null, null] : [item.text, item.isDisabled || null, item.href || null];
-            return (
-              <MenuItem itemId={itemText} key={index} isDisabled={isDisabled} to={href}>
-                {itemText}
-              </MenuItem>
-            );
-          })}
-        </MenuList>
-      </MenuContent>
-      <MenuFooter>
-        <Button ref={menuFooterBtnRef} variant="link" isInline>
-          Action
-        </Button>
-      </MenuFooter>
-    </Menu>
-  );
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
-};

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

@@ -1,253 +0,0 @@
-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 [activeItem, setActiveItem] = React.useState<string | null>(null);
-  const [selected, setSelected] = React.useState<string[]>([]);
-  const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
-  const textInputRef = React.useRef<HTMLInputElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<MenuToggleElement>(null);
-
-  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: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }];
-      }
-
-      // Open the menu when the input value changes and the new value is not empty
-      if (!isMenuOpen) {
-        setIsMenuOpen(true);
-      }
-    }
-
-    setMenuItems(newMenuItems);
-    setActiveItem(null);
-    setFocusedItemIndex(null);
-  }, [inputValue]);
-
-  const focusOnInput = () => textInputRef.current?.focus();
-
-  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 focusedItem = menuItems.filter((item) => !item.isDisabled)[indexToFocus];
-      setActiveItem(`composable-multi-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
-    }
-  };
-
-  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);
-          // Only allow selection if the first item is a valid, selectable option
-        } else if (isMenuOpen && focusedItem.itemId !== 'no results') {
-          onMenuSelect(focusedItem.itemId as string);
-        }
-        break;
-      case 'Tab':
-      case 'Escape':
-        setIsMenuOpen(false);
-        setActiveItem(null);
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        event.preventDefault();
-        handleMenuArrowKeys(event.key);
-        break;
-    }
-  };
-
-  // Close the menu when a click occurs outside of the menu, toggle, or input.
-  const onDocumentClick = (event: MouseEvent | undefined) => {
-    const isValidClick = [menuRef, menuToggleRef, textInputRef].some((ref) =>
-      ref?.current?.contains(event?.target as HTMLElement)
-    );
-    if (isMenuOpen && !isValidClick) {
-      setIsMenuOpen(false);
-      setActiveItem(null);
-    }
-  };
-
-  // Close the menu when focus is on a menu item and Escape or Tab is pressed
-  const onDocumentKeydown = (event: KeyboardEvent | undefined) => {
-    if (isMenuOpen && menuRef?.current?.contains(event?.target as HTMLElement)) {
-      if (event?.key === 'Escape') {
-        setIsMenuOpen(false);
-        focusOnInput();
-      } else if (event?.key === 'Tab') {
-        setIsMenuOpen(false);
-      }
-    }
-  };
-
-  const toggleMenuOpen = () => {
-    setIsMenuOpen(!isMenuOpen);
-    focusOnInput();
-  };
-
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setInputValue(value);
-  };
-
-  const onMenuSelect = (itemId: string) => {
-    // Only allow selection if the item is a valid, selectable option
-    if (itemId && itemId !== 'no results') {
-      setSelected(
-        selected.includes(itemId) ? selected.filter((selection) => selection !== itemId) : [...selected, itemId]
-      );
-    }
-
-    focusOnInput();
-  };
-
-  const toggle = (
-    <MenuToggle
-      ref={toggleRef}
-      variant="typeahead"
-      onClick={toggleMenuOpen}
-      innerRef={menuToggleRef}
-      isExpanded={isMenuOpen}
-      isFullWidth
-    >
-      <TextInputGroup isPlain>
-        <TextInputGroupMain
-          value={inputValue}
-          onClick={toggleMenuOpen}
-          onChange={onTextInputChange}
-          onKeyDown={onInputKeyDown}
-          id="multi-typeahead-select-input"
-          autoComplete="off"
-          innerRef={textInputRef}
-          {...(activeItem && { 'aria-activedescendant': activeItem })}
-          role="combobox"
-          isExpanded={isMenuOpen}
-          aria-controls="composable-multi-typeahead-listbox"
-        >
-          <ChipGroup aria-label="Current filters">
-            {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}
-      role="listbox"
-    >
-      <MenuContent>
-        <MenuList id="composable-multi-typeahead-listbox" isAriaMultiselectable>
-          {menuItems.map((itemProps, index) => (
-            <MenuItem
-              id={`composable-multi-typeahead-${itemProps.itemId.replace(' ', '-')}`}
-              key={itemProps.itemId || itemProps.children}
-              isFocused={focusedItemIndex === index}
-              className={itemProps.className}
-              {...itemProps}
-              ref={null}
-            />
-          ))}
-        </MenuList>
-      </MenuContent>
-    </Menu>
-  );
-  return (
-    <Popper
-      trigger={toggle}
-      triggerRef={toggleRef}
-      popper={menu}
-      popperRef={menuRef}
-      isVisible={isMenuOpen}
-      onDocumentClick={onDocumentClick}
-      onDocumentKeyDown={onDocumentKeydown}
-    />
-  );
-};

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

@@ -1,96 +0,0 @@
-import React from 'react';
-import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, MenuGroup, Popper, Divider } from '@patternfly/react-core';
-
-export const ComposableOptionsMenuVariants: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('');
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef?.current?.contains(event.target as Node)) {
-      if (event.key === 'Escape' || event.key === 'Tab') {
-        setIsOpen(!isOpen);
-        toggleRef?.current?.focus();
-      }
-    }
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef?.current?.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen, menuRef]);
-
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
-    setTimeout(() => {
-      if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector(
-          'li > button:not(:disabled), li > a:not(:disabled), input:not(:disabled)'
-        );
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
-    setIsOpen(!isOpen);
-  };
-
-  const toggle = (
-    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-      Options menu
-    </MenuToggle>
-  );
-
-  const menu = (
-    <Menu
-      ref={menuRef}
-      id="options-menu"
-      selected={selected}
-      onSelect={(_ev, itemId) => setSelected(itemId.toString())}
-    >
-      <MenuContent>
-        <MenuList>
-          <MenuItem itemId="0" isSelected={selected === '0'}>
-            Option 1
-          </MenuItem>
-          <MenuItem itemId="1" isSelected={selected === '1'} isDisabled>
-            Disabled Option
-          </MenuItem>
-          <Divider key="group1-divider" />
-          <MenuGroup label="Group 1">
-            <MenuList>
-              <MenuItem itemId="2" isSelected={selected === '2'}>
-                Option 1
-              </MenuItem>
-              <MenuItem itemId="3" isSelected={selected === '3'}>
-                Option 2
-              </MenuItem>
-            </MenuList>
-          </MenuGroup>
-          <Divider key="group2-divider" />
-          <MenuGroup label="Group 2">
-            <MenuList>
-              <MenuItem itemId="4" isSelected={selected === '4'}>
-                Option 1
-              </MenuItem>
-              <MenuItem itemId="5" isSelected={selected === '5'}>
-                Option 2
-              </MenuItem>
-            </MenuList>
-          </MenuGroup>
-        </MenuList>
-      </MenuContent>
-    </Menu>
-  );
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
-};

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

@@ -1,101 +0,0 @@
-import React from 'react';
-import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper, Badge } from '@patternfly/react-core';
-
-export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-
-  const handleMenuKeys = React.useCallback(
-    (event) => {
-      if (menuRef.current) {
-        if (isOpen && menuRef.current.contains(event.target as Node)) {
-          if (event.key === 'Escape' || event.key === 'Tab') {
-            setIsOpen(!isOpen);
-            toggleRef?.current?.focus();
-          }
-        }
-      }
-    },
-    [isOpen]
-  );
-
-  const handleClickOutside = React.useCallback(
-    (event) => {
-      if (isOpen && !menuRef?.current?.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    },
-    [isOpen]
-  );
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [handleClickOutside, handleMenuKeys]);
-
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
-    setTimeout(() => {
-      if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector('li > button:not(:disabled), li > a:not(:disabled)');
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
-    setIsOpen(!isOpen);
-  };
-
-  const onSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
-    if (typeof itemId === 'string' || typeof itemId === 'undefined') {
-      return;
-    }
-
-    if (selectedItems.includes(itemId)) {
-      setSelectedItems(selectedItems.filter((id) => id !== itemId));
-    } else {
-      setSelectedItems([...selectedItems, itemId]);
-    }
-  };
-
-  const toggle = (
-    <MenuToggle
-      ref={toggleRef}
-      {...(selectedItems.length > 0 && { badge: <Badge isRead>{selectedItems.length}</Badge> })}
-      onClick={onToggleClick}
-      isExpanded={isOpen}
-      style={
-        {
-          width: '220px'
-        } as React.CSSProperties
-      }
-    >
-      Filter by status
-    </MenuToggle>
-  );
-  const menu = (
-    <Menu ref={menuRef} id="select-menu" onSelect={onSelect} selected={selectedItems}>
-      <MenuContent>
-        <MenuList>
-          <MenuItem hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>
-            Debug
-          </MenuItem>
-          <MenuItem hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>
-            Info
-          </MenuItem>
-          <MenuItem hasCheckbox itemId={2} isSelected={selectedItems.includes(2)}>
-            Warn
-          </MenuItem>
-          <MenuItem hasCheckbox isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
-            Error
-          </MenuItem>
-        </MenuList>
-      </MenuContent>
-    </Menu>
-  );
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
-};