@rhc-shared-components/form-multi-select-component 1.0.3 → 1.0.5

package/dist/FormMultiSelectInput.d.ts

@@ -1,20 +1,18 @@
-import React from 'react';
-import { SelectOptionProps } from '@patternfly/react-core';
-declare type IMultiSelectInputOptionProps = SelectOptionProps;
-export interface FormMultiSelectInputProps {
-    name: string;
-    label: string;
-    isRequired?: boolean;
-    placeholder?: string;
-    selectMenuOptions: IMultiSelectInputOptionProps[];
-    ariaLabel?: string;
-    helperText?: string;
-    maxHeight?: string;
-    isDisabled?: boolean;
-    classNames?: string;
-    menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
-    extraProps?: any;
-    isScrollable?: boolean;
-}
-declare const FormMultiSelectInput: React.FunctionComponent<FormMultiSelectInputProps>;
-export { FormMultiSelectInput, IMultiSelectInputOptionProps };
+import React from 'react';
+import { SelectOptionProps } from '@patternfly/react-core';
+export interface FormMultiSelectInputProps {
+    name: string;
+    label: string;
+    isRequired?: boolean;
+    placeholder?: string;
+    selectMenuOptions: SelectOptionProps[];
+    ariaLabel?: string;
+    helperText?: string;
+    maxHeight?: string;
+    isDisabled?: boolean;
+    classNames?: string;
+    extraProps?: any;
+    isScrollable?: boolean;
+}
+declare const FormMultiSelectInput: React.FunctionComponent<FormMultiSelectInputProps>;
+export { FormMultiSelectInput };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import { FormMultiSelectInput, IMultiSelectInputOptionProps } from './FormMultiSelectInput';
-export { FormMultiSelectInput, IMultiSelectInputOptionProps };
+import { FormMultiSelectInput } from './FormMultiSelectInput';
+export { FormMultiSelectInput };

package/dist/index.js

@@ -26,6 +26,24 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -111,7 +129,7 @@ const TimesIcon = createIcon(TimesIconConfig);
 
 var TimesIcon$1 = TimesIcon;
 
-var _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps", "isScrollable"];
+var _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "extraProps", "isScrollable"];
 
 var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   var label = _ref.label,
@@ -120,8 +138,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       placeholder = _ref.placeholder,
       helperText = _ref.helperText,
       maxHeight = _ref.maxHeight,
-      isDisabled = _ref.isDisabled,
-      menuAppendTo = _ref.menuAppendTo,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useField = formik.useField(rest),
@@ -155,10 +173,11 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       setFocusedItemIndex = _React$useState5[1];
 
   var _React$useState6 = React__default["default"].useState(null),
-      activeItem = _React$useState6[0],
-      setActiveItem = _React$useState6[1];
+      activeItemId = _React$useState6[0],
+      setActiveItemId = _React$useState6[1];
 
   var textInputRef = React__default["default"].useRef();
+  var NO_RESULTS = 'no results';
   React__default["default"].useEffect(function () {
     var newSelectOptions = selectMenuOptions; // Filter menu items based on the text input value when one exists
 
@@ -169,9 +188,9 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
 
       if (!newSelectOptions.length) {
         newSelectOptions = [{
-          isDisabled: false,
+          isAriaDisabled: true,
           children: "No results found for \"" + inputValue + "\"",
-          value: 'no results'
+          value: NO_RESULTS
         }];
       } // Open the menu when the input value changes and the new value is not empty
 
@@ -182,8 +201,7 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     }
 
     setSelectOptions(newSelectOptions);
-    setActiveItem(null);
-  }, [inputValue, selectMenuOptions]);
+  }, [inputValue]);
   React__default["default"].useEffect(function () {
     if ((value == null ? void 0 : value.length) > 0) {
       setFieldValue(rest.name, value, true);
@@ -191,62 +209,122 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     }
   }, []);
 
+  var createItemId = function createItemId(value) {
+    return "select-multi-typeahead-" + value.replace(' ', '-');
+  };
+
+  var setActiveAndFocusedItem = function setActiveAndFocusedItem(itemIndex) {
+    setFocusedItemIndex(itemIndex);
+    var focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value));
+  };
+
+  var resetActiveAndFocusedItem = function resetActiveAndFocusedItem() {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  var closeMenu = function closeMenu() {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+  };
+
+  var onInputClick = function onInputClick() {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!inputValue) {
+      closeMenu();
+    }
+  };
+
+  var _onSelect = function onSelect(value) {
+    var _textInputRef$current;
+
+    if (value && value !== NO_RESULTS) {
+      var selectedValues = selected.includes(value) ? selected.filter(function (selection) {
+        return selection !== value;
+      }) : [].concat(selected, [value]);
+      setSelected(selectedValues);
+      setFieldTouched(rest.name, true, false);
+      setFieldValue(rest.name, selectedValues, true);
+    } // eslint-disable-next-line no-unused-expressions
+
+
+    (_textInputRef$current = textInputRef.current) == null ? void 0 : _textInputRef$current.focus();
+  };
+
+  var onTextInputChange = function onTextInputChange(_event, value) {
+    setInputValue(value);
+    resetActiveAndFocusedItem();
+  };
+
   var handleMenuArrowKeys = function handleMenuArrowKeys(key) {
     var indexToFocus = 0;
 
-    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) {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+
+    if (selectOptions.every(function (option) {
+      return 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;
-        } 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;
+      } // Skip disabled options
+
 
-      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) {
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+
+        if (indexToFocus === selectOptions.length) {
           indexToFocus = 0;
-        } else {
-          indexToFocus = focusedItemIndex + 1;
         }
       }
-
-      setFocusedItemIndex(indexToFocus);
-      var focusedItem = selectOptions.filter(function (option) {
-        return !option.isDisabled;
-      })[indexToFocus];
-      setActiveItem("select-multi-typeahead-" + focusedItem.value.replace(' ', '-'));
     }
+
+    setActiveAndFocusedItem(indexToFocus);
   };
 
   var onInputKeyDown = function onInputKeyDown(event) {
-    var enabledMenuItems = selectOptions.filter(function (menuItem) {
-      return !menuItem.isDisabled;
-    });
-    var firstMenuItem = enabledMenuItems[0];
-    var focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+    var focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
-      // Select the first available option
       case 'Enter':
-        if (!isOpen) {
-          setIsOpen(function (prevIsOpen) {
-            return !prevIsOpen;
-          });
-        } else if (isOpen && focusedItem.value !== 'no results') {
-          event.preventDefault();
+        event.preventDefault();
 
+        if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
           _onSelect(focusedItem.value);
         }
 
-        break;
+        if (!isOpen) {
+          setIsOpen(true);
+        }
 
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
         break;
 
       case 'ArrowUp':
@@ -258,36 +336,35 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   };
 
   var onToggleClick = function onToggleClick() {
-    setIsOpen(!isOpen);
-  };
+    var _textInputRef$current2;
 
-  var onTextInputChange = function onTextInputChange(_event, value) {
-    setInputValue(value);
-    setFocusedItemIndex(null);
-  };
+    setIsOpen(!isOpen); // eslint-disable-next-line no-unused-expressions
 
-  var _onSelect = function onSelect(value) {
-    var _textInputRef$current;
+    textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
+  };
 
-    // eslint-disable-next-line no-console
-    console.log('selected', value);
+  var onClearButtonClick = function onClearButtonClick() {
+    var _textInputRef$current3;
 
-    if (value && value !== 'no results') {
-      var selectedValues = selected.includes(value) ? selected.filter(function (selection) {
-        return selection !== value;
-      }) : [].concat(selected, [value]);
-      setSelected(selectedValues);
-      setFieldTouched(rest.name, true, false);
-      setFieldValue(rest.name, selectedValues, true);
-    } // eslint-disable-next-line no-unused-expressions
+    setSelected([]);
+    setInputValue('');
+    resetActiveAndFocusedItem();
+    textInputRef == null ? void 0 : (_textInputRef$current3 = textInputRef.current) == null ? void 0 : _textInputRef$current3.focus();
+    setFieldValue(rest.name, [], true);
+  };
 
+  var getChildren = function getChildren(value) {
+    var _selectMenuOptions$fi;
 
-    textInputRef == null ? void 0 : (_textInputRef$current = textInputRef.current) == null ? void 0 : _textInputRef$current.focus();
+    return (_selectMenuOptions$fi = selectMenuOptions.find(function (option) {
+      return option.value === value;
+    })) == null ? void 0 : _selectMenuOptions$fi.children;
   };
 
   var toggle = function toggle(toggleRef) {
     return React__default["default"].createElement(reactCore.MenuToggle, {
       variant: 'typeahead',
+      "aria-label": 'menu toggle',
       onClick: onToggleClick,
       innerRef: toggleRef,
       isExpanded: isOpen,
@@ -295,17 +372,17 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       isFullWidth: true
     }, React__default["default"].createElement(reactCore.TextInputGroup, {
       isPlain: true
-    }, React__default["default"].createElement(reactCore.TextInputGroupMain, Object.assign({
+    }, React__default["default"].createElement(reactCore.TextInputGroupMain, _extends({
       value: inputValue,
-      onClick: onToggleClick,
+      onClick: onInputClick,
       onChange: onTextInputChange,
       onKeyDown: onInputKeyDown,
       id: 'multi-typeahead-select-input',
       autoComplete: 'off',
       innerRef: textInputRef,
       placeholder: placeholder
-    }, activeItem && {
-      'aria-activedescendant': activeItem
+    }, activeItemId && {
+      'aria-activedescendant': activeItemId
     }, {
       role: 'combobox',
       isExpanded: isOpen,
@@ -320,57 +397,52 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
 
           _onSelect(selection);
         }
-      }, selection);
-    }))), React__default["default"].createElement(reactCore.TextInputGroupUtilities, null, selected.length > 0 && React__default["default"].createElement(reactCore.Button, {
+      }, getChildren(selection));
+    }))), React__default["default"].createElement(reactCore.TextInputGroupUtilities, _extends({}, selected.length === 0 ? {
+      style: {
+        display: 'none'
+      }
+    } : {}), React__default["default"].createElement(reactCore.Button, {
       variant: 'plain',
-      onClick: function onClick() {
-        var _textInputRef$current2;
-
-        setInputValue('');
-        setSelected([]); // eslint-disable-next-line no-unused-expressions
-
-        textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
-        setFieldValue(rest.name, [], true);
-      },
+      onClick: onClearButtonClick,
       "aria-label": 'Clear input value'
     }, React__default["default"].createElement(TimesIcon$1, {
       "aria-hidden": true
     })))));
   };
 
-  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(formGroupContainer.FormGroupContainer, {
+  return React__default["default"].createElement(formGroupContainer.FormGroupContainer, {
     validated: meta.touched && meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
     helperTextInvalid: meta.error,
     isRequired: isRequired,
     fieldId: rest.name,
     label: label,
     helperText: helperText
-  }, React__default["default"].createElement(reactCore.Select, Object.assign({
+  }, React__default["default"].createElement(reactCore.Select, {
     id: 'multi-typeahead-select',
     isOpen: isOpen,
     selected: selected,
     onSelect: function onSelect(_ev, selection) {
       return _onSelect(selection);
     },
-    onOpenChange: function onOpenChange() {
-      return setIsOpen(false);
-    },
     toggle: toggle,
     isScrollable: true,
-    maxMenuHeight: maxHeight
-  }, menuAppendTo && {
-    menuAppendTo: menuAppendTo
-  }), React__default["default"].createElement(reactCore.SelectList, {
+    maxMenuHeight: maxHeight,
+    onOpenChange: function onOpenChange(isOpen) {
+      !isOpen && closeMenu();
+    }
+  }, React__default["default"].createElement(reactCore.SelectList, {
     isAriaMultiselectable: true,
-    id: 'select-multi-typeahead-listbox'
+    id: "select-multi-typeahead-listbox"
   }, selectOptions == null ? void 0 : selectOptions.map(function (option, index) {
-    return React__default["default"].createElement(reactCore.SelectOption, Object.assign({
+    return React__default["default"].createElement(reactCore.SelectOption, _extends({
       key: option.value || option.children,
       isFocused: focusedItemIndex === index,
-      id: "select-multi-typeahead-" + option.value.replace(' ', '-'),
+      className: option.className,
+      id: createItemId(option.value),
       isDisabled: option.isDisabled || isSubmitting
     }, option));
-  })))));
+  }))));
 };
 
 exports.FormMultiSelectInput = FormMultiSelectInput;

package/dist/index.modern.js

@@ -4,6 +4,24 @@ import { ValidatedOptions, Select, SelectList, SelectOption, MenuToggle, TextInp
 import { FormGroupContainer } from '@rhc-shared-components/form-group-container';
 import { useField, useFormikContext } from 'formik';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -89,19 +107,18 @@ const TimesIcon = createIcon(TimesIconConfig);
 
 var TimesIcon$1 = TimesIcon;
 
-const _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps", "isScrollable"];
+const _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "extraProps", "isScrollable"];
 
 const FormMultiSelectInput = _ref => {
   let {
     label,
     isRequired,
     selectMenuOptions,
-    ariaLabel = 'Select Input',
+    ariaLabel = 'Select a value',
     placeholder,
     helperText,
     maxHeight,
-    isDisabled,
-    menuAppendTo
+    isDisabled = false
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -119,8 +136,9 @@ const FormMultiSelectInput = _ref => {
   const [selected, setSelected] = React__default.useState([]);
   const [selectOptions, setSelectOptions] = React__default.useState(selectMenuOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React__default.useState(null);
-  const [activeItem, setActiveItem] = React__default.useState(null);
+  const [activeItemId, setActiveItemId] = React__default.useState(null);
   const textInputRef = React__default.useRef();
+  const NO_RESULTS = 'no results';
   React__default.useEffect(() => {
     let newSelectOptions = selectMenuOptions; // Filter menu items based on the text input value when one exists
 
@@ -129,9 +147,9 @@ const FormMultiSelectInput = _ref => {
 
       if (!newSelectOptions.length) {
         newSelectOptions = [{
-          isDisabled: false,
+          isAriaDisabled: true,
           children: `No results found for "${inputValue}"`,
-          value: 'no results'
+          value: NO_RESULTS
         }];
       } // Open the menu when the input value changes and the new value is not empty
 
@@ -142,8 +160,7 @@ const FormMultiSelectInput = _ref => {
     }
 
     setSelectOptions(newSelectOptions);
-    setActiveItem(null);
-  }, [inputValue, selectMenuOptions]);
+  }, [inputValue]);
   React__default.useEffect(() => {
     if ((value == null ? void 0 : value.length) > 0) {
       setFieldValue(rest.name, value, true);
@@ -151,55 +168,116 @@ const FormMultiSelectInput = _ref => {
     }
   }, []);
 
+  const createItemId = value => `select-multi-typeahead-${value.replace(' ', '-')}`;
+
+  const setActiveAndFocusedItem = itemIndex => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value));
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+  };
+
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!inputValue) {
+      closeMenu();
+    }
+  };
+
+  const onSelect = value => {
+    var _textInputRef$current;
+
+    if (value && value !== NO_RESULTS) {
+      const selectedValues = selected.includes(value) ? selected.filter(selection => selection !== value) : [...selected, value];
+      setSelected(selectedValues);
+      setFieldTouched(rest.name, true, false);
+      setFieldValue(rest.name, selectedValues, true);
+    } // eslint-disable-next-line no-unused-expressions
+
+
+    (_textInputRef$current = textInputRef.current) == null ? void 0 : _textInputRef$current.focus();
+  };
+
+  const onTextInputChange = (_event, value) => {
+    setInputValue(value);
+    resetActiveAndFocusedItem();
+  };
+
   const handleMenuArrowKeys = key => {
     let indexToFocus = 0;
 
-    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) {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+
+    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;
-        } 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;
+      } // Skip disabled options
+
+
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
 
-      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) {
+        if (indexToFocus === selectOptions.length) {
           indexToFocus = 0;
-        } else {
-          indexToFocus = focusedItemIndex + 1;
         }
       }
-
-      setFocusedItemIndex(indexToFocus);
-      const focusedItem = selectOptions.filter(option => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-multi-typeahead-${focusedItem.value.replace(' ', '-')}`);
     }
+
+    setActiveAndFocusedItem(indexToFocus);
   };
 
   const onInputKeyDown = event => {
-    const enabledMenuItems = selectOptions.filter(menuItem => !menuItem.isDisabled);
-    const [firstMenuItem] = enabledMenuItems;
-    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
-      // Select the first available option
       case 'Enter':
-        if (!isOpen) {
-          setIsOpen(prevIsOpen => !prevIsOpen);
-        } else if (isOpen && focusedItem.value !== 'no results') {
-          event.preventDefault();
+        event.preventDefault();
+
+        if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
           onSelect(focusedItem.value);
         }
 
-        break;
+        if (!isOpen) {
+          setIsOpen(true);
+        }
 
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
         break;
 
       case 'ArrowUp':
@@ -211,33 +289,32 @@ const FormMultiSelectInput = _ref => {
   };
 
   const onToggleClick = () => {
-    setIsOpen(!isOpen);
-  };
+    var _textInputRef$current2;
 
-  const onTextInputChange = (_event, value) => {
-    setInputValue(value);
-    setFocusedItemIndex(null);
-  };
+    setIsOpen(!isOpen); // eslint-disable-next-line no-unused-expressions
 
-  const onSelect = value => {
-    var _textInputRef$current;
+    textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
+  };
 
-    // eslint-disable-next-line no-console
-    console.log('selected', value);
+  const onClearButtonClick = () => {
+    var _textInputRef$current3;
 
-    if (value && value !== 'no results') {
-      const selectedValues = selected.includes(value) ? selected.filter(selection => selection !== value) : [...selected, value];
-      setSelected(selectedValues);
-      setFieldTouched(rest.name, true, false);
-      setFieldValue(rest.name, selectedValues, true);
-    } // eslint-disable-next-line no-unused-expressions
+    setSelected([]);
+    setInputValue('');
+    resetActiveAndFocusedItem();
+    textInputRef == null ? void 0 : (_textInputRef$current3 = textInputRef.current) == null ? void 0 : _textInputRef$current3.focus();
+    setFieldValue(rest.name, [], true);
+  };
 
+  const getChildren = value => {
+    var _selectMenuOptions$fi;
 
-    textInputRef == null ? void 0 : (_textInputRef$current = textInputRef.current) == null ? void 0 : _textInputRef$current.focus();
+    return (_selectMenuOptions$fi = selectMenuOptions.find(option => option.value === value)) == null ? void 0 : _selectMenuOptions$fi.children;
   };
 
   const toggle = toggleRef => React__default.createElement(MenuToggle, {
     variant: 'typeahead',
+    "aria-label": 'menu toggle',
     onClick: onToggleClick,
     innerRef: toggleRef,
     isExpanded: isOpen,
@@ -245,17 +322,17 @@ const FormMultiSelectInput = _ref => {
     isFullWidth: true
   }, React__default.createElement(TextInputGroup, {
     isPlain: true
-  }, React__default.createElement(TextInputGroupMain, Object.assign({
+  }, React__default.createElement(TextInputGroupMain, _extends({
     value: inputValue,
-    onClick: onToggleClick,
+    onClick: onInputClick,
     onChange: onTextInputChange,
     onKeyDown: onInputKeyDown,
     id: 'multi-typeahead-select-input',
     autoComplete: 'off',
     innerRef: textInputRef,
     placeholder: placeholder
-  }, activeItem && {
-    'aria-activedescendant': activeItem
+  }, activeItemId && {
+    'aria-activedescendant': activeItemId
   }, {
     role: 'combobox',
     isExpanded: isOpen,
@@ -268,49 +345,46 @@ const FormMultiSelectInput = _ref => {
       ev.stopPropagation();
       onSelect(selection);
     }
-  }, selection)))), React__default.createElement(TextInputGroupUtilities, null, selected.length > 0 && React__default.createElement(Button, {
+  }, getChildren(selection))))), React__default.createElement(TextInputGroupUtilities, _extends({}, selected.length === 0 ? {
+    style: {
+      display: 'none'
+    }
+  } : {}), React__default.createElement(Button, {
     variant: 'plain',
-    onClick: () => {
-      var _textInputRef$current2;
-
-      setInputValue('');
-      setSelected([]); // eslint-disable-next-line no-unused-expressions
-
-      textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
-      setFieldValue(rest.name, [], true);
-    },
+    onClick: onClearButtonClick,
     "aria-label": 'Clear input value'
   }, React__default.createElement(TimesIcon$1, {
     "aria-hidden": true
   })))));
 
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(FormGroupContainer, {
+  return React__default.createElement(FormGroupContainer, {
     validated: meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default,
     helperTextInvalid: meta.error,
     isRequired: isRequired,
     fieldId: rest.name,
     label: label,
     helperText: helperText
-  }, React__default.createElement(Select, Object.assign({
+  }, React__default.createElement(Select, {
     id: 'multi-typeahead-select',
     isOpen: isOpen,
     selected: selected,
     onSelect: (_ev, selection) => onSelect(selection),
-    onOpenChange: () => setIsOpen(false),
     toggle: toggle,
     isScrollable: true,
-    maxMenuHeight: maxHeight
-  }, menuAppendTo && {
-    menuAppendTo
-  }), React__default.createElement(SelectList, {
+    maxMenuHeight: maxHeight,
+    onOpenChange: isOpen => {
+      !isOpen && closeMenu();
+    }
+  }, React__default.createElement(SelectList, {
     isAriaMultiselectable: true,
-    id: 'select-multi-typeahead-listbox'
-  }, selectOptions == null ? void 0 : selectOptions.map((option, index) => React__default.createElement(SelectOption, Object.assign({
+    id: "select-multi-typeahead-listbox"
+  }, selectOptions == null ? void 0 : selectOptions.map((option, index) => React__default.createElement(SelectOption, _extends({
     key: option.value || option.children,
     isFocused: focusedItemIndex === index,
-    id: `select-multi-typeahead-${option.value.replace(' ', '-')}`,
+    className: option.className,
+    id: createItemId(option.value),
     isDisabled: option.isDisabled || isSubmitting
-  }, option)))))));
+  }, option))))));
 };
 
 export { FormMultiSelectInput };

package/dist/index.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/form-multi-select-component",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "project description",
   "author": "shkale",
   "license": "MIT",
@@ -59,7 +59,7 @@
     "react-scripts": "^3.4.1",
     "rimraf": "^3.0.2",
     "sass": "^1.57.1",
-    "typescript": "^3.7.5"
+    "typescript": "~5.7.2"
   },
   "dependencies": {
     "@patternfly/react-core": "5.3.0",

package/CHANGELOG.md

@@ -1,65 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.0.8](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/form-multi-select-component@0.0.7...@rhc-shared-components/form-multi-select-component@0.0.8) (2022-12-06)
-
-**Note:** Version bump only for package @rhc-shared-components/form-multi-select-component
-
-
-
-
-
-## [0.0.7](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/form-multi-select-component@0.0.6...@rhc-shared-components/form-multi-select-component@0.0.7) (2022-12-06)
-
-**Note:** Version bump only for package @rhc-shared-components/form-multi-select-component
-
-
-
-
-
-## [0.0.6](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/form-multi-select-component@0.0.4...@rhc-shared-components/form-multi-select-component@0.0.6) (2022-12-06)
-
-
-### Bug Fixes
-
-* added additional options ([a4e49e7](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/a4e49e7a049b40583200f96cc2f7f9456e4ea99c))
-* fixed bugs removed max filter, updated eg ([3fedea1](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/3fedea120e3d93de365f2c9b19202ffe7f601612))
-
-
-
-
-
-## [0.0.4](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/form-multi-select-component@0.0.2...@rhc-shared-components/form-multi-select-component@0.0.4) (2022-10-27)
-
-
-### Bug Fixes
-
-* added setTouched prop in multiselect component. ([3b0b6ff](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/3b0b6ff0445995129bc2b2908861768a513339d8))
-* added touched handler ([82e397e](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/82e397e3c8ae90944d3110dd5d7b3d5ff98b0589))
-
-
-
-## 0.0.3 (2022-10-27)
-
-
-### Bug Fixes
-
-* added meta.touched prop to the form multi select component. ([590886f](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/590886fd8eb49a2153f6d5b512c6bd61cbae205c))
-
-
-
-
-
-## [0.0.2](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/form-multi-select-component@0.0.1...@rhc-shared-components/form-multi-select-component@0.0.2) (2022-01-05)
-
-**Note:** Version bump only for package @rhc-shared-components/form-multi-select-component
-
-
-
-
-
-## 0.0.1 (2021-12-06)
-
-**Note:** Version bump only for package @rhc-shared-components/form-multi-select-component