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

package/dist/FormMultiSelectInput.d.ts

@@ -11,7 +11,6 @@ export interface FormMultiSelectInputProps {
     maxHeight?: string;
     isDisabled?: boolean;
     classNames?: string;
-    menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
     extraProps?: any;
     isScrollable?: boolean;
 }

package/dist/index.js

@@ -129,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,
@@ -140,7 +140,6 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       maxHeight = _ref.maxHeight,
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      menuAppendTo = _ref.menuAppendTo,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useField = formik.useField(rest),
@@ -202,13 +201,13 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     }
 
     setSelectOptions(newSelectOptions);
-  }, [inputValue]);
+  }, [inputValue, isOpen, selectMenuOptions]);
   React__default["default"].useEffect(function () {
     if ((value == null ? void 0 : value.length) > 0) {
       setFieldValue(rest.name, value, true);
       setSelected(value);
     }
-  }, []);
+  }, [rest.name, value, setFieldValue]);
 
   var createItemId = function createItemId(value) {
     return "select-multi-typeahead-" + value.replace(' ', '-');
@@ -316,6 +315,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
 
     switch (event.key) {
       case 'Enter':
+        event.preventDefault();
+
         if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
           _onSelect(focusedItem.value);
         }
@@ -410,14 +411,14 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     })))));
   };
 
-  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, _extends({
+  }, React__default["default"].createElement(reactCore.Select, {
     id: 'multi-typeahead-select',
     isOpen: isOpen,
     selected: selected,
@@ -426,20 +427,22 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     },
     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'
   }, selectOptions == null ? void 0 : selectOptions.map(function (option, index) {
     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

@@ -107,7 +107,7 @@ 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 {
@@ -118,8 +118,7 @@ const FormMultiSelectInput = _ref => {
     placeholder,
     helperText,
     maxHeight,
-    isDisabled = false,
-    menuAppendTo
+    isDisabled = false
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -161,13 +160,13 @@ const FormMultiSelectInput = _ref => {
     }
 
     setSelectOptions(newSelectOptions);
-  }, [inputValue]);
+  }, [inputValue, isOpen, selectMenuOptions]);
   React__default.useEffect(() => {
     if ((value == null ? void 0 : value.length) > 0) {
       setFieldValue(rest.name, value, true);
       setSelected(value);
     }
-  }, []);
+  }, [rest.name, value, setFieldValue]);
 
   const createItemId = value => `select-multi-typeahead-${value.replace(' ', '-')}`;
 
@@ -269,6 +268,8 @@ const FormMultiSelectInput = _ref => {
 
     switch (event.key) {
       case 'Enter':
+        event.preventDefault();
+
         if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
           onSelect(focusedItem.value);
         }
@@ -356,32 +357,34 @@ const FormMultiSelectInput = _ref => {
     "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, _extends({
+  }, React__default.createElement(Select, {
     id: 'multi-typeahead-select',
     isOpen: isOpen,
     selected: selected,
     onSelect: (_ev, selection) => onSelect(selection),
     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, _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/package.json

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