@dnb/eufemia 10.62.4 → 10.63.0

package/es/extensions/forms/Field/Date/Date.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["id", "path", "className", "label", "value", "hasError", "disabled", "htmlAttributes", "handleFocus", "handleBlur", "handleChange", "setDisplayValue", "range", "showCancelButton", "showResetButton", "showInput", "onReset"];
+const _excluded = ["id", "path", "itemPath", "className", "label", "value", "hasError", "disabled", "htmlAttributes", "handleFocus", "handleBlur", "handleChange", "setDisplayValue", "range", "showCancelButton", "showResetButton", "showInput", "onReset"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useContext, useMemo } from 'react';
@@ -59,6 +59,7 @@ function DateComponent(props) {
     {
       id,
       path,
+      itemPath,
       className,
       label,
       value: valueProp,
@@ -97,12 +98,12 @@ function DateComponent(props) {
     };
   }, [range, valueProp]);
   useMemo(() => {
-    if (path && valueProp) {
-      setDisplayValue(path, formatDate(valueProp, {
+    if ((path || itemPath) && valueProp) {
+      setDisplayValue(formatDate(valueProp, {
         locale
       }));
     }
-  }, [locale, path, setDisplayValue, valueProp]);
+  }, [itemPath, locale, path, setDisplayValue, valueProp]);
   const fieldBlockProps = _objectSpread({
     forId: id,
     label: label !== null && label !== void 0 ? label : translations.Date.label,

package/es/extensions/forms/Field/Date/Date.js.map

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useCallback","useContext","useMemo","DatePicker","useFieldProps","pickSpacingProps","classnames","FieldBlock","SharedContext","parseISO","isValid","useTranslation","formatDate","DateComponent","props","translations","locale","errorMessages","_objectSpread","Date","errorRequired","schema","_props$schema","type","pattern","validateRequired","value","required","error","undefined","preparedProps","fromInput","date","start_date","end_date","range","_useFieldProps","id","path","className","label","valueProp","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","showCancelButton","showResetButton","showInput","onReset","rest","_objectWithoutProperties","_excluded","datePickerProps","pickDatePickerProps","startDate","endDate","split","map","test","fieldBlockProps","forId","createElement","_extends","status","onChange","event","onFocus","onBlur","datePickerPropKeys","Object","keys","reduce","key","includes","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { DatePicker } from '../../../../components'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps, AllJSONSchemaVersions } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport SharedContext from '../../../../shared/Context'\nimport { parseISO, isValid } from 'date-fns'\nimport useTranslation from '../../hooks/useTranslation'\nimport { formatDate } from '../../Value/Date'\nimport {\n  DatePickerEvent,\n  DatePickerProps,\n} from '../../../../components/DatePicker'\n\n// `range`, `showInput`, `showCancelButton` and `showResetButton` are not picked from the `DatePickerProps`\n// Since they require `Field.Date` specific comments, due to them having different default values\nexport type Props = FieldProps<string, undefined | string> & {\n  // Validation\n  pattern?: string\n  /**\n   * Defines if the Date field should support a value of two dates (starting and ending date).\n   * The value needs to be a string containing two dates, separated by a pipe character (`|`) i.e. (`01-09-2024|30-09-2024`) when this is set to `true`.\n   * Defaults to `false`.\n   */\n  range?: DatePickerProps['range']\n  /**\n   * If the input fields with the mask should be visible. Defaults to `true`.\n   */\n  showInput?: DatePickerProps['showInput']\n\n  /**\n   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text=\"Avbryt\"` Defaults to `true`. If the `range` prop is `true`, then the cancel button is shown.\n   */\n  showCancelButton?: DatePickerProps['showCancelButton']\n  /**\n   * If set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text=\"Tilbakestill\"` Defaults to `true`.\n   */\n  showResetButton?: DatePickerProps['showResetButton']\n} & Pick<\n    DatePickerProps,\n    | 'month'\n    | 'startMonth'\n    | 'endMonth'\n    | 'minDate'\n    | 'maxDate'\n    | 'correctInvalidDate'\n    | 'maskOrder'\n    | 'maskPlaceholder'\n    | 'dateFormat'\n    | 'returnFormat'\n    | 'hideNavigation'\n    | 'hideDays'\n    | 'onlyMonth'\n    | 'hideLastWeek'\n    | 'disableAutofocus'\n    | 'showSubmitButton'\n    | 'submitButtonText'\n    | 'cancelButtonText'\n    | 'resetButtonText'\n    | 'firstDay'\n    | 'link'\n    | 'sync'\n    | 'addonElement'\n    | 'shortcuts'\n    | 'opened'\n    | 'direction'\n    | 'alignPicker'\n    | 'onDaysRender'\n    | 'onType'\n    | 'onShow'\n    | 'onHide'\n    | 'onSubmit'\n    | 'onCancel'\n    | 'onReset'\n  >\n\nfunction DateComponent(props: Props) {\n  const translations = useTranslation()\n  const { locale } = useContext(SharedContext)\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': translations.Date.errorRequired,\n      'Field.errorPattern': translations.Date.errorRequired,\n      ...props.errorMessages,\n    }\n  }, [props.errorMessages, translations.Date.errorRequired])\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      if (required && (!value || !isValid(parseISO(value)))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput: ({\n      date,\n      start_date,\n      end_date,\n    }: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => {\n      return range ? `${start_date}|${end_date}` : date\n    },\n    validateRequired,\n  }\n\n  const {\n    id,\n    path,\n    className,\n    label,\n    value: valueProp,\n    hasError,\n    disabled,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    range,\n    showCancelButton = true,\n    showResetButton = true,\n    showInput = true,\n    onReset,\n    ...rest\n  } = useFieldProps(preparedProps)\n\n  const datePickerProps = pickDatePickerProps(rest)\n\n  const { value, startDate, endDate } = useMemo(() => {\n    if (!range || !valueProp) {\n      return {\n        // Assign to null if falsy value, to properly clear input values\n        value: valueProp ?? null,\n        startDate: undefined,\n        endDate: undefined,\n      }\n    }\n\n    const [startDate, endDate] = valueProp\n      .split('|')\n      // Assign to null if falsy value, to properly clear input values\n      .map((value) => (/(undefined|null)/.test(value) ? null : value))\n\n    return {\n      value: undefined,\n      startDate,\n      endDate,\n    }\n  }, [range, valueProp])\n\n  useMemo(() => {\n    if (path && valueProp) {\n      setDisplayValue(path, formatDate(valueProp, { locale }))\n    }\n  }, [locale, path, setDisplayValue, valueProp])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    label: label ?? translations.Date.label,\n    className: classnames('dnb-forms-field-string', className),\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <DatePicker\n        id={id}\n        date={value}\n        disabled={disabled}\n        showInput={showInput}\n        showCancelButton={showCancelButton}\n        showResetButton={showResetButton}\n        startDate={startDate}\n        endDate={endDate}\n        status={hasError ? 'error' : undefined}\n        range={range}\n        onChange={handleChange}\n        onReset={(event) => {\n          handleChange(event)\n          onReset?.(event)\n        }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...datePickerProps}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\n// Used to filter out DatePickerProps from the FieldProps.\n// Includes DatePickerProps that are not destructured in useFieldProps\nconst datePickerPropKeys = [\n  'month',\n  'startMonth',\n  'endMonth',\n  'minDate',\n  'maxDate',\n  'correctInvalidDate',\n  'maskOrder',\n  'maskPlaceholder',\n  'dateFormat',\n  'returnFormat',\n  'hideNavigation',\n  'hideDays',\n  'onlyMonth',\n  'hideLastWeek',\n  'disableAutofocus',\n  'showSubmitButton',\n  'submitButtonText',\n  'cancelButtonText',\n  'resetButtonText',\n  'firstDay',\n  'link',\n  'sync',\n  'addonElement',\n  'shortcuts',\n  'opened',\n  'direction',\n  'alignPicker',\n  'onDaysRender',\n  'showInput',\n  'onDaysRender',\n  'onType',\n  'onShow',\n  'onHide',\n  'onSubmit',\n  'onCancel',\n  'onReset',\n]\n\nfunction pickDatePickerProps(props: Props) {\n  const datePickerProps = Object.keys(props).reduce(\n    (datePickerProps, key) => {\n      if (datePickerPropKeys.includes(key)) {\n        datePickerProps[key] = props[key]\n      }\n\n      return datePickerProps\n    },\n    {}\n  )\n\n  return datePickerProps\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":"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"}
+{"version":3,"file":"Date.js","names":["React","useCallback","useContext","useMemo","DatePicker","useFieldProps","pickSpacingProps","classnames","FieldBlock","SharedContext","parseISO","isValid","useTranslation","formatDate","DateComponent","props","translations","locale","errorMessages","_objectSpread","Date","errorRequired","schema","_props$schema","type","pattern","validateRequired","value","required","error","undefined","preparedProps","fromInput","date","start_date","end_date","range","_useFieldProps","id","path","itemPath","className","label","valueProp","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","showCancelButton","showResetButton","showInput","onReset","rest","_objectWithoutProperties","_excluded","datePickerProps","pickDatePickerProps","startDate","endDate","split","map","test","fieldBlockProps","forId","createElement","_extends","status","onChange","event","onFocus","onBlur","datePickerPropKeys","Object","keys","reduce","key","includes","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { DatePicker } from '../../../../components'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps, AllJSONSchemaVersions } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport SharedContext from '../../../../shared/Context'\nimport { parseISO, isValid } from 'date-fns'\nimport useTranslation from '../../hooks/useTranslation'\nimport { formatDate } from '../../Value/Date'\nimport {\n  DatePickerEvent,\n  DatePickerProps,\n} from '../../../../components/DatePicker'\n\n// `range`, `showInput`, `showCancelButton` and `showResetButton` are not picked from the `DatePickerProps`\n// Since they require `Field.Date` specific comments, due to them having different default values\nexport type Props = FieldProps<string, undefined | string> & {\n  // Validation\n  pattern?: string\n  /**\n   * Defines if the Date field should support a value of two dates (starting and ending date).\n   * The value needs to be a string containing two dates, separated by a pipe character (`|`) i.e. (`01-09-2024|30-09-2024`) when this is set to `true`.\n   * Defaults to `false`.\n   */\n  range?: DatePickerProps['range']\n  /**\n   * If the input fields with the mask should be visible. Defaults to `true`.\n   */\n  showInput?: DatePickerProps['showInput']\n\n  /**\n   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text=\"Avbryt\"` Defaults to `true`. If the `range` prop is `true`, then the cancel button is shown.\n   */\n  showCancelButton?: DatePickerProps['showCancelButton']\n  /**\n   * If set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text=\"Tilbakestill\"` Defaults to `true`.\n   */\n  showResetButton?: DatePickerProps['showResetButton']\n} & Pick<\n    DatePickerProps,\n    | 'month'\n    | 'startMonth'\n    | 'endMonth'\n    | 'minDate'\n    | 'maxDate'\n    | 'correctInvalidDate'\n    | 'maskOrder'\n    | 'maskPlaceholder'\n    | 'dateFormat'\n    | 'returnFormat'\n    | 'hideNavigation'\n    | 'hideDays'\n    | 'onlyMonth'\n    | 'hideLastWeek'\n    | 'disableAutofocus'\n    | 'showSubmitButton'\n    | 'submitButtonText'\n    | 'cancelButtonText'\n    | 'resetButtonText'\n    | 'firstDay'\n    | 'link'\n    | 'sync'\n    | 'addonElement'\n    | 'shortcuts'\n    | 'opened'\n    | 'direction'\n    | 'alignPicker'\n    | 'onDaysRender'\n    | 'onType'\n    | 'onShow'\n    | 'onHide'\n    | 'onSubmit'\n    | 'onCancel'\n    | 'onReset'\n  >\n\nfunction DateComponent(props: Props) {\n  const translations = useTranslation()\n  const { locale } = useContext(SharedContext)\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': translations.Date.errorRequired,\n      'Field.errorPattern': translations.Date.errorRequired,\n      ...props.errorMessages,\n    }\n  }, [props.errorMessages, translations.Date.errorRequired])\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      if (required && (!value || !isValid(parseISO(value)))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput: ({\n      date,\n      start_date,\n      end_date,\n    }: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => {\n      return range ? `${start_date}|${end_date}` : date\n    },\n    validateRequired,\n  }\n\n  const {\n    id,\n    path,\n    itemPath,\n    className,\n    label,\n    value: valueProp,\n    hasError,\n    disabled,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    range,\n    showCancelButton = true,\n    showResetButton = true,\n    showInput = true,\n    onReset,\n    ...rest\n  } = useFieldProps(preparedProps)\n\n  const datePickerProps = pickDatePickerProps(rest)\n\n  const { value, startDate, endDate } = useMemo(() => {\n    if (!range || !valueProp) {\n      return {\n        // Assign to null if falsy value, to properly clear input values\n        value: valueProp ?? null,\n        startDate: undefined,\n        endDate: undefined,\n      }\n    }\n\n    const [startDate, endDate] = valueProp\n      .split('|')\n      // Assign to null if falsy value, to properly clear input values\n      .map((value) => (/(undefined|null)/.test(value) ? null : value))\n\n    return {\n      value: undefined,\n      startDate,\n      endDate,\n    }\n  }, [range, valueProp])\n\n  useMemo(() => {\n    if ((path || itemPath) && valueProp) {\n      setDisplayValue(formatDate(valueProp, { locale }))\n    }\n  }, [itemPath, locale, path, setDisplayValue, valueProp])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    label: label ?? translations.Date.label,\n    className: classnames('dnb-forms-field-string', className),\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <DatePicker\n        id={id}\n        date={value}\n        disabled={disabled}\n        showInput={showInput}\n        showCancelButton={showCancelButton}\n        showResetButton={showResetButton}\n        startDate={startDate}\n        endDate={endDate}\n        status={hasError ? 'error' : undefined}\n        range={range}\n        onChange={handleChange}\n        onReset={(event) => {\n          handleChange(event)\n          onReset?.(event)\n        }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...datePickerProps}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\n// Used to filter out DatePickerProps from the FieldProps.\n// Includes DatePickerProps that are not destructured in useFieldProps\nconst datePickerPropKeys = [\n  'month',\n  'startMonth',\n  'endMonth',\n  'minDate',\n  'maxDate',\n  'correctInvalidDate',\n  'maskOrder',\n  'maskPlaceholder',\n  'dateFormat',\n  'returnFormat',\n  'hideNavigation',\n  'hideDays',\n  'onlyMonth',\n  'hideLastWeek',\n  'disableAutofocus',\n  'showSubmitButton',\n  'submitButtonText',\n  'cancelButtonText',\n  'resetButtonText',\n  'firstDay',\n  'link',\n  'sync',\n  'addonElement',\n  'shortcuts',\n  'opened',\n  'direction',\n  'alignPicker',\n  'onDaysRender',\n  'showInput',\n  'onDaysRender',\n  'onType',\n  'onShow',\n  'onHide',\n  'onSubmit',\n  'onCancel',\n  'onReset',\n]\n\nfunction pickDatePickerProps(props: Props) {\n  const datePickerProps = Object.keys(props).reduce(\n    (datePickerProps, key) => {\n      if (datePickerPropKeys.includes(key)) {\n        datePickerProps[key] = props[key]\n      }\n\n      return datePickerProps\n    },\n    {}\n  )\n\n  return datePickerProps\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":"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"}

package/es/extensions/forms/Field/Expiry/Expiry.js

@@ -42,6 +42,7 @@ function Expiry(props) {
   const {
     id,
     path,
+    itemPath,
     className,
     label = expiryLabel,
     hasError,
@@ -63,10 +64,10 @@ function Expiry(props) {
     };
   }, [value]);
   useMemo(() => {
-    if (path && expiry.month && expiry.year) {
-      setDisplayValue(path, `${expiry.month}/${expiry.year}`);
+    if ((path || itemPath) && expiry.month && expiry.year) {
+      setDisplayValue(`${expiry.month}/${expiry.year}`);
     }
-  }, [expiry.month, expiry.year, path, setDisplayValue]);
+  }, [expiry.month, expiry.year, itemPath, path, setDisplayValue]);
   const status = hasError ? 'error' : warning ? 'warn' : info ? 'info' : null;
   const fieldBlockProps = _objectSpread({
     id,

package/es/extensions/forms/Field/Expiry/Expiry.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expiry.js","names":["React","useCallback","useMemo","pickSpacingProps","useFieldProps","classnames","FieldBlock","MultiInputMask","useTranslation","useSharedTranslation","Expiry","props","Date","errorRequired","label","expiryLabel","DatePicker","placeholderCharacters","placeholders","month","monthLabel","year","yearLabel","errorMessages","_objectSpread","validateRequired","value","required","error","undefined","preparedProps","fromInput","toExpiryString","id","path","className","hasError","info","warning","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","expiry","_value$substring","ensureValidMonth","substring","status","fieldBlockProps","forId","createElement","stretch","values","statusState","onChange","onBlur","onFocus","delimiter","inputMode","inputs","mask","getMonthMask","placeholderCharacter","autoComplete","_supportsEufemiaSpacingProps","Object","join","firstMask","secondMask","firstDigit","charAt","isFirstDigitValid","test","secondDigit","isSecondDigitValid"],"sources":["../../../../../../src/extensions/forms/Field/Expiry/Expiry.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useFieldProps } from '../../hooks'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { MultiInputMask } from '../../../../components/input-masked'\nimport type { MultiInputMaskValue } from '../../../../components/input-masked'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport useTranslation from '../../hooks/useTranslation'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldProps<string, undefined | ''>\n\nfunction Expiry(props: ExpiryProps) {\n  const {\n    Date: { errorRequired },\n    Expiry: { label: expiryLabel },\n  } = useTranslation()\n\n  const {\n    DatePicker: {\n      placeholderCharacters: placeholders,\n      month: monthLabel,\n      year: yearLabel,\n    },\n  } = useSharedTranslation()\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': errorRequired,\n      ...props.errorMessages,\n    }),\n    [errorRequired, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      return required && !value ? error : undefined\n    },\n    []\n  )\n\n  const preparedProps: ExpiryProps = {\n    ...props,\n    errorMessages,\n    fromInput: toExpiryString,\n    validateRequired,\n  }\n\n  const {\n    id,\n    path,\n    className,\n    label = expiryLabel,\n    hasError,\n    info,\n    warning,\n    disabled,\n    value = '',\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\n\n  const expiry: ExpiryValue = useMemo(() => {\n    return {\n      month: ensureValidMonth(value?.substring(0, 2)),\n      year: value?.substring(2, 4) ?? '',\n    }\n  }, [value])\n\n  useMemo(() => {\n    if (path && expiry.month && expiry.year) {\n      setDisplayValue(path, `${expiry.month}/${expiry.year}`)\n    }\n  }, [expiry.month, expiry.year, path, setDisplayValue])\n\n  const status = hasError\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const fieldBlockProps: FieldBlockProps = {\n    id,\n    forId: `${id}-input-month`,\n    className: classnames('dnb-forms-field-expiry', className),\n    label,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <MultiInputMask\n        stretch\n        id={`${id}-input`}\n        values={expiry}\n        status={status}\n        statusState={disabled ? 'disabled' : undefined}\n        disabled={disabled}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        delimiter=\"/\"\n        inputMode=\"numeric\"\n        inputs={[\n          {\n            id: 'month',\n            label: monthLabel,\n            mask: getMonthMask(expiry?.month),\n            placeholderCharacter: placeholders['month'],\n            autoComplete: 'cc-exp-month',\n            ...htmlAttributes,\n          },\n          {\n            id: 'year',\n            label: yearLabel,\n            mask: [/[0-9]/, /[0-9]/],\n            placeholderCharacter: placeholders['year'],\n            autoComplete: 'cc-exp-year',\n            ...htmlAttributes,\n          },\n        ]}\n      />\n    </FieldBlock>\n  )\n}\n\nExpiry._supportsEufemiaSpacingProps = true\nexport default Expiry\n\nfunction toExpiryString(values: ExpiryValue) {\n  return Object.values(values).join('')\n}\n\nfunction ensureValidMonth(month: string) {\n  // Return empty value if no month is given\n  if (!month) {\n    return ''\n  }\n\n  const [firstMask, secondMask] = getMonthMask(month)\n\n  const firstDigit = month?.charAt(0)\n  const isFirstDigitValid = firstMask.test(firstDigit)\n\n  if (firstDigit && !isFirstDigitValid) {\n    // Return empty value if the first digit is invalid\n    return ''\n  }\n\n  const secondDigit = month?.charAt(1)\n  const isSecondDigitValid = secondMask.test(secondDigit)\n\n  if (secondDigit && !isSecondDigitValid) {\n    // Return empty value if the second digit is invalid\n    return ''\n  }\n\n  // Return given month of month value is valid\n  return month\n}\n\nfunction getMonthMask(month: string) {\n  const firstDigit = month?.charAt(0)\n\n  return [\n    /[0-1]/,\n    firstDigit === '0' || firstDigit === '' ? /[1-9]/ : /[0-2]/,\n  ]\n}\n"],"mappings":"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"}
+{"version":3,"file":"Expiry.js","names":["React","useCallback","useMemo","pickSpacingProps","useFieldProps","classnames","FieldBlock","MultiInputMask","useTranslation","useSharedTranslation","Expiry","props","Date","errorRequired","label","expiryLabel","DatePicker","placeholderCharacters","placeholders","month","monthLabel","year","yearLabel","errorMessages","_objectSpread","validateRequired","value","required","error","undefined","preparedProps","fromInput","toExpiryString","id","path","itemPath","className","hasError","info","warning","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","expiry","_value$substring","ensureValidMonth","substring","status","fieldBlockProps","forId","createElement","stretch","values","statusState","onChange","onBlur","onFocus","delimiter","inputMode","inputs","mask","getMonthMask","placeholderCharacter","autoComplete","_supportsEufemiaSpacingProps","Object","join","firstMask","secondMask","firstDigit","charAt","isFirstDigitValid","test","secondDigit","isSecondDigitValid"],"sources":["../../../../../../src/extensions/forms/Field/Expiry/Expiry.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useFieldProps } from '../../hooks'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { MultiInputMask } from '../../../../components/input-masked'\nimport type { MultiInputMaskValue } from '../../../../components/input-masked'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport useTranslation from '../../hooks/useTranslation'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldProps<string, undefined | ''>\n\nfunction Expiry(props: ExpiryProps) {\n  const {\n    Date: { errorRequired },\n    Expiry: { label: expiryLabel },\n  } = useTranslation()\n\n  const {\n    DatePicker: {\n      placeholderCharacters: placeholders,\n      month: monthLabel,\n      year: yearLabel,\n    },\n  } = useSharedTranslation()\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': errorRequired,\n      ...props.errorMessages,\n    }),\n    [errorRequired, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      return required && !value ? error : undefined\n    },\n    []\n  )\n\n  const preparedProps: ExpiryProps = {\n    ...props,\n    errorMessages,\n    fromInput: toExpiryString,\n    validateRequired,\n  }\n\n  const {\n    id,\n    path,\n    itemPath,\n    className,\n    label = expiryLabel,\n    hasError,\n    info,\n    warning,\n    disabled,\n    value = '',\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\n\n  const expiry: ExpiryValue = useMemo(() => {\n    return {\n      month: ensureValidMonth(value?.substring(0, 2)),\n      year: value?.substring(2, 4) ?? '',\n    }\n  }, [value])\n\n  useMemo(() => {\n    if ((path || itemPath) && expiry.month && expiry.year) {\n      setDisplayValue(`${expiry.month}/${expiry.year}`)\n    }\n  }, [expiry.month, expiry.year, itemPath, path, setDisplayValue])\n\n  const status = hasError\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const fieldBlockProps: FieldBlockProps = {\n    id,\n    forId: `${id}-input-month`,\n    className: classnames('dnb-forms-field-expiry', className),\n    label,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <MultiInputMask\n        stretch\n        id={`${id}-input`}\n        values={expiry}\n        status={status}\n        statusState={disabled ? 'disabled' : undefined}\n        disabled={disabled}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        delimiter=\"/\"\n        inputMode=\"numeric\"\n        inputs={[\n          {\n            id: 'month',\n            label: monthLabel,\n            mask: getMonthMask(expiry?.month),\n            placeholderCharacter: placeholders['month'],\n            autoComplete: 'cc-exp-month',\n            ...htmlAttributes,\n          },\n          {\n            id: 'year',\n            label: yearLabel,\n            mask: [/[0-9]/, /[0-9]/],\n            placeholderCharacter: placeholders['year'],\n            autoComplete: 'cc-exp-year',\n            ...htmlAttributes,\n          },\n        ]}\n      />\n    </FieldBlock>\n  )\n}\n\nExpiry._supportsEufemiaSpacingProps = true\nexport default Expiry\n\nfunction toExpiryString(values: ExpiryValue) {\n  return Object.values(values).join('')\n}\n\nfunction ensureValidMonth(month: string) {\n  // Return empty value if no month is given\n  if (!month) {\n    return ''\n  }\n\n  const [firstMask, secondMask] = getMonthMask(month)\n\n  const firstDigit = month?.charAt(0)\n  const isFirstDigitValid = firstMask.test(firstDigit)\n\n  if (firstDigit && !isFirstDigitValid) {\n    // Return empty value if the first digit is invalid\n    return ''\n  }\n\n  const secondDigit = month?.charAt(1)\n  const isSecondDigitValid = secondMask.test(secondDigit)\n\n  if (secondDigit && !isSecondDigitValid) {\n    // Return empty value if the second digit is invalid\n    return ''\n  }\n\n  // Return given month of month value is valid\n  return month\n}\n\nfunction getMonthMask(month: string) {\n  const firstDigit = month?.charAt(0)\n\n  return [\n    /[0-1]/,\n    firstDigit === '0' || firstDigit === '' ? /[1-9]/ : /[0-2]/,\n  ]\n}\n"],"mappings":"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"}

package/es/extensions/forms/Field/Indeterminate/useDependencePaths.js

@@ -6,7 +6,7 @@ import DataContext from '../../DataContext/Context';
 export default function useDependencePaths(dependencePaths, propagateIndeterminateState) {
   const {
     data,
-    fieldPropsRef,
+    fieldInternalsRef,
     handlePathChange
   } = useContext(DataContext) || {};
   const {
@@ -23,9 +23,9 @@ export default function useDependencePaths(dependencePaths, propagateIndetermina
     }) => {
       return dependencePaths === null || dependencePaths === void 0 ? void 0 : dependencePaths.every(path => {
         if (pointer.has(data, path)) {
-          var _fieldPropsRef$curren, _fieldPropsRef$curren2;
+          var _fieldInternalsRef$cu, _fieldInternalsRef$cu2, _fieldInternalsRef$cu3;
           const value = pointer.get(data, path);
-          if ((whenUndefined ? typeof value === 'undefined' : false) || value === (fieldPropsRef === null || fieldPropsRef === void 0 ? void 0 : (_fieldPropsRef$curren = fieldPropsRef.current) === null || _fieldPropsRef$curren === void 0 ? void 0 : (_fieldPropsRef$curren2 = _fieldPropsRef$curren[path]) === null || _fieldPropsRef$curren2 === void 0 ? void 0 : _fieldPropsRef$curren2[key])) {
+          if ((whenUndefined ? typeof value === 'undefined' : false) || value === (fieldInternalsRef === null || fieldInternalsRef === void 0 ? void 0 : (_fieldInternalsRef$cu = fieldInternalsRef.current) === null || _fieldInternalsRef$cu === void 0 ? void 0 : (_fieldInternalsRef$cu2 = _fieldInternalsRef$cu[path]) === null || _fieldInternalsRef$cu2 === void 0 ? void 0 : (_fieldInternalsRef$cu3 = _fieldInternalsRef$cu2.props) === null || _fieldInternalsRef$cu3 === void 0 ? void 0 : _fieldInternalsRef$cu3[key])) {
             return true;
           }
         }
@@ -44,7 +44,7 @@ export default function useDependencePaths(dependencePaths, propagateIndetermina
       allOff,
       indeterminate
     };
-  }, [data, dependencePaths, fieldPropsRef]);
+  }, [data, dependencePaths, fieldInternalsRef]);
   const keepStateRef = useRef();
   useMemo(() => {
     if (allOn && !keepStateRef.current) {
@@ -59,12 +59,12 @@ export default function useDependencePaths(dependencePaths, propagateIndetermina
   }, [allOn, allOff, propagateIndeterminateState, indeterminate]);
   const setAllStates = useCallback(checked => {
     dependencePaths === null || dependencePaths === void 0 ? void 0 : dependencePaths.forEach(path => {
-      var _fieldPropsRef$curren3, _fieldPropsRef$curren4;
+      var _fieldInternalsRef$cu4, _fieldInternalsRef$cu5, _fieldInternalsRef$cu6;
       const fieldProp = checked ? 'valueOn' : 'valueOff';
-      const value = fieldPropsRef === null || fieldPropsRef === void 0 ? void 0 : (_fieldPropsRef$curren3 = fieldPropsRef.current) === null || _fieldPropsRef$curren3 === void 0 ? void 0 : (_fieldPropsRef$curren4 = _fieldPropsRef$curren3[path]) === null || _fieldPropsRef$curren4 === void 0 ? void 0 : _fieldPropsRef$curren4[fieldProp];
+      const value = fieldInternalsRef === null || fieldInternalsRef === void 0 ? void 0 : (_fieldInternalsRef$cu4 = fieldInternalsRef.current) === null || _fieldInternalsRef$cu4 === void 0 ? void 0 : (_fieldInternalsRef$cu5 = _fieldInternalsRef$cu4[path]) === null || _fieldInternalsRef$cu5 === void 0 ? void 0 : (_fieldInternalsRef$cu6 = _fieldInternalsRef$cu5.props) === null || _fieldInternalsRef$cu6 === void 0 ? void 0 : _fieldInternalsRef$cu6[fieldProp];
       handlePathChange === null || handlePathChange === void 0 ? void 0 : handlePathChange(path, value);
     });
-  }, [dependencePaths, fieldPropsRef, handlePathChange]);
+  }, [dependencePaths, fieldInternalsRef, handlePathChange]);
   return {
     setAllStates,
     indeterminate,

package/es/extensions/forms/Field/Indeterminate/useDependencePaths.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDependencePaths.js","names":["useCallback","useContext","useMemo","useRef","pointer","DataContext","useDependencePaths","dependencePaths","propagateIndeterminateState","data","fieldPropsRef","handlePathChange","allOn","allOff","indeterminate","check","key","whenUndefined","every","path","has","_fieldPropsRef$curren","_fieldPropsRef$curren2","value","get","current","keepStateRef","setAllStates","checked","forEach","_fieldPropsRef$curren3","_fieldPropsRef$curren4","fieldProp","internalValue"],"sources":["../../../../../../src/extensions/forms/Field/Indeterminate/useDependencePaths.tsx"],"sourcesContent":["import { useCallback, useContext, useMemo, useRef } from 'react'\nimport pointer from '../../utils/json-pointer'\nimport DataContext from '../../DataContext/Context'\nimport { Props } from './Indeterminate'\n\nexport default function useDependencePaths(\n  dependencePaths: Props['dependencePaths'],\n  propagateIndeterminateState: Props['propagateIndeterminateState']\n) {\n  const { data, fieldPropsRef, handlePathChange } =\n    useContext(DataContext) || {}\n\n  const { allOn, allOff, indeterminate } = useMemo(() => {\n    if (!dependencePaths || !data) {\n      return {}\n    }\n\n    const check = ({ key, whenUndefined = false }) => {\n      return dependencePaths?.every((path) => {\n        if (pointer.has(data, path)) {\n          const value = pointer.get(data, path)\n          if (\n            // When value is undefined, we should also consider it as off\n            (whenUndefined ? typeof value === 'undefined' : false) ||\n            value === fieldPropsRef?.current?.[path]?.[key]\n          ) {\n            return true\n          }\n        }\n      })\n    }\n\n    const allOn = check({ key: 'valueOn' })\n    const allOff = check({ key: 'valueOff', whenUndefined: true })\n    const indeterminate = !allOn && !allOff\n\n    return {\n      allOn,\n      allOff,\n      indeterminate,\n    }\n  }, [data, dependencePaths, fieldPropsRef])\n\n  const keepStateRef = useRef<boolean>()\n  useMemo(() => {\n    if (allOn && !keepStateRef.current) {\n      keepStateRef.current = true\n    } else if (allOff && keepStateRef.current) {\n      keepStateRef.current = false\n    } else {\n      if (propagateIndeterminateState !== 'auto' && indeterminate) {\n        keepStateRef.current = propagateIndeterminateState === 'unchecked'\n      }\n    }\n  }, [allOn, allOff, propagateIndeterminateState, indeterminate])\n\n  const setAllStates = useCallback(\n    (checked: boolean) => {\n      dependencePaths?.forEach((path) => {\n        const fieldProp = checked ? 'valueOn' : 'valueOff'\n        const value = fieldPropsRef?.current?.[path]?.[fieldProp]\n        handlePathChange?.(path, value)\n      })\n    },\n    [dependencePaths, fieldPropsRef, handlePathChange]\n  )\n\n  return {\n    setAllStates,\n    indeterminate,\n    internalValue: keepStateRef.current,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useDependencePaths.js","names":["useCallback","useContext","useMemo","useRef","pointer","DataContext","useDependencePaths","dependencePaths","propagateIndeterminateState","data","fieldInternalsRef","handlePathChange","allOn","allOff","indeterminate","check","key","whenUndefined","every","path","has","_fieldInternalsRef$cu","_fieldInternalsRef$cu2","_fieldInternalsRef$cu3","value","get","current","props","keepStateRef","setAllStates","checked","forEach","_fieldInternalsRef$cu4","_fieldInternalsRef$cu5","_fieldInternalsRef$cu6","fieldProp","internalValue"],"sources":["../../../../../../src/extensions/forms/Field/Indeterminate/useDependencePaths.tsx"],"sourcesContent":["import { useCallback, useContext, useMemo, useRef } from 'react'\nimport pointer from '../../utils/json-pointer'\nimport DataContext from '../../DataContext/Context'\nimport { Props } from './Indeterminate'\n\nexport default function useDependencePaths(\n  dependencePaths: Props['dependencePaths'],\n  propagateIndeterminateState: Props['propagateIndeterminateState']\n) {\n  const { data, fieldInternalsRef, handlePathChange } =\n    useContext(DataContext) || {}\n\n  const { allOn, allOff, indeterminate } = useMemo(() => {\n    if (!dependencePaths || !data) {\n      return {}\n    }\n\n    const check = ({ key, whenUndefined = false }) => {\n      return dependencePaths?.every((path) => {\n        if (pointer.has(data, path)) {\n          const value = pointer.get(data, path)\n          if (\n            // When value is undefined, we should also consider it as off\n            (whenUndefined ? typeof value === 'undefined' : false) ||\n            value === fieldInternalsRef?.current?.[path]?.props?.[key]\n          ) {\n            return true\n          }\n        }\n      })\n    }\n\n    const allOn = check({ key: 'valueOn' })\n    const allOff = check({ key: 'valueOff', whenUndefined: true })\n    const indeterminate = !allOn && !allOff\n\n    return {\n      allOn,\n      allOff,\n      indeterminate,\n    }\n  }, [data, dependencePaths, fieldInternalsRef])\n\n  const keepStateRef = useRef<boolean>()\n  useMemo(() => {\n    if (allOn && !keepStateRef.current) {\n      keepStateRef.current = true\n    } else if (allOff && keepStateRef.current) {\n      keepStateRef.current = false\n    } else {\n      if (propagateIndeterminateState !== 'auto' && indeterminate) {\n        keepStateRef.current = propagateIndeterminateState === 'unchecked'\n      }\n    }\n  }, [allOn, allOff, propagateIndeterminateState, indeterminate])\n\n  const setAllStates = useCallback(\n    (checked: boolean) => {\n      dependencePaths?.forEach((path) => {\n        const fieldProp = checked ? 'valueOn' : 'valueOff'\n        const value =\n          fieldInternalsRef?.current?.[path]?.props?.[fieldProp]\n        handlePathChange?.(path, value)\n      })\n    },\n    [dependencePaths, fieldInternalsRef, handlePathChange]\n  )\n\n  return {\n    setAllStates,\n    indeterminate,\n    internalValue: keepStateRef.current,\n  }\n}\n"],"mappings":"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"}

package/es/extensions/forms/Field/Number/Number.js

@@ -95,8 +95,8 @@ function NumberComponent(props) {
   } = useFieldProps(preparedProps);
   useEffect(() => {
     var _innerRef$current;
-    setDisplayValue(props.path, (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
-  }, [innerRef, props.path, setDisplayValue, value]);
+    setDisplayValue((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
+  }, [innerRef, setDisplayValue, value]);
   const {
     handleSubmit
   } = dataContext !== null && dataContext !== void 0 ? dataContext : {};

package/es/extensions/forms/Field/Number/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","useEffect","useRef","InputMasked","Button","SharedContext","FieldBlockContext","classnames","FieldBlock","useFieldProps","pickSpacingProps","clamp","DataContext","defaultMinimum","Number","MIN_SAFE_INTEGER","defaultMaximum","MAX_SAFE_INTEGER","NumberComponent","props","_props$width","_props$innerRef","_dataContext$props2","_sharedContext$transl","_sharedContext$transl2","dataContext","fieldBlockContext","sharedContext","currency","currencyDisplay","percent","mask","step","decimalLimit","allowNegative","disallowLeadingZeroes","prefix","prefixProp","suffix","suffixProp","showStepControls","schema","_props$schema","_props$minimum","_props$maximum","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","undefined","fromInput","value","numberValue","emptyValue","ref","preparedProps","_objectSpread","valueType","width","composition","innerRef","id","name","className","inputClassName","autoComplete","placeholder","startWith","disabled","htmlAttributes","hasError","size","align","handleFocus","handleBlur","handleChange","setDisplayValue","_innerRef$current","path","current","handleSubmit","onKeyDownHandler","e","_dataContext$props","event","isolate","key","_event$preventDefault","preventDefault","call","persist","fieldBlockProps","forId","contentClassName","contentWidth","increaseClickHandler","increaseProps","variant","icon","tabIndex","onClick","title","translation","Slider","addTitle","replace","String","decreaseClickHandler","decreaseProps","subtractTitle","maskProps","mask_options","as_currency","currency_mask","as_percent","as_number","number_mask","ariaParams","role","inputProps","inner_ref","onKeyDown","onFocus","onBlur","onChange","status","stretch","Boolean","Object","assign","createElement","_extends","asFieldset","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useMemo,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport { InputMasked, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type {\n  InputAlign,\n  InputProps,\n  InputSize,\n} from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport classnames from 'classnames'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps, AllJSONSchemaVersions } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport DataContext from '../../DataContext/Context'\n\nexport type Props = FieldProps<number, undefined | number> & {\n  innerRef?: React.RefObject<HTMLInputElement>\n  inputClassName?: string\n  currency?: InputMaskedProps['as_currency']\n  currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'\n  percent?: InputMaskedProps['as_percent']\n  mask?: InputMaskedProps['mask']\n  step?: number\n  startWith?: number\n  // Formatting\n  decimalLimit?: number\n  allowNegative?: boolean\n  disallowLeadingZeroes?: boolean\n  prefix?: string | ((value: number) => string)\n  suffix?: string | ((value: number) => string)\n  // Validation\n  minimum?: number // aka greater than or equal to\n  maximum?: number // aka less than or equal to\n  exclusiveMinimum?: number // aka greater than\n  exclusiveMaximum?: number // aka less than\n  multipleOf?: number\n  // Styling\n  size?: InputSize\n  width?: FieldBlockWidth\n  align?: InputAlign\n  showStepControls?: boolean\n}\n\nconst defaultMinimum = Number.MIN_SAFE_INTEGER\nconst defaultMaximum = Number.MAX_SAFE_INTEGER\n\nfunction NumberComponent(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    currency,\n    currencyDisplay,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    allowNegative = true,\n    disallowLeadingZeroes = false,\n    prefix: prefixProp,\n    suffix: suffixProp,\n    showStepControls,\n  } = props\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum ?? defaultMinimum,\n        maximum: props.maximum ?? defaultMaximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return null\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n\n  const ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    valueType: 'number',\n    ...props,\n    schema,\n    toInput,\n    fromInput,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'medium'),\n    innerRef: props.innerRef ?? ref,\n  }\n\n  const {\n    id,\n    name,\n    className,\n    innerRef,\n    inputClassName,\n    autoComplete,\n    placeholder,\n    value,\n    startWith = null,\n    minimum = defaultMinimum,\n    maximum = defaultMaximum,\n    disabled,\n    htmlAttributes,\n    hasError,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    setDisplayValue(props.path, innerRef.current?.value)\n  }, [innerRef, props.path, setDisplayValue, value])\n\n  const { handleSubmit } = dataContext ?? {}\n  const onKeyDownHandler = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const { event } = e as unknown as {\n        event: React.KeyboardEvent<HTMLInputElement>\n      }\n      if (dataContext?.props?.isolate && event.key === 'Enter') {\n        handleSubmit() // So we commit the data to the outer context\n        event.preventDefault?.() // And prevent the default form submit\n      }\n\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (event.key) {\n        case 'ArrowUp':\n          numberValue = clamp(\n            (value ?? startWith) + step,\n            minimum,\n            maximum\n          )\n          break\n        case 'ArrowDown':\n          numberValue = clamp(\n            (value ?? startWith) - step,\n            minimum,\n            maximum\n          )\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [\n      dataContext?.props?.isolate,\n      handleChange,\n      handleSubmit,\n      maximum,\n      minimum,\n      showStepControls,\n      startWith,\n      step,\n      value,\n    ]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-number',\n      'dnb-input__border--tokens', // Used by \"dnb-input__border\"\n      className\n    ),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      hasError && 'dnb-input__status--error', // Also used by \"dnb-input__border\"\n      disabled && 'dnb-input--disabled' // Also used by \"dnb-input__border\"\n    ),\n    width:\n      (width === 'stretch' || fieldBlockContext?.composition) &&\n      !showStepControls\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseClickHandler = useCallback(() => {\n    handleChange({\n      numberValue: clamp((value ?? startWith) + step, minimum, maximum),\n    })\n  }, [handleChange, maximum, minimum, startWith, step, value])\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: increaseClickHandler,\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseClickHandler = useCallback(() => {\n    handleChange({\n      numberValue: clamp((value ?? startWith) - step, minimum, maximum),\n    })\n  }, [handleChange, maximum, minimum, startWith, step, value])\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: decreaseClickHandler,\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const prefix =\n    typeof prefixProp === 'function' ? prefixProp(value) : prefixProp\n  const suffix =\n    typeof suffixProp === 'function' ? suffixProp(value) : suffixProp\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = {\n      prefix,\n      suffix,\n      decimalLimit,\n      allowNegative,\n      disallowLeadingZeroes,\n    }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n        currency_mask: {\n          currencyDisplay,\n          decimalLimit,\n        },\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [\n    currency,\n    currencyDisplay,\n    decimalLimit,\n    mask,\n    percent,\n    prefix,\n    suffix,\n    allowNegative,\n    disallowLeadingZeroes,\n  ])\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invalid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps: InputProps = {\n    id,\n    name,\n    inner_ref: innerRef,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step: showStepControls ? step : undefined,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...htmlAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: Boolean(width),\n  }\n  Object.assign(inputProps, ariaParams)\n\n  if (showStepControls) {\n    return (\n      <FieldBlock {...fieldBlockProps} asFieldset={false}>\n        <span className=\"dnb-input__border dnb-input__border--root\">\n          {<Button {...decreaseProps} />}\n          <InputMasked {...inputProps} />\n          {<Button {...increaseProps} />}\n        </span>\n      </FieldBlock>\n    )\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      <InputMasked {...inputProps} />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IACVC,UAAU,EACVC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,SAASC,WAAW,EAAEC,MAAM,QAAQ,wBAAwB;AAO5D,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAGV,kBAAkB;AACzB,SAASC,aAAa,QAAQ,aAAa;AAE3C,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE,SAASC,KAAK,QAAQ,6CAA6C;AACnE,OAAOC,WAAW,MAAM,2BAA2B;AA8BnD,MAAMC,cAAc,GAAGC,MAAM,CAACC,gBAAgB;AAC9C,MAAMC,cAAc,GAAGF,MAAM,CAACG,gBAAgB;AAE9C,SAASC,eAAeA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA,EAAAC,eAAA,EAAAC,mBAAA,EAAAC,qBAAA,EAAAC,sBAAA;EACrC,MAAMC,WAAW,GAAG3B,UAAU,CAACc,WAAW,CAAC;EAC3C,MAAMc,iBAAiB,GAAG5B,UAAU,CAACQ,iBAAiB,CAAC;EACvD,MAAMqB,aAAa,GAAG7B,UAAU,CAACO,aAAa,CAAC;EAE/C,MAAM;IACJuB,QAAQ;IACRC,eAAe;IACfC,OAAO;IACPC,IAAI;IACJC,IAAI,GAAG,CAAC;IACRC,YAAY,GAAG,EAAE;IACjBC,aAAa,GAAG,IAAI;IACpBC,qBAAqB,GAAG,KAAK;IAC7BC,MAAM,EAAEC,UAAU;IAClBC,MAAM,EAAEC,UAAU;IAClBC;EACF,CAAC,GAAGrB,KAAK;EAET,MAAMsB,MAAM,GAAG1C,OAAO,CACpB;IAAA,IAAA2C,aAAA,EAAAC,cAAA,EAAAC,cAAA;IAAA,QAAAF,aAAA,GACEvB,KAAK,CAACsB,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdG,IAAI,EAAE,QAAQ;MACdC,OAAO,GAAAH,cAAA,GAAExB,KAAK,CAAC2B,OAAO,cAAAH,cAAA,cAAAA,cAAA,GAAI9B,cAAc;MACxCkC,OAAO,GAAAH,cAAA,GAAEzB,KAAK,CAAC4B,OAAO,cAAAH,cAAA,cAAAA,cAAA,GAAI5B,cAAc;MACxCgC,gBAAgB,EAAE7B,KAAK,CAAC6B,gBAAgB;MACxCC,gBAAgB,EAAE9B,KAAK,CAAC8B,gBAAgB;MACxCC,UAAU,EAAE/B,KAAK,CAAC+B;IACpB,CAAC;EAAA,GACH,CACE/B,KAAK,CAACsB,MAAM,EACZtB,KAAK,CAAC2B,OAAO,EACb3B,KAAK,CAAC4B,OAAO,EACb5B,KAAK,CAAC6B,gBAAgB,EACtB7B,KAAK,CAAC8B,gBAAgB,EACtB9B,KAAK,CAAC+B,UAAU,CAEpB,CAAC;EAED,MAAMC,OAAO,GAAGnD,WAAW,CAAEoD,QAA4B,IAAK;IAC5D,IAAIA,QAAQ,KAAKC,SAAS,EAAE;MAC1B,OAAO,IAAI;IACb;IACA,OAAOD,QAAQ;EACjB,CAAC,EAAE,EAAE,CAAC;EACN,MAAME,SAAS,GAAGtD,WAAW,CAC3B,CAAC;IAAEuD,KAAK;IAAEC;EAAoD,CAAC,KAAK;IAClE,IAAID,KAAK,KAAK,EAAE,EAAE;MAChB,OAAOpC,KAAK,CAACsC,UAAU;IACzB;IACA,OAAOD,WAAW;EACpB,CAAC,EACD,CAACrC,KAAK,CAACsC,UAAU,CACnB,CAAC;EAED,MAAMC,GAAG,GAAGxD,MAAM,CAAmB,CAAC;EACtC,MAAMyD,aAAoB,GAAAC,aAAA,CAAAA,aAAA;IACxBC,SAAS,EAAE;EAAQ,GAChB1C,KAAK;IACRsB,MAAM;IACNU,OAAO;IACPG,SAAS;IACTQ,KAAK,GAAA1C,YAAA,GACHD,KAAK,CAAC2C,KAAK,cAAA1C,YAAA,cAAAA,YAAA,GACVM,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEqC,WAAW,GAAG,SAAS,GAAG,QAAS;IACzDC,QAAQ,GAAA3C,eAAA,GAAEF,KAAK,CAAC6C,QAAQ,cAAA3C,eAAA,cAAAA,eAAA,GAAIqC;EAAG,EAChC;EAED,MAAM;IACJO,EAAE;IACFC,IAAI;IACJC,SAAS;IACTH,QAAQ;IACRI,cAAc;IACdC,YAAY;IACZC,WAAW;IACXf,KAAK;IACLgB,SAAS,GAAG,IAAI;IAChBzB,OAAO,GAAGjC,cAAc;IACxBkC,OAAO,GAAG/B,cAAc;IACxBwD,QAAQ;IACRC,cAAc;IACdC,QAAQ;IACRC,IAAI;IACJb,KAAK;IACLc,KAAK;IACLC,WAAW;IACXC,UAAU;IACVC,YAAY;IACZC;EACF,CAAC,GAAGvE,aAAa,CAACkD,aAAa,CAAC;EAEhC1D,SAAS,CAAC,MAAM;IAAA,IAAAgF,iBAAA;IACdD,eAAe,CAAC7D,KAAK,CAAC+D,IAAI,GAAAD,iBAAA,GAAEjB,QAAQ,CAACmB,OAAO,cAAAF,iBAAA,uBAAhBA,iBAAA,CAAkB1B,KAAK,CAAC;EACtD,CAAC,EAAE,CAACS,QAAQ,EAAE7C,KAAK,CAAC+D,IAAI,EAAEF,eAAe,EAAEzB,KAAK,CAAC,CAAC;EAElD,MAAM;IAAE6B;EAAa,CAAC,GAAG3D,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,CAAC,CAAC;EAC1C,MAAM4D,gBAAgB,GAAGrF,WAAW,CACjCsF,CAAwC,IAAK;IAAA,IAAAC,kBAAA;IAC5C,MAAM;MAAEC;IAAM,CAAC,GAAGF,CAEjB;IACD,IAAI7D,WAAW,aAAXA,WAAW,gBAAA8D,kBAAA,GAAX9D,WAAW,CAAEN,KAAK,cAAAoE,kBAAA,eAAlBA,kBAAA,CAAoBE,OAAO,IAAID,KAAK,CAACE,GAAG,KAAK,OAAO,EAAE;MAAA,IAAAC,qBAAA;MACxDP,YAAY,CAAC,CAAC;MACd,CAAAO,qBAAA,GAAAH,KAAK,CAACI,cAAc,cAAAD,qBAAA,uBAApBA,qBAAA,CAAAE,IAAA,CAAAL,KAAuB,CAAC;IAC1B;IAEA,IAAI,CAAChD,gBAAgB,EAAE;MACrB;IACF;IAEA,IAAIgB,WAAW,GAAG,IAAI;IAEtB,QAAQgC,KAAK,CAACE,GAAG;MACf,KAAK,SAAS;QACZlC,WAAW,GAAG7C,KAAK,CACjB,CAAC4C,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIgB,SAAS,IAAIvC,IAAI,EAC3Bc,OAAO,EACPC,OACF,CAAC;QACD;MACF,KAAK,WAAW;QACdS,WAAW,GAAG7C,KAAK,CACjB,CAAC4C,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIgB,SAAS,IAAIvC,IAAI,EAC3Bc,OAAO,EACPC,OACF,CAAC;QACD;IACJ;IAEA,IAAIS,WAAW,KAAK,IAAI,EAAE;MACxBgC,KAAK,CAACM,OAAO,CAAC,CAAC;MACfN,KAAK,CAACI,cAAc,CAAC,CAAC;MACtBb,YAAY,CAAC;QAAEvB;MAAY,CAAC,CAAC;IAC/B;EACF,CAAC,EACD,CACE/B,WAAW,aAAXA,WAAW,wBAAAH,mBAAA,GAAXG,WAAW,CAAEN,KAAK,cAAAG,mBAAA,uBAAlBA,mBAAA,CAAoBmE,OAAO,EAC3BV,YAAY,EACZK,YAAY,EACZrC,OAAO,EACPD,OAAO,EACPN,gBAAgB,EAChB+B,SAAS,EACTvC,IAAI,EACJuB,KAAK,CAET,CAAC;EAED,MAAMwC,eAAgC,GAAAnC,aAAA;IACpCoC,KAAK,EAAE/B,EAAE;IACTE,SAAS,EAAE5D,UAAU,qDAGnB4D,SACF,CAAC;IACD8B,gBAAgB,EAAE1F,UAAU,CAC1B,kCAAkC,EAClCiC,gBAAgB,IAAI,gDAAgD,EACpEkC,QAAQ,IAAI,0BAA0B,EACtCF,QAAQ,IAAI,qBACd,CAAC;IACDV,KAAK,EACH,CAACA,KAAK,KAAK,SAAS,IAAIpC,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEqC,WAAW,KACtD,CAACvB,gBAAgB,GACbsB,KAAK,GACLT,SAAS;IACf6C,YAAY,EAAEpC,KAAK,KAAK,KAAK,GAAGA,KAAK,GAAGT;EAAS,GAC9C3C,gBAAgB,CAACS,KAAK,CAAC,CAC3B;EAED,MAAMgF,oBAAoB,GAAGnG,WAAW,CAAC,MAAM;IAC7C+E,YAAY,CAAC;MACXvB,WAAW,EAAE7C,KAAK,CAAC,CAAC4C,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIgB,SAAS,IAAIvC,IAAI,EAAEc,OAAO,EAAEC,OAAO;IAClE,CAAC,CAAC;EACJ,CAAC,EAAE,CAACgC,YAAY,EAAEhC,OAAO,EAAED,OAAO,EAAEyB,SAAS,EAAEvC,IAAI,EAAEuB,KAAK,CAAC,CAAC;EAE5D,MAAM6C,aAA0B,GAAG5D,gBAAgB,IAAI;IACrD,aAAa,EAAE,IAAI;IACnB2B,SAAS,EAAE,2BAA2B;IACtCkC,OAAO,EAAE,WAAW;IACpBC,IAAI,EAAE,KAAK;IACX3B,IAAI,EAAGA,IAAI,IAAI,OAAsB;IACrC4B,QAAQ,EAAE,CAAC,CAAC;IACZ/B,QAAQ,EAAEA,QAAQ,IAAIjB,KAAK,IAAIR,OAAO;IACtCyD,OAAO,EAAEL,oBAAoB;IAC7BM,KAAK,EAAE9E,aAAa,aAAbA,aAAa,wBAAAJ,qBAAA,GAAbI,aAAa,CAAE+E,WAAW,CAACC,MAAM,CAACC,QAAQ,cAAArF,qBAAA,uBAA1CA,qBAAA,CAA4CsF,OAAO,CACxD,IAAI,EACJC,MAAM,CAACvD,KAAK,GAAGvB,IAAI,CACrB;EACF,CAAC;EAED,MAAM+E,oBAAoB,GAAG/G,WAAW,CAAC,MAAM;IAC7C+E,YAAY,CAAC;MACXvB,WAAW,EAAE7C,KAAK,CAAC,CAAC4C,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIgB,SAAS,IAAIvC,IAAI,EAAEc,OAAO,EAAEC,OAAO;IAClE,CAAC,CAAC;EACJ,CAAC,EAAE,CAACgC,YAAY,EAAEhC,OAAO,EAAED,OAAO,EAAEyB,SAAS,EAAEvC,IAAI,EAAEuB,KAAK,CAAC,CAAC;EAE5D,MAAMyD,aAA0B,GAAGxE,gBAAgB,IAAAoB,aAAA,CAAAA,aAAA,KAC9CwC,aAAa;IAChBjC,SAAS,EAAE,4BAA4B;IACvCmC,IAAI,EAAE,UAAU;IAChB3B,IAAI,EAAGA,IAAI,IAAI,OAAsB;IACrCH,QAAQ,EAAEA,QAAQ,IAAIjB,KAAK,IAAIT,OAAO;IACtC0D,OAAO,EAAEO,oBAAoB;IAC7BN,KAAK,EAAE9E,aAAa,aAAbA,aAAa,wBAAAH,sBAAA,GAAbG,aAAa,CAAE+E,WAAW,CAACC,MAAM,CAACM,aAAa,cAAAzF,sBAAA,uBAA/CA,sBAAA,CAAiDqF,OAAO,CAC7D,IAAI,EACJC,MAAM,CAACvD,KAAK,GAAGvB,IAAI,CACrB;EAAC,EACF;EAED,MAAMI,MAAM,GACV,OAAOC,UAAU,KAAK,UAAU,GAAGA,UAAU,CAACkB,KAAK,CAAC,GAAGlB,UAAU;EACnE,MAAMC,MAAM,GACV,OAAOC,UAAU,KAAK,UAAU,GAAGA,UAAU,CAACgB,KAAK,CAAC,GAAGhB,UAAU;EAEnE,MAAM2E,SAAoC,GAAGnH,OAAO,CAAC,MAAM;IACzD,MAAMoH,YAAY,GAAG;MACnB/E,MAAM;MACNE,MAAM;MACNL,YAAY;MACZC,aAAa;MACbC;IACF,CAAC;IAED,IAAIP,QAAQ,EAAE;MACZ,OAAO;QACLwF,WAAW,EAAExF,QAAQ;QACrBuF,YAAY;QACZE,aAAa,EAAE;UACbxF,eAAe;UACfI;QACF;MACF,CAAC;IACH;IAEA,IAAIH,OAAO,EAAE;MACX,OAAO;QACLwF,UAAU,EAAExF,OAAO;QACnBqF;MACF,CAAC;IACH;IAGA,OAAO;MACLI,SAAS,EAAE,IAAI;MACfxF,IAAI;MACJyF,WAAW,EAAA5D,aAAA,KACNuD,YAAY;IAEnB,CAAC;EACH,CAAC,EAAE,CACDvF,QAAQ,EACRC,eAAe,EACfI,YAAY,EACZF,IAAI,EACJD,OAAO,EACPM,MAAM,EACNE,MAAM,EACNJ,aAAa,EACbC,qBAAqB,CACtB,CAAC;EAEF,MAAMsF,UAAU,GAAGjF,gBAAgB,IAAI;IACrCkF,IAAI,EAAE,YAAY;IAClB,eAAe,EAAEZ,MAAM,CAAChE,OAAO,CAAC;IAChC,eAAe,EAAEgE,MAAM,CAAC/D,OAAO,CAAC;IAChC,eAAe,EAAE+D,MAAM,CAACvD,KAAK,CAAC;IAC9B,gBAAgB,EAAEuD,MAAM,CAACvD,KAAK;EAChC,CAAC;EAED,MAAMoE,UAAsB,GAAA/D,aAAA,CAAAA,aAAA,CAAAA,aAAA;IAC1BK,EAAE;IACFC,IAAI;IACJ0D,SAAS,EAAE5D,QAAQ;IACnBK,YAAY;IACZF,SAAS,EAAE5D,UAAU,6CAELoE,IAAK,IACnBP,cACF,CAAC;IACDpC,IAAI,EAAEQ,gBAAgB,GAAGR,IAAI,GAAGqB,SAAS;IACzCiB,WAAW;IACXf,KAAK;IACLqB,KAAK,EAAEpC,gBAAgB,GAAG,QAAQ,GAAGoC;EAAK,GACvCsC,SAAS;IACZW,SAAS,EAAExC,gBAAgB;IAC3ByC,OAAO,EAAEjD,WAAW;IACpBkD,MAAM,EAAEjD,UAAU;IAClBkD,QAAQ,EAAEjD,YAAY;IACtBP;EAAQ,GACLC,cAAc;IACjBwD,MAAM,EAAEvD,QAAQ,GAAG,OAAO,GAAGrB,SAAS;IACtC6E,OAAO,EAAEC,OAAO,CAACrE,KAAK;EAAC,EACxB;EACDsE,MAAM,CAACC,MAAM,CAACV,UAAU,EAAEF,UAAU,CAAC;EAErC,IAAIjF,gBAAgB,EAAE;IACpB,OACE3C,KAAA,CAAAyI,aAAA,CAAC9H,UAAU,EAAA+H,QAAA,KAAKxC,eAAe;MAAEyC,UAAU,EAAE;IAAM,IACjD3I,KAAA,CAAAyI,aAAA;MAAMnE,SAAS,EAAC;IAA2C,GACxDtE,KAAA,CAAAyI,aAAA,CAAClI,MAAM,EAAK4G,aAAgB,CAAC,EAC9BnH,KAAA,CAAAyI,aAAA,CAACnI,WAAW,EAAKwH,UAAa,CAAC,EAC9B9H,KAAA,CAAAyI,aAAA,CAAClI,MAAM,EAAKgG,aAAgB,CACzB,CACI,CAAC;EAEjB;EAEA,OACEvG,KAAA,CAAAyI,aAAA,CAAC9H,UAAU,EAAA+H,QAAA,KAAKxC,eAAe;IAAEyC,UAAU,EAAE;EAAM,IACjD3I,KAAA,CAAAyI,aAAA,CAACnI,WAAW,EAAKwH,UAAa,CACpB,CAAC;AAEjB;AAEAzG,eAAe,CAACuH,qBAAqB,GAAG,IAAI;AAC5C,eAAevH,eAAe"}
+{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","useEffect","useRef","InputMasked","Button","SharedContext","FieldBlockContext","classnames","FieldBlock","useFieldProps","pickSpacingProps","clamp","DataContext","defaultMinimum","Number","MIN_SAFE_INTEGER","defaultMaximum","MAX_SAFE_INTEGER","NumberComponent","props","_props$width","_props$innerRef","_dataContext$props2","_sharedContext$transl","_sharedContext$transl2","dataContext","fieldBlockContext","sharedContext","currency","currencyDisplay","percent","mask","step","decimalLimit","allowNegative","disallowLeadingZeroes","prefix","prefixProp","suffix","suffixProp","showStepControls","schema","_props$schema","_props$minimum","_props$maximum","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","undefined","fromInput","value","numberValue","emptyValue","ref","preparedProps","_objectSpread","valueType","width","composition","innerRef","id","name","className","inputClassName","autoComplete","placeholder","startWith","disabled","htmlAttributes","hasError","size","align","handleFocus","handleBlur","handleChange","setDisplayValue","_innerRef$current","current","handleSubmit","onKeyDownHandler","e","_dataContext$props","event","isolate","key","_event$preventDefault","preventDefault","call","persist","fieldBlockProps","forId","contentClassName","contentWidth","increaseClickHandler","increaseProps","variant","icon","tabIndex","onClick","title","translation","Slider","addTitle","replace","String","decreaseClickHandler","decreaseProps","subtractTitle","maskProps","mask_options","as_currency","currency_mask","as_percent","as_number","number_mask","ariaParams","role","inputProps","inner_ref","onKeyDown","onFocus","onBlur","onChange","status","stretch","Boolean","Object","assign","createElement","_extends","asFieldset","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useMemo,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport { InputMasked, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type {\n  InputAlign,\n  InputProps,\n  InputSize,\n} from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport classnames from 'classnames'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps, AllJSONSchemaVersions } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport DataContext from '../../DataContext/Context'\n\nexport type Props = FieldProps<number, undefined | number> & {\n  innerRef?: React.RefObject<HTMLInputElement>\n  inputClassName?: string\n  currency?: InputMaskedProps['as_currency']\n  currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'\n  percent?: InputMaskedProps['as_percent']\n  mask?: InputMaskedProps['mask']\n  step?: number\n  startWith?: number\n  // Formatting\n  decimalLimit?: number\n  allowNegative?: boolean\n  disallowLeadingZeroes?: boolean\n  prefix?: string | ((value: number) => string)\n  suffix?: string | ((value: number) => string)\n  // Validation\n  minimum?: number // aka greater than or equal to\n  maximum?: number // aka less than or equal to\n  exclusiveMinimum?: number // aka greater than\n  exclusiveMaximum?: number // aka less than\n  multipleOf?: number\n  // Styling\n  size?: InputSize\n  width?: FieldBlockWidth\n  align?: InputAlign\n  showStepControls?: boolean\n}\n\nconst defaultMinimum = Number.MIN_SAFE_INTEGER\nconst defaultMaximum = Number.MAX_SAFE_INTEGER\n\nfunction NumberComponent(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    currency,\n    currencyDisplay,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    allowNegative = true,\n    disallowLeadingZeroes = false,\n    prefix: prefixProp,\n    suffix: suffixProp,\n    showStepControls,\n  } = props\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum ?? defaultMinimum,\n        maximum: props.maximum ?? defaultMaximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return null\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n\n  const ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    valueType: 'number',\n    ...props,\n    schema,\n    toInput,\n    fromInput,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'medium'),\n    innerRef: props.innerRef ?? ref,\n  }\n\n  const {\n    id,\n    name,\n    className,\n    innerRef,\n    inputClassName,\n    autoComplete,\n    placeholder,\n    value,\n    startWith = null,\n    minimum = defaultMinimum,\n    maximum = defaultMaximum,\n    disabled,\n    htmlAttributes,\n    hasError,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    setDisplayValue(innerRef.current?.value)\n  }, [innerRef, setDisplayValue, value])\n\n  const { handleSubmit } = dataContext ?? {}\n  const onKeyDownHandler = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const { event } = e as unknown as {\n        event: React.KeyboardEvent<HTMLInputElement>\n      }\n      if (dataContext?.props?.isolate && event.key === 'Enter') {\n        handleSubmit() // So we commit the data to the outer context\n        event.preventDefault?.() // And prevent the default form submit\n      }\n\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (event.key) {\n        case 'ArrowUp':\n          numberValue = clamp(\n            (value ?? startWith) + step,\n            minimum,\n            maximum\n          )\n          break\n        case 'ArrowDown':\n          numberValue = clamp(\n            (value ?? startWith) - step,\n            minimum,\n            maximum\n          )\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [\n      dataContext?.props?.isolate,\n      handleChange,\n      handleSubmit,\n      maximum,\n      minimum,\n      showStepControls,\n      startWith,\n      step,\n      value,\n    ]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-number',\n      'dnb-input__border--tokens', // Used by \"dnb-input__border\"\n      className\n    ),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      hasError && 'dnb-input__status--error', // Also used by \"dnb-input__border\"\n      disabled && 'dnb-input--disabled' // Also used by \"dnb-input__border\"\n    ),\n    width:\n      (width === 'stretch' || fieldBlockContext?.composition) &&\n      !showStepControls\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseClickHandler = useCallback(() => {\n    handleChange({\n      numberValue: clamp((value ?? startWith) + step, minimum, maximum),\n    })\n  }, [handleChange, maximum, minimum, startWith, step, value])\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: increaseClickHandler,\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseClickHandler = useCallback(() => {\n    handleChange({\n      numberValue: clamp((value ?? startWith) - step, minimum, maximum),\n    })\n  }, [handleChange, maximum, minimum, startWith, step, value])\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: decreaseClickHandler,\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const prefix =\n    typeof prefixProp === 'function' ? prefixProp(value) : prefixProp\n  const suffix =\n    typeof suffixProp === 'function' ? suffixProp(value) : suffixProp\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = {\n      prefix,\n      suffix,\n      decimalLimit,\n      allowNegative,\n      disallowLeadingZeroes,\n    }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n        currency_mask: {\n          currencyDisplay,\n          decimalLimit,\n        },\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [\n    currency,\n    currencyDisplay,\n    decimalLimit,\n    mask,\n    percent,\n    prefix,\n    suffix,\n    allowNegative,\n    disallowLeadingZeroes,\n  ])\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invalid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps: InputProps = {\n    id,\n    name,\n    inner_ref: innerRef,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step: showStepControls ? step : undefined,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...htmlAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: Boolean(width),\n  }\n  Object.assign(inputProps, ariaParams)\n\n  if (showStepControls) {\n    return (\n      <FieldBlock {...fieldBlockProps} asFieldset={false}>\n        <span className=\"dnb-input__border dnb-input__border--root\">\n          {<Button {...decreaseProps} />}\n          <InputMasked {...inputProps} />\n          {<Button {...increaseProps} />}\n        </span>\n      </FieldBlock>\n    )\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      <InputMasked {...inputProps} />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/es/extensions/forms/Field/Option/Option.d.ts

@@ -4,5 +4,6 @@ export type Props = FieldProps<number | string> & {
     title?: React.ReactNode;
     text?: React.ReactNode;
     children?: React.ReactNode;
+    style?: React.CSSProperties;
 };
-export default function Option({ className, title, text, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Option(_props: Props): any;

package/es/extensions/forms/Field/Option/Option.js

@@ -1,14 +1,4 @@
-import React from 'react';
-import classnames from 'classnames';
-export default function Option({
-  className,
-  title,
-  text,
-  children
-}) {
-  return React.createElement("span", {
-    className: classnames('dnb-forms-field-option', className),
-    role: "option"
-  }, title !== null && title !== void 0 ? title : children, text);
+export default function Option(_props) {
+  return null;
 }
 //# sourceMappingURL=Option.js.map

package/es/extensions/forms/Field/Option/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","names":["React","classnames","Option","className","title","text","children","createElement","role"],"sources":["../../../../../../src/extensions/forms/Field/Option/Option.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport type { FieldProps } from '../../types'\n\nexport type Props = FieldProps<number | string> & {\n  title?: React.ReactNode\n  text?: React.ReactNode\n  children?: React.ReactNode\n}\n\nexport default function Option({\n  className,\n  title,\n  text,\n  children,\n}: Props) {\n  return (\n    <span\n      className={classnames('dnb-forms-field-option', className)}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\"\n    >\n      {title ?? children}\n      {text}\n    </span>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AASnC,eAAe,SAASC,MAAMA,CAAC;EAC7BC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC;AACK,CAAC,EAAE;EACR,OACEN,KAAA,CAAAO,aAAA;IACEJ,SAAS,EAAEF,UAAU,CAAC,wBAAwB,EAAEE,SAAS,CAAE;IAE3DK,IAAI,EAAC;EAAQ,GAEZJ,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIE,QAAQ,EACjBD,IACG,CAAC;AAEX"}
+{"version":3,"file":"Option.js","names":["Option","_props"],"sources":["../../../../../../src/extensions/forms/Field/Option/Option.tsx"],"sourcesContent":["import React from 'react'\nimport type { FieldProps } from '../../types'\n\nexport type Props = FieldProps<number | string> & {\n  title?: React.ReactNode\n  text?: React.ReactNode\n  children?: React.ReactNode\n  style?: React.CSSProperties\n}\n\nexport default function Option(_props: Props) {\n  return null\n}\n"],"mappings":"AAUA,eAAe,SAASA,MAAMA,CAACC,MAAa,EAAE;EAC5C,OAAO,IAAI;AACb"}

package/es/extensions/forms/Field/PhoneNumber/PhoneNumber.js

@@ -88,6 +88,8 @@ function PhoneNumber(props) {
   });
   const {
     id,
+    path,
+    itemPath,
     value,
     className,
     inputRef,
@@ -110,6 +112,7 @@ function PhoneNumber(props) {
     required,
     validateInitially,
     continuousValidation,
+    validateContinuously,
     validateUnchanged,
     omitCountryCodeField,
     setHasFocus,
@@ -120,10 +123,12 @@ function PhoneNumber(props) {
     filterCountries
   } = useFieldProps(preparedProps);
   useEffect(() => {
-    var _inputRef$current;
-    const number = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
-    setDisplayValue(props.path, (number === null || number === void 0 ? void 0 : number.length) > 0 ? joinValue([countryCodeRef.current, number]) : undefined);
-  }, [inputRef, props.path, setDisplayValue, value]);
+    if (path || itemPath) {
+      var _inputRef$current;
+      const number = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
+      setDisplayValue((number === null || number === void 0 ? void 0 : number.length) > 0 ? joinValue([countryCodeRef.current, number]) : undefined);
+    }
+  }, [inputRef, itemPath, path, setDisplayValue, value]);
   const filter = useCallback(country => {
     return countryFilter(country, filterCountries, ccFilter);
   }, [ccFilter, filterCountries]);
@@ -284,7 +289,7 @@ function PhoneNumber(props) {
     required: required,
     errorMessages: errorMessages,
     validateInitially: validateInitially,
-    continuousValidation: continuousValidation,
+    validateContinuously: continuousValidation || validateContinuously,
     validateUnchanged: validateUnchanged,
     inputMode: "tel"
   })));