@rhc-shared-components/form-multi-select-component 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 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

package/dist/FormMultiSelectInput.d.ts

@@ -12,7 +12,6 @@ export interface FormMultiSelectInputProps {
     selectOptions: IMultiSelectItem[];
     ariaLabel?: string;
     helperText?: string;
-    maxItems?: number;
     maxHeight?: string | number;
 }
 declare const FormMultiSelectInput: React.FC<FormMultiSelectInputProps>;

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"];
 
 var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   var label = _ref.label,
@@ -49,7 +49,6 @@ 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,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -61,39 +60,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);
-    }
+    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);
   };
 
@@ -116,7 +98,7 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     onToggle: onToggle,
     onSelect: onSelect,
     onClear: onClear,
-    selections: selected,
+    selections: value,
     isOpen: isOpen
   }, maxHeight && {
     maxHeight: maxHeight

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"];
 
 const FormMultiSelectInput = _ref => {
   let {
@@ -29,7 +29,6 @@ const FormMultiSelectInput = _ref => {
     ariaLabel = 'Select Input',
     placeholder,
     helperText,
-    maxItems,
     maxHeight
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -41,32 +40,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);
-    }
+    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);
   };
 
@@ -89,7 +74,7 @@ const FormMultiSelectInput = _ref => {
     onToggle: onToggle,
     onSelect: onSelect,
     onClear: onClear,
-    selections: selected,
+    selections: value,
     isOpen: isOpen
   }, maxHeight && {
     maxHeight

package/package.json

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