@northlight/ui 2.30.0 → 2.31.1

package/dist/es/northlight.d.ts

@@ -4240,18 +4240,22 @@ 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 = {
     label: string;
     value: string;
 };
-interface ComboPickerProps extends Omit<NumberInputProps, 'value'> {
+interface ComboPickerProps extends Omit<FormattedNumberInputProps, 'value' | 'onChange'> {
     options: ComboPickerOption[];
     value?: ComboPickerValue;
     onChange?: (value: ComboPickerValue) => void;
     defaultOption?: ComboPickerOption;
+    precision?: number;
+    formatPreset?: FormattedNumberInputPreset;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
 }
 interface ComboPickerFieldProps extends ComboPickerProps {
     name: string;
@@ -4267,7 +4271,7 @@ interface ComboPickerFieldProps extends ComboPickerProps {
  * @see ComboPickerField
  * @see {@link https://northlight.dev/reference/combo-picker}
  */
-declare const ComboPicker: ({ onChange, options, size, value, placeholder, isDisabled, ...rest }: ComboPickerProps) => JSX.Element;
+declare const ComboPicker: ({ onChange, options, size, value, placeholder, precision, formatPreset, isDisabled, isReadOnly, ...rest }: ComboPickerProps) => JSX.Element;
 
 /**
  * The <ComboPicker /> component wrapped in a <Field />
@@ -4276,13 +4280,51 @@ declare const ComboPicker: ({ onChange, options, size, value, placeholder, isDis
  * @see {@link https://northlight.dev/reference/combo-picker}
  *
  * @example (Example)
- * ##Fill in your information:
+ * ##Default number format preset(EU) with default decimals(2):
+ * (?
+ * <Form initialValues={{"budget": {input: 123456789.123, option:{label: 'EUR', value: 'eur'}}}}>
+ * <ComboPickerField
+ *         label="Budget"
+ *         name="budget"
+ *         placeholder="Amount"
+ *         options={ [
+ *           { label: 'USD', value: 'usd' },
+ *           { label: 'EUR', value: 'eur' },
+ *           { label: 'SEK', value: 'sek' },
+ *        ] }
+ *      />
+ * </Form>
+ *
+ * ?)
+ * <br />
+  * ##US number format preset with three decimals as Disabled:
+ * (?
+ * <Form initialValues={{"budget": {input: 123456789.1234, option:{label: 'USD', value: 'usd'}}}}>
+ * <ComboPickerField
+ *         label="Budget"
+ *         name="budget"
+ *         precision={ 3 }
+ *         isDisabled={true}
+ *         formatPreset='us'
+ *         options={ [
+ *           { label: 'USD', value: 'usd' },
+ *           { label: 'EUR', value: 'eur' },
+ *           { label: 'SEK', value: 'sek' },
+ *        ] }
+ *      />
+ * </Form>
+ *
+ * ?)
+ * <br />
+ * ##NOR number format preset with four decimals as ReadOnly:
  * (?
- * <Form initialValues={{"budget": {input: 195, option:{label: 'SEK', value: 'sek'}}}}>
+ * <Form initialValues={{"budget": {input: 123456789.1234, option:{label: 'SEK', value: 'sek'}}}}>
  * <ComboPickerField
  *         label="Budget"
  *         name="budget"
- *         precision={ 2 }
+ *         precision={ 4 }
+ *         isReadOnly={true}
+ *         formatPreset='nor'
  *         options={ [
  *           { label: 'USD', value: 'usd' },
  *           { label: 'EUR', value: 'eur' },

package/dist/es/northlight.js

@@ -14276,27 +14276,33 @@ const ComboPicker = (_a) => {
     size,
     value,
     placeholder,
-    isDisabled
+    precision,
+    formatPreset,
+    isDisabled,
+    isReadOnly
   } = _b, rest = __objRest$1(_b, [
     "onChange",
     "options",
     "size",
     "value",
     "placeholder",
-    "isDisabled"
+    "precision",
+    "formatPreset",
+    "isDisabled",
+    "isReadOnly"
   ]);
+  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 [inputValue, setInputValue] = useState(value == null ? void 0 : value.input);
+  const [selectOption, setSelectOption] = useState((_a2 = value == null ? void 0 : value.option) != null ? _a2 : options[0]);
   const [enableSelectInput, setEnableSelectInput] = useState(false);
   const buttonRef = useRef();
   const selectRef = useRef();
+  const getNewValue = (option, input) => input ? { input: Number(input), option } : { option };
   const handleInputChange = (newInputvalue) => {
-    setInputValue(Number(newInputvalue));
-    onChange == null ? void 0 : onChange({
-      input: Number(newInputvalue),
-      option: selectOption
-    });
+    const newValue = getNewValue(selectOption, newInputvalue.floatValue);
+    setInputValue(newValue.input);
+    onChange == null ? void 0 : onChange(newValue);
   };
   const handleSelectClose = () => {
     if (buttonRef.current) {
@@ -14308,10 +14314,7 @@ const ComboPicker = (_a) => {
   const handleSelectChange = (selectedOption) => {
     if (selectedOption) {
       setSelectOption(selectedOption);
-      onChange == null ? void 0 : onChange({
-        input: inputValue,
-        option: selectedOption
-      });
+      onChange == null ? void 0 : onChange(getNewValue(selectedOption, inputValue));
       handleSelectClose();
     }
   };
@@ -14326,17 +14329,19 @@ const ComboPicker = (_a) => {
       selectRef.current.focus();
     }
   }, [enableSelectInput]);
-  return /* @__PURE__ */ React.createElement(InputGroup, { size }, /* @__PURE__ */ React.createElement(
-    NumberInput,
+  return /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
+    FormattedNumberInput,
     __spreadValues$1({
       width: "100%",
-      overflow: "hidden",
       onChange: handleInputChange,
       defaultValue: inputValue,
       placeholder,
-      isDisabled
-    }, rest),
-    /* @__PURE__ */ React.createElement(NumberInputField$1, null)
+      size,
+      numberOfDecimals: precision,
+      preset: formatPreset,
+      disabled: isDisabled,
+      readOnly: isReadOnly
+    }, rest)
   ), /* @__PURE__ */ React.createElement(
     InputRightElement,
     {