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

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -14,40 +14,37 @@ import {
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 const initialSelectOptions: SelectOptionProps[] = [
-  { itemId: 'Alabama', children: 'Alabama' },
-  { itemId: 'Florida', children: 'Florida' },
-  { itemId: 'New Jersey', children: 'New Jersey' },
-  { itemId: 'New Mexico', children: 'New Mexico' },
-  { itemId: 'New York', children: 'New York' },
-  { itemId: 'North Carolina', children: 'North Carolina' }
+  { value: 'Alabama', children: 'Alabama' },
+  { value: 'Florida', children: 'Florida' },
+  { value: 'New Jersey', children: 'New Jersey' },
+  { value: 'New Mexico', children: 'New Mexico' },
+  { value: 'New York', children: 'New York' },
+  { value: 'North Carolina', children: 'North Carolina' }
 ];
 
 export const SelectBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string>('');
   const [inputValue, setInputValue] = React.useState<string>('');
+  const [filterValue, setFilterValue] = React.useState<string>('');
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItem, setActiveItem] = React.useState<string | null>(null);
-
-  const menuRef = React.useRef<HTMLDivElement>(null);
   const textInputRef = React.useRef<HTMLInputElement>();
 
   React.useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
     // Filter menu items based on the text input value when one exists
-    if (inputValue) {
-      newSelectOptions = initialSelectOptions.filter(menuItem =>
-        String(menuItem.children)
-          .toLowerCase()
-          .includes(inputValue.toLowerCase())
+    if (filterValue) {
+      newSelectOptions = initialSelectOptions.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase())
       );
 
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
         newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }
+          { isDisabled: false, children: `No results found for "${filterValue}"`, value: 'no results' }
         ];
       }
 
@@ -60,19 +57,20 @@ export const SelectBasic: React.FunctionComponent = () => {
     setSelectOptions(newSelectOptions);
     setActiveItem(null);
     setFocusedItemIndex(null);
-  }, [inputValue]);
+  }, [filterValue]);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     // eslint-disable-next-line no-console
-    console.log('selected', itemId);
+    console.log('selected', value);
 
-    if (itemId && itemId !== 'no results') {
-      setInputValue(itemId as string);
-      setSelected(itemId as string);
+    if (value && value !== 'no results') {
+      setInputValue(value as string);
+      setFilterValue('');
+      setSelected(value as string);
     }
     setIsOpen(false);
     setFocusedItemIndex(null);
@@ -81,6 +79,7 @@ export const SelectBasic: React.FunctionComponent = () => {
 
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
+    setFilterValue(value);
   };
 
   const handleMenuArrowKeys = (key: string) => {
@@ -106,25 +105,26 @@ export const SelectBasic: React.FunctionComponent = () => {
       }
 
       setFocusedItemIndex(indexToFocus);
-      const focusedItem = selectOptions.filter(option => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
+      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
+      setActiveItem(`select-typeahead-${focusedItem.value.replace(' ', '-')}`);
     }
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter(option => !option.isDisabled);
+    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
     const [firstMenuItem] = enabledMenuItems;
     const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
     switch (event.key) {
       // Select the first available option
       case 'Enter':
-        if (isOpen && focusedItem.itemId !== 'no results') {
+        if (isOpen && focusedItem.value !== 'no results') {
           setInputValue(String(focusedItem.children));
+          setFilterValue('');
           setSelected(String(focusedItem.children));
         }
 
-        setIsOpen(prevIsOpen => !prevIsOpen);
+        setIsOpen((prevIsOpen) => !prevIsOpen);
         setFocusedItemIndex(null);
         setActiveItem(null);
 
@@ -167,6 +167,7 @@ export const SelectBasic: React.FunctionComponent = () => {
               onClick={() => {
                 setSelected('');
                 setInputValue('');
+                setFilterValue('');
                 textInputRef?.current?.focus();
               }}
               aria-label="Clear input value"
@@ -182,7 +183,6 @@ export const SelectBasic: React.FunctionComponent = () => {
   return (
     <Select
       id="typeahead-select"
-      ref={menuRef}
       isOpen={isOpen}
       selected={selected}
       onSelect={onSelect}
@@ -194,11 +194,11 @@ export const SelectBasic: React.FunctionComponent = () => {
       <SelectList id="select-typeahead-listbox">
         {selectOptions.map((option, index) => (
           <SelectOption
-            key={option.itemId || option.children}
+            key={option.value || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
-            onClick={() => setSelected(option.itemId)}
-            id={`select-typeahead-${option.itemId.replace(' ', '-')}`}
+            onClick={() => setSelected(option.value)}
+            id={`select-typeahead-${option.value.replace(' ', '-')}`}
             {...option}
             ref={null}
           />

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+let initialSelectOptions: SelectOptionProps[] = [
+  { value: 'Alabama', children: 'Alabama' },
+  { value: 'Florida', children: 'Florida' },
+  { value: 'New Jersey', children: 'New Jersey' },
+  { value: 'New Mexico', children: 'New Mexico' },
+  { value: 'New York', children: 'New York' },
+  { value: 'North Carolina', children: 'North Carolina' }
+];
+
+export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('');
+  const [inputValue, setInputValue] = React.useState<string>('');
+  const [filterValue, setFilterValue] = React.useState<string>('');
+  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
+  const [onCreation, setOnCreation] = React.useState<boolean>(false); // Boolean to refresh filter state after new option is created
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  React.useEffect(() => {
+    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
+
+    // Filter menu items based on the text input value when one exists
+    if (filterValue) {
+      newSelectOptions = initialSelectOptions.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase())
+      );
+
+      // When no options are found after filtering, display creation option
+      if (!newSelectOptions.length) {
+        newSelectOptions = [{ isDisabled: false, children: `Create new option "${filterValue}"`, value: 'create' }];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+
+    setSelectOptions(newSelectOptions);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
+  }, [filterValue, onCreation]);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+
+    if (value) {
+      if (value === 'create') {
+        if (!initialSelectOptions.some((item) => item.value === filterValue)) {
+          initialSelectOptions = [...initialSelectOptions, { value: filterValue, children: filterValue }];
+        }
+        setSelected(filterValue);
+        setOnCreation(!onCreation);
+        setFilterValue('');
+      } else {
+        // eslint-disable-next-line no-console
+        console.log('selected', value);
+        setInputValue(value as string);
+        setFilterValue('');
+        setSelected(value as string);
+      }
+    }
+
+    setIsOpen(false);
+    setFocusedItemIndex(null);
+    setActiveItem(null);
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+    setFilterValue(value);
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus;
+
+    if (isOpen) {
+      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 = selectOptions.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 === selectOptions.length - 1) {
+          indexToFocus = 0;
+        } else {
+          indexToFocus = focusedItemIndex + 1;
+        }
+      }
+
+      setFocusedItemIndex(indexToFocus);
+      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
+      setActiveItem(`select-create-typeahead-${focusedItem.value.replace(' ', '-')}`);
+    }
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
+    const [firstMenuItem] = enabledMenuItems;
+    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+
+    switch (event.key) {
+      // Select the first available option
+      case 'Enter':
+        if (isOpen) {
+          onSelect(undefined, focusedItem.value as string);
+          setIsOpen((prevIsOpen) => !prevIsOpen);
+          setFocusedItemIndex(null);
+          setActiveItem(null);
+        }
+
+        setIsOpen((prevIsOpen) => !prevIsOpen);
+        setFocusedItemIndex(null);
+        setActiveItem(null);
+
+        break;
+      case 'Tab':
+      case 'Escape':
+        setIsOpen(false);
+        setActiveItem(null);
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={onToggleClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id="create-typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder="Select a state"
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-create-typeahead-listbox"
+        />
+
+        <TextInputGroupUtilities>
+          {!!inputValue && (
+            <Button
+              variant="plain"
+              onClick={() => {
+                setSelected('');
+                setInputValue('');
+                setFilterValue('');
+                textInputRef?.current?.focus();
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="create-typeahead-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={() => {
+        setIsOpen(false);
+      }}
+      toggle={toggle}
+    >
+      <SelectList id="select-create-typeahead-listbox">
+        {selectOptions.map((option, index) => (
+          <SelectOption
+            key={option.value || option.children}
+            isFocused={focusedItemIndex === index}
+            className={option.className}
+            onClick={() => setSelected(option.value)}
+            id={`select-typeahead-${option.value.replace(' ', '-')}`}
+            {...option}
+            ref={null}
+          />
+        ))}
+      </SelectList>
+    </Select>
+  );
+};

package/src/components/Select/examples/SelectViewMore.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { Select, SelectOption, SelectList, MenuToggle, Spinner } from '@patternfly/react-core';
+
+export const SelectViewMore: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [selectOptions, setSelectOptions] = React.useState([
+    <SelectOption key={0} value="Option 1">
+      Option 1
+    </SelectOption>,
+    <SelectOption key={1} value="Option 2">
+      Option 2
+    </SelectOption>,
+    <SelectOption key={2} value="Option 3">
+      Option 3
+    </SelectOption>,
+    <SelectOption key={3} value="Option 4">
+      Option 4
+    </SelectOption>,
+    <SelectOption key={4} value="Option 5">
+      Option 5
+    </SelectOption>,
+    <SelectOption key={5} value="Option 6">
+      Option 6
+    </SelectOption>,
+    <SelectOption key={6} value="Option 7">
+      Option 7
+    </SelectOption>,
+    <SelectOption key={7} value="Option 8">
+      Option 8
+    </SelectOption>,
+    <SelectOption key={8} value="Option 9">
+      Option 9
+    </SelectOption>,
+    <SelectOption key={9} value="Final Option 10">
+      Final Option 10
+    </SelectOption>
+  ]);
+  const [numOptions, setNumOptions] = React.useState(3);
+  const [visibleOptions, setVisibleOptions] = React.useState(selectOptions.slice(0, numOptions));
+  const activeItemRef = React.useRef<HTMLElement>(null);
+  const viewMoreRef = React.useRef<HTMLLIElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+
+  React.useEffect(() => {
+    activeItemRef.current?.focus();
+  }, [visibleOptions]);
+
+  const simulateNetworkCall = (networkCallback: () => void) => {
+    setTimeout(networkCallback, 2000);
+  };
+
+  const getNextValidItem = (startingIndex: number, maxLength: number) => {
+    let validItem;
+    for (let i = startingIndex; i < maxLength; i++) {
+      if (selectOptions[i].props.isDisabled) {
+        continue;
+      } else {
+        validItem = selectOptions[i];
+        break;
+      }
+    }
+    return validItem;
+  };
+
+  const loadMoreOptions = () => {
+    const newLength = numOptions + 3 <= selectOptions.length ? numOptions + 3 : selectOptions.length;
+    const prevPosition = numOptions;
+    const nextValidItem = getNextValidItem(prevPosition, newLength);
+
+    setNumOptions(newLength);
+    setIsLoading(false);
+    setActiveItem(nextValidItem.props.value);
+    setVisibleOptions(selectOptions.slice(0, newLength));
+  };
+
+  const onViewMoreClick = () => {
+    setIsLoading(true);
+    simulateNetworkCall(() => {
+      loadMoreOptions();
+    });
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+
+    if (value !== 'loader') {
+      setSelected(value as string);
+      setIsOpen(false);
+      toggleRef?.current?.focus(); // Only focus the toggle when a non-loader option is selected
+    }
+  };
+
+  const toggle = (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="single-view-more-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={{ toggleNode: toggle, toggleRef }}
+    >
+      <SelectList>
+        {visibleOptions.map((option) => {
+          const props = option.props;
+
+          return <SelectOption key={option.key} ref={props.value === activeItem ? activeItemRef : null} {...props} />;
+        })}
+        {numOptions !== selectOptions.length && (
+          <SelectOption
+            {...(!isLoading && { isLoadButton: true })}
+            {...(isLoading && { isLoading: true })}
+            onClick={onViewMoreClick}
+            value="loader"
+            ref={viewMoreRef}
+          >
+            {isLoading ? <Spinner size="lg" /> : 'View more'}
+          </SelectOption>
+        )}
+      </SelectList>
+    </Select>
+  );
+};

package/src/components/Sidebar/__tests__/Sidebar.test.tsx

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with only class name pf-c-sidebar by default', () => {
+test('Renders with only class name pf-v5-c-sidebar by default', () => {
   render(<Sidebar>Test</Sidebar>);
   expect(screen.getByText('Test').parentElement).toHaveClass('pf-v5-c-sidebar', { exact: true });
 });
 
-test('Renders with class name pf-c-sidebar', () => {
+test('Renders with class name pf-v5-c-sidebar', () => {
   render(<Sidebar>Test</Sidebar>);
   expect(screen.getByText('Test').parentElement).toHaveClass('pf-v5-c-sidebar');
 });

package/src/components/Sidebar/__tests__/SidebarContent.test.tsx

@@ -7,12 +7,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with only class name pf-c-sidebar__content by default', () => {
+test('Renders with only class name pf-v5-c-sidebar__content by default', () => {
   render(<SidebarContent>Test</SidebarContent>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__content', { exact: true });
 });
 
-test('Renders with class name pf-c-sidebar__content', () => {
+test('Renders with class name pf-v5-c-sidebar__content', () => {
   render(<SidebarContent>Test</SidebarContent>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__content');
 });

package/src/components/Sidebar/__tests__/SidebarPanel.test.tsx

@@ -7,12 +7,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with with only class name pf-c-sidebar__panel by default', () => {
+test('Renders with with only class name pf-v5-c-sidebar__panel by default', () => {
   render(<SidebarPanel>Test</SidebarPanel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__panel', { exact: true });
 });
 
-test('Renders with with class name pf-c-sidebar__panel', () => {
+test('Renders with with class name pf-v5-c-sidebar__panel', () => {
   render(<SidebarPanel>Test</SidebarPanel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__panel');
 });

package/src/components/Sidebar/examples/Sidebar.md

@@ -1,6 +1,6 @@
 ---
 id: Sidebar
-cssPrefix: pf-c-sidebar
+cssPrefix: pf-v5-c-sidebar
 section: components
 propComponents: ['Sidebar', 'SidebarContent', 'SidebarPanel']
 ---

package/src/components/SimpleList/examples/SimpleList.md

@@ -1,7 +1,7 @@
 ---
 id: Simple list
 section: components
-cssPrefix: pf-c-simple-list
+cssPrefix: pf-v5-c-simple-list
 propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ---
 

package/src/components/Skeleton/examples/Skeleton.md

@@ -1,7 +1,7 @@
 ---
 id: Skeleton
 section: components
-cssPrefix: pf-c-skeleton
+cssPrefix: pf-v5-c-skeleton
 propComponents: ['Skeleton']
 ---
 

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

@@ -9,7 +9,7 @@ exports[`Verify Skip To Content 1`] = `
       aria-disabled="false"
       class="pf-v5-c-button pf-m-primary"
       data-ouia-component-id="OUIA-Generated-Button-primary-1"
-      data-ouia-component-type="PF4/Button"
+      data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
       href="#main-content"
     />

package/src/components/SkipToContent/examples/SkipToContent.md

@@ -1,7 +1,7 @@
 ---
 id: Skip to content
 section: components
-cssPrefix: pf-c-skip-to-content
+cssPrefix: pf-v5-c-skip-to-content
 propComponents: ['SkipToContent']
 ---
 

package/src/components/Slider/Slider.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
 import { SliderStep } from './SliderStep';
-import { InputGroup, InputGroupText } from '../InputGroup';
+import { InputGroup, InputGroupText, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
 
@@ -318,7 +318,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const displayInput = () => {
     const textInput = (
       <TextInput
-        className={css(styles.formControl)}
         isDisabled={isDisabled}
         type="number"
         value={localInputValue}
@@ -333,11 +332,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (inputLabel) {
       return (
         <InputGroup>
-          {textInput}
-          <InputGroupText {...(isDisabled && { className: css(styles.modifiers.disabled) })}>
-            {' '}
-            {inputLabel}
-          </InputGroupText>
+          <InputGroupItem isFill>{textInput}</InputGroupItem>
+          <InputGroupText isDisabled={isDisabled}>{inputLabel}</InputGroupText>
         </InputGroup>
       );
     } else {