@patternfly/react-templates 1.1.0-prerelease.9 → 6.0.0-alpha.10

package/src/components/Select/SelectTypeahead.tsx

@@ -1,321 +0,0 @@
-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';
-
-export interface SelectTypeaheadOption extends Omit<SelectOptionProps, 'content'> {
-  /** Content of the select option. */
-  content: string | number;
-  /** Value of the select option. */
-  value: string | number;
-}
-
-export interface SelectTypeaheadProps {
-  /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
-  /** Initial options of the select. */
-  initialOptions: SelectTypeaheadOption[];
-  /** Callback triggered on selection. */
-  onSelect?: (
-    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement>,
-    selection: string | number
-  ) => void;
-  /** Callback triggered when the select opens or closes. */
-  onToggle?: (nextIsOpen: boolean) => void;
-  /** Callback triggered when the text in the input field changes. */
-  onInputChange?: (newValue: string) => void;
-  /** Placeholder text for the select input. */
-  placeholder?: string;
-  /** Message to display when no options match the filter. */
-  noOptionsFoundMessage?: string | ((filter: string) => string);
-  /** Flag indicating the select should be disabled. */
-  isDisabled?: boolean;
-}
-
-export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps> = ({
-  innerRef,
-  initialOptions,
-  onSelect,
-  onToggle,
-  onInputChange,
-  placeholder = 'Select an option',
-  noOptionsFoundMessage = (filter) => `No results found for "${filter}"`,
-  isDisabled,
-  ...props
-}: SelectTypeaheadProps) => {
-  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<SelectTypeaheadOption[]>(initialOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
-
-  const NO_RESULTS = 'no results';
-
-  React.useEffect(() => {
-    let newSelectOptions: SelectTypeaheadOption[] = initialOptions;
-
-    // Filter menu items based on the text input value when one exists
-    if (filterValue) {
-      newSelectOptions = initialOptions.filter((option) =>
-        String(option.content).toLowerCase().includes(filterValue.toLowerCase())
-      );
-
-      // When no options are found after filtering, display 'No results found'
-      if (!newSelectOptions.length) {
-        newSelectOptions = [
-          {
-            isAriaDisabled: true,
-            content:
-              typeof noOptionsFoundMessage === 'string' ? noOptionsFoundMessage : noOptionsFoundMessage(filterValue),
-            value: NO_RESULTS
-          }
-        ];
-      }
-
-      // Open the menu when the input value changes and the new value is not empty
-      if (!isOpen) {
-        openMenu();
-      }
-    }
-
-    setSelectOptions(newSelectOptions);
-  }, [filterValue]);
-
-  const createItemId = (value: string | number) => `select-typeahead-${String(value).replace(' ', '-')}`;
-
-  const setActiveAndFocusedItem = (itemIndex: number) => {
-    setFocusedItemIndex(itemIndex);
-    const focusedItem = selectOptions[itemIndex];
-    setActiveItemId(createItemId(focusedItem.value));
-  };
-
-  const resetActiveAndFocusedItem = () => {
-    setFocusedItemIndex(null);
-    setActiveItemId(null);
-  };
-
-  const openMenu = () => {
-    onToggle && onToggle(true);
-    setIsOpen(true);
-  };
-
-  const closeMenu = () => {
-    onToggle && onToggle(false);
-    setIsOpen(false);
-    resetActiveAndFocusedItem();
-  };
-
-  const onInputClick = () => {
-    if (!isOpen) {
-      openMenu();
-    } else if (!inputValue) {
-      closeMenu();
-    }
-  };
-
-  const selectOption = (
-    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
-    option: SelectTypeaheadOption
-  ) => {
-    onSelect && onSelect(_event, option.value);
-
-    setInputValue(String(option.content));
-    setFilterValue('');
-    setSelected(String(option.value));
-
-    closeMenu();
-  };
-
-  const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-    if (value && value !== NO_RESULTS) {
-      const optionToSelect = selectOptions.find((option) => option.value === value);
-      selectOption(_event, optionToSelect);
-    }
-  };
-
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setInputValue(value);
-    onInputChange && onInputChange(value);
-    setFilterValue(value);
-
-    resetActiveAndFocusedItem();
-
-    if (value !== selected) {
-      setSelected('');
-    }
-  };
-
-  const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus = 0;
-
-    if (!isOpen) {
-      openMenu();
-    }
-
-    if (selectOptions.every((option) => option.isDisabled)) {
-      return;
-    }
-
-    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;
-      }
-
-      // Skip disabled options
-      while (selectOptions[indexToFocus].isDisabled) {
-        indexToFocus--;
-        if (indexToFocus === -1) {
-          indexToFocus = selectOptions.length - 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;
-      }
-
-      // Skip disabled options
-      while (selectOptions[indexToFocus].isDisabled) {
-        indexToFocus++;
-        if (indexToFocus === selectOptions.length) {
-          indexToFocus = 0;
-        }
-      }
-    }
-
-    setActiveAndFocusedItem(indexToFocus);
-  };
-
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
-
-    switch (event.key) {
-      case 'Enter':
-        if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
-          selectOption(event, focusedItem);
-        }
-
-        if (!isOpen) {
-          setIsOpen(true);
-        }
-
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        event.preventDefault();
-        handleMenuArrowKeys(event.key);
-        break;
-    }
-  };
-
-  const onToggleClick = () => {
-    onToggle && onToggle(!isOpen);
-    setIsOpen(!isOpen);
-    textInputRef?.current?.focus();
-  };
-
-  const onClearButtonClick = () => {
-    setSelected('');
-    setInputValue('');
-    onInputChange && onInputChange('');
-    setFilterValue('');
-    resetActiveAndFocusedItem();
-    textInputRef?.current?.focus();
-  };
-
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle
-      ref={toggleRef}
-      variant="typeahead"
-      aria-label="Typeahead menu toggle"
-      onClick={onToggleClick}
-      isExpanded={isOpen}
-      isDisabled={isDisabled}
-      isFullWidth
-    >
-      <TextInputGroup isPlain>
-        <TextInputGroupMain
-          value={inputValue}
-          onClick={onInputClick}
-          onChange={onTextInputChange}
-          onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
-          autoComplete="off"
-          innerRef={textInputRef}
-          placeholder={placeholder}
-          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
-          role="combobox"
-          isExpanded={isOpen}
-          aria-controls="select-typeahead-listbox"
-        />
-
-        <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
-            <TimesIcon aria-hidden />
-          </Button>
-        </TextInputGroupUtilities>
-      </TextInputGroup>
-    </MenuToggle>
-  );
-
-  return (
-    <Select
-      id="typeahead-select"
-      isOpen={isOpen}
-      selected={selected}
-      onSelect={_onSelect}
-      onOpenChange={(isOpen) => {
-        !isOpen && closeMenu();
-      }}
-      toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
-      ref={innerRef}
-      {...props}
-    >
-      <SelectList id="select-typeahead-listbox">
-        {selectOptions.map((option, index) => {
-          const { content, value, ...props } = option;
-
-          return (
-            <SelectOption
-              {...props}
-              key={value}
-              value={value}
-              isFocused={focusedItemIndex === index}
-              id={createItemId(value)}
-            >
-              {content}
-            </SelectOption>
-          );
-        })}
-      </SelectList>
-    </Select>
-  );
-};
-SelectTypeaheadBase.displayName = 'SelectTypeaheadBase';
-
-export const SelectTypeahead = React.forwardRef((props: SelectTypeaheadProps, ref: React.Ref<any>) => (
-  <SelectTypeaheadBase {...props} innerRef={ref} />
-));
-
-SelectTypeahead.displayName = 'SelectTypeahead';

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { SelectTypeahead, SelectTypeaheadOption } from '@patternfly/react-templates';
-
-export const SelectTypeaheadDemo: React.FunctionComponent = () => {
-  const initialOptions: SelectTypeaheadOption[] = [
-    { content: 'Alabama', value: 'option1' },
-    { content: 'Florida', value: 'option2' },
-    { content: 'New Jersey', value: 'option3' },
-    { content: 'New Mexico', value: 'option4' },
-    { content: 'New York', value: 'option5' },
-    { content: 'North Carolina', value: 'option6' }
-  ];
-
-  return (
-    <SelectTypeahead
-      initialOptions={initialOptions}
-      placeholder="Select a state"
-      noOptionsFoundMessage={(filter) => `No state was found for "${filter}"`}
-    />
-  );
-};