@rhc-shared-components/form-multi-select-component 1.0.6 → 1.0.7

package/dist/index.js

@@ -27,36 +27,30 @@ 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 _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-
-  return target;
+  return t;
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
 }
 
 /******************************************************************************
@@ -73,133 +67,143 @@ 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]];
-      }
+  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;
 }
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
   var e = new Error(message);
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-let currentId = 0;
+var 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, { title, className } = _a, props = __rest(_a, ["title", "className"]);
-                const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
-                const hasTitle = Boolean(title);
-                const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React__namespace.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
-                    hasTitle && React__namespace.createElement("title", { id: this.id }, title),
-                    React__namespace.createElement("path", { d: svgPath })));
-            }
-        },
-        _a.displayName = name,
-        _a;
+function createIcon(_ref) {
+  var name = _ref.name,
+    _ref$xOffset = _ref.xOffset,
+    xOffset = _ref$xOffset === void 0 ? 0 : _ref$xOffset,
+    _ref$yOffset = _ref.yOffset,
+    yOffset = _ref$yOffset === void 0 ? 0 : _ref$yOffset,
+    width = _ref.width,
+    height = _ref.height,
+    svgPath = _ref.svgPath;
+  var _a;
+  return _a = /*#__PURE__*/function (_React$Component) {
+    function SVGIcon() {
+      var _this;
+      _this = _React$Component.apply(this, arguments) || this;
+      _this.id = "icon-title-" + currentId++;
+      return _this;
+    }
+    _inheritsLoose(SVGIcon, _React$Component);
+    var _proto = SVGIcon.prototype;
+    _proto.render = function render() {
+      var _b = this.props,
+        title = _b.title,
+        className = _b.className,
+        props = __rest(_b, ["title", "className"]);
+      var classes = className ? "pf-v5-svg " + className : 'pf-v5-svg';
+      var hasTitle = Boolean(title);
+      var viewBox = [xOffset, yOffset, width, height].join(' ');
+      return React__namespace.createElement("svg", Object.assign({
+        className: classes,
+        viewBox: viewBox,
+        fill: "currentColor",
+        "aria-labelledby": hasTitle ? this.id : null,
+        "aria-hidden": hasTitle ? null : true,
+        role: "img",
+        width: "1em",
+        height: "1em"
+      }, props), hasTitle && React__namespace.createElement("title", {
+        id: this.id
+      }, title), React__namespace.createElement("path", {
+        d: svgPath
+      }));
+    };
+    return SVGIcon;
+  }(React__namespace.Component), _a.displayName = name, _a;
 }
 
-const TimesIconConfig = {
+var 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,
+  xOffset: 0
 };
-
-const TimesIcon = createIcon(TimesIconConfig);
-
+var TimesIcon = createIcon(TimesIconConfig);
 var TimesIcon$1 = TimesIcon;
 
 var _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "extraProps", "isScrollable"];
-
 var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   var label = _ref.label,
-      isRequired = _ref.isRequired,
-      selectMenuOptions = _ref.selectMenuOptions,
-      placeholder = _ref.placeholder,
-      helperText = _ref.helperText,
-      maxHeight = _ref.maxHeight,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    isRequired = _ref.isRequired,
+    selectMenuOptions = _ref.selectMenuOptions,
+    placeholder = _ref.placeholder,
+    helperText = _ref.helperText,
+    maxHeight = _ref.maxHeight,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useField = formik.useField(rest),
-      meta = _useField[1];
-
+    meta = _useField[1];
   var value = meta.value;
-
   var _useFormikContext = formik.useFormikContext(),
-      isSubmitting = _useFormikContext.isSubmitting,
-      setFieldValue = _useFormikContext.setFieldValue,
-      setFieldTouched = _useFormikContext.setFieldTouched;
-
+    isSubmitting = _useFormikContext.isSubmitting,
+    setFieldValue = _useFormikContext.setFieldValue,
+    setFieldTouched = _useFormikContext.setFieldTouched;
   var _React$useState = React__default["default"].useState(false),
-      isOpen = _React$useState[0],
-      setIsOpen = _React$useState[1];
-
+    isOpen = _React$useState[0],
+    setIsOpen = _React$useState[1];
   var _React$useState2 = React__default["default"].useState(''),
-      inputValue = _React$useState2[0],
-      setInputValue = _React$useState2[1];
-
+    inputValue = _React$useState2[0],
+    setInputValue = _React$useState2[1];
   var _React$useState3 = React__default["default"].useState([]),
-      selected = _React$useState3[0],
-      setSelected = _React$useState3[1];
-
+    selected = _React$useState3[0],
+    setSelected = _React$useState3[1];
   var _React$useState4 = React__default["default"].useState(selectMenuOptions),
-      selectOptions = _React$useState4[0],
-      setSelectOptions = _React$useState4[1];
-
+    selectOptions = _React$useState4[0],
+    setSelectOptions = _React$useState4[1];
   var _React$useState5 = React__default["default"].useState(null),
-      focusedItemIndex = _React$useState5[0],
-      setFocusedItemIndex = _React$useState5[1];
-
+    focusedItemIndex = _React$useState5[0],
+    setFocusedItemIndex = _React$useState5[1];
   var _React$useState6 = React__default["default"].useState(null),
-      activeItemId = _React$useState6[0],
-      setActiveItemId = _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
-
+    if (textInputRef != null && textInputRef.current && isRequired !== undefined) {
+      textInputRef.current.setAttribute('aria-required', String(isRequired));
+    }
+  }, [isRequired, textInputRef.current]);
+  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'
-
+      });
+      // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
         newSelectOptions = [{
           isAriaDisabled: true,
           children: "No results found for \"" + inputValue + "\"",
           value: NO_RESULTS
         }];
-      } // Open the menu when the input value changes and the new value is not empty
-
-
+      }
+      // Open the menu when the input value changes and the new value is not empty
       if (!isOpen) {
         setIsOpen(true);
       }
     }
-
     setSelectOptions(newSelectOptions);
   }, [inputValue, isOpen, selectMenuOptions]);
   React__default["default"].useEffect(function () {
@@ -208,27 +212,22 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       setSelected(value);
     }
   }, [rest.name, value, setFieldValue]);
-
   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);
@@ -236,10 +235,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       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;
@@ -247,86 +244,68 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       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();
+    }
+    // eslint-disable-next-line no-unused-expressions
+    (_textInputRef$current = textInputRef.current) == null || _textInputRef$current.focus();
   };
-
   var onTextInputChange = function onTextInputChange(_event, value) {
     setInputValue(value);
     resetActiveAndFocusedItem();
   };
-
   var handleMenuArrowKeys = function handleMenuArrowKeys(key) {
     var indexToFocus = 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
-
-
+      }
+      // 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
-
-
+      }
+      // Skip disabled options
       while (selectOptions[indexToFocus].isDisabled) {
         indexToFocus++;
-
         if (indexToFocus === selectOptions.length) {
           indexToFocus = 0;
         }
       }
     }
-
     setActiveAndFocusedItem(indexToFocus);
   };
-
   var onInputKeyDown = function onInputKeyDown(event) {
     var focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
-
     switch (event.key) {
       case 'Enter':
         event.preventDefault();
-
         if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
           _onSelect(focusedItem.value);
         }
-
         if (!isOpen) {
           setIsOpen(true);
         }
-
         break;
-
       case 'ArrowUp':
       case 'ArrowDown':
         event.preventDefault();
@@ -334,33 +313,26 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
         break;
     }
   };
-
   var onToggleClick = function onToggleClick() {
     var _textInputRef$current2;
-
-    setIsOpen(!isOpen); // eslint-disable-next-line no-unused-expressions
-
-    textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
+    setIsOpen(!isOpen);
+    // eslint-disable-next-line no-unused-expressions
+    textInputRef == null || (_textInputRef$current2 = textInputRef.current) == null || _textInputRef$current2.focus();
   };
-
   var onClearButtonClick = function onClearButtonClick() {
     var _textInputRef$current3;
-
     setSelected([]);
     setInputValue('');
     resetActiveAndFocusedItem();
-    textInputRef == null ? void 0 : (_textInputRef$current3 = textInputRef.current) == null ? void 0 : _textInputRef$current3.focus();
+    textInputRef == null || (_textInputRef$current3 = textInputRef.current) == null || _textInputRef$current3.focus();
     setFieldValue(rest.name, [], true);
   };
-
   var getChildren = function getChildren(value) {
     var _selectMenuOptions$fi;
-
     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',
@@ -394,7 +366,6 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
         key: index,
         onClick: function onClick(ev) {
           ev.stopPropagation();
-
           _onSelect(selection);
         }
       }, getChildren(selection));
@@ -410,7 +381,6 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       "aria-hidden": true
     })))));
   };
-
   return React__default["default"].createElement(formGroupContainer.FormGroupContainer, {
     validated: meta.touched && meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
     helperTextInvalid: meta.error,

package/dist/index.modern.js

@@ -5,36 +5,22 @@ 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 _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-
-  return target;
+  return t;
 }
 
 /******************************************************************************
@@ -51,19 +37,14 @@ 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]];
-      }
+  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;
 }
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
   var e = new Error(message);
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -73,25 +54,46 @@ 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, { title, className } = _a, props = __rest(_a, ["title", "className"]);
-                const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
-                const hasTitle = Boolean(title);
-                const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
-                    hasTitle && React.createElement("title", { id: this.id }, title),
-                    React.createElement("path", { d: svgPath })));
-            }
-        },
-        _a.displayName = name,
-        _a;
+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 _b = this.props,
+        {
+          title,
+          className
+        } = _b,
+        props = __rest(_b, ["title", "className"]);
+      const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
+      const hasTitle = Boolean(title);
+      const viewBox = [xOffset, yOffset, width, height].join(' ');
+      return React.createElement("svg", Object.assign({
+        className: classes,
+        viewBox: viewBox,
+        fill: "currentColor",
+        "aria-labelledby": hasTitle ? this.id : null,
+        "aria-hidden": hasTitle ? null : true,
+        role: "img",
+        width: "1em",
+        height: "1em"
+      }, props), hasTitle && React.createElement("title", {
+        id: this.id
+      }, title), React.createElement("path", {
+        d: svgPath
+      }));
+    }
+  }, _a.displayName = name, _a;
 }
 
 const TimesIconConfig = {
@@ -100,28 +102,24 @@ const TimesIconConfig = {
   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,
+  xOffset: 0
 };
-
 const TimesIcon = createIcon(TimesIconConfig);
-
 var TimesIcon$1 = TimesIcon;
 
 const _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "extraProps", "isScrollable"];
-
 const FormMultiSelectInput = _ref => {
   let {
-    label,
-    isRequired,
-    selectMenuOptions,
-    ariaLabel = 'Select a value',
-    placeholder,
-    helperText,
-    maxHeight,
-    isDisabled = false
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      label,
+      isRequired,
+      selectMenuOptions,
+      ariaLabel = 'Select a value',
+      placeholder,
+      helperText,
+      maxHeight,
+      isDisabled = false
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   const [, meta] = useField(rest);
   const {
     value
@@ -140,25 +138,28 @@ const FormMultiSelectInput = _ref => {
   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
-
+    if (textInputRef != null && textInputRef.current && isRequired !== undefined) {
+      textInputRef.current.setAttribute('aria-required', String(isRequired));
+    }
+  }, [isRequired, textInputRef.current]);
+  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'
-
+      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 = [{
           isAriaDisabled: true,
           children: `No results found for "${inputValue}"`,
           value: NO_RESULTS
         }];
-      } // Open the menu when the input value changes and the new value is not empty
-
-
+      }
+      // Open the menu when the input value changes and the new value is not empty
       if (!isOpen) {
         setIsOpen(true);
       }
     }
-
     setSelectOptions(newSelectOptions);
   }, [inputValue, isOpen, selectMenuOptions]);
   React__default.useEffect(() => {
@@ -167,25 +168,20 @@ const FormMultiSelectInput = _ref => {
       setSelected(value);
     }
   }, [rest.name, value, setFieldValue]);
-
   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);
@@ -193,93 +189,73 @@ const FormMultiSelectInput = _ref => {
       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();
+    }
+    // eslint-disable-next-line no-unused-expressions
+    (_textInputRef$current = textInputRef.current) == null || _textInputRef$current.focus();
   };
-
   const onTextInputChange = (_event, value) => {
     setInputValue(value);
     resetActiveAndFocusedItem();
   };
-
   const handleMenuArrowKeys = key => {
     let indexToFocus = 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
-
-
+      }
+      // 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
-
-
+      }
+      // Skip disabled options
       while (selectOptions[indexToFocus].isDisabled) {
         indexToFocus++;
-
         if (indexToFocus === selectOptions.length) {
           indexToFocus = 0;
         }
       }
     }
-
     setActiveAndFocusedItem(indexToFocus);
   };
-
   const onInputKeyDown = event => {
     const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
-
     switch (event.key) {
       case 'Enter':
         event.preventDefault();
-
         if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
           onSelect(focusedItem.value);
         }
-
         if (!isOpen) {
           setIsOpen(true);
         }
-
         break;
-
       case 'ArrowUp':
       case 'ArrowDown':
         event.preventDefault();
@@ -287,31 +263,24 @@ const FormMultiSelectInput = _ref => {
         break;
     }
   };
-
   const onToggleClick = () => {
     var _textInputRef$current2;
-
-    setIsOpen(!isOpen); // eslint-disable-next-line no-unused-expressions
-
-    textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
+    setIsOpen(!isOpen);
+    // eslint-disable-next-line no-unused-expressions
+    textInputRef == null || (_textInputRef$current2 = textInputRef.current) == null || _textInputRef$current2.focus();
   };
-
   const onClearButtonClick = () => {
     var _textInputRef$current3;
-
     setSelected([]);
     setInputValue('');
     resetActiveAndFocusedItem();
-    textInputRef == null ? void 0 : (_textInputRef$current3 = textInputRef.current) == null ? void 0 : _textInputRef$current3.focus();
+    textInputRef == null || (_textInputRef$current3 = textInputRef.current) == null || _textInputRef$current3.focus();
     setFieldValue(rest.name, [], true);
   };
-
   const getChildren = value => {
     var _selectMenuOptions$fi;
-
     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',
@@ -356,7 +325,6 @@ const FormMultiSelectInput = _ref => {
   }, React__default.createElement(TimesIcon$1, {
     "aria-hidden": true
   })))));
-
   return React__default.createElement(FormGroupContainer, {
     validated: meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default,
     helperTextInvalid: meta.error,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/form-multi-select-component",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "project description",
   "author": "shkale",
   "license": "MIT",