@dnb/eufemia 10.53.0 → 10.54.0

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useCallback","useContext","useMemo","Checkbox","HelpButton","ToggleButton","classnames","FieldBlock","useFieldProps","pickSpacingProps","getStatus","mapOptions","ToggleButtonGroupContext","DataContext","useDataValue","ArraySelection","props","id","path","dataPath","data","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","children","getValueByPath","dataList","fieldBlockProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","options","useCheckboxOrToggleOptions","Provider","status","setFieldProps","optionsCount","Children","count","length","collectedData","createOption","i","selected","rest","_objectWithoutProperties","_excluded","includes","push","suffix","handleSelect","newValue","filter","Component","_extends","key","text","checked","on_change","result","map","Boolean","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport {\n  DefaultErrorMessages,\n  FieldHelpProps,\n  FieldProps,\n  FormError,\n  Path,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus, mapOptions, Data } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button' | 'checkbox-button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    /**\n     * The path to the context data (Form.Handler).\n     * The context data object needs to have a `value` and a `title` property.\n     */\n    dataPath?: Path\n\n    /**\n     * Data to be used for the component. The object needs to have a `value` and a `title` property.\n     * The generated options will be placed above given JSX based children.\n     */\n    data?: Data\n\n    errorMessages?: DefaultErrorMessages & {\n      minItems?: string\n      maxItems?: string\n    }\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    path,\n    dataPath,\n    data,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  const dataList = dataPath ? getValueByPath(dataPath) : data\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${\n        variant === 'checkbox' ? 'checkbox' : 'button'\n      }`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    ...pickSpacingProps(props),\n  }\n\n  const options = useCheckboxOrToggleOptions({\n    id,\n    path,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    dataList,\n    children,\n    value,\n    disabled,\n    handleChange,\n    hasError,\n  })\n\n  switch (variant) {\n    case 'checkbox':\n      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>\n    default:\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n              variant:\n                variant === 'checkbox-button' ? 'checkbox' : 'default',\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n  }\n}\n\nexport function useCheckboxOrToggleOptions({\n  id,\n  path,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  dataList,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n}: {\n  id: Props['id']\n  path?: Props['path']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  dataList?: Props['data']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n}) {\n  const { setFieldProps } = useContext(DataContext)\n  const optionsCount = useMemo(\n    () => React.Children.count(children) + (dataList?.length || 0),\n    [dataList, children]\n  )\n  const collectedData = []\n\n  const createOption = useCallback(\n    (props: OptionProps, i: number) => {\n      const {\n        value: selected,\n        error,\n        title,\n        help,\n        className,\n        children,\n        ...rest\n      } = props\n\n      if (value?.includes(selected)) {\n        collectedData.push(props)\n      }\n\n      const label = title ?? children\n      const status = getStatus(error, info, warning)\n      const suffix = help ? (\n        <HelpButton size=\"small\" title={help.title}>\n          {help.content}\n        </HelpButton>\n      ) : undefined\n      const handleSelect = () => {\n        const newValue = value?.includes(selected)\n          ? value.filter((value) => value !== selected)\n          : [...(value ?? []), selected]\n\n        handleChange?.(\n          newValue.length === 0 ? (emptyValue as typeof value) : newValue\n        )\n      }\n\n      const Component = (\n        variant === 'checkbox' ? Checkbox : ToggleButton\n      ) as typeof Checkbox & typeof ToggleButton\n\n      return (\n        <Component\n          id={optionsCount === 1 ? id : undefined}\n          key={`option-${i}-${value}`}\n          className={classnames(\n            `dnb-forms-field-array-selection__${\n              variant === 'checkbox' ? 'checkbox' : 'button'\n            }`,\n            className\n          )}\n          label={variant === 'checkbox' ? label : undefined}\n          text={variant !== 'checkbox' ? label : undefined}\n          value={value}\n          disabled={disabled}\n          checked={value?.includes(selected)}\n          status={(hasError || status) && 'error'}\n          suffix={suffix}\n          on_change={handleSelect}\n          {...htmlAttributes}\n          {...rest}\n        />\n      )\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      disabled,\n      emptyValue,\n      handleChange,\n      hasError,\n      htmlAttributes,\n      id,\n      info,\n      optionsCount,\n      value,\n      variant,\n      warning,\n    ]\n  )\n\n  const result = [\n    ...(dataList || []).map((props, i) =>\n      createOption(props as OptionProps, i)\n    ),\n    ...(mapOptions(children, { createOption }) || []).filter(Boolean),\n  ]\n\n  if (path) {\n    setFieldProps?.(path + '/arraySelectionData', collectedData)\n  }\n\n  return result\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC/D,SAASC,QAAQ,EAAEC,UAAU,EAAEC,YAAY,QAAQ,wBAAwB;AAC3E,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAS3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,SAASC,SAAS,EAAEC,UAAU,QAAc,cAAc;AAE1D,OAAOC,wBAAwB,MAAM,+DAA+D;AACpG,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,YAAY,MAAM,0BAA0B;AAqCnD,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAM;IACJC,EAAE;IACFC,IAAI;IACJC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,MAAM,GAAG,UAAU;IACnBC,aAAa,GAAG,UAAU;IAC1BC,KAAK;IACLC,gBAAgB;IAChBC,KAAK;IACLC,KAAK;IACLC,QAAQ;IACRC,IAAI;IACJC,IAAI;IACJC,OAAO;IACPC,QAAQ;IACRC,UAAU;IACVC,cAAc;IACdC,YAAY;IACZC;EACF,CAAC,GAAG7B,aAAa,CAACQ,KAAK,CAAC;EAExB,MAAM;IAAEsB;EAAe,CAAC,GAAGxB,YAAY,CAAC,CAAC;EACzC,MAAMyB,QAAQ,GAAGpB,QAAQ,GAAGmB,cAAc,CAACnB,QAAQ,CAAC,GAAGC,IAAI;EAE3D,MAAMoB,eAAe,GAAAC,aAAA;IACnBC,KAAK,EAAEzB,EAAE;IACTI,SAAS,EAAEf,UAAU,6EAGjBgB,OAAO,KAAK,UAAU,GAAG,UAAU,GAAG,QAAQ,4CAELC,MAAM,oDACEC,aAAc,IACjEH,SACF,CAAC;IACDsB,gBAAgB,EAAE,0CAA0C;IAC5Db,IAAI;IACJC,IAAI;IACJC,OAAO;IACPJ,KAAK;IACLL,MAAM;IACNE,KAAK;IACLC,gBAAgB,EACd3B,KAAA,CAAA6C,aAAA,CAAA7C,KAAA,CAAA8C,QAAA,QACGnB,gBAAgB,EAChBI,IAAI,GACH/B,KAAA,CAAA6C,aAAA,CAACxC,UAAU;MACT0C,IAAI,EAAC,OAAO;MACZC,IAAI,EAAErB,gBAAgB,GAAG,SAAS,GAAG,KAAM;MAC3CsB,KAAK,EAAElB,IAAI,CAACkB;IAAM,GAEjBlB,IAAI,CAACmB,OACI,CAAC,GACXC,SACJ;EACH,GACEzC,gBAAgB,CAACO,KAAK,CAAC,CAC3B;EAED,MAAMmC,OAAO,GAAGC,0BAA0B,CAAC;IACzCnC,EAAE;IACFC,IAAI;IACJI,OAAO;IACPS,IAAI;IACJC,OAAO;IACPE,UAAU;IACVC,cAAc;IACdI,QAAQ;IACRF,QAAQ;IACRV,KAAK;IACLM,QAAQ;IACRG,YAAY;IACZP;EACF,CAAC,CAAC;EAEF,QAAQP,OAAO;IACb,KAAK,UAAU;MACb,OAAOvB,KAAA,CAAA6C,aAAA,CAACrC,UAAU,EAAKiC,eAAe,EAAGW,OAAoB,CAAC;IAChE;MACE,OACEpD,KAAA,CAAA6C,aAAA,CAACrC,UAAU,EAAKiC,eAAe,EAC7BzC,KAAA,CAAA6C,aAAA,CAAChC,wBAAwB,CAACyC,QAAQ;QAChC1B,KAAK,EAAE;UACL2B,MAAM,EAAEzB,QAAQ,GAAG,OAAO,GAAGqB,SAAS;UACtCjB,QAAQ;UACRX,OAAO,EACLA,OAAO,KAAK,iBAAiB,GAAG,UAAU,GAAG;QACjD;MAAE,GAED6B,OACgC,CACzB,CAAC;EAEnB;AACF;AAEA,OAAO,SAASC,0BAA0BA,CAAC;EACzCnC,EAAE;EACFC,IAAI;EACJI,OAAO,GAAG,UAAU;EACpBS,IAAI;EACJC,OAAO;EACPE,UAAU;EACVC,cAAc;EACdI,QAAQ;EACRF,QAAQ;EACRV,KAAK;EACLM,QAAQ;EACRJ,QAAQ;EACRO;AAeF,CAAC,EAAE;EACD,MAAM;IAAEmB;EAAc,CAAC,GAAGtD,UAAU,CAACY,WAAW,CAAC;EACjD,MAAM2C,YAAY,GAAGtD,OAAO,CAC1B,MAAMH,KAAK,CAAC0D,QAAQ,CAACC,KAAK,CAACrB,QAAQ,CAAC,IAAI,CAAAE,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEoB,MAAM,KAAI,CAAC,CAAC,EAC9D,CAACpB,QAAQ,EAAEF,QAAQ,CACrB,CAAC;EACD,MAAMuB,aAAa,GAAG,EAAE;EAExB,MAAMC,YAAY,GAAG7D,WAAW,CAC9B,CAACgB,KAAkB,EAAE8C,CAAS,KAAK;IACjC,MAAM;QACJnC,KAAK,EAAEoC,QAAQ;QACfnC,KAAK;QACLoB,KAAK;QACLlB,IAAI;QACJT,SAAS;QACTgB;MAEF,CAAC,GAAGrB,KAAK;MADJgD,IAAI,GAAAC,wBAAA,CACLjD,KAAK,EAAAkD,SAAA;IAET,IAAIvC,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEwC,QAAQ,CAACJ,QAAQ,CAAC,EAAE;MAC7BH,aAAa,CAACQ,IAAI,CAACpD,KAAK,CAAC;IAC3B;IAEA,MAAMS,KAAK,GAAGuB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIX,QAAQ;IAC/B,MAAMiB,MAAM,GAAG5C,SAAS,CAACkB,KAAK,EAAEG,IAAI,EAAEC,OAAO,CAAC;IAC9C,MAAMqC,MAAM,GAAGvC,IAAI,GACjB/B,KAAA,CAAA6C,aAAA,CAACxC,UAAU;MAAC0C,IAAI,EAAC,OAAO;MAACE,KAAK,EAAElB,IAAI,CAACkB;IAAM,GACxClB,IAAI,CAACmB,OACI,CAAC,GACXC,SAAS;IACb,MAAMoB,YAAY,GAAGA,CAAA,KAAM;MACzB,MAAMC,QAAQ,GAAG5C,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEwC,QAAQ,CAACJ,QAAQ,CAAC,GACtCpC,KAAK,CAAC6C,MAAM,CAAE7C,KAAK,IAAKA,KAAK,KAAKoC,QAAQ,CAAC,GAC3C,CAAC,IAAIpC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC,EAAEoC,QAAQ,CAAC;MAEhC3B,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CACVmC,QAAQ,CAACZ,MAAM,KAAK,CAAC,GAAIzB,UAAU,GAAoBqC,QACzD,CAAC;IACH,CAAC;IAED,MAAME,SAAS,GACbnD,OAAO,KAAK,UAAU,GAAGnB,QAAQ,GAAGE,YACI;IAE1C,OACEN,KAAA,CAAA6C,aAAA,CAAC6B,SAAS,EAAAC,QAAA;MACRzD,EAAE,EAAEuC,YAAY,KAAK,CAAC,GAAGvC,EAAE,GAAGiC,SAAU;MACxCyB,GAAG,EAAG,UAASb,CAAE,IAAGnC,KAAM,EAAE;MAC5BN,SAAS,EAAEf,UAAU,CAClB,oCACCgB,OAAO,KAAK,UAAU,GAAG,UAAU,GAAG,QACvC,EAAC,EACFD,SACF,CAAE;MACFI,KAAK,EAAEH,OAAO,KAAK,UAAU,GAAGG,KAAK,GAAGyB,SAAU;MAClD0B,IAAI,EAAEtD,OAAO,KAAK,UAAU,GAAGG,KAAK,GAAGyB,SAAU;MACjDvB,KAAK,EAAEA,KAAM;MACbM,QAAQ,EAAEA,QAAS;MACnB4C,OAAO,EAAElD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEwC,QAAQ,CAACJ,QAAQ,CAAE;MACnCT,MAAM,EAAE,CAACzB,QAAQ,IAAIyB,MAAM,KAAK,OAAQ;MACxCe,MAAM,EAAEA,MAAO;MACfS,SAAS,EAAER;IAAa,GACpBnC,cAAc,EACd6B,IAAI,CACT,CAAC;EAEN,CAAC,EAED,CACE/B,QAAQ,EACRC,UAAU,EACVE,YAAY,EACZP,QAAQ,EACRM,cAAc,EACdlB,EAAE,EACFc,IAAI,EACJyB,YAAY,EACZ7B,KAAK,EACLL,OAAO,EACPU,OAAO,CAEX,CAAC;EAED,MAAM+C,MAAM,GAAG,CACb,GAAG,CAACxC,QAAQ,IAAI,EAAE,EAAEyC,GAAG,CAAC,CAAChE,KAAK,EAAE8C,CAAC,KAC/BD,YAAY,CAAC7C,KAAK,EAAiB8C,CAAC,CACtC,CAAC,EACD,GAAG,CAACnD,UAAU,CAAC0B,QAAQ,EAAE;IAAEwB;EAAa,CAAC,CAAC,IAAI,EAAE,EAAEW,MAAM,CAACS,OAAO,CAAC,CAClE;EAED,IAAI/D,IAAI,EAAE;IACRqC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAGrC,IAAI,GAAG,qBAAqB,EAAE0C,aAAa,CAAC;EAC9D;EAEA,OAAOmB,MAAM;AACf;AAEAhE,cAAc,CAACmE,qBAAqB,GAAG,IAAI;AAC3C,eAAenE,cAAc"}
+{"version":3,"file":"ArraySelection.js","names":["React","useCallback","useContext","useMemo","Checkbox","HelpButton","ToggleButton","classnames","FieldBlock","useFieldProps","pickSpacingProps","getStatus","mapOptions","ToggleButtonGroupContext","DataContext","useDataValue","ArraySelection","props","id","path","dataPath","data","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","setDisplayValue","children","getValueByPath","dataList","fieldBlockProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","options","useCheckboxOrToggleOptions","handleActiveData","labels","Provider","status","setFieldProps","optionsCount","Children","count","length","activeData","createOption","i","active","rest","_objectWithoutProperties","_excluded","includes","push","suffix","handleSelect","newValue","filter","Component","_extends","key","text","checked","on_change","result","map","Boolean","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport {\n  DefaultErrorMessages,\n  FieldHelpProps,\n  FieldProps,\n  Path,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus, mapOptions, Data } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\ntype OptionValue = string | number\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<OptionValue> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button' | 'checkbox-button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    /**\n     * The path to the context data (Form.Handler).\n     * The context data object needs to have a `value` and a `title` property.\n     */\n    dataPath?: Path\n\n    /**\n     * Data to be used for the component. The object needs to have a `value` and a `title` property.\n     * The generated options will be placed above given JSX based children.\n     */\n    data?: Data\n\n    errorMessages?: DefaultErrorMessages & {\n      minItems?: string\n      maxItems?: string\n    }\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    path,\n    dataPath,\n    data,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n    children,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  const dataList = dataPath ? getValueByPath(dataPath) : data\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${\n        variant === 'checkbox' ? 'checkbox' : 'button'\n      }`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    ...pickSpacingProps(props),\n  }\n\n  const options = useCheckboxOrToggleOptions({\n    id,\n    path,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    dataList,\n    children,\n    value,\n    disabled,\n    hasError,\n    handleChange,\n    handleActiveData: ({ labels }) => {\n      setDisplayValue(path, labels)\n    },\n  })\n\n  switch (variant) {\n    case 'checkbox':\n      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>\n    default:\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n              variant:\n                variant === 'checkbox-button' ? 'checkbox' : 'default',\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n  }\n}\n\nexport function useCheckboxOrToggleOptions({\n  id,\n  path,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  dataList,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n  handleActiveData,\n}: {\n  id: Props['id']\n  path?: Props['path']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  dataList?: Props['data']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n  handleActiveData?: (item: { labels: Array<Props['children']> }) => void\n}) {\n  const { setFieldProps } = useContext(DataContext)\n  const optionsCount = useMemo(\n    () => React.Children.count(children) + (dataList?.length || 0),\n    [dataList, children]\n  )\n  const activeData = []\n\n  const createOption = useCallback(\n    (props: OptionProps, i: number) => {\n      const {\n        value: active,\n        error,\n        title,\n        help,\n        className,\n        children,\n        ...rest\n      } = props\n\n      if (value?.includes(active)) {\n        activeData.push(props)\n      }\n\n      const label = title ?? children\n      const status = getStatus(error, info, warning)\n      const suffix = help ? (\n        <HelpButton size=\"small\" title={help.title}>\n          {help.content}\n        </HelpButton>\n      ) : undefined\n\n      const handleSelect = () => {\n        const newValue = value?.includes(active)\n          ? value.filter((value) => value !== active)\n          : [...(value ?? []), active]\n\n        handleChange?.(\n          newValue.length === 0 ? (emptyValue as typeof value) : newValue\n        )\n      }\n\n      const Component = (\n        variant === 'checkbox' ? Checkbox : ToggleButton\n      ) as typeof Checkbox & typeof ToggleButton\n\n      return (\n        <Component\n          id={optionsCount === 1 ? id : undefined}\n          key={`option-${i}-${value}`}\n          className={classnames(\n            `dnb-forms-field-array-selection__${\n              variant === 'checkbox' ? 'checkbox' : 'button'\n            }`,\n            className\n          )}\n          label={variant === 'checkbox' ? label : undefined}\n          text={variant !== 'checkbox' ? label : undefined}\n          value={value}\n          disabled={disabled}\n          checked={value?.includes(active)}\n          status={(hasError || status) && 'error'}\n          suffix={suffix}\n          on_change={handleSelect}\n          {...htmlAttributes}\n          {...rest}\n        />\n      )\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      disabled,\n      emptyValue,\n      handleChange,\n      hasError,\n      htmlAttributes,\n      id,\n      info,\n      optionsCount,\n      value,\n      variant,\n      warning,\n    ]\n  )\n\n  const result = [\n    ...(dataList || []).map((props, i) =>\n      createOption(props as OptionProps, i)\n    ),\n    ...(mapOptions(children, { createOption }) || []).filter(Boolean),\n  ]\n\n  if (handleActiveData) {\n    handleActiveData({\n      labels: activeData.map(({ title, children }) => title ?? children),\n    })\n  }\n\n  if (path) {\n    setFieldProps?.(path + '/arraySelectionData', activeData)\n  }\n\n  return result\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

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

@@ -3,7 +3,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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, useMemo } from 'react';
 import StringField from '../String';
-import useErrorMessage from '../../hooks/useErrorMessage';
 import useTranslation from '../../hooks/useTranslation';
 function BankAccountNumber(props) {
   const {
@@ -12,12 +11,12 @@ function BankAccountNumber(props) {
     errorRequired,
     label
   } = useTranslation().BankAccountNumber;
-  const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: errorRequired,
-    pattern: errorBankAccountNumber,
-    errorBankAccountNumber,
-    errorBankAccountNumberLength
-  });
+  const errorMessages = useMemo(() => {
+    return _objectSpread({
+      'Field.errorRequired': errorRequired,
+      'Field.errorPattern': errorBankAccountNumber
+    }, props.errorMessages);
+  }, [errorBankAccountNumber, errorRequired, props.errorMessages]);
   const bankAccountNumberValidator = useCallback(value => {
     if (value !== undefined) {
       const bankAccountNoIs11Digits = (value === null || value === void 0 ? void 0 : value.length) === 11;

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

@@ -1 +1 @@
-{"version":3,"file":"BankAccountNumber.js","names":["React","useCallback","useMemo","StringField","useErrorMessage","useTranslation","BankAccountNumber","props","errorBankAccountNumber","errorBankAccountNumberLength","errorRequired","label","errorMessages","path","required","pattern","bankAccountNumberValidator","value","undefined","bankAccountNoIs11Digits","length","Error","isValidAccountNumber","validate","omitMask","validator","onBlurValidator","labelProp","width","mask","onBlurValidatorToUse","StringFieldProps","_objectSpread","className","inputMode","exportValidators","createElement","digits","checkDigit","sum","i","parseInt","charAt","result","finalCheckDigit","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\nimport { Validator } from '../../types'\n\nexport type Props = Omit<StringFieldProps, 'onBlurValidator'> & {\n  validate?: boolean\n  omitMask?: boolean\n  onBlurValidator?: Validator<string> | false\n}\n\nfunction BankAccountNumber(props: Props) {\n  const {\n    errorBankAccountNumber,\n    errorBankAccountNumberLength,\n    errorRequired,\n    label,\n  } = useTranslation().BankAccountNumber\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: errorRequired,\n    pattern: errorBankAccountNumber,\n    errorBankAccountNumber,\n    errorBankAccountNumberLength,\n  })\n\n  const bankAccountNumberValidator = useCallback(\n    (value: string) => {\n      if (value !== undefined) {\n        const bankAccountNoIs11Digits = value?.length === 11\n\n        if (!bankAccountNoIs11Digits) {\n          return Error(errorBankAccountNumberLength)\n        }\n\n        if (bankAccountNoIs11Digits && !isValidAccountNumber(value)) {\n          return Error(errorBankAccountNumber)\n        }\n      }\n    },\n    [errorBankAccountNumber, errorBankAccountNumberLength]\n  )\n\n  const {\n    validate = true,\n    omitMask,\n    validator,\n    onBlurValidator = bankAccountNumberValidator,\n    label: labelProp,\n    width,\n  } = props\n\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ]\n        : [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ],\n    [omitMask]\n  )\n\n  const onBlurValidatorToUse =\n    onBlurValidator === false ? undefined : onBlurValidator\n\n  const StringFieldProps: StringFieldProps = {\n    ...props,\n    className: 'dnb-forms-field-bank-account-number',\n    label: labelProp ?? label,\n    errorMessages,\n    mask,\n    width: width ?? 'medium',\n    inputMode: 'numeric',\n    validator: validate ? validator : undefined,\n    onBlurValidator: validate ? onBlurValidatorToUse : undefined,\n    exportValidators: { bankAccountNumberValidator },\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nfunction isValidAccountNumber(digits: string) {\n  let checkDigit = 2\n  let sum = 0\n\n  for (let i = digits.length - 2; i >= 0; --i) {\n    sum += parseInt(digits.charAt(i)) * checkDigit\n\n    checkDigit += 1\n\n    if (checkDigit > 7) {\n      checkDigit = 2\n    }\n  }\n\n  const result = 11 - (sum % 11)\n  const finalCheckDigit = result === 11 ? 0 : result\n\n  return parseInt(digits.charAt(digits.length - 1), 10) === finalCheckDigit\n}\n\nBankAccountNumber._supportsSpacingProps = true\nexport default BankAccountNumber\n"],"mappings":"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"}
+{"version":3,"file":"BankAccountNumber.js","names":["React","useCallback","useMemo","StringField","useTranslation","BankAccountNumber","props","errorBankAccountNumber","errorBankAccountNumberLength","errorRequired","label","errorMessages","_objectSpread","bankAccountNumberValidator","value","undefined","bankAccountNoIs11Digits","length","Error","isValidAccountNumber","validate","omitMask","validator","onBlurValidator","labelProp","width","mask","onBlurValidatorToUse","StringFieldProps","className","inputMode","exportValidators","createElement","digits","checkDigit","sum","i","parseInt","charAt","result","finalCheckDigit","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport useTranslation from '../../hooks/useTranslation'\nimport { Validator } from '../../types'\n\nexport type Props = Omit<StringFieldProps, 'onBlurValidator'> & {\n  validate?: boolean\n  omitMask?: boolean\n  onBlurValidator?: Validator<string> | false\n}\n\nfunction BankAccountNumber(props: Props) {\n  const {\n    errorBankAccountNumber,\n    errorBankAccountNumberLength,\n    errorRequired,\n    label,\n  } = useTranslation().BankAccountNumber\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorBankAccountNumber,\n      ...props.errorMessages,\n    }\n  }, [errorBankAccountNumber, errorRequired, props.errorMessages])\n\n  const bankAccountNumberValidator = useCallback(\n    (value: string) => {\n      if (value !== undefined) {\n        const bankAccountNoIs11Digits = value?.length === 11\n\n        if (!bankAccountNoIs11Digits) {\n          return Error(errorBankAccountNumberLength)\n        }\n\n        if (bankAccountNoIs11Digits && !isValidAccountNumber(value)) {\n          return Error(errorBankAccountNumber)\n        }\n      }\n    },\n    [errorBankAccountNumber, errorBankAccountNumberLength]\n  )\n\n  const {\n    validate = true,\n    omitMask,\n    validator,\n    onBlurValidator = bankAccountNumberValidator,\n    label: labelProp,\n    width,\n  } = props\n\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ]\n        : [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ],\n    [omitMask]\n  )\n\n  const onBlurValidatorToUse =\n    onBlurValidator === false ? undefined : onBlurValidator\n\n  const StringFieldProps: StringFieldProps = {\n    ...props,\n    className: 'dnb-forms-field-bank-account-number',\n    label: labelProp ?? label,\n    errorMessages,\n    mask,\n    width: width ?? 'medium',\n    inputMode: 'numeric',\n    validator: validate ? validator : undefined,\n    onBlurValidator: validate ? onBlurValidatorToUse : undefined,\n    exportValidators: { bankAccountNumberValidator },\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nfunction isValidAccountNumber(digits: string) {\n  let checkDigit = 2\n  let sum = 0\n\n  for (let i = digits.length - 2; i >= 0; --i) {\n    sum += parseInt(digits.charAt(i)) * checkDigit\n\n    checkDigit += 1\n\n    if (checkDigit > 7) {\n      checkDigit = 2\n    }\n  }\n\n  const result = 11 - (sum % 11)\n  const finalCheckDigit = result === 11 ? 0 : result\n\n  return parseInt(digits.charAt(digits.length - 1), 10) === finalCheckDigit\n}\n\nBankAccountNumber._supportsSpacingProps = true\nexport default BankAccountNumber\n"],"mappings":"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"}

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

@@ -1,22 +1,30 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { DatePicker, HelpButton } from '../../../../components';
 import { useFieldProps } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import classnames from 'classnames';
 import FieldBlock from '../../FieldBlock';
+import SharedContext from '../../../../shared/Context';
 import { parseISO, isValid } from 'date-fns';
-import useErrorMessage from '../../hooks/useErrorMessage';
 import useTranslation from '../../hooks/useTranslation';
+import { formatDate } from '../../Value/Date';
 function DateComponent(props) {
   const translations = useTranslation();
-  const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: translations.Date.errorRequired,
-    pattern: translations.Field.errorRequired
-  });
+  const {
+    locale
+  } = useContext(SharedContext);
+  const errorMessages = useMemo(() => {
+    return _objectSpread({
+      'Field.errorRequired': translations.Date.errorRequired,
+      'Field.errorPattern': translations.Date.errorRequired
+    }, props.errorMessages);
+  }, [props.errorMessages, translations.Date.errorRequired]);
   const schema = useMemo(() => {
     var _props$schema;
     return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
@@ -47,6 +55,7 @@ function DateComponent(props) {
   });
   const {
     id,
+    path,
     className,
     label,
     labelDescription,
@@ -61,6 +70,7 @@ function DateComponent(props) {
     handleFocus,
     handleBlur,
     handleChange,
+    setDisplayValue,
     range
   } = useFieldProps(preparedProps);
   const rangeValue = useMemo(() => {
@@ -73,6 +83,13 @@ function DateComponent(props) {
       endDate
     };
   }, [range, value]);
+  useMemo(() => {
+    if (path && value) {
+      setDisplayValue(path, formatDate(value, {
+        locale
+      }));
+    }
+  }, [locale, path, setDisplayValue, value]);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-string', className),
     forId: id,

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useCallback","useMemo","DatePicker","HelpButton","useFieldProps","pickSpacingProps","classnames","FieldBlock","parseISO","isValid","useErrorMessage","useTranslation","DateComponent","props","translations","errorMessages","path","required","Date","errorRequired","pattern","Field","schema","_props$schema","type","validateRequired","value","error","undefined","preparedProps","_objectSpread","fromInput","date","start_date","end_date","range","id","className","label","labelDescription","help","info","warning","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","rangeValue","startDate","endDate","split","createElement","_extends","forId","show_input","show_cancel_button","show_reset_button","status","suffix","title","content","on_change","on_reset","onFocus","onBlur","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport { DatePicker, HelpButton } from '../../../../components'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { parseISO, isValid } from 'date-fns'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\nimport { DatePickerEvent } from '../../../../components/DatePicker'\n\nexport type Props = FieldHelpProps &\n  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?: boolean\n  }\n\nfunction DateComponent(props: Props) {\n  const translations = useTranslation()\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.Date.errorRequired,\n    pattern: translations.Field.errorRequired,\n  })\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    className,\n    label,\n    labelDescription,\n    value,\n    help,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    range,\n  } = useFieldProps(preparedProps)\n\n  const rangeValue = useMemo(() => {\n    if (!range) {\n      return\n    }\n\n    const [startDate, endDate] = value.split('|')\n\n    return { startDate, endDate }\n  }, [range, value])\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      label={label ?? translations.Date.label}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      disabled={disabled}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <DatePicker\n        id={id}\n        date={!range ? value : undefined}\n        disabled={disabled}\n        show_input={true}\n        show_cancel_button={true}\n        show_reset_button={true}\n        start_date={range ? rangeValue.startDate : undefined}\n        end_date={range ? rangeValue.endDate : undefined}\n        status={hasError ? 'error' : undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.content}</HelpButton>\n          ) : undefined\n        }\n        range={range}\n        on_change={handleChange}\n        on_reset={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\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","HelpButton","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","id","path","className","label","labelDescription","help","info","warning","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","rangeValue","startDate","endDate","split","createElement","_extends","forId","show_input","show_cancel_button","show_reset_button","status","suffix","title","content","on_change","on_reset","onFocus","onBlur","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { DatePicker, HelpButton } from '../../../../components'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport SharedContext from '../../../../shared/Context'\nimport { parseISO, isValid } from 'date-fns'\nimport useTranslation from '../../hooks/useTranslation'\nimport { DatePickerEvent } from '../../../../components/DatePicker'\nimport { formatDate } from '../../Value/Date'\n\nexport type Props = FieldHelpProps &\n  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?: boolean\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    labelDescription,\n    value,\n    help,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    range,\n  } = useFieldProps(preparedProps)\n\n  const rangeValue = useMemo(() => {\n    if (!range) {\n      return\n    }\n\n    const [startDate, endDate] = value.split('|')\n\n    return { startDate, endDate }\n  }, [range, value])\n\n  useMemo(() => {\n    if (path && value) {\n      setDisplayValue(path, formatDate(value, { locale }))\n    }\n  }, [locale, path, setDisplayValue, value])\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      label={label ?? translations.Date.label}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      disabled={disabled}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <DatePicker\n        id={id}\n        date={!range ? value : undefined}\n        disabled={disabled}\n        show_input={true}\n        show_cancel_button={true}\n        show_reset_button={true}\n        start_date={range ? rangeValue.startDate : undefined}\n        end_date={range ? rangeValue.endDate : undefined}\n        status={hasError ? 'error' : undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.content}</HelpButton>\n          ) : undefined\n        }\n        range={range}\n        on_change={handleChange}\n        on_reset={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":"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"}

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

@@ -1,18 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 from 'react';
+import React, { useMemo } from 'react';
 import StringField from '../String';
-import useErrorMessage from '../../hooks/useErrorMessage';
 import useTranslation from '../../hooks/useTranslation';
 function Email(props) {
-  const translations = useTranslation().Email;
-  const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: translations.errorRequired,
-    pattern: translations.errorPattern
-  });
+  const {
+    label,
+    errorRequired,
+    errorPattern
+  } = useTranslation().Email;
+  const errorMessages = useMemo(() => _objectSpread({
+    'Field.errorRequired': errorRequired,
+    'Field.errorPattern': errorPattern
+  }, props.errorMessages), [errorPattern, errorRequired, props.errorMessages]);
   const StringFieldProps = _objectSpread(_objectSpread({
-    label: translations.label,
+    label,
     autoComplete: 'email',
     inputMode: 'email',
     pattern: `^(?!.*\\.\\.)(?!.*--)(?!.*\\.-)(?!.*-\\.)` + `[a-zA-Z0-9]+([._%+-]?[a-zA-Z0-9]+)*@` + `(?:` + `([a-zA-Z0-9]+([.-]?[a-zA-Z0-9]+)*\\.[a-zA-Z]{2,})` + `|` + `\\[(?:` + `(?:\\d{1,3}\\.){3}\\d{1,3}` + `|` + `IPv6:[0-9a-fA-F:]+` + `)\\]` + `)$`,

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

@@ -1 +1 @@
-{"version":3,"file":"Email.js","names":["React","StringField","useErrorMessage","useTranslation","Email","props","translations","errorMessages","path","required","errorRequired","pattern","errorPattern","StringFieldProps","_objectSpread","label","autoComplete","inputMode","trim","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Email/Email.tsx"],"sourcesContent":["import React from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringFieldProps\n\nfunction Email(props: Props) {\n  const translations = useTranslation().Email\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.errorRequired,\n    pattern: translations.errorPattern,\n  })\n\n  const StringFieldProps: Props = {\n    label: translations.label,\n    autoComplete: 'email',\n    inputMode: 'email',\n    pattern:\n      `^(?!.*\\\\.\\\\.)(?!.*--)(?!.*\\\\.-)(?!.*-\\\\.)` + // No consecutive dots, hyphens, or dot-hyphen sequences\n      `[a-zA-Z0-9]+([._%+-]?[a-zA-Z0-9]+)*@` + // Local part: letters, numbers, dots, etc.\n      `(?:` +\n      `([a-zA-Z0-9]+([.-]?[a-zA-Z0-9]+)*\\\\.[a-zA-Z]{2,})` + // Domain part: standard domain names\n      `|` +\n      `\\\\[(?:` +\n      `(?:\\\\d{1,3}\\\\.){3}\\\\d{1,3}` + // Allow IPv4 address (no validation)\n      `|` +\n      `IPv6:[0-9a-fA-F:]+` + // Allow IPv6 address (no validation)\n      `)\\\\]` +\n      `)$`,\n    trim: true,\n    ...props,\n    errorMessages,\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nEmail._supportsSpacingProps = true\nexport default Email\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAC3B,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACC,KAAK;EAE3C,MAAMG,aAAa,GAAGL,eAAe,CAACG,KAAK,CAACG,IAAI,EAAEH,KAAK,CAACE,aAAa,EAAE;IACrEE,QAAQ,EAAEH,YAAY,CAACI,aAAa;IACpCC,OAAO,EAAEL,YAAY,CAACM;EACxB,CAAC,CAAC;EAEF,MAAMC,gBAAuB,GAAAC,aAAA,CAAAA,aAAA;IAC3BC,KAAK,EAAET,YAAY,CAACS,KAAK;IACzBC,YAAY,EAAE,OAAO;IACrBC,SAAS,EAAE,OAAO;IAClBN,OAAO,EACJ,2CAA0C,GAC1C,sCAAqC,GACrC,KAAI,GACJ,mDAAkD,GAClD,GAAE,GACF,QAAO,GACP,4BAA2B,GAC3B,GAAE,GACF,oBAAmB,GACnB,MAAK,GACL,IAAG;IACNO,IAAI,EAAE;EAAI,GACPb,KAAK;IACRE;EAAa,EACd;EAED,OAAOP,KAAA,CAAAmB,aAAA,CAAClB,WAAW,EAAKY,gBAAmB,CAAC;AAC9C;AAEAT,KAAK,CAACgB,qBAAqB,GAAG,IAAI;AAClC,eAAehB,KAAK"}
+{"version":3,"file":"Email.js","names":["React","useMemo","StringField","useTranslation","Email","props","label","errorRequired","errorPattern","errorMessages","_objectSpread","StringFieldProps","autoComplete","inputMode","pattern","trim","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Email/Email.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringFieldProps\n\nfunction Email(props: Props) {\n  const { label, errorRequired, errorPattern } = useTranslation().Email\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorPattern,\n      ...props.errorMessages,\n    }),\n    [errorPattern, errorRequired, props.errorMessages]\n  )\n\n  const StringFieldProps: Props = {\n    label,\n    autoComplete: 'email',\n    inputMode: 'email',\n    pattern:\n      `^(?!.*\\\\.\\\\.)(?!.*--)(?!.*\\\\.-)(?!.*-\\\\.)` + // No consecutive dots, hyphens, or dot-hyphen sequences\n      `[a-zA-Z0-9]+([._%+-]?[a-zA-Z0-9]+)*@` + // Local part: letters, numbers, dots, etc.\n      `(?:` +\n      `([a-zA-Z0-9]+([.-]?[a-zA-Z0-9]+)*\\\\.[a-zA-Z]{2,})` + // Domain part: standard domain names\n      `|` +\n      `\\\\[(?:` +\n      `(?:\\\\d{1,3}\\\\.){3}\\\\d{1,3}` + // Allow IPv4 address (no validation)\n      `|` +\n      `IPv6:[0-9a-fA-F:]+` + // Allow IPv6 address (no validation)\n      `)\\\\]` +\n      `)$`,\n    trim: true,\n    ...props,\n    errorMessages,\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nEmail._supportsSpacingProps = true\nexport default Email\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAC3B,MAAM;IAAEC,KAAK;IAAEC,aAAa;IAAEC;EAAa,CAAC,GAAGL,cAAc,CAAC,CAAC,CAACC,KAAK;EAErE,MAAMK,aAAa,GAAGR,OAAO,CAC3B,MAAAS,aAAA;IACE,qBAAqB,EAAEH,aAAa;IACpC,oBAAoB,EAAEC;EAAY,GAC/BH,KAAK,CAACI,aAAa,CACtB,EACF,CAACD,YAAY,EAAED,aAAa,EAAEF,KAAK,CAACI,aAAa,CACnD,CAAC;EAED,MAAME,gBAAuB,GAAAD,aAAA,CAAAA,aAAA;IAC3BJ,KAAK;IACLM,YAAY,EAAE,OAAO;IACrBC,SAAS,EAAE,OAAO;IAClBC,OAAO,EACJ,2CAA0C,GAC1C,sCAAqC,GACrC,KAAI,GACJ,mDAAkD,GAClD,GAAE,GACF,QAAO,GACP,4BAA2B,GAC3B,GAAE,GACF,oBAAmB,GACnB,MAAK,GACL,IAAG;IACNC,IAAI,EAAE;EAAI,GACPV,KAAK;IACRI;EAAa,EACd;EAED,OAAOT,KAAA,CAAAgB,aAAA,CAACd,WAAW,EAAKS,gBAAmB,CAAC;AAC9C;AAEAP,KAAK,CAACa,qBAAqB,GAAG,IAAI;AAClC,eAAeb,KAAK"}

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

@@ -2,18 +2,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import { useFieldProps } from '../../hooks';
 import classnames from 'classnames';
 import FieldBlock from '../../FieldBlock';
 import { MultiInputMask } from '../../../../components/input-masked';
 import { HelpButton } from '../../../../components';
-import useErrorMessage from '../../hooks/useErrorMessage';
 import { useTranslation as useSharedTranslation } from '../../../../shared';
 import useTranslation from '../../hooks/useTranslation';
 function Expiry(props) {
-  var _value$substring;
   const {
     Date: {
       errorRequired
@@ -29,9 +27,9 @@ function Expiry(props) {
       year: yearLabel
     }
   } = useSharedTranslation();
-  const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: errorRequired
-  });
+  const errorMessages = useMemo(() => _objectSpread({
+    'Field.errorRequired': errorRequired
+  }, props.errorMessages), [errorRequired, props.errorMessages]);
   const validateRequired = useCallback((value, {
     required,
     error
@@ -45,6 +43,7 @@ function Expiry(props) {
   });
   const {
     id,
+    path,
     className,
     label = expiryLabel,
     error,
@@ -59,12 +58,21 @@ function Expiry(props) {
     htmlAttributes,
     handleFocus,
     handleBlur,
-    handleChange
+    handleChange,
+    setDisplayValue
   } = useFieldProps(preparedProps);
-  const expiry = {
-    month: ensureValidMonth(value === null || value === void 0 ? void 0 : value.substring(0, 2)),
-    year: (_value$substring = value === null || value === void 0 ? void 0 : value.substring(2, 4)) !== null && _value$substring !== void 0 ? _value$substring : ''
-  };
+  const expiry = useMemo(() => {
+    var _value$substring;
+    return {
+      month: ensureValidMonth(value === null || value === void 0 ? void 0 : value.substring(0, 2)),
+      year: (_value$substring = value === null || value === void 0 ? void 0 : value.substring(2, 4)) !== null && _value$substring !== void 0 ? _value$substring : ''
+    };
+  }, [value]);
+  useMemo(() => {
+    if (path && expiry.month && expiry.year) {
+      setDisplayValue(path, `${expiry.month}/${expiry.year}`);
+    }
+  }, [expiry.month, expiry.year, path, setDisplayValue]);
   const status = hasError ? 'error' : warning ? 'warn' : info ? 'info' : null;
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-expiry', className),
@@ -105,31 +113,31 @@ function Expiry(props) {
       title: help.title
     }, help.content) : undefined
   }));
-  function toExpiryString(values) {
-    return Object.values(values).join('');
+}
+Expiry._supportsEufemiaSpacingProps = true;
+export default Expiry;
+function toExpiryString(values) {
+  return Object.values(values).join('');
+}
+function ensureValidMonth(month) {
+  if (!month) {
+    return '';
   }
-  function ensureValidMonth(month) {
-    if (!month) {
-      return '';
-    }
-    const [firstMask, secondMask] = getMonthMask(month);
-    const firstDigit = month === null || month === void 0 ? void 0 : month.charAt(0);
-    const isFirstDigitValid = firstMask.test(firstDigit);
-    if (firstDigit && !isFirstDigitValid) {
-      return '';
-    }
-    const secondDigit = month === null || month === void 0 ? void 0 : month.charAt(1);
-    const isSecondDigitValid = secondMask.test(secondDigit);
-    if (secondDigit && !isSecondDigitValid) {
-      return '';
-    }
-    return month;
+  const [firstMask, secondMask] = getMonthMask(month);
+  const firstDigit = month === null || month === void 0 ? void 0 : month.charAt(0);
+  const isFirstDigitValid = firstMask.test(firstDigit);
+  if (firstDigit && !isFirstDigitValid) {
+    return '';
   }
-  function getMonthMask(month) {
-    const firstDigit = month === null || month === void 0 ? void 0 : month.charAt(0);
-    return [/[0-1]/, firstDigit === '0' || firstDigit === '' ? /[1-9]/ : /[0-2]/];
+  const secondDigit = month === null || month === void 0 ? void 0 : month.charAt(1);
+  const isSecondDigitValid = secondMask.test(secondDigit);
+  if (secondDigit && !isSecondDigitValid) {
+    return '';
   }
+  return month;
+}
+function getMonthMask(month) {
+  const firstDigit = month === null || month === void 0 ? void 0 : month.charAt(0);
+  return [/[0-1]/, firstDigit === '0' || firstDigit === '' ? /[1-9]/ : /[0-2]/];
 }
-Expiry._supportsEufemiaSpacingProps = true;
-export default Expiry;
 //# sourceMappingURL=Expiry.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Expiry.js","names":["React","useCallback","pickSpacingProps","useFieldProps","classnames","FieldBlock","MultiInputMask","HelpButton","useErrorMessage","useTranslation","useSharedTranslation","Expiry","props","_value$substring","Date","errorRequired","label","expiryLabel","DatePicker","placeholder_characters","placeholders","month","monthLabel","year","yearLabel","errorMessages","path","required","validateRequired","value","error","undefined","preparedProps","_objectSpread","fromInput","toExpiryString","id","className","hasError","info","warning","help","disabled","labelDescription","layout","htmlAttributes","handleFocus","handleBlur","handleChange","expiry","ensureValidMonth","substring","status","createElement","_extends","forId","stretch","values","statusState","onChange","onBlur","onFocus","delimiter","inputMode","inputs","mask","getMonthMask","placeholderCharacter","autoComplete","suffix","title","content","Object","join","firstMask","secondMask","firstDigit","charAt","isFirstDigitValid","test","secondDigit","isSecondDigitValid","_supportsEufemiaSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Expiry/Expiry.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useFieldProps } from '../../hooks'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { MultiInputMask } from '../../../../components/input-masked'\nimport type { MultiInputMaskValue } from '../../../../components/input-masked'\nimport { HelpButton } from '../../../../components'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport useTranslation from '../../hooks/useTranslation'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldHelpProps &\n  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      placeholder_characters: placeholders,\n      month: monthLabel,\n      year: yearLabel,\n    },\n  } = useSharedTranslation()\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: errorRequired,\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    className,\n    label = expiryLabel,\n    error,\n    hasError,\n    info,\n    warning,\n    help,\n    disabled,\n    value = '',\n    labelDescription,\n    layout = 'vertical',\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const expiry: ExpiryValue = {\n    month: ensureValidMonth(value?.substring(0, 2)),\n    year: value?.substring(2, 4) ?? '',\n  }\n\n  const status = hasError\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-expiry', className)}\n      id={id}\n      forId={`${id}-input-month`}\n      label={label}\n      layout={layout}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\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        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.content}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n\n  function toExpiryString(values: ExpiryValue) {\n    return Object.values(values).join('')\n  }\n\n  function 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\n  function 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}\n\nExpiry._supportsEufemiaSpacingProps = true\nexport default Expiry\n"],"mappings":"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"}
+{"version":3,"file":"Expiry.js","names":["React","useCallback","useMemo","pickSpacingProps","useFieldProps","classnames","FieldBlock","MultiInputMask","HelpButton","useTranslation","useSharedTranslation","Expiry","props","Date","errorRequired","label","expiryLabel","DatePicker","placeholder_characters","placeholders","month","monthLabel","year","yearLabel","errorMessages","_objectSpread","validateRequired","value","required","error","undefined","preparedProps","fromInput","toExpiryString","id","path","className","hasError","info","warning","help","disabled","labelDescription","layout","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","expiry","_value$substring","ensureValidMonth","substring","status","createElement","_extends","forId","stretch","values","statusState","onChange","onBlur","onFocus","delimiter","inputMode","inputs","mask","getMonthMask","placeholderCharacter","autoComplete","suffix","title","content","_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 { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useFieldProps } from '../../hooks'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { MultiInputMask } from '../../../../components/input-masked'\nimport type { MultiInputMaskValue } from '../../../../components/input-masked'\nimport { HelpButton } from '../../../../components'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport useTranslation from '../../hooks/useTranslation'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldHelpProps &\n  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      placeholder_characters: 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    error,\n    hasError,\n    info,\n    warning,\n    help,\n    disabled,\n    value = '',\n    labelDescription,\n    layout = 'vertical',\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  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-expiry', className)}\n      id={id}\n      forId={`${id}-input-month`}\n      label={label}\n      layout={layout}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\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        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.content}</HelpButton>\n          ) : undefined\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/Name/Name.js

@@ -1,9 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 from 'react';
+import React, { useMemo } from 'react';
 import StringField from '../String';
-import useErrorMessage from '../../hooks/useErrorMessage';
 import useTranslation from '../../hooks/useTranslation';
 function Name(props) {
   const StringFieldProps = _objectSpread({
@@ -16,10 +15,12 @@ function Name(props) {
 Name._supportsSpacingProps = true;
 Name.First = function FirstName(props) {
   const translations = useTranslation().FirstName;
-  const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: translations.errorRequired,
-    pattern: translations.errorPattern
-  });
+  const errorMessages = useMemo(() => {
+    return _objectSpread({
+      'Field.errorRequired': translations.errorRequired,
+      'Field.errorPattern': translations.errorPattern
+    }, props.errorMessages);
+  }, [props.errorMessages, translations.errorPattern, translations.errorRequired]);
   const nameProps = _objectSpread(_objectSpread({
     label: translations.label,
     autoComplete: 'given-name'
@@ -31,10 +32,12 @@ Name.First = function FirstName(props) {
 Name.First['_supportsSpacingProps'] = true;
 Name.Last = function LastName(props) {
   const translations = useTranslation().LastName;
-  const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: translations.errorRequired,
-    pattern: translations.errorPattern
-  });
+  const errorMessages = useMemo(() => {
+    return _objectSpread({
+      'Field.errorRequired': translations.errorRequired,
+      'Field.errorPattern': translations.errorPattern
+    }, props.errorMessages);
+  }, [props.errorMessages, translations.errorPattern, translations.errorRequired]);
   const nameProps = _objectSpread(_objectSpread({
     label: translations.label,
     autoComplete: 'family-name'
@@ -46,9 +49,11 @@ Name.Last = function LastName(props) {
 Name.First['_supportsSpacingProps'] = true;
 Name.Company = function CompanyName(props) {
   const translations = useTranslation().CompanyName;
-  const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: translations.errorRequired
-  });
+  const errorMessages = useMemo(() => {
+    return _objectSpread({
+      'Field.errorRequired': translations.errorRequired
+    }, props.errorMessages);
+  }, [props.errorMessages, translations.errorRequired]);
   const StringFieldProps = _objectSpread(_objectSpread({
     label: translations.label,
     pattern: '^(?!.*[-\\s]{2})(?!.*[\\.]{2})[\\p{L}\\p{N}][\\p{L}\\p{N}\\p{P}\\p{Zs}.]*[\\p{L}\\p{N}\\p{P}]$',

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

@@ -1 +1 @@
-{"version":3,"file":"Name.js","names":["React","StringField","useErrorMessage","useTranslation","Name","props","StringFieldProps","_objectSpread","trim","autoComplete","pattern","createElement","_supportsSpacingProps","First","FirstName","translations","errorMessages","path","required","errorRequired","errorPattern","nameProps","label","Last","LastName","Company","CompanyName"],"sources":["../../../../../../src/extensions/forms/Field/Name/Name.tsx"],"sourcesContent":["import React from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringFieldProps\n\nfunction Name(props: Props) {\n  const StringFieldProps: Props = {\n    trim: true,\n    autoComplete: 'name',\n    pattern: '^(?!.*[\\\\-\\\\s]{2})[\\\\p{L}]+([ \\\\-][\\\\p{L}]+)*$',\n    ...props,\n  }\n\n  return <StringField {...StringFieldProps} />\n}\nName._supportsSpacingProps = true\n\nName.First = function FirstName(props: Props) {\n  const translations = useTranslation().FirstName\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.errorRequired,\n    pattern: translations.errorPattern,\n  })\n\n  const nameProps: Props = {\n    label: translations.label,\n    autoComplete: 'given-name',\n    ...props,\n    errorMessages,\n  }\n\n  return <Name {...nameProps} />\n}\nName.First['_supportsSpacingProps'] = true\n\nName.Last = function LastName(props: Props) {\n  const translations = useTranslation().LastName\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.errorRequired,\n    pattern: translations.errorPattern,\n  })\n\n  const nameProps: Props = {\n    label: translations.label,\n    autoComplete: 'family-name',\n    ...props,\n    errorMessages,\n  }\n\n  return <Name {...nameProps} />\n}\nName.First['_supportsSpacingProps'] = true\n\nName.Company = function CompanyName(props: Props) {\n  const translations = useTranslation().CompanyName\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.errorRequired,\n  })\n\n  const StringFieldProps: Props = {\n    label: translations.label,\n    pattern:\n      '^(?!.*[-\\\\s]{2})(?!.*[\\\\.]{2})[\\\\p{L}\\\\p{N}][\\\\p{L}\\\\p{N}\\\\p{P}\\\\p{Zs}.]*[\\\\p{L}\\\\p{N}\\\\p{P}]$',\n    autoComplete: 'organization',\n    ...props,\n    errorMessages,\n  }\n\n  return <Name {...StringFieldProps} />\n}\nName.First['_supportsSpacingProps'] = true\n\nexport default Name\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAMC,gBAAuB,GAAAC,aAAA;IAC3BC,IAAI,EAAE,IAAI;IACVC,YAAY,EAAE,MAAM;IACpBC,OAAO,EAAE;EAAgD,GACtDL,KAAK,CACT;EAED,OAAOL,KAAA,CAAAW,aAAA,CAACV,WAAW,EAAKK,gBAAmB,CAAC;AAC9C;AACAF,IAAI,CAACQ,qBAAqB,GAAG,IAAI;AAEjCR,IAAI,CAACS,KAAK,GAAG,SAASC,SAASA,CAACT,KAAY,EAAE;EAC5C,MAAMU,YAAY,GAAGZ,cAAc,CAAC,CAAC,CAACW,SAAS;EAC/C,MAAME,aAAa,GAAGd,eAAe,CAACG,KAAK,CAACY,IAAI,EAAEZ,KAAK,CAACW,aAAa,EAAE;IACrEE,QAAQ,EAAEH,YAAY,CAACI,aAAa;IACpCT,OAAO,EAAEK,YAAY,CAACK;EACxB,CAAC,CAAC;EAEF,MAAMC,SAAgB,GAAAd,aAAA,CAAAA,aAAA;IACpBe,KAAK,EAAEP,YAAY,CAACO,KAAK;IACzBb,YAAY,EAAE;EAAY,GACvBJ,KAAK;IACRW;EAAa,EACd;EAED,OAAOhB,KAAA,CAAAW,aAAA,CAACP,IAAI,EAAKiB,SAAY,CAAC;AAChC,CAAC;AACDjB,IAAI,CAACS,KAAK,CAAC,uBAAuB,CAAC,GAAG,IAAI;AAE1CT,IAAI,CAACmB,IAAI,GAAG,SAASC,QAAQA,CAACnB,KAAY,EAAE;EAC1C,MAAMU,YAAY,GAAGZ,cAAc,CAAC,CAAC,CAACqB,QAAQ;EAC9C,MAAMR,aAAa,GAAGd,eAAe,CAACG,KAAK,CAACY,IAAI,EAAEZ,KAAK,CAACW,aAAa,EAAE;IACrEE,QAAQ,EAAEH,YAAY,CAACI,aAAa;IACpCT,OAAO,EAAEK,YAAY,CAACK;EACxB,CAAC,CAAC;EAEF,MAAMC,SAAgB,GAAAd,aAAA,CAAAA,aAAA;IACpBe,KAAK,EAAEP,YAAY,CAACO,KAAK;IACzBb,YAAY,EAAE;EAAa,GACxBJ,KAAK;IACRW;EAAa,EACd;EAED,OAAOhB,KAAA,CAAAW,aAAA,CAACP,IAAI,EAAKiB,SAAY,CAAC;AAChC,CAAC;AACDjB,IAAI,CAACS,KAAK,CAAC,uBAAuB,CAAC,GAAG,IAAI;AAE1CT,IAAI,CAACqB,OAAO,GAAG,SAASC,WAAWA,CAACrB,KAAY,EAAE;EAChD,MAAMU,YAAY,GAAGZ,cAAc,CAAC,CAAC,CAACuB,WAAW;EACjD,MAAMV,aAAa,GAAGd,eAAe,CAACG,KAAK,CAACY,IAAI,EAAEZ,KAAK,CAACW,aAAa,EAAE;IACrEE,QAAQ,EAAEH,YAAY,CAACI;EACzB,CAAC,CAAC;EAEF,MAAMb,gBAAuB,GAAAC,aAAA,CAAAA,aAAA;IAC3Be,KAAK,EAAEP,YAAY,CAACO,KAAK;IACzBZ,OAAO,EACL,gGAAgG;IAClGD,YAAY,EAAE;EAAc,GACzBJ,KAAK;IACRW;EAAa,EACd;EAED,OAAOhB,KAAA,CAAAW,aAAA,CAACP,IAAI,EAAKE,gBAAmB,CAAC;AACvC,CAAC;AACDF,IAAI,CAACS,KAAK,CAAC,uBAAuB,CAAC,GAAG,IAAI;AAE1C,eAAeT,IAAI"}
+{"version":3,"file":"Name.js","names":["React","useMemo","StringField","useTranslation","Name","props","StringFieldProps","_objectSpread","trim","autoComplete","pattern","createElement","_supportsSpacingProps","First","FirstName","translations","errorMessages","errorRequired","errorPattern","nameProps","label","Last","LastName","Company","CompanyName"],"sources":["../../../../../../src/extensions/forms/Field/Name/Name.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringFieldProps\n\nfunction Name(props: Props) {\n  const StringFieldProps: Props = {\n    trim: true,\n    autoComplete: 'name',\n    pattern: '^(?!.*[\\\\-\\\\s]{2})[\\\\p{L}]+([ \\\\-][\\\\p{L}]+)*$',\n    ...props,\n  }\n\n  return <StringField {...StringFieldProps} />\n}\nName._supportsSpacingProps = true\n\nName.First = function FirstName(props: Props) {\n  const translations = useTranslation().FirstName\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': translations.errorRequired,\n      'Field.errorPattern': translations.errorPattern,\n      ...props.errorMessages,\n    }\n  }, [\n    props.errorMessages,\n    translations.errorPattern,\n    translations.errorRequired,\n  ])\n\n  const nameProps: Props = {\n    label: translations.label,\n    autoComplete: 'given-name',\n    ...props,\n    errorMessages,\n  }\n\n  return <Name {...nameProps} />\n}\nName.First['_supportsSpacingProps'] = true\n\nName.Last = function LastName(props: Props) {\n  const translations = useTranslation().LastName\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': translations.errorRequired,\n      'Field.errorPattern': translations.errorPattern,\n      ...props.errorMessages,\n    }\n  }, [\n    props.errorMessages,\n    translations.errorPattern,\n    translations.errorRequired,\n  ])\n\n  const nameProps: Props = {\n    label: translations.label,\n    autoComplete: 'family-name',\n    ...props,\n    errorMessages,\n  }\n\n  return <Name {...nameProps} />\n}\nName.First['_supportsSpacingProps'] = true\n\nName.Company = function CompanyName(props: Props) {\n  const translations = useTranslation().CompanyName\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': translations.errorRequired,\n      ...props.errorMessages,\n    }\n  }, [props.errorMessages, translations.errorRequired])\n\n  const StringFieldProps: Props = {\n    label: translations.label,\n    pattern:\n      '^(?!.*[-\\\\s]{2})(?!.*[\\\\.]{2})[\\\\p{L}\\\\p{N}][\\\\p{L}\\\\p{N}\\\\p{P}\\\\p{Zs}.]*[\\\\p{L}\\\\p{N}\\\\p{P}]$',\n    autoComplete: 'organization',\n    ...props,\n    errorMessages,\n  }\n\n  return <Name {...StringFieldProps} />\n}\nName.First['_supportsSpacingProps'] = true\n\nexport default Name\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { Props as StringFieldProps } from '../String';
-import { FormError, Validator } from '../../types';
+import { Validator } from '../../types';
+import { FormError } from '../../utils';
 export type Props = Omit<StringFieldProps, 'onBlurValidator'> & {
     omitMask?: boolean;
     validate?: boolean;