@patternfly/react-core 4.227.6 → 4.227.9

package/src/components/Pagination/examples/PaginationTop.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationTop: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      itemCount={523}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="pagination-options-menu-top"
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};

package/src/components/Switch/examples/Switch.md

@@ -10,177 +10,30 @@ ouia: true
 
 ### Basic
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class SimpleSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch
-        id="simple-switch"
-        label="Message when on"
-        labelOff="Message when off"
-        isChecked={isChecked}
-        onChange={this.handleChange}
-      />
-    );
-  }
-}
+```ts file="./SwitchBasic.tsx"
 ```
 
 ### Reversed Layout
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class ReversedSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch
-        id="reversed-switch"
-        label="Message when on"
-        labelOff="Message when off"
-        isChecked={isChecked}
-        onChange={this.handleChange}
-        isReversed
-      />
-    );
-  }
-}
+```ts file="./SwitchReversed.tsx"
 ```
 
 ### Without label
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class NoLabelSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch id="no-label-switch-on" aria-label="Message when on" isChecked={isChecked} onChange={this.handleChange} />
-    );
-  }
-}
+```ts file="./SwitchWithoutLabel.tsx"
 ```
 
 ### Checked with label
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class CheckedWithLabelSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch
-        label="Message when on"
-        labelOff="Message when off"
-        id="checked-with-label-switch-on"
-        aria-label="Message when on"
-        isChecked={isChecked}
-        hasCheckIcon
-        onChange={this.handleChange}
-      />
-    );
-  }
-}
+```ts file="./SwitchCheckedWithLabel.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Switch
-    id="disabled-switch-on"
-    aria-label="Message when on"
-    label="Message when on"
-    labelOff="Message when off"
-    isChecked
-    isDisabled
-  />
-  <br />
-  <Switch
-    id="disabled-switch-off"
-    aria-label="Message when on"
-    label="Message when on"
-    labelOff="Message when off"
-    isChecked={false}
-    isDisabled
-  />
-  <br />
-  <Switch id="disabled-no-label-switch-on" aria-label="Message when on" isChecked isDisabled />
-  <br />
-  <Switch id="disabled-no-label-switch-off" aria-label="Message when on" isChecked={false} isDisabled />
-</React.Fragment>;
+```ts file="./SwitchDisabled.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Switch
-    id="uncontrolled-switch-no-label"
-    aria-label="An uncontrolled switch with no label"
-    defaultChecked={false}
-  />
-  <br />
-  <Switch
-    id="uncontrolled-switch-with-label"
-    label="An uncontrolled switch"
-    defaultChecked={false}
-  />
-</React.Fragment>;
+```ts file="./SwitchUncontrolled.tsx"
 ```

package/src/components/Switch/examples/SwitchBasic.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchBasic: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <Switch
+      id="simple-switch"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked={isChecked}
+      onChange={handleChange}
+    />
+  );
+};

package/src/components/Switch/examples/SwitchCheckedWithLabel.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchCheckedWithLabel: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <Switch
+      label="Message when on"
+      labelOff="Message when off"
+      id="checked-with-label-switch-on"
+      aria-label="Message when on"
+      isChecked={isChecked}
+      hasCheckIcon
+      onChange={handleChange}
+    />
+  );
+};

package/src/components/Switch/examples/SwitchDisabled.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchDisabled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Switch
+      id="disabled-switch-on"
+      aria-label="Message when on"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked
+      isDisabled
+    />
+    <br />
+    <Switch
+      id="disabled-switch-off"
+      aria-label="Message when on"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked={false}
+      isDisabled
+    />
+    <br />
+    <Switch id="disabled-no-label-switch-on" aria-label="Message when on" isChecked isDisabled />
+    <br />
+    <Switch id="disabled-no-label-switch-off" aria-label="Message when on" isChecked={false} isDisabled />
+  </React.Fragment>
+);

package/src/components/Switch/examples/SwitchReversed.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchReversed: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <Switch
+      id="reversed-switch"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked={isChecked}
+      onChange={handleChange}
+      isReversed
+    />
+  );
+};

package/src/components/Switch/examples/SwitchUncontrolled.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchUncontrolled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Switch
+      id="uncontrolled-switch-no-label"
+      aria-label="An uncontrolled switch with no label"
+      defaultChecked={false}
+    />
+    <br />
+    <Switch id="uncontrolled-switch-with-label" label="An uncontrolled switch" defaultChecked={false} />
+  </React.Fragment>
+);

package/src/components/Switch/examples/SwitchWithoutLabel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchWithoutLabel: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return <Switch id="no-label-switch-on" aria-label="Message when on" isChecked={isChecked} onChange={handleChange} />;
+};

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