@rhc-shared-components/form-multi-select-component 0.2.1 → 1.0.0

package/dist/FormMultiSelectInput.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { SelectOptionProps } from '@patternfly/react-core';
+declare type IMultiSelectInputOptionProps = SelectOptionProps;
 export interface FormMultiSelectInputProps {
     name: string;
     label: string;
     isRequired?: boolean;
     placeholder?: string;
-    selectMenuOptions: SelectOptionProps[];
+    selectMenuOptions: IMultiSelectInputOptionProps[];
     ariaLabel?: string;
     helperText?: string;
     maxHeight?: string | number;
@@ -15,4 +16,4 @@ export interface FormMultiSelectInputProps {
     extraProps?: any;
 }
 declare const FormMultiSelectInput: React.FunctionComponent<FormMultiSelectInputProps>;
-export default FormMultiSelectInput;
+export { FormMultiSelectInput, IMultiSelectInputOptionProps };

package/dist/index.d.ts

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

package/dist/index.js

@@ -126,6 +126,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   var _useField = formik.useField(rest),
       meta = _useField[1];
 
+  var value = meta.value;
+
   var _useFormikContext = formik.useFormikContext(),
       isSubmitting = _useFormikContext.isSubmitting,
       setFieldValue = _useFormikContext.setFieldValue,
@@ -182,6 +184,12 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     setFocusedItemIndex(null);
     setActiveItem(null);
   }, [inputValue]);
+  React__default["default"].useEffect(function () {
+    if ((value == null ? void 0 : value.length) > 0) {
+      setFieldValue(rest.name, value, true);
+      setSelected(value);
+    }
+  }, []);
 
   var handleMenuArrowKeys = function handleMenuArrowKeys(key) {
     var indexToFocus = 0;
@@ -355,10 +363,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       isFocused: focusedItemIndex === index,
       className: option.className,
       id: "select-multi-typeahead-" + option.value.replace(' ', '-'),
-      isDisabled: option.isDisabled
-    }, option, {
-      ref: null
-    }));
+      isDisabled: option.isDisabled || isSubmitting
+    }, option));
   })))));
 };
 

package/dist/index.modern.js

@@ -105,6 +105,9 @@ const FormMultiSelectInput = _ref => {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const [, meta] = useField(rest);
+  const {
+    value
+  } = meta;
   const {
     isSubmitting,
     setFieldValue,
@@ -141,6 +144,12 @@ const FormMultiSelectInput = _ref => {
     setFocusedItemIndex(null);
     setActiveItem(null);
   }, [inputValue]);
+  React__default.useEffect(() => {
+    if ((value == null ? void 0 : value.length) > 0) {
+      setFieldValue(rest.name, value, true);
+      setSelected(value);
+    }
+  }, []);
 
   const handleMenuArrowKeys = key => {
     let indexToFocus = 0;
@@ -296,10 +305,8 @@ const FormMultiSelectInput = _ref => {
     isFocused: focusedItemIndex === index,
     className: option.className,
     id: `select-multi-typeahead-${option.value.replace(' ', '-')}`,
-    isDisabled: option.isDisabled
-  }, option, {
-    ref: null
-  })))))));
+    isDisabled: option.isDisabled || isSubmitting
+  }, option)))))));
 };
 
 export { FormMultiSelectInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/form-multi-select-component",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "description": "project description",
   "author": "shkale",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "predeploy": "cd example && yarn install && yarn run build"
   },
   "peerDependencies": {
-    "@patternfly/react-core": ">=4.101.3",
+    "@patternfly/react-core": ">=5.3.0",
     "formik": ">=2.1.4",
     "react": ">=16.13.1",
     "react-dom": ">=16.13.1"