@northlight/ui 2.30.0 → 2.31.0

package/dist/es/northlight.d.ts

@@ -4247,11 +4247,15 @@ 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,50 @@ 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"
+ *         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,14 +14276,20 @@ 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"
   ]);
   const { isOpen, onToggle, onClose } = useDisclosure();
   const [inputValue, setInputValue] = useState(value ? value.input : 0);
@@ -14292,9 +14298,9 @@ const ComboPicker = (_a) => {
   const buttonRef = useRef();
   const selectRef = useRef();
   const handleInputChange = (newInputvalue) => {
-    setInputValue(Number(newInputvalue));
+    setInputValue(Number(newInputvalue.floatValue));
     onChange == null ? void 0 : onChange({
-      input: Number(newInputvalue),
+      input: Number(newInputvalue.floatValue),
       option: selectOption
     });
   };
@@ -14326,17 +14332,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,
     {