@rhc-shared-components/form-multi-select-component 0.1.2 → 0.2.0

package/dist/FormMultiSelectInput.d.ts

@@ -1,17 +1,11 @@
-import * as React from 'react';
-import './styles.scss';
-export interface IMultiSelectItem {
-    value: string;
-    description?: string;
-    isDisabled?: boolean;
-    extraProps?: any;
-}
+import React from 'react';
+import { SelectOptionProps } from '@patternfly/react-core';
 export interface FormMultiSelectInputProps {
     name: string;
     label: string;
     isRequired?: boolean;
     placeholder?: string;
-    selectOptions: IMultiSelectItem[];
+    selectMenuOptions: SelectOptionProps[];
     ariaLabel?: string;
     helperText?: string;
     maxHeight?: string | number;
@@ -20,5 +14,5 @@ export interface FormMultiSelectInputProps {
     menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
     extraProps?: any;
 }
-declare const FormMultiSelectInput: React.FC<FormMultiSelectInputProps>;
+declare const FormMultiSelectInput: React.FunctionComponent<FormMultiSelectInputProps>;
 export default FormMultiSelectInput;

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,8 +1,9 @@
 var React = require('react');
-var formik = require('formik');
 var reactCore = require('@patternfly/react-core');
 var formGroupContainer = require('@rhc-shared-components/form-group-container');
-var lodash = require('lodash');
+var formik = require('formik');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -23,24 +24,7 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(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);
-}
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -57,121 +41,348 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps"];
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var IconSize;
+(function (IconSize) {
+    IconSize["sm"] = "sm";
+    IconSize["md"] = "md";
+    IconSize["lg"] = "lg";
+    IconSize["xl"] = "xl";
+})(IconSize || (IconSize = {}));
+const getSize = (size) => {
+    switch (size) {
+        case IconSize.sm:
+            return '1em';
+        case IconSize.md:
+            return '1.5em';
+        case IconSize.lg:
+            return '2em';
+        case IconSize.xl:
+            return '3em';
+        default:
+            return '1em';
+    }
+};
+let currentId = 0;
+/**
+ * Factory to create Icon class components for consumers
+ */
+function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
+    var _a;
+    return _a = class SVGIcon extends React__namespace.Component {
+            constructor() {
+                super(...arguments);
+                this.id = `icon-title-${currentId++}`;
+            }
+            render() {
+                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+                const hasTitle = Boolean(title);
+                const heightWidth = getSize(size);
+                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
+                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
+                const viewBox = [xOffset, yOffset, width, height].join(' ');
+                return (React__namespace.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
+                    hasTitle && React__namespace.createElement("title", { id: this.id }, title),
+                    React__namespace.createElement("path", { d: svgPath })));
+            }
+        },
+        _a.displayName = name,
+        _a.defaultProps = {
+            color: 'currentColor',
+            size: IconSize.sm,
+            noVerticalAlign: false
+        },
+        _a;
+}
+
+const TimesIconConfig = {
+  name: 'TimesIcon',
+  height: 512,
+  width: 352,
+  svgPath: 'M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const TimesIcon = createIcon(TimesIconConfig);
+
+var TimesIcon$1 = TimesIcon;
+
+var _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps"];
 
 var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   var label = _ref.label,
       isRequired = _ref.isRequired,
-      selectOptions = _ref.selectOptions,
-      _ref$ariaLabel = _ref.ariaLabel,
-      ariaLabel = _ref$ariaLabel === void 0 ? 'Select Input' : _ref$ariaLabel,
+      selectMenuOptions = _ref.selectMenuOptions,
       placeholder = _ref.placeholder,
       helperText = _ref.helperText,
-      maxHeight = _ref.maxHeight,
       isDisabled = _ref.isDisabled,
-      classNames = _ref.classNames,
       menuAppendTo = _ref.menuAppendTo,
-      extraProps = _ref.extraProps,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useField = formik.useField(rest),
       meta = _useField[1];
 
-  var value = meta.value;
-
   var _useFormikContext = formik.useFormikContext(),
       isSubmitting = _useFormikContext.isSubmitting,
       setFieldValue = _useFormikContext.setFieldValue,
       setFieldTouched = _useFormikContext.setFieldTouched;
 
-  var _React$useState = React__namespace.useState(false),
+  var _React$useState = React__default["default"].useState(false),
       isOpen = _React$useState[0],
       setIsOpen = _React$useState[1];
 
-  var onSelect = function onSelect(_event, selection) {
-    var newValues = value.includes(selection) ? value.filter(function (item) {
-      return item !== selection;
-    }) : [].concat(value, [selection]);
-    setFieldTouched(rest.name, true, false);
-    setFieldValue(rest.name, newValues, true);
-  };
+  var _React$useState2 = React__default["default"].useState(''),
+      inputValue = _React$useState2[0],
+      setInputValue = _React$useState2[1];
+
+  var _React$useState3 = React__default["default"].useState([]),
+      selected = _React$useState3[0],
+      setSelected = _React$useState3[1];
+
+  var _React$useState4 = React__default["default"].useState(selectMenuOptions),
+      selectOptions = _React$useState4[0],
+      setSelectOptions = _React$useState4[1];
+
+  var _React$useState5 = React__default["default"].useState(null),
+      focusedItemIndex = _React$useState5[0],
+      setFocusedItemIndex = _React$useState5[1];
+
+  var _React$useState6 = React__default["default"].useState(null),
+      activeItem = _React$useState6[0],
+      setActiveItem = _React$useState6[1];
+
+  var textInputRef = React__default["default"].useRef();
+  React__default["default"].useEffect(function () {
+    var newSelectOptions = selectMenuOptions; // Filter menu items based on the text input value when one exists
+
+    if (inputValue) {
+      newSelectOptions = selectMenuOptions.filter(function (menuItem) {
+        return String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase());
+      }); // When no options are found after filtering, display 'No results found'
+
+      if (!newSelectOptions.length) {
+        newSelectOptions = [{
+          isDisabled: false,
+          children: "No results found for \"" + inputValue + "\"",
+          value: 'no results'
+        }];
+      } // Open the menu when the input value changes and the new value is not empty
+
+
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+
+    setSelectOptions(newSelectOptions);
+    setFocusedItemIndex(null);
+    setActiveItem(null);
+  }, [inputValue]);
 
-  var disabledItems = selectOptions.filter(function (selectItem) {
-    var _selectItem$extraProp;
-
-    return (selectItem == null ? void 0 : selectItem.isDisabled) || (selectItem == null ? void 0 : (_selectItem$extraProp = selectItem.extraProps) == null ? void 0 : _selectItem$extraProp.isDisabled);
-  });
-
-  var CustomChipGroup = function CustomChipGroup() {
-    return React__namespace.createElement(reactCore.ChipGroup, null, (value || []).map(function (currentValue) {
-      return React__namespace.createElement(reactCore.Chip, {
-        isReadOnly: !!disabledItems.find(function (item) {
-          return item.value === currentValue;
-        }),
-        key: currentValue,
-        onClick: function onClick(event) {
-          return onSelect(event, currentValue);
+  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) {
+          indexToFocus = selectOptions.length - 1;
+        } else {
+          indexToFocus = focusedItemIndex - 1;
         }
-      }, currentValue);
-    }));
-  };
+      }
 
-  var onClear = function onClear() {
-    var filtered = value == null ? void 0 : value.filter(function (item) {
-      var _selectItem$extraProp2;
+      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;
+        }
+      }
 
-      var selectItem = disabledItems.find(function (obj) {
-        return obj.value === item;
-      });
-      return (selectItem == null ? void 0 : selectItem.isDisabled) || (selectItem == null ? void 0 : (_selectItem$extraProp2 = selectItem.extraProps) == null ? void 0 : _selectItem$extraProp2.isDisabled);
+      setFocusedItemIndex(indexToFocus);
+      var focusedItem = selectOptions.filter(function (option) {
+        return !option.isDisabled;
+      })[indexToFocus];
+      setActiveItem("select-multi-typeahead-" + focusedItem.value.replace(' ', '-'));
+    }
+  };
+
+  var onInputKeyDown = function onInputKeyDown(event) {
+    var enabledMenuItems = selectOptions.filter(function (menuItem) {
+      return !menuItem.isDisabled;
     });
-    setFieldValue(rest.name, [].concat(filtered), true);
-    setIsOpen(false);
+    var firstMenuItem = enabledMenuItems[0];
+    var focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+
+    switch (event.key) {
+      // Select the first available option
+      case 'Enter':
+        if (!isOpen) {
+          setIsOpen(function (prevIsOpen) {
+            return !prevIsOpen;
+          });
+        } else if (isOpen && focusedItem.value !== 'no results') {
+          _onSelect(focusedItem.value);
+        }
+
+        break;
+
+      case 'Tab':
+      case 'Escape':
+        setIsOpen(false);
+        setActiveItem(null);
+        break;
+
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
   };
 
-  var onToggle = function onToggle() {
+  var onToggleClick = function onToggleClick() {
     setIsOpen(!isOpen);
   };
 
-  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(formGroupContainer.FormGroupContainer, {
+  var onTextInputChange = function onTextInputChange(_event, value) {
+    setInputValue(value);
+  };
+
+  var _onSelect = function onSelect(value) {
+    var _textInputRef$current;
+
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+
+    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 == null ? void 0 : (_textInputRef$current = textInputRef.current) == null ? void 0 : _textInputRef$current.focus();
+  };
+
+  var toggle = function toggle(toggleRef) {
+    return React__default["default"].createElement(reactCore.MenuToggle, {
+      variant: 'typeahead',
+      onClick: onToggleClick,
+      innerRef: toggleRef,
+      isExpanded: isOpen,
+      isDisabled: isSubmitting || isDisabled,
+      isFullWidth: true
+    }, React__default["default"].createElement(reactCore.TextInputGroup, {
+      isPlain: true
+    }, React__default["default"].createElement(reactCore.TextInputGroupMain, Object.assign({
+      value: inputValue,
+      onClick: onToggleClick,
+      onChange: onTextInputChange,
+      onKeyDown: onInputKeyDown,
+      id: 'multi-typeahead-select-input',
+      autoComplete: 'off',
+      innerRef: textInputRef,
+      placeholder: placeholder
+    }, activeItem && {
+      'aria-activedescendant': activeItem
+    }, {
+      role: 'combobox',
+      isExpanded: isOpen,
+      "aria-controls": 'select-multi-typeahead-listbox'
+    }), React__default["default"].createElement(reactCore.ChipGroup, {
+      "aria-label": 'Current selections'
+    }, selected.map(function (selection, index) {
+      return React__default["default"].createElement(reactCore.Chip, {
+        key: index,
+        onClick: function onClick(ev) {
+          ev.stopPropagation();
+
+          _onSelect(selection);
+        }
+      }, selection);
+    }))), React__default["default"].createElement(reactCore.TextInputGroupUtilities, null, selected.length > 0 && 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();
+      },
+      "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, {
     validated: meta.touched && meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
     helperTextInvalid: meta.error,
     isRequired: isRequired,
     fieldId: rest.name,
     label: label,
     helperText: helperText
-  }, React__namespace.createElement(reactCore.Select, Object.assign({
-    variant: reactCore.SelectVariant.typeaheadMulti,
-    "aria-labelledby": rest.name,
-    typeAheadAriaLabel: placeholder || 'Select the options',
-    placeholderText: placeholder || 'Select the options',
-    onToggle: onToggle,
-    onSelect: onSelect,
-    onClear: onClear,
-    selections: value,
-    isOpen: isOpen
-  }, maxHeight && {
-    maxHeight: maxHeight
-  }, {
-    isDisabled: isSubmitting || isDisabled,
-    "aria-label": ariaLabel
-  }, disabledItems && {
-    chipGroupComponent: React__namespace.createElement(CustomChipGroup, null)
-  }, classNames && {
-    className: classNames
+  }, React__default["default"].createElement(reactCore.Select, Object.assign({
+    id: 'multi-typeahead-select',
+    isOpen: isOpen,
+    selected: selected,
+    onSelect: function onSelect(_ev, selection) {
+      return _onSelect(selection);
+    },
+    onOpenChange: function onOpenChange() {
+      return setIsOpen(false);
+    },
+    toggle: toggle
   }, menuAppendTo && {
     menuAppendTo: menuAppendTo
-  }, extraProps && _extends({}, extraProps), rest), lodash.map(selectOptions, function (option, index) {
-    return React__namespace.createElement(reactCore.SelectOption, Object.assign({
-      key: index,
-      value: option.value,
-      label: option.value
-    }, option.description && {
-      description: option.description
-    }, option.isDisabled && {
+  }), React__default["default"].createElement(reactCore.SelectList, {
+    isAriaMultiselectable: true,
+    id: 'select-multi-typeahead-listbox'
+  }, selectOptions.map(function (option, index) {
+    return React__default["default"].createElement(reactCore.SelectOption, Object.assign({
+      key: option.value || option.children,
+      isFocused: focusedItemIndex === index,
+      className: option.className,
+      id: "select-multi-typeahead-" + option.value.replace(' ', '-'),
       isDisabled: option.isDisabled
-    }, option.extraProps && _extends({}, option.extraProps)));
-  }))));
+    }, option, {
+      ref: null
+    }));
+  })))));
 };
 
 exports.FormMultiSelectInput = FormMultiSelectInput;

package/dist/index.modern.js

@@ -1,26 +1,8 @@
 import * as React from 'react';
-import { useField, useFormikContext } from 'formik';
-import { ValidatedOptions, Select, SelectVariant, SelectOption, ChipGroup, Chip } from '@patternfly/react-core';
+import React__default from 'react';
+import { ValidatedOptions, Select, SelectList, SelectOption, MenuToggle, TextInputGroup, TextInputGroupMain, ChipGroup, Chip, TextInputGroupUtilities, Button } from '@patternfly/react-core';
 import { FormGroupContainer } from '@rhc-shared-components/form-group-container';
-import { map } from 'lodash';
-
-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);
-}
+import { useField, useFormikContext } from 'formik';
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -37,105 +19,310 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps"];
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var IconSize;
+(function (IconSize) {
+    IconSize["sm"] = "sm";
+    IconSize["md"] = "md";
+    IconSize["lg"] = "lg";
+    IconSize["xl"] = "xl";
+})(IconSize || (IconSize = {}));
+const getSize = (size) => {
+    switch (size) {
+        case IconSize.sm:
+            return '1em';
+        case IconSize.md:
+            return '1.5em';
+        case IconSize.lg:
+            return '2em';
+        case IconSize.xl:
+            return '3em';
+        default:
+            return '1em';
+    }
+};
+let currentId = 0;
+/**
+ * Factory to create Icon class components for consumers
+ */
+function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
+    var _a;
+    return _a = class SVGIcon extends React.Component {
+            constructor() {
+                super(...arguments);
+                this.id = `icon-title-${currentId++}`;
+            }
+            render() {
+                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+                const hasTitle = Boolean(title);
+                const heightWidth = getSize(size);
+                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
+                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
+                const viewBox = [xOffset, yOffset, width, height].join(' ');
+                return (React.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
+                    hasTitle && React.createElement("title", { id: this.id }, title),
+                    React.createElement("path", { d: svgPath })));
+            }
+        },
+        _a.displayName = name,
+        _a.defaultProps = {
+            color: 'currentColor',
+            size: IconSize.sm,
+            noVerticalAlign: false
+        },
+        _a;
+}
+
+const TimesIconConfig = {
+  name: 'TimesIcon',
+  height: 512,
+  width: 352,
+  svgPath: 'M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const TimesIcon = createIcon(TimesIconConfig);
+
+var TimesIcon$1 = TimesIcon;
+
+const _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps"];
 
 const FormMultiSelectInput = _ref => {
   let {
     label,
     isRequired,
-    selectOptions,
+    selectMenuOptions,
     ariaLabel = 'Select Input',
     placeholder,
     helperText,
-    maxHeight,
     isDisabled,
-    classNames,
-    menuAppendTo,
-    extraProps
+    menuAppendTo
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const [, meta] = useField(rest);
-  const {
-    value
-  } = meta;
   const {
     isSubmitting,
     setFieldValue,
     setFieldTouched
   } = useFormikContext();
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = React__default.useState(false);
+  const [inputValue, setInputValue] = React__default.useState('');
+  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 textInputRef = React__default.useRef();
+  React__default.useEffect(() => {
+    let newSelectOptions = selectMenuOptions; // Filter menu items based on the text input value when one exists
+
+    if (inputValue) {
+      newSelectOptions = selectMenuOptions.filter(menuItem => String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())); // When no options are found after filtering, display 'No results found'
+
+      if (!newSelectOptions.length) {
+        newSelectOptions = [{
+          isDisabled: false,
+          children: `No results found for "${inputValue}"`,
+          value: 'no results'
+        }];
+      } // Open the menu when the input value changes and the new value is not empty
+
+
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
 
-  const onSelect = (_event, selection) => {
-    const newValues = value.includes(selection) ? value.filter(item => item !== selection) : [...value, selection];
-    setFieldTouched(rest.name, true, false);
-    setFieldValue(rest.name, newValues, true);
+    setSelectOptions(newSelectOptions);
+    setFocusedItemIndex(null);
+    setActiveItem(null);
+  }, [inputValue]);
+
+  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) {
+          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-multi-typeahead-${focusedItem.value.replace(' ', '-')}`);
+    }
   };
 
-  const disabledItems = selectOptions.filter(selectItem => {
-    var _selectItem$extraProp;
+  const onInputKeyDown = event => {
+    const enabledMenuItems = selectOptions.filter(menuItem => !menuItem.isDisabled);
+    const [firstMenuItem] = enabledMenuItems;
+    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
-    return (selectItem == null ? void 0 : selectItem.isDisabled) || (selectItem == null ? void 0 : (_selectItem$extraProp = selectItem.extraProps) == null ? void 0 : _selectItem$extraProp.isDisabled);
-  });
+    switch (event.key) {
+      // Select the first available option
+      case 'Enter':
+        if (!isOpen) {
+          setIsOpen(prevIsOpen => !prevIsOpen);
+        } else if (isOpen && focusedItem.value !== 'no results') {
+          onSelect(focusedItem.value);
+        }
 
-  const CustomChipGroup = () => React.createElement(ChipGroup, null, (value || []).map(currentValue => React.createElement(Chip, {
-    isReadOnly: !!disabledItems.find(item => item.value === currentValue),
-    key: currentValue,
-    onClick: event => onSelect(event, currentValue)
-  }, currentValue)));
+        break;
 
-  const onClear = () => {
-    const filtered = value == null ? void 0 : value.filter(item => {
-      var _selectItem$extraProp2;
+      case 'Tab':
+      case 'Escape':
+        setIsOpen(false);
+        setActiveItem(null);
+        break;
 
-      const selectItem = disabledItems.find(obj => obj.value === item);
-      return (selectItem == null ? void 0 : selectItem.isDisabled) || (selectItem == null ? void 0 : (_selectItem$extraProp2 = selectItem.extraProps) == null ? void 0 : _selectItem$extraProp2.isDisabled);
-    });
-    setFieldValue(rest.name, [...filtered], true);
-    setIsOpen(false);
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
   };
 
-  const onToggle = () => {
+  const onToggleClick = () => {
     setIsOpen(!isOpen);
   };
 
-  return React.createElement(React.Fragment, null, React.createElement(FormGroupContainer, {
+  const onTextInputChange = (_event, value) => {
+    setInputValue(value);
+  };
+
+  const onSelect = value => {
+    var _textInputRef$current;
+
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+
+    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 == null ? void 0 : (_textInputRef$current = textInputRef.current) == null ? void 0 : _textInputRef$current.focus();
+  };
+
+  const toggle = toggleRef => React__default.createElement(MenuToggle, {
+    variant: 'typeahead',
+    onClick: onToggleClick,
+    innerRef: toggleRef,
+    isExpanded: isOpen,
+    isDisabled: isSubmitting || isDisabled,
+    isFullWidth: true
+  }, React__default.createElement(TextInputGroup, {
+    isPlain: true
+  }, React__default.createElement(TextInputGroupMain, Object.assign({
+    value: inputValue,
+    onClick: onToggleClick,
+    onChange: onTextInputChange,
+    onKeyDown: onInputKeyDown,
+    id: 'multi-typeahead-select-input',
+    autoComplete: 'off',
+    innerRef: textInputRef,
+    placeholder: placeholder
+  }, activeItem && {
+    'aria-activedescendant': activeItem
+  }, {
+    role: 'combobox',
+    isExpanded: isOpen,
+    "aria-controls": 'select-multi-typeahead-listbox'
+  }), React__default.createElement(ChipGroup, {
+    "aria-label": 'Current selections'
+  }, selected.map((selection, index) => React__default.createElement(Chip, {
+    key: index,
+    onClick: ev => {
+      ev.stopPropagation();
+      onSelect(selection);
+    }
+  }, selection)))), React__default.createElement(TextInputGroupUtilities, null, selected.length > 0 && 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();
+    },
+    "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, {
     validated: meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default,
     helperTextInvalid: meta.error,
     isRequired: isRequired,
     fieldId: rest.name,
     label: label,
     helperText: helperText
-  }, React.createElement(Select, Object.assign({
-    variant: SelectVariant.typeaheadMulti,
-    "aria-labelledby": rest.name,
-    typeAheadAriaLabel: placeholder || 'Select the options',
-    placeholderText: placeholder || 'Select the options',
-    onToggle: onToggle,
-    onSelect: onSelect,
-    onClear: onClear,
-    selections: value,
-    isOpen: isOpen
-  }, maxHeight && {
-    maxHeight
-  }, {
-    isDisabled: isSubmitting || isDisabled,
-    "aria-label": ariaLabel
-  }, disabledItems && {
-    chipGroupComponent: React.createElement(CustomChipGroup, null)
-  }, classNames && {
-    className: classNames
+  }, React__default.createElement(Select, Object.assign({
+    id: 'multi-typeahead-select',
+    isOpen: isOpen,
+    selected: selected,
+    onSelect: (_ev, selection) => onSelect(selection),
+    onOpenChange: () => setIsOpen(false),
+    toggle: toggle
   }, menuAppendTo && {
     menuAppendTo
-  }, extraProps && _extends({}, extraProps), rest), map(selectOptions, (option, index) => React.createElement(SelectOption, Object.assign({
-    key: index,
-    value: option.value,
-    label: option.value
-  }, option.description && {
-    description: option.description
-  }, option.isDisabled && {
+  }), React__default.createElement(SelectList, {
+    isAriaMultiselectable: true,
+    id: 'select-multi-typeahead-listbox'
+  }, selectOptions.map((option, index) => React__default.createElement(SelectOption, Object.assign({
+    key: option.value || option.children,
+    isFocused: focusedItemIndex === index,
+    className: option.className,
+    id: `select-multi-typeahead-${option.value.replace(' ', '-')}`,
     isDisabled: option.isDisabled
-  }, option.extraProps && _extends({}, option.extraProps)))))));
+  }, option, {
+    ref: null
+  })))))));
 };
 
 export { FormMultiSelectInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/form-multi-select-component",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "project description",
   "author": "shkale",
   "license": "MIT",
@@ -62,7 +62,7 @@
     "typescript": "^3.7.5"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-core": "5.3.0",
     "@rhc-shared-components/form-group-container": "^0.3.2",
     "@types/lodash": "^4.14.177",
     "formik": "^2.1.4",