@patternfly/react-core 5.0.0-alpha.109 → 5.0.0-alpha.110

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

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

@@ -1,70 +0,0 @@
-import React from 'react';
-import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
-
-export const ComposableSimpleDropdown: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (!isOpen) {
-      return;
-    }
-    if (menuRef.current?.contains(event.target as Node) || toggleRef.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)');
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
-    setIsOpen(!isOpen);
-  };
-
-  const toggle = (
-    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-      {isOpen ? 'Expanded' : 'Collapsed'}
-    </MenuToggle>
-  );
-  const menu = (
-    // eslint-disable-next-line no-console
-    <Menu ref={menuRef} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
-      <MenuContent>
-        <MenuList>
-          <MenuItem itemId={0}>Action</MenuItem>
-          <MenuItem itemId={1} to="#default-link2" onClick={(ev) => ev.preventDefault()}>
-            Link
-          </MenuItem>
-          <MenuItem isDisabled>Disabled Action</MenuItem>
-          <MenuItem isDisabled to="#default-link4">
-            Disabled Link
-          </MenuItem>
-        </MenuList>
-      </MenuContent>
-    </Menu>
-  );
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
-};

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

@@ -1,83 +0,0 @@
-import React from 'react';
-import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
-import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
-
-export const ComposableSimpleSelect: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-
-  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)');
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
-    setIsOpen(!isOpen);
-  };
-
-  const toggle = (
-    <MenuToggle
-      ref={toggleRef}
-      onClick={onToggleClick}
-      isExpanded={isOpen}
-      style={
-        {
-          width: '200px'
-        } as React.CSSProperties
-      }
-    >
-      {selected}
-    </MenuToggle>
-  );
-
-  function onSelect(event: React.MouseEvent | undefined, itemId: string | number | undefined) {
-    if (typeof itemId === 'undefined') {
-      return;
-    }
-
-    setSelected(itemId.toString());
-  }
-
-  const menu = (
-    <Menu ref={menuRef} id="select-menu" onSelect={onSelect} selected={selected}>
-      <MenuContent>
-        <MenuList>
-          <MenuItem itemId="Option 1">Option 1</MenuItem>
-          <MenuItem itemId="Option 2">Option 2</MenuItem>
-          <MenuItem itemId="Option 3" icon={<TableIcon aria-hidden />}>
-            Option 3
-          </MenuItem>
-        </MenuList>
-      </MenuContent>
-    </Menu>
-  );
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
-};