@rhc-shared-components/form-multi-select-component 0.2.0 → 0.2.2

package/dist/index.js

@@ -41,54 +41,38 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-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]];
-        }
-    return t;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+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]];
+      }
+  return t;
 }
 
-var IconSize;
-(function (IconSize) {
-    IconSize["sm"] = "sm";
-    IconSize["md"] = "md";
-    IconSize["lg"] = "lg";
-    IconSize["xl"] = "xl";
-})(IconSize || (IconSize = {}));
-const getSize = (size) => {
-    switch (size) {
-        case IconSize.sm:
-            return '1em';
-        case IconSize.md:
-            return '1.5em';
-        case IconSize.lg:
-            return '2em';
-        case IconSize.xl:
-            return '3em';
-        default:
-            return '1em';
-    }
+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;
 /**
  * Factory to create Icon class components for consumers
@@ -101,23 +85,16 @@ function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath })
                 this.id = `icon-title-${currentId++}`;
             }
             render() {
-                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+                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 heightWidth = getSize(size);
-                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
                 const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React__namespace.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
+                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.defaultProps = {
-            color: 'currentColor',
-            size: IconSize.sm,
-            noVerticalAlign: false
-        },
         _a;
 }
 
@@ -149,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,
@@ -205,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;
@@ -378,7 +363,7 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       isFocused: focusedItemIndex === index,
       className: option.className,
       id: "select-multi-typeahead-" + option.value.replace(' ', '-'),
-      isDisabled: option.isDisabled
+      isDisabled: option.isDisabled || isSubmitting
     }, option, {
       ref: null
     }));

package/dist/index.modern.js

@@ -19,54 +19,38 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-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]];
-        }
-    return t;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+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]];
+      }
+  return t;
 }
 
-var IconSize;
-(function (IconSize) {
-    IconSize["sm"] = "sm";
-    IconSize["md"] = "md";
-    IconSize["lg"] = "lg";
-    IconSize["xl"] = "xl";
-})(IconSize || (IconSize = {}));
-const getSize = (size) => {
-    switch (size) {
-        case IconSize.sm:
-            return '1em';
-        case IconSize.md:
-            return '1.5em';
-        case IconSize.lg:
-            return '2em';
-        case IconSize.xl:
-            return '3em';
-        default:
-            return '1em';
-    }
+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;
 /**
  * Factory to create Icon class components for consumers
@@ -79,23 +63,16 @@ function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath })
                 this.id = `icon-title-${currentId++}`;
             }
             render() {
-                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+                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 heightWidth = getSize(size);
-                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
                 const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
+                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.defaultProps = {
-            color: 'currentColor',
-            size: IconSize.sm,
-            noVerticalAlign: false
-        },
         _a;
 }
 
@@ -128,6 +105,9 @@ const FormMultiSelectInput = _ref => {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const [, meta] = useField(rest);
+  const {
+    value
+  } = meta;
   const {
     isSubmitting,
     setFieldValue,
@@ -164,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;
@@ -319,7 +305,7 @@ const FormMultiSelectInput = _ref => {
     isFocused: focusedItemIndex === index,
     className: option.className,
     id: `select-multi-typeahead-${option.value.replace(' ', '-')}`,
-    isDisabled: option.isDisabled
+    isDisabled: option.isDisabled || isSubmitting
   }, option, {
     ref: null
   })))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/form-multi-select-component",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "project description",
   "author": "shkale",
   "license": "MIT",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@patternfly/react-core": "5.3.0",
-    "@rhc-shared-components/form-group-container": "^0.3.2",
+    "@rhc-shared-components/form-group-container": "^0.4.0",
     "@types/lodash": "^4.14.177",
     "formik": "^2.1.4",
     "lodash": "^4.17.21",