@northlight/ui 2.25.1 → 2.26.1

package/dist/umd/northlight.cjs

@@ -3997,91 +3997,94 @@
       radii: borderRadius,
       borders: borderWidth,
       opacity
-    }, isReadOnly }) => ({
-      root: {
-        borderRadius: borderRadius.input.outline
-      },
-      field: {
-        minWidth: sizing["44"],
-        paddingInlineStart: spacing["padding-inline"].input.default,
-        paddingInlineEnd: spacing["padding-inline"].input.default,
-        WebkitPaddingStart: spacing["padding-inline"].input.default,
-        WebkitPaddingEnd: spacing["padding-inline"].input.default,
-        color: color.text.default,
-        bg: color.background.input["outline-default"],
-        borderWidth: borderWidth.input.default,
-        borderColor: color.border.input.default,
-        paddingRight: spacing.paddingRight["number-input"].field,
-        _hover: {
-          bg: color.background.input["outline-hover"],
-          borderColor: color.border.input["default-hover"]
-        },
-        _focusVisible: {
-          bg: color.background.input["outline-focus"],
-          borderColor: color.border.input.focus,
-          boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
-        },
-        _invalid: {
-          bg: color.background.input["outline-error"],
-          borderColor: color.border.input.error,
-          boxShadow: `0 0 0 1px ${color.border.input.error}`
-        },
-        _disabled: {
-          bg: color.background.input["outline-disabled"],
-          opacity: opacity.input.disabled,
-          borderColor: color.border.input.disabled
+    }, isReadOnly, minWidth, minW }) => {
+      var _a;
+      return {
+        root: {
+          borderRadius: borderRadius.input.outline
         },
-        _readOnly: {
-          _focusVisible: {
-            borderColor: color.border.input.readonly,
-            boxShadow: "none"
-          },
-          _hover: {
-            borderColor: color.border.input.readonly
-          }
-        }
-      },
-      stepperGroup: {
-        width: "auto",
-        paddingRight: spacing.paddingRight["number-input"].stepper
-      },
-      stepper: {
-        _first: {
-          border: "none",
-          borderTopRightRadius: borderRadius["input-stepper"].default,
-          borderRadius: borderRadius["input-stepper"].default,
-          bg: color.background["input-stepper"].default,
-          opacity: isReadOnly ? opacity.input.disabled : "auto",
+        field: {
+          minWidth: (_a = minWidth != null ? minWidth : minW) != null ? _a : sizing["44"],
+          paddingInlineStart: spacing["padding-inline"].input.default,
+          paddingInlineEnd: spacing["padding-inline"].input.default,
+          WebkitPaddingStart: spacing["padding-inline"].input.default,
+          WebkitPaddingEnd: spacing["padding-inline"].input.default,
+          color: color.text.default,
+          bg: color.background.input["outline-default"],
+          borderWidth: borderWidth.input.default,
+          borderColor: color.border.input.default,
+          paddingRight: spacing.paddingRight["number-input"].field,
           _hover: {
-            bg: isReadOnly ? "none" : color.background["input-stepper"].hover
+            bg: color.background.input["outline-hover"],
+            borderColor: color.border.input["default-hover"]
           },
-          _active: {
-            bg: color.background["input-stepper"].active
+          _focusVisible: {
+            bg: color.background.input["outline-focus"],
+            borderColor: color.border.input.focus,
+            boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
+          },
+          _invalid: {
+            bg: color.background.input["outline-error"],
+            borderColor: color.border.input.error,
+            boxShadow: `0 0 0 1px ${color.border.input.error}`
           },
           _disabled: {
-            bg: color.background["input-stepper"].disabled,
-            color: color.icon["input-stepper"].disabled
+            bg: color.background.input["outline-disabled"],
+            opacity: opacity.input.disabled,
+            borderColor: color.border.input.disabled
+          },
+          _readOnly: {
+            _focusVisible: {
+              borderColor: color.border.input.readonly,
+              boxShadow: "none"
+            },
+            _hover: {
+              borderColor: color.border.input.readonly
+            }
           }
         },
-        _last: {
-          border: "none",
-          bg: color.background["input-stepper"].default,
-          borderBottomRightRadius: borderRadius["input-stepper"].default,
-          borderRadius: borderRadius["input-stepper"].default,
-          opacity: isReadOnly ? opacity.input.disabled : "auto",
-          _hover: {
-            bg: isReadOnly ? "none" : color.background["input-stepper"].hover
-          },
-          _active: {
-            bg: color.background["input-stepper"].active
+        stepperGroup: {
+          width: "auto",
+          paddingRight: spacing.paddingRight["number-input"].stepper
+        },
+        stepper: {
+          _first: {
+            border: "none",
+            borderTopRightRadius: borderRadius["input-stepper"].default,
+            borderRadius: borderRadius["input-stepper"].default,
+            bg: color.background["input-stepper"].default,
+            opacity: isReadOnly ? opacity.input.disabled : "auto",
+            _hover: {
+              bg: isReadOnly ? "none" : color.background["input-stepper"].hover
+            },
+            _active: {
+              bg: color.background["input-stepper"].active
+            },
+            _disabled: {
+              bg: color.background["input-stepper"].disabled,
+              color: color.icon["input-stepper"].disabled
+            }
           },
-          _disabled: {
-            bg: color.background["input-stepper"].disabled,
-            color: color.icon["input-stepper"].disabled
+          _last: {
+            border: "none",
+            bg: color.background["input-stepper"].default,
+            borderBottomRightRadius: borderRadius["input-stepper"].default,
+            borderRadius: borderRadius["input-stepper"].default,
+            opacity: isReadOnly ? opacity.input.disabled : "auto",
+            _hover: {
+              bg: isReadOnly ? "none" : color.background["input-stepper"].hover
+            },
+            _active: {
+              bg: color.background["input-stepper"].active
+            },
+            _disabled: {
+              bg: color.background["input-stepper"].disabled,
+              color: color.icon["input-stepper"].disabled
+            }
           }
         }
-      }
-    })
+      };
+    }
   };
 
   const NotificationIconButton$1 = {
@@ -8913,17 +8916,24 @@
       }
     return target;
   };
-  function getComponents() {
-    return {
-      Menu: (props) => /* @__PURE__ */ React.createElement(react.Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Menu, __spreadValues$12({}, props), props.children)),
-      DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$12({}, props)),
-      Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$12({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$12({}, props)),
-      MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$12({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$12({}, props)),
-      Control: (_a) => {
-        var _b = _a, { children } = _b, props = __objRest$R(_b, ["children"]);
-        return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(react.HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(react.HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$12({}, props), children);
-      }
-    };
+  function getComponents(components) {
+    return ramda.merge(
+      {
+        Menu: (props) => /* @__PURE__ */ React.createElement(react.Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Menu, __spreadValues$12({}, props), props.children)),
+        DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$12({}, props)),
+        Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$12({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$12({}, props)),
+        MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$12({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$12({}, props)),
+        Control: (_a) => {
+          var _b = _a, {
+            children
+          } = _b, props = __objRest$R(_b, [
+            "children"
+          ]);
+          return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(react.HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(react.HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$12({}, props), children);
+        }
+      },
+      components || {}
+    );
   }
 
   var __defProp$11 = Object.defineProperty;
@@ -12252,7 +12262,8 @@
       customTag = null,
       isClearable = false,
       value,
-      icon
+      icon,
+      components
     } = _b, rest = __objRest$l(_b, [
       "options",
       "isMulti",
@@ -12266,7 +12277,8 @@
       "customTag",
       "isClearable",
       "value",
-      "icon"
+      "icon",
+      "components"
     ]);
     const handleChange = useSelectCallbacks({
       onChange,
@@ -12276,7 +12288,7 @@
       value: ramda.is(Array, value) ? value : []
     });
     const customComponents = React.useMemo(
-      () => getComponents(),
+      () => getComponents(components),
       []
     );
     const prevOptions = React.useRef(
@@ -13866,18 +13878,22 @@
     onOptionChange,
     width = "100%",
     variant = "outline",
-    initialValue,
+    defaultValue,
+    value,
     menuPlacement = "bottom"
   }) => {
     const initialSelectedOption = React.useMemo(
       () => {
-        var _a;
-        if (ramda.isNil(initialValue)) {
-          return null;
+        var _a, _b;
+        if (!ramda.isNil(value)) {
+          return (_a = standardOptions.find((option) => option.value === value)) != null ? _a : null;
+        }
+        if (!ramda.isNil(defaultValue)) {
+          return (_b = standardOptions.find((option) => option.value === defaultValue)) != null ? _b : null;
         }
-        return (_a = standardOptions.find((option) => option.value === initialValue)) != null ? _a : null;
+        return null;
       },
-      []
+      [value]
     );
     const [selectedOption, setSelectedOption] = React.useState(initialSelectedOption);
     const [newOptionText, setNewOptionText] = React.useState("");
@@ -14641,6 +14657,10 @@
     enumerable: true,
     get: function () { return chakraReactSelect.CreatableSelect; }
   });
+  Object.defineProperty(exports, 'selectChakraComponents', {
+    enumerable: true,
+    get: function () { return chakraReactSelect.chakraComponents; }
+  });
   Object.defineProperty(exports, 'useController', {
     enumerable: true,
     get: function () { return reactHookForm.useController; }