@rhc-shared-components/form-multi-select-component 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -0,0 +1,37 @@
+# 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.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

package/dist/FormMultiSelectInput.d.ts

@@ -12,8 +12,10 @@ export interface FormMultiSelectInputProps {
     selectOptions: IMultiSelectItem[];
     ariaLabel?: string;
     helperText?: string;
-    maxItems?: number;
     maxHeight?: string | number;
+    isDisabled?: boolean;
+    classNames?: string;
+    menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
 }
 declare const FormMultiSelectInput: React.FC<FormMultiSelectInputProps>;
 export default FormMultiSelectInput;

package/dist/index.js

@@ -39,7 +39,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxItems", "maxHeight"];
+var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo"];
 
 var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   var label = _ref.label,
@@ -49,8 +49,10 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       ariaLabel = _ref$ariaLabel === void 0 ? 'Select Input' : _ref$ariaLabel,
       placeholder = _ref.placeholder,
       helperText = _ref.helperText,
-      maxItems = _ref.maxItems,
       maxHeight = _ref.maxHeight,
+      isDisabled = _ref.isDisabled,
+      classNames = _ref.classNames,
+      menuAppendTo = _ref.menuAppendTo,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useField = formik.useField(rest),
@@ -61,42 +63,22 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   var _useFormikContext = formik.useFormikContext(),
       isSubmitting = _useFormikContext.isSubmitting,
       setFieldValue = _useFormikContext.setFieldValue,
-      validateField = _useFormikContext.validateField,
       setFieldTouched = _useFormikContext.setFieldTouched;
 
   var _React$useState = React__namespace.useState(false),
       isOpen = _React$useState[0],
       setIsOpen = _React$useState[1];
 
-  var _React$useState2 = React__namespace.useState([]),
-      selected = _React$useState2[0],
-      setSelected = _React$useState2[1];
-
   var onSelect = function onSelect(_event, selection) {
-    if (value.includes(selection)) {
-      setFieldValue(rest.name, value.filter(function (item) {
-        return item !== selection;
-      }));
-      validateField(rest.name);
-    } else {
-      if (maxItems && value.length === maxItems) {
-        return;
-      }
-
-      setFieldValue(rest.name, [].concat(value, [selection]));
-      validateField(rest.name);
-    }
-
-    setFieldTouched(rest.name, true);
+    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);
   };
 
-  React__namespace.useEffect(function () {
-    setSelected(value);
-  }, [value]);
-
   var onClear = function onClear() {
-    setFieldValue(rest.name, []);
-    validateField(rest.name);
+    setFieldValue(rest.name, [], true);
     setIsOpen(false);
   };
 
@@ -119,13 +101,17 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     onToggle: onToggle,
     onSelect: onSelect,
     onClear: onClear,
-    selections: selected,
+    selections: value,
     isOpen: isOpen
   }, maxHeight && {
     maxHeight: maxHeight
   }, {
-    isDisabled: isSubmitting,
+    isDisabled: isSubmitting || isDisabled,
     "aria-label": ariaLabel
+  }, classNames && {
+    className: classNames
+  }, menuAppendTo && {
+    menuAppendTo: menuAppendTo
   }, rest), lodash.map(selectOptions, function (option, index) {
     return React__namespace.createElement(reactCore.SelectOption, Object.assign({
       key: index,

package/dist/index.modern.js

@@ -19,7 +19,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxItems", "maxHeight"];
+const _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo"];
 
 const FormMultiSelectInput = _ref => {
   let {
@@ -29,8 +29,10 @@ const FormMultiSelectInput = _ref => {
     ariaLabel = 'Select Input',
     placeholder,
     helperText,
-    maxItems,
-    maxHeight
+    maxHeight,
+    isDisabled,
+    classNames,
+    menuAppendTo
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -41,35 +43,18 @@ const FormMultiSelectInput = _ref => {
   const {
     isSubmitting,
     setFieldValue,
-    validateField,
     setFieldTouched
   } = useFormikContext();
   const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState([]);
 
   const onSelect = (_event, selection) => {
-    if (value.includes(selection)) {
-      setFieldValue(rest.name, value.filter(item => item !== selection));
-      validateField(rest.name);
-    } else {
-      if (maxItems && value.length === maxItems) {
-        return;
-      }
-
-      setFieldValue(rest.name, [...value, selection]);
-      validateField(rest.name);
-    }
-
-    setFieldTouched(rest.name, true);
+    const newValues = value.includes(selection) ? value.filter(item => item !== selection) : [...value, selection];
+    setFieldTouched(rest.name, true, false);
+    setFieldValue(rest.name, newValues, true);
   };
 
-  React.useEffect(() => {
-    setSelected(value);
-  }, [value]);
-
   const onClear = () => {
-    setFieldValue(rest.name, []);
-    validateField(rest.name);
+    setFieldValue(rest.name, [], true);
     setIsOpen(false);
   };
 
@@ -92,13 +77,17 @@ const FormMultiSelectInput = _ref => {
     onToggle: onToggle,
     onSelect: onSelect,
     onClear: onClear,
-    selections: selected,
+    selections: value,
     isOpen: isOpen
   }, maxHeight && {
     maxHeight
   }, {
-    isDisabled: isSubmitting,
+    isDisabled: isSubmitting || isDisabled,
     "aria-label": ariaLabel
+  }, classNames && {
+    className: classNames
+  }, menuAppendTo && {
+    menuAppendTo
   }, rest), map(selectOptions, (option, index) => React.createElement(SelectOption, Object.assign({
     key: index,
     value: option.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/form-multi-select-component",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "project description",
   "author": "shkale",
   "license": "MIT",
@@ -76,6 +76,5 @@
   ],
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "a8ed9cc748eefbfdd57bfae01aef27dd11ea0f0b"
+  }
 }