@northlight/ui 2.31.0 → 2.31.2

package/dist/es/northlight.d.ts

@@ -30,7 +30,7 @@ import * as react_select_dist_declarations_src_types from 'react-select/dist/dec
 import * as _chakra_ui_switch_dist_switch from '@chakra-ui/switch/dist/switch';
 import * as _chakra_ui_textarea_dist_textarea from '@chakra-ui/textarea/dist/textarea';
 import { Props as Props$1 } from 'react-input-mask';
-import { NumericFormatProps } from 'react-number-format';
+import { NumericFormatProps, NumberFormatValues, SourceInfo } from 'react-number-format';
 import { Schema } from 'joi';
 import { UseClickableProps } from '@chakra-ui/clickable';
 import { Variant } from 'chakra-react-select/dist/types/types';
@@ -3234,7 +3234,7 @@ interface TextFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
     formatter?: TextInputFormatter;
     validate?: RegisterOptions;
     direction?: StackDirection;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement> | string) => void;
+    onChange?: (e: React__default.ChangeEvent<HTMLInputElement> | string) => void;
 }
 type MaskedTextInputProps = InputProps & Props$1 & {
     maskPlaceholder?: string;
@@ -3250,13 +3250,13 @@ interface FormattedNumberInputProps extends Omit<NumericFormatProps, 'onChange'
     /** Changes thousand and decimal separators */
     preset?: FormattedNumberInputPreset;
     /** Gives you back an object, see https://s-yadav.github.io/react-number-format/docs/quirks */
-    onChange?: NumericFormatProps['onValueChange'];
+    onChange?: (values: NumberFormatValues, sourceInfo?: SourceInfo) => void;
     /** Will format number UI as percentage, but return as decimal value */
     isPercentage?: boolean;
     /** Will round up and restrict number of decimals */
     numberOfDecimals?: number;
-    inputLeftElement?: React.ReactNode;
-    inputRightElement?: React.ReactNode;
+    inputLeftElement?: React__default.ReactNode;
+    inputRightElement?: React__default.ReactNode;
 }
 interface FormattedNumberInputFieldProps extends FormattedNumberInputProps {
     name: string;
@@ -3307,7 +3307,7 @@ interface FormattedNumberInputFieldProps extends FormattedNumberInputProps {
   ?)
 
  */
-declare const FormattedNumberInput: ({ preset, isPercentage, onChange, value, numberOfDecimals, max, min, inputLeftElement, inputRightElement, ...rest }: FormattedNumberInputProps) => JSX.Element;
+declare const FormattedNumberInput: ({ preset, isPercentage, onChange, value: valueProp, numberOfDecimals, max, min, inputLeftElement, inputRightElement, onBlur, ...rest }: FormattedNumberInputProps) => JSX.Element;
 
 /**
  * The formatted number input component wrapped in a <Field />
@@ -3411,19 +3411,18 @@ interface OurTooltipProps extends TooltipProps {
  * (?
  * <HStack>
  *    <Tooltip
+ *      hasIcon={ true }
  *      description="Here’s a regular tooltip with some with icon
  *      inside of it that’s supposed to be substantially large.">
  *      <Badge>ICON</Badge>
  *    </Tooltip>
  *    <Tooltip
- *       hasIcon={ false }
  *       description="Here’s a regular tooltip with some text without icon
  *      inside of it that’s supposed to be substantially large."
  *    >
  *      <Badge>NOICON</Badge>
  *    </Tooltip>
  *    <Tooltip
- *      hasIcon={ false }
  *      description={
  *        <Box>
  *          <Text>
@@ -3454,12 +3453,14 @@ interface OurTooltipProps extends TooltipProps {
  * <HStack>
  *     <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="success"
  *          description="This is a successful message"
  *          >
  *          <Badge colorScheme="green">Success</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="success"
  *          title="Please check fields"
  *          description="This is a successful message with a title and an icon
@@ -3470,12 +3471,14 @@ interface OurTooltipProps extends TooltipProps {
  *     </VStack>
  *     <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="info"
  *          description="This is an informative text"
  *          >
  *          <Badge colorScheme="blue">Info</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="info"
  *          title="Please check fields"
  *          description="This is an informative text with a title and an icon
@@ -3486,12 +3489,14 @@ interface OurTooltipProps extends TooltipProps {
  *     </VStack>
  *     <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="warning"
  *          description="This is a warning"
  *          >
  *        <Badge colorScheme="yellow">Warning</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="warning"
  *          title="Please check fields"
  *          description="This is a warning with a title and an icon
@@ -3502,12 +3507,14 @@ interface OurTooltipProps extends TooltipProps {
  *      </VStack>
  *      <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="danger"
  *          description="This is an error message"
  *          >
  *        <Badge colorScheme="red">Error</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="danger"
  *          title="Please check fields"
  *          description="This is an error message with a title and an icon
@@ -3518,11 +3525,13 @@ interface OurTooltipProps extends TooltipProps {
  *      </VStack>
  *      <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="ai"
  *          description="This is an AI message">
  *        <Badge colorScheme="teal" variant="subtle">AI</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="ai"
  *          title="Please check fields"
  *          description="This is an AI message with a title and an icon
@@ -3533,11 +3542,13 @@ interface OurTooltipProps extends TooltipProps {
  *      </VStack>
  *      <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="ghost"
  *          description="This is an clean message">
  *        <Badge>Ghost</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="ghost"
  *          title="Please check fields"
  *          description="This is an clean message with a title and an icon
@@ -4240,7 +4251,7 @@ interface CreatableSelectDropdownProps<T extends string = string> extends Compon
 declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, variant, defaultValue, value, menuPlacement, ...restProps }: CreatableSelectDropdownProps<T>) => JSX.Element;
 
 type ComboPickerValue = {
-    input: number;
+    input?: number;
     option: ComboPickerOption;
 };
 type ComboPickerOption = {
@@ -4256,6 +4267,7 @@ interface ComboPickerProps extends Omit<FormattedNumberInputProps, 'value' | 'on
     formatPreset?: FormattedNumberInputPreset;
     isDisabled?: boolean;
     isReadOnly?: boolean;
+    defaultToZeroIfEmpty?: boolean;
 }
 interface ComboPickerFieldProps extends ComboPickerProps {
     name: string;
@@ -4271,7 +4283,7 @@ interface ComboPickerFieldProps extends ComboPickerProps {
  * @see ComboPickerField
  * @see {@link https://northlight.dev/reference/combo-picker}
  */
-declare const ComboPicker: ({ onChange, options, size, value, placeholder, precision, formatPreset, isDisabled, isReadOnly, ...rest }: ComboPickerProps) => JSX.Element;
+declare const ComboPicker: ({ onChange, options, size, value: valueProp, placeholder, precision, formatPreset, isDisabled, isReadOnly, defaultToZeroIfEmpty, max, min, ...rest }: ComboPickerProps) => JSX.Element;
 
 /**
  * The <ComboPicker /> component wrapped in a <Field />
@@ -4286,6 +4298,7 @@ declare const ComboPicker: ({ onChange, options, size, value, placeholder, preci
  * <ComboPickerField
  *         label="Budget"
  *         name="budget"
+ *         placeholder="Amount"
  *         options={ [
  *           { label: 'USD', value: 'usd' },
  *           { label: 'EUR', value: 'eur' },

package/dist/es/northlight.js

@@ -38,7 +38,7 @@ export * from '@dnd-kit/modifiers';
 import { VariableSizeList, VariableSizeGrid } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import AvatarEditor from 'react-avatar-editor';
-import { NumericFormat } from 'react-number-format';
+import { NumericFormat, numericFormatter } from 'react-number-format';
 import InputMask from 'react-input-mask';
 import { uniqBy } from 'yafu';
 
@@ -4805,10 +4805,13 @@ const Tooltip$1 = {
   }),
   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",
@@ -7810,7 +7813,7 @@ const Tooltip = (_a) => {
     hasArrow = true,
     title = "",
     description = "",
-    hasIcon = "true"
+    hasIcon = false
   } = _b, rest = __objRest$18(_b, [
     "variant",
     "hasArrow",
@@ -7825,7 +7828,7 @@ const Tooltip = (_a) => {
     {
       variant: "14",
       sx: {
-        color: !variant || variant === "ai" || variant === "default" ? "text.inverted" : void 0
+        color: !variant || variant === "ai" ? "text.inverted" : "text.default"
       }
     },
     description
@@ -13053,12 +13056,13 @@ const FormattedNumberInput = (_a) => {
     preset = "eu",
     isPercentage = false,
     onChange = identity,
-    value,
+    value: valueProp,
     numberOfDecimals = 2,
     max = Infinity,
     min = -Infinity,
     inputLeftElement,
-    inputRightElement
+    inputRightElement,
+    onBlur
   } = _b, rest = __objRest$g(_b, [
     "preset",
     "isPercentage",
@@ -13068,27 +13072,37 @@ const FormattedNumberInput = (_a) => {
     "max",
     "min",
     "inputLeftElement",
-    "inputRightElement"
+    "inputRightElement",
+    "onBlur"
   ]);
+  const [valueState, setValueState] = useState(valueProp);
+  const isControlled = typeof valueProp !== "undefined";
+  const value = isControlled ? valueProp : valueState;
   const props = presetMap[preset];
-  const [v, setV] = useState(value);
+  const getNumberFormatValues = (number) => ({
+    floatValue: number,
+    formattedValue: numericFormatter(number.toString(), props),
+    value: number.toString()
+  });
   const validateRange = () => {
-    if (isNil(v))
+    if (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
@@ -13096,6 +13110,9 @@ const FormattedNumberInput = (_a) => {
       sourceInfo
     );
   };
+  useEffect(() => {
+    validateRange();
+  }, [value]);
   return /* @__PURE__ */ React.createElement(
     InputGroupWrapper,
     {
@@ -13107,10 +13124,13 @@ const FormattedNumberInput = (_a) => {
       __spreadValues$k(__spreadValues$k({
         allowLeadingZeros: true,
         customInput: Input$1,
-        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)
     )
@@ -14274,12 +14294,15 @@ const ComboPicker = (_a) => {
     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",
@@ -14289,20 +14312,27 @@ const ComboPicker = (_a) => {
     "precision",
     "formatPreset",
     "isDisabled",
-    "isReadOnly"
+    "isReadOnly",
+    "defaultToZeroIfEmpty",
+    "max",
+    "min"
   ]);
+  var _a2;
   const { isOpen, onToggle, onClose } = useDisclosure();
-  const [inputValue, setInputValue] = useState(value ? value.input : 0);
-  const [selectOption, setSelectOption] = useState(value ? value.option : options[0]);
+  const [inputValueState, setInputValueState] = useState(valueProp == null ? void 0 : valueProp.input);
+  const [selectOptionState, setselectOptionState] = useState((_a2 = valueProp == null ? void 0 : valueProp.option) != null ? _a2 : options[0]);
   const [enableSelectInput, setEnableSelectInput] = 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 = useRef();
   const selectRef = useRef();
+  const getNewValue = (option, input) => 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) {
@@ -14313,12 +14343,11 @@ const ComboPicker = (_a) => {
   };
   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 = () => {
@@ -14332,18 +14361,25 @@ const ComboPicker = (_a) => {
       selectRef.current.focus();
     }
   }, [enableSelectInput]);
+  useEffect(() => {
+    if (!is(Number, inputValue) && defaultToZeroIfEmpty) {
+      handleInputChange(clamp(min, max, 0));
+    }
+  }, [valueProp == null ? void 0 : valueProp.input]);
   return /* @__PURE__ */ React.createElement(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(
     InputRightElement,