@northlight/ui 2.31.0 → 2.31.2

package/dist/umd/northlight.cjs

@@ -4767,10 +4767,13 @@
     }),
     variants: {
       default: ({ theme: { colors: color } }) => ({
-        bgColor: "bg.tertiary.default",
-        color: color.text.inverted,
-        [$arrowBg.variable]: color.bg.tertiary.default,
-        [$arrowBorder.variable]: color.bg.tertiary.default
+        color: color.text.default,
+        bgColor: color.bg.base,
+        borderWidth: "xs",
+        borderColor: color.border.default,
+        borderStyle: "solid",
+        [$arrowBg.variable]: color.bg.base,
+        [$arrowBorder.variable]: color.border.default
       }),
       success: ({ theme: { colors: color } }) => ({
         color: "text.over.success",
@@ -7772,7 +7775,7 @@
       hasArrow = true,
       title = "",
       description = "",
-      hasIcon = "true"
+      hasIcon = false
     } = _b, rest = __objRest$18(_b, [
       "variant",
       "hasArrow",
@@ -7787,7 +7790,7 @@
       {
         variant: "14",
         sx: {
-          color: !variant || variant === "ai" || variant === "default" ? "text.inverted" : void 0
+          color: !variant || variant === "ai" ? "text.inverted" : "text.default"
         }
       },
       description
@@ -13015,12 +13018,13 @@
       preset = "eu",
       isPercentage = false,
       onChange = ramda.identity,
-      value,
+      value: valueProp,
       numberOfDecimals = 2,
       max = Infinity,
       min = -Infinity,
       inputLeftElement,
-      inputRightElement
+      inputRightElement,
+      onBlur
     } = _b, rest = __objRest$g(_b, [
       "preset",
       "isPercentage",
@@ -13030,27 +13034,37 @@
       "max",
       "min",
       "inputLeftElement",
-      "inputRightElement"
+      "inputRightElement",
+      "onBlur"
     ]);
+    const [valueState, setValueState] = React.useState(valueProp);
+    const isControlled = typeof valueProp !== "undefined";
+    const value = isControlled ? valueProp : valueState;
     const props = presetMap[preset];
-    const [v, setV] = React.useState(value);
+    const getNumberFormatValues = (number) => ({
+      floatValue: number,
+      formattedValue: reactNumberFormat.numericFormatter(number.toString(), props),
+      value: number.toString()
+    });
     const validateRange = () => {
-      if (ramda.isNil(v))
+      if (ramda.isNil(value))
         return;
-      const vNum = typeof v === "string" ? parseFloat(v) : v;
+      const vNum = typeof value === "string" ? parseFloat(value) : value;
       const factor = isPercentage ? 100 : 1;
       if (vNum * factor > max) {
         const newValue = roundToPrecision(max / factor, numberOfDecimals);
-        setV(newValue);
+        setValueState(newValue);
+        onChange(getNumberFormatValues(newValue));
       }
       if (vNum * factor < min) {
         const newValue = roundToPrecision(min / factor, numberOfDecimals);
-        setV(newValue);
+        setValueState(newValue);
+        onChange(getNumberFormatValues(newValue));
       }
     };
     const onValueChangeHandler = (values, sourceInfo) => {
       const newFloatValue = values.floatValue && isPercentage ? roundToPrecision(values.floatValue / 100, numberOfDecimals) : values.floatValue;
-      setV(newFloatValue);
+      setValueState(newFloatValue);
       onChange(
         __spreadProps$3(__spreadValues$k({}, values), {
           floatValue: newFloatValue
@@ -13058,6 +13072,9 @@
         sourceInfo
       );
     };
+    React.useEffect(() => {
+      validateRange();
+    }, [value]);
     return /* @__PURE__ */ React.createElement(
       InputGroupWrapper,
       {
@@ -13069,10 +13086,13 @@
         __spreadValues$k(__spreadValues$k({
           allowLeadingZeros: true,
           customInput: react.Input,
-          onBlur: validateRange,
+          onBlur: (e) => {
+            onBlur == null ? void 0 : onBlur(e);
+            validateRange();
+          },
           onValueChange: onValueChangeHandler,
           decimalScale: numberOfDecimals,
-          value: isPercentage ? roundToPrecision(parseFloat(`${v != null ? v : 0}`) * 100, numberOfDecimals) : v,
+          value: isPercentage ? roundToPrecision(parseFloat(`${value != null ? value : 0}`) * 100, numberOfDecimals) : value,
           suffix: isPercentage ? "%" : ""
         }, props), rest)
       )
@@ -14236,12 +14256,15 @@
       onChange,
       options,
       size,
-      value,
+      value: valueProp,
       placeholder,
       precision,
       formatPreset,
       isDisabled,
-      isReadOnly
+      isReadOnly,
+      defaultToZeroIfEmpty = true,
+      max = Infinity,
+      min = -Infinity
     } = _b, rest = __objRest$1(_b, [
       "onChange",
       "options",
@@ -14251,20 +14274,27 @@
       "precision",
       "formatPreset",
       "isDisabled",
-      "isReadOnly"
+      "isReadOnly",
+      "defaultToZeroIfEmpty",
+      "max",
+      "min"
     ]);
+    var _a2;
     const { isOpen, onToggle, onClose } = react.useDisclosure();
-    const [inputValue, setInputValue] = React.useState(value ? value.input : 0);
-    const [selectOption, setSelectOption] = React.useState(value ? value.option : options[0]);
+    const [inputValueState, setInputValueState] = React.useState(valueProp == null ? void 0 : valueProp.input);
+    const [selectOptionState, setselectOptionState] = React.useState((_a2 = valueProp == null ? void 0 : valueProp.option) != null ? _a2 : options[0]);
     const [enableSelectInput, setEnableSelectInput] = React.useState(false);
+    const isInputValueControlled = typeof (valueProp == null ? void 0 : valueProp.input) !== "undefined";
+    const inputValue = isInputValueControlled ? valueProp.input : inputValueState;
+    const isOptionControlled = typeof (valueProp == null ? void 0 : valueProp.option) !== "undefined";
+    const selectOption = isOptionControlled ? valueProp.option : selectOptionState;
     const buttonRef = React.useRef();
     const selectRef = React.useRef();
+    const getNewValue = (option, input) => ramda.is(Number, input) ? { input: Number(input), option } : { option };
     const handleInputChange = (newInputvalue) => {
-      setInputValue(Number(newInputvalue.floatValue));
-      onChange == null ? void 0 : onChange({
-        input: Number(newInputvalue.floatValue),
-        option: selectOption
-      });
+      const newValue = getNewValue(selectOption, newInputvalue);
+      setInputValueState(newValue.input);
+      onChange == null ? void 0 : onChange(newValue);
     };
     const handleSelectClose = () => {
       if (buttonRef.current) {
@@ -14275,12 +14305,11 @@
     };
     const handleSelectChange = (selectedOption) => {
       if (selectedOption) {
-        setSelectOption(selectedOption);
-        onChange == null ? void 0 : onChange({
-          input: inputValue,
-          option: selectedOption
-        });
-        handleSelectClose();
+        setselectOptionState(selectedOption);
+        onChange == null ? void 0 : onChange(getNewValue(selectedOption, inputValue));
+        if (isOpen) {
+          handleSelectClose();
+        }
       }
     };
     const handleSelectToggle = () => {
@@ -14294,18 +14323,25 @@
         selectRef.current.focus();
       }
     }, [enableSelectInput]);
+    React.useEffect(() => {
+      if (!ramda.is(Number, inputValue) && defaultToZeroIfEmpty) {
+        handleInputChange(clamp(min, max, 0));
+      }
+    }, [valueProp == null ? void 0 : valueProp.input]);
     return /* @__PURE__ */ React.createElement(react.InputGroup, null, /* @__PURE__ */ React.createElement(
       FormattedNumberInput,
       __spreadValues$1({
         width: "100%",
-        onChange: handleInputChange,
-        defaultValue: inputValue,
+        onChange: (values) => handleInputChange(values.floatValue),
+        value: inputValue,
         placeholder,
         size,
         numberOfDecimals: precision,
         preset: formatPreset,
         disabled: isDisabled,
-        readOnly: isReadOnly
+        readOnly: isReadOnly,
+        min,
+        max
       }, rest)
     ), /* @__PURE__ */ React.createElement(
       react.InputRightElement,