@xqmsg/ui-core 0.23.3 → 0.24.1

package/dist/ui-core.esm.js

@@ -1161,9 +1161,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   }))), isFocussed && /*#__PURE__*/React__default.createElement(Dropdown, {
     position: position,
     dropdownRef: dropdownMenuRef,
-    onSelectItem: function onSelectItem(option) {
-      return handleOnSelectItem(option);
-    },
+    onSelectItem: handleOnSelectItem,
     options: options,
     optionIndex: optionIndex
   }));
@@ -1894,7 +1892,7 @@ function Input(_ref) {
     setError = _ref.setError,
     clearErrors = _ref.clearErrors,
     separators = _ref.separators;
-  var selectedInputField = function selectedInputField(onChange, onBlur, ref, value) {
+  function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
         return /*#__PURE__*/React__default.createElement(StackedInput, {
@@ -2038,7 +2036,7 @@ function Input(_ref) {
       default:
         return null;
     }
-  };
+  }
   var nonLabeledInputs = ['checkbox'];
   return /*#__PURE__*/React__default.createElement(Controller, {
     control: control,
@@ -3016,7 +3014,7 @@ var _excluded$4 = ["label", "ariaLabel", "className", "placeholder", "name", "he
 /**
  * A functional React component utilized to render the `SelectNative` component.
  */
-var SelectNative = function SelectNative(_ref) {
+function SelectNative(_ref) {
   var name = _ref.name,
     helperText = _ref.helperText,
     options = _ref.options,
@@ -3045,26 +3043,21 @@ var SelectNative = function SelectNative(_ref) {
     borderLeft: 'none',
     borderRight: 'none'
   };
-  var handleOnSelectItem = function handleOnSelectItem(selectedValue) {
+  var handleOnSelectItem = function handleOnSelectItem(e) {
+    var selectedValue = e.target.value;
     var selectedOption = options == null ? void 0 : options.find(function (_ref2) {
       var val = _ref2.value;
       return selectedValue === val;
     });
     if (selectedOption) {
       if (onChange) {
-        onChange(selectedOption.value);
+        onChange(e);
       }
       setValue(name, selectedOption.value);
     } else {
       setValue(name, selectedValue);
     }
   };
-  useEffect(function () {
-    if (defaultValue) {
-      handleOnSelectItem(defaultValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValue]);
   return /*#__PURE__*/React__default.createElement(Controller, {
     control: control,
     name: name,
@@ -3086,9 +3079,8 @@ var SelectNative = function SelectNative(_ref) {
         ref: ref,
         value: value,
         disabled: disabled != null ? disabled : false,
-        onChange: function onChange(e) {
-          return handleOnSelectItem(e.target.value);
-        },
+        onChange: handleOnSelectItem,
+        defaultValue: defaultValue,
         style: style
       }), options && options.map(function (i) {
         return /*#__PURE__*/React__default.createElement("option", {
@@ -3098,7 +3090,7 @@ var SelectNative = function SelectNative(_ref) {
       })), isInvalid ? /*#__PURE__*/React__default.createElement(FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText));
     }
   });
-};
+}
 
 /**
  * A functional React component utilized to render the `BorderedBox` component
@@ -3776,6 +3768,28 @@ var variantTertiary = function variantTertiary() {
     }
   });
 };
+var variantDanger = function variantDanger() {
+  return _extends$6({}, baseStyle$2, {
+    fontWeight: '400',
+    color: colors.label.primary.dark,
+    bg: colors.label.error,
+    _hover: {
+      bg: colors.label.error
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error
+    },
+    _disabled: {
+      backgroundColor: colors.label.error,
+      color: colors.label.secondary.light
+    }
+  });
+};
 var variantPrimaryFlat = function variantPrimaryFlat() {
   return _extends$6({}, baseStyle$2, {
     bg: colors.fill.action,
@@ -3835,13 +3849,37 @@ var variantTertiaryFlat = function variantTertiaryFlat() {
     }
   });
 };
+var variantDangerFlat = function variantDangerFlat() {
+  return _extends$6({}, variantPrimaryFlat(), {
+    fontWeight: '400',
+    color: colors.label.primary.dark,
+    bg: colors.label.error,
+    _hover: {
+      bg: colors.label.error
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error
+    },
+    _disabled: {
+      backgroundColor: colors.label.error,
+      color: colors.label.secondary.light
+    }
+  });
+};
 var variants$2 = {
   primary: /*#__PURE__*/variantPrimary(),
   secondary: /*#__PURE__*/variantSecondary(),
   tertiary: /*#__PURE__*/variantTertiary(),
+  danger: /*#__PURE__*/variantDanger(),
   'flat-primary': /*#__PURE__*/variantPrimaryFlat(),
   'flat-secondary': /*#__PURE__*/variantSecondaryFlat(),
-  'flat-tertiary': /*#__PURE__*/variantTertiaryFlat()
+  'flat-tertiary': /*#__PURE__*/variantTertiaryFlat(),
+  'flat-danger': /*#__PURE__*/variantDangerFlat()
 };
 var defaultProps$2 = {
   variant: 'primary'