@dnb/eufemia 10.17.0 → 10.19.0

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","Button","ButtonRow","classnames","Option","FieldBlock","useDataValue","pickSpacingProps","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","labelSecondary","value","error","info","warning","disabled","emptyValue","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props$title","title","handleSelect","selected","newValue","includes","length","createElement","i","key","text","on_click","undefined","status","checked","on_change","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, Button } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport classnames from 'classnames'\nimport Option from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldProps<Array<string | number>> & {\n  children?: React.ReactNode\n  variant?: 'checkbox' | 'button'\n  optionsLayout?: 'horizontal' | 'vertical'\n}\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    error,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n    ...pickSpacingProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            {options.map((option, i) => (\n              <Button\n                key={`option-${i}-${option.value}`}\n                id={id}\n                text={option.title}\n                on_click={option.handleSelect}\n                variant={\n                  value?.includes(option.value) ? undefined : 'secondary'\n                }\n                status={error ? 'error' : undefined}\n                disabled={disabled}\n              />\n            ))}\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}
+{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","ToggleButton","classnames","OptionField","FieldBlock","useDataValue","pickSpacingProps","ToggleButtonGroupContext","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","info","warning","disabled","emptyValue","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props$title","title","handleSelect","selected","newValue","includes","length","createElement","Provider","status","undefined","i","key","text","checked","on_change","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport OptionField from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldProps<Array<string | number>> & {\n  children?: React.ReactNode\n  variant?: 'checkbox' | 'button'\n  optionsLayout?: 'horizontal' | 'vertical'\n}\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    ...pickSpacingProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options.map((option, i) => (\n              <ToggleButton\n                key={`option-${i}-${option.value}`}\n                text={option.title}\n                checked={value?.includes(option.value)}\n                on_change={option.handleSelect}\n              />\n            ))}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n              status={hasError ? 'error' : undefined}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.css

@@ -1,11 +1,21 @@
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
+}
+@media screen and (min-width: 40em) {
+  .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+    line-height: 2.5rem;
+    margin-bottom: 0;
+  }
 }

package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css

@@ -1 +1 @@
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}

package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss

@@ -1,13 +1,23 @@
+@import '../../../../../style/core/utilities.scss';
+
 .dnb-forms-field-array-selection {
-  &--options-layout-vertical &__options {
+  &--layout-vertical &__options {
     display: flex;
     flex-flow: column;
     row-gap: var(--spacing-x-small);
   }
 
-  &--options-layout-horizontal &__options {
+  &--layout-horizontal &__options {
     display: flex;
     flex-flow: row wrap;
     column-gap: var(--spacing-small);
+    row-gap: var(--spacing-x-small); // for when wrapped
+  }
+
+  @include allAbove(small) {
+    .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+      line-height: 2.5rem;
+      margin-bottom: 0;
+    }
   }
 }

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

@@ -1,5 +1,5 @@
-import { Props as StringComponentProps } from '../String';
-export type Props = StringComponentProps & {
+import { Props as StringFieldProps } from '../String';
+export type Props = StringFieldProps & {
     validate?: boolean;
     omitMask?: boolean;
 };

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

@@ -4,7 +4,7 @@ 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, { useContext, useMemo } from 'react';
-import StringComponent from '../String';
+import StringField from '../String';
 import SharedContext from '../../../../shared/Context';
 function BankAccountNumber(props) {
   var _props$pattern, _props$label, _props$width;
@@ -19,7 +19,7 @@ function BankAccountNumber(props) {
     pattern: tr.bankAccountNumberErrorPattern
   }, props.errorMessages), [tr, props.errorMessages]);
   const mask = useMemo(() => omitMask ? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/] : [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, /\d/], [omitMask]);
-  const stringComponentProps = _objectSpread(_objectSpread({}, props), {}, {
+  const StringFieldProps = _objectSpread(_objectSpread({}, props), {}, {
     className: 'dnb-forms-field-bank-account-number',
     pattern: (_props$pattern = props.pattern) !== null && _props$pattern !== void 0 ? _props$pattern : validate ? '^[0-9]{11}$' : undefined,
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.bankAccountNumberLabel,
@@ -28,7 +28,7 @@ function BankAccountNumber(props) {
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium',
     inputMode: 'numeric'
   });
-  return React.createElement(StringComponent, stringComponentProps);
+  return React.createElement(StringField, StringFieldProps);
 }
 BankAccountNumber._supportsSpacingProps = true;
 export default BankAccountNumber;

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

@@ -1 +1 @@
-{"version":3,"file":"BankAccountNumber.js","names":["React","useContext","useMemo","StringComponent","SharedContext","BankAccountNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","validate","omitMask","errorMessages","_objectSpread","required","bankAccountNumberErrorRequired","pattern","bankAccountNumberErrorPattern","mask","stringComponentProps","className","undefined","label","bankAccountNumberLabel","width","inputMode","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction BankAccountNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.bankAccountNumberErrorRequired,\n      pattern: tr.bankAccountNumberErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\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 stringComponentProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-bank-account-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{11}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.bankAccountNumberLabel,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n    inputMode: 'numeric',\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nBankAccountNumber._supportsSpacingProps = true\nexport default BankAccountNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACvC,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAC3C,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGT,KAAK;EAE3C,MAAMU,aAAa,GAAGd,OAAO,CAC3B,MAAAe,aAAA;IACEC,QAAQ,EAAEP,EAAE,CAACQ,8BAA8B;IAC3CC,OAAO,EAAET,EAAE,CAACU;EAA6B,GACtCf,KAAK,CAACU,aAAa,CACtB,EACF,CAACL,EAAE,EAAEL,KAAK,CAACU,aAAa,CAC1B,CAAC;EACD,MAAMM,IAAI,GAAGpB,OAAO,CAClB,MACEa,QAAQ,GACJ,CACE,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,CACL,GACD,CACE,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,CACL,EACP,CAACA,QAAQ,CACX,CAAC;EAED,MAAMQ,oBAA2B,GAAAN,aAAA,CAAAA,aAAA,KAC5BX,KAAK;IACRkB,SAAS,EAAE,qCAAqC;IAChDJ,OAAO,GAAAb,cAAA,GAAED,KAAK,CAACc,OAAO,cAAAb,cAAA,cAAAA,cAAA,GAAKO,QAAQ,GAAG,aAAa,GAAGW,SAAU;IAChEC,KAAK,GAAAlB,YAAA,GACHF,KAAK,CAACoB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACc,sBAAsB;IACzDX,aAAa;IACbM,IAAI;IACJM,KAAK,GAAAnB,YAAA,GAAEH,KAAK,CAACsB,KAAK,cAAAnB,YAAA,cAAAA,YAAA,GAAI,QAAQ;IAC9BoB,SAAS,EAAE;EAAS,EACrB;EAED,OAAO7B,KAAA,CAAA8B,aAAA,CAAC3B,eAAe,EAAKoB,oBAAuB,CAAC;AACtD;AAEAlB,iBAAiB,CAAC0B,qBAAqB,GAAG,IAAI;AAC9C,eAAe1B,iBAAiB"}
+{"version":3,"file":"BankAccountNumber.js","names":["React","useContext","useMemo","StringField","SharedContext","BankAccountNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","validate","omitMask","errorMessages","_objectSpread","required","bankAccountNumberErrorRequired","pattern","bankAccountNumberErrorPattern","mask","StringFieldProps","className","undefined","label","bankAccountNumberLabel","width","inputMode","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringFieldProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction BankAccountNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.bankAccountNumberErrorRequired,\n      pattern: tr.bankAccountNumberErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\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 StringFieldProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-bank-account-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{11}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.bankAccountNumberLabel,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n    inputMode: 'numeric',\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nBankAccountNumber._supportsSpacingProps = true\nexport default BankAccountNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACvC,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAC3C,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGT,KAAK;EAE3C,MAAMU,aAAa,GAAGd,OAAO,CAC3B,MAAAe,aAAA;IACEC,QAAQ,EAAEP,EAAE,CAACQ,8BAA8B;IAC3CC,OAAO,EAAET,EAAE,CAACU;EAA6B,GACtCf,KAAK,CAACU,aAAa,CACtB,EACF,CAACL,EAAE,EAAEL,KAAK,CAACU,aAAa,CAC1B,CAAC;EACD,MAAMM,IAAI,GAAGpB,OAAO,CAClB,MACEa,QAAQ,GACJ,CACE,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,CACL,GACD,CACE,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,CACL,EACP,CAACA,QAAQ,CACX,CAAC;EAED,MAAMQ,gBAAuB,GAAAN,aAAA,CAAAA,aAAA,KACxBX,KAAK;IACRkB,SAAS,EAAE,qCAAqC;IAChDJ,OAAO,GAAAb,cAAA,GAAED,KAAK,CAACc,OAAO,cAAAb,cAAA,cAAAA,cAAA,GAAKO,QAAQ,GAAG,aAAa,GAAGW,SAAU;IAChEC,KAAK,GAAAlB,YAAA,GACHF,KAAK,CAACoB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACc,sBAAsB;IACzDX,aAAa;IACbM,IAAI;IACJM,KAAK,GAAAnB,YAAA,GAAEH,KAAK,CAACsB,KAAK,cAAAnB,YAAA,cAAAA,YAAA,GAAI,QAAQ;IAC9BoB,SAAS,EAAE;EAAS,EACrB;EAED,OAAO7B,KAAA,CAAA8B,aAAA,CAAC3B,WAAW,EAAKoB,gBAAmB,CAAC;AAC9C;AAEAlB,iBAAiB,CAAC0B,qBAAqB,GAAG,IAAI;AAC9C,eAAe1B,iBAAiB"}

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

@@ -1,5 +1,5 @@
-import { Props as ToggleProps } from '../Toggle';
-export type Props = Omit<ToggleProps, 'valueOn' | 'valueOff' | 'textOn' | 'textOff'> & {
+import { Props as ToggleFieldProps } from '../Toggle';
+export type Props = Omit<ToggleFieldProps, 'valueOn' | 'valueOff' | 'textOn' | 'textOff'> & {
     trueText?: string;
     falseText?: string;
 };

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

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["trueText", "falseText"];
 import React, { useContext } from 'react';
-import Toggle from '../Toggle';
+import ToggleField from '../Toggle';
 import SharedContext from '../../../../shared/Context';
 function BooleanComponent(props) {
   const sharedContext = useContext(SharedContext);
@@ -13,7 +13,7 @@ function BooleanComponent(props) {
       falseText
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
-  return React.createElement(Toggle, _extends({}, restProps, {
+  return React.createElement(ToggleField, _extends({}, restProps, {
     valueOn: true,
     valueOff: false,
     textOn: trueText !== null && trueText !== void 0 ? trueText : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.booleanYes,

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

@@ -1 +1 @@
-{"version":3,"file":"Boolean.js","names":["React","useContext","Toggle","SharedContext","BooleanComponent","props","sharedContext","trueText","falseText","restProps","_objectWithoutProperties","_excluded","createElement","_extends","valueOn","valueOff","textOn","translation","Forms","booleanYes","textOff","booleanNo","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Boolean/Boolean.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport Toggle, { Props as ToggleProps } from '../Toggle'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = Omit<\n  ToggleProps,\n  'valueOn' | 'valueOff' | 'textOn' | 'textOff'\n> & {\n  trueText?: string\n  falseText?: string\n}\n\nfunction BooleanComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const { trueText, falseText, ...restProps } = props\n  return (\n    <Toggle\n      {...restProps}\n      valueOn={true}\n      valueOff={false}\n      textOn={trueText ?? sharedContext?.translation.Forms.booleanYes}\n      textOff={falseText ?? sharedContext?.translation.Forms.booleanNo}\n    />\n  )\n}\n\nBooleanComponent._supportsSpacingProps = true\nexport default BooleanComponent\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAgC,WAAW;AACxD,OAAOC,aAAa,MAAM,4BAA4B;AAUtD,SAASC,gBAAgBA,CAACC,KAAY,EAAE;EACtC,MAAMC,aAAa,GAAGL,UAAU,CAACE,aAAa,CAAC;EAC/C,MAAM;MAAEI,QAAQ;MAAEC;IAAwB,CAAC,GAAGH,KAAK;IAAnBI,SAAS,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA;EACnD,OACEX,KAAA,CAAAY,aAAA,CAACV,MAAM,EAAAW,QAAA,KACDJ,SAAS;IACbK,OAAO,EAAE,IAAK;IACdC,QAAQ,EAAE,KAAM;IAChBC,MAAM,EAAET,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAID,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEW,WAAW,CAACC,KAAK,CAACC,UAAW;IAChEC,OAAO,EAAEZ,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIF,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEW,WAAW,CAACC,KAAK,CAACG;EAAU,EAClE,CAAC;AAEN;AAEAjB,gBAAgB,CAACkB,qBAAqB,GAAG,IAAI;AAC7C,eAAelB,gBAAgB"}
+{"version":3,"file":"Boolean.js","names":["React","useContext","ToggleField","SharedContext","BooleanComponent","props","sharedContext","trueText","falseText","restProps","_objectWithoutProperties","_excluded","createElement","_extends","valueOn","valueOff","textOn","translation","Forms","booleanYes","textOff","booleanNo","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Boolean/Boolean.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport ToggleField, { Props as ToggleFieldProps } from '../Toggle'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = Omit<\n  ToggleFieldProps,\n  'valueOn' | 'valueOff' | 'textOn' | 'textOff'\n> & {\n  trueText?: string\n  falseText?: string\n}\n\nfunction BooleanComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const { trueText, falseText, ...restProps } = props\n  return (\n    <ToggleField\n      {...restProps}\n      valueOn={true}\n      valueOff={false}\n      textOn={trueText ?? sharedContext?.translation.Forms.booleanYes}\n      textOff={falseText ?? sharedContext?.translation.Forms.booleanNo}\n    />\n  )\n}\n\nBooleanComponent._supportsSpacingProps = true\nexport default BooleanComponent\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,aAAa,MAAM,4BAA4B;AAUtD,SAASC,gBAAgBA,CAACC,KAAY,EAAE;EACtC,MAAMC,aAAa,GAAGL,UAAU,CAACE,aAAa,CAAC;EAC/C,MAAM;MAAEI,QAAQ;MAAEC;IAAwB,CAAC,GAAGH,KAAK;IAAnBI,SAAS,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA;EACnD,OACEX,KAAA,CAAAY,aAAA,CAACV,WAAW,EAAAW,QAAA,KACNJ,SAAS;IACbK,OAAO,EAAE,IAAK;IACdC,QAAQ,EAAE,KAAM;IAChBC,MAAM,EAAET,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAID,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEW,WAAW,CAACC,KAAK,CAACC,UAAW;IAChEC,OAAO,EAAEZ,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIF,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEW,WAAW,CAACC,KAAK,CAACG;EAAU,EAClE,CAAC;AAEN;AAEAjB,gBAAgB,CAACkB,qBAAqB,GAAG,IAAI;AAC7C,eAAelB,gBAAgB"}

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

@@ -1,5 +1,5 @@
-import { Props as NumberProps } from '../Number';
-export type Props = NumberProps;
+import { Props as NumberFieldProps } from '../Number';
+export type Props = NumberFieldProps;
 declare function Currency(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Currency {
     var _supportsSpacingProps: boolean;

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

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { Context } from '../../../../shared';
 import { getCurrencySymbol } from '../../../../components/number-format/NumberUtils';
 import { CURRENCY } from '../../../../shared/defaults';
-import NumberComponent from '../Number';
+import NumberField from '../Number';
 function Currency(props) {
   var _props$currency, _props$placeholder;
   const context = React.useContext(Context);
@@ -17,7 +17,7 @@ function Currency(props) {
     currency: (_props$currency = props.currency) !== null && _props$currency !== void 0 ? _props$currency : CURRENCY,
     placeholder: (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : getCurrencySymbol(context === null || context === void 0 ? void 0 : context.locale, props.currency)
   });
-  return React.createElement(NumberComponent, _extends({}, preparedProps, {
+  return React.createElement(NumberField, _extends({}, preparedProps, {
     className: classnames('dnb-forms-field-currency', props.className)
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","names":["React","classnames","Context","getCurrencySymbol","CURRENCY","NumberComponent","Currency","props","_props$currency","_props$placeholder","context","useContext","preparedProps","_objectSpread","currency","placeholder","locale","createElement","_extends","className","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Context } from '../../../../shared'\nimport { getCurrencySymbol } from '../../../../components/number-format/NumberUtils'\nimport { CURRENCY } from '../../../../shared/defaults'\nimport NumberComponent, { Props as NumberProps } from '../Number'\n\nexport type Props = NumberProps\n\nfunction Currency(props: Props) {\n  const context = React.useContext(Context)\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? CURRENCY,\n    placeholder:\n      props.placeholder ??\n      getCurrencySymbol(context?.locale, props.currency),\n  }\n\n  return (\n    <NumberComponent\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,iBAAiB,QAAQ,kDAAkD;AACpF,SAASC,QAAQ,QAAQ,6BAA6B;AACtD,OAAOC,eAAe,MAAgC,WAAW;AAIjE,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,eAAA,EAAAC,kBAAA;EAC9B,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,OAAO,CAAC;EACzC,MAAMU,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdN,KAAK;IACRO,QAAQ,GAAAN,eAAA,GAAED,KAAK,CAACO,QAAQ,cAAAN,eAAA,cAAAA,eAAA,GAAIJ,QAAQ;IACpCW,WAAW,GAAAN,kBAAA,GACTF,KAAK,CAACQ,WAAW,cAAAN,kBAAA,cAAAA,kBAAA,GACjBN,iBAAiB,CAACO,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,MAAM,EAAET,KAAK,CAACO,QAAQ;EAAC,EACrD;EAED,OACEd,KAAA,CAAAiB,aAAA,CAACZ,eAAe,EAAAa,QAAA,KACVN,aAAa;IACjBO,SAAS,EAAElB,UAAU,CAAC,0BAA0B,EAAEM,KAAK,CAACY,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAb,QAAQ,CAACc,qBAAqB,GAAG,IAAI;AACrC,eAAed,QAAQ"}
+{"version":3,"file":"Currency.js","names":["React","classnames","Context","getCurrencySymbol","CURRENCY","NumberField","Currency","props","_props$currency","_props$placeholder","context","useContext","preparedProps","_objectSpread","currency","placeholder","locale","createElement","_extends","className","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Context } from '../../../../shared'\nimport { getCurrencySymbol } from '../../../../components/number-format/NumberUtils'\nimport { CURRENCY } from '../../../../shared/defaults'\nimport NumberField, { Props as NumberFieldProps } from '../Number'\n\nexport type Props = NumberFieldProps\n\nfunction Currency(props: Props) {\n  const context = React.useContext(Context)\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? CURRENCY,\n    placeholder:\n      props.placeholder ??\n      getCurrencySymbol(context?.locale, props.currency),\n  }\n\n  return (\n    <NumberField\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,iBAAiB,QAAQ,kDAAkD;AACpF,SAASC,QAAQ,QAAQ,6BAA6B;AACtD,OAAOC,WAAW,MAAqC,WAAW;AAIlE,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,eAAA,EAAAC,kBAAA;EAC9B,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,OAAO,CAAC;EACzC,MAAMU,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdN,KAAK;IACRO,QAAQ,GAAAN,eAAA,GAAED,KAAK,CAACO,QAAQ,cAAAN,eAAA,cAAAA,eAAA,GAAIJ,QAAQ;IACpCW,WAAW,GAAAN,kBAAA,GACTF,KAAK,CAACQ,WAAW,cAAAN,kBAAA,cAAAA,kBAAA,GACjBN,iBAAiB,CAACO,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,MAAM,EAAET,KAAK,CAACO,QAAQ;EAAC,EACrD;EAED,OACEd,KAAA,CAAAiB,aAAA,CAACZ,WAAW,EAAAa,QAAA,KACNN,aAAa;IACjBO,SAAS,EAAElB,UAAU,CAAC,0BAA0B,EAAEM,KAAK,CAACY,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAb,QAAQ,CAACc,qBAAqB,GAAG,IAAI;AACrC,eAAed,QAAQ"}

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

@@ -50,7 +50,6 @@ function DateComponent(props) {
     className,
     label,
     labelDescription,
-    labelSecondary,
     value,
     help,
     info,
@@ -58,6 +57,7 @@ function DateComponent(props) {
     error,
     hasError,
     disabled,
+    ariaAttributes,
     handleFocus,
     handleBlur,
     handleChange
@@ -67,7 +67,6 @@ function DateComponent(props) {
     forId: id,
     label: label !== null && label !== void 0 ? label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.dateLabel,
     labelDescription: labelDescription,
-    labelSecondary: labelSecondary,
     info: info,
     warning: warning,
     disabled: disabled,
@@ -79,15 +78,15 @@ function DateComponent(props) {
     show_input: true,
     show_cancel_button: true,
     show_reset_button: true,
-    status: error || hasError ? 'error' : undefined,
+    status: hasError ? 'error' : undefined,
     suffix: help ? React.createElement(HelpButton, {
       title: help.title
-    }, help.contents) : undefined,
+    }, help.content) : undefined,
     on_change: handleChange,
     on_reset: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur
-  }, pickSpacingProps(props))));
+  }, ariaAttributes, pickSpacingProps(props))));
 }
 DateComponent._supportsSpacingProps = true;
 export default DateComponent;

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useCallback","useContext","useMemo","DatePicker","HelpButton","useDataValue","pickSpacingProps","SharedContext","classnames","FieldBlock","parseISO","isValid","DateComponent","props","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","dateErrorRequired","pattern","inputErrorPattern","schema","_props$schema","type","validateRequired","value","error","undefined","preparedProps","fromInput","date","id","className","label","labelDescription","labelSecondary","help","info","warning","hasError","disabled","handleFocus","handleBlur","handleChange","createElement","_extends","forId","dateLabel","show_input","show_cancel_button","show_reset_button","status","suffix","title","contents","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 { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport { JSONSchema7 } from 'json-schema'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { parseISO, isValid } from 'date-fns'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string> & {\n    // Validation\n    pattern?: string\n  }\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.dateErrorRequired,\n      pattern: tr.inputErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const schema = useMemo<JSONSchema7>(\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: ({ date }: { date: string }) => {\n      return date\n    },\n    validateRequired,\n  }\n\n  const {\n    id,\n    className,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    help,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      label={label ?? sharedContext?.translation.Forms.dateLabel}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      disabled={disabled}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <DatePicker\n        id={id}\n        date={value}\n        disabled={disabled}\n        show_input={true}\n        show_cancel_button={true}\n        show_reset_button={true}\n        status={error || hasError ? 'error' : undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n        on_change={handleChange}\n        on_reset={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...pickSpacingProps(props)}\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","useDataValue","pickSpacingProps","SharedContext","classnames","FieldBlock","parseISO","isValid","DateComponent","props","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","dateErrorRequired","pattern","inputErrorPattern","schema","_props$schema","type","validateRequired","value","error","undefined","preparedProps","fromInput","date","id","className","label","labelDescription","help","info","warning","hasError","disabled","ariaAttributes","handleFocus","handleBlur","handleChange","createElement","_extends","forId","dateLabel","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 { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps, JSONSchema } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { parseISO, isValid } from 'date-fns'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string> & {\n    // Validation\n    pattern?: string\n  }\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.dateErrorRequired,\n      pattern: tr.inputErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const schema = useMemo<JSONSchema>(\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: ({ date }: { date: string }) => {\n      return 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    ariaAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      label={label ?? sharedContext?.translation.Forms.dateLabel}\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={value}\n        disabled={disabled}\n        show_input={true}\n        show_cancel_button={true}\n        show_reset_button={true}\n        status={hasError ? 'error' : undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.content}</HelpButton>\n          ) : undefined\n        }\n        on_change={handleChange}\n        on_reset={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...ariaAttributes}\n        {...pickSpacingProps(props)}\n      />\n    </FieldBlock>\n  )\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC/D,SAASC,UAAU,EAAEC,UAAU,QAAQ,wBAAwB;AAC/D,SAASC,YAAY,QAAQ,aAAa;AAE1C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,QAAQ,EAAEC,OAAO,QAAQ,UAAU;AAQ5C,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,aAAa,GAAGb,UAAU,CAACM,aAAa,CAAC;EAC/C,MAAMQ,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAMC,aAAa,GAAGhB,OAAO,CAC3B,MAAAiB,aAAA;IACEC,QAAQ,EAAEL,EAAE,CAACM,iBAAiB;IAC9BC,OAAO,EAAEP,EAAE,CAACQ;EAAiB,GAC1BV,KAAK,CAACK,aAAa,CACtB,EACF,CAACH,EAAE,EAAEF,KAAK,CAACK,aAAa,CAC1B,CAAC;EAED,MAAMM,MAAM,GAAGtB,OAAO,CACpB;IAAA,IAAAuB,aAAA;IAAA,QAAAA,aAAA,GACEZ,KAAK,CAACW,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdJ,OAAO,EAAET,KAAK,CAACS;IACjB,CAAC;EAAA,GACH,CAACT,KAAK,CAACW,MAAM,EAAEX,KAAK,CAACS,OAAO,CAC9B,CAAC;EAED,MAAMK,gBAAgB,GAAG3B,WAAW,CAClC,CAAC4B,KAAa,EAAE;IAAER,QAAQ;IAAES;EAAM,CAAC,KAAK;IACtC,IAAIT,QAAQ,KAAK,CAACQ,KAAK,IAAI,CAACjB,OAAO,CAACD,QAAQ,CAACkB,KAAK,CAAC,CAAC,CAAC,EAAE;MACrD,OAAOC,KAAK;IACd;IAEA,OAAOC,SAAS;EAClB,CAAC,EACD,EACF,CAAC;EAED,MAAMC,aAAoB,GAAAZ,aAAA,CAAAA,aAAA,KACrBN,KAAK;IACRK,aAAa;IACbM,MAAM;IACNQ,SAAS,EAAEA,CAAC;MAAEC;IAAuB,CAAC,KAAK;MACzC,OAAOA,IAAI;IACb,CAAC;IACDN;EAAgB,EACjB;EAED,MAAM;IACJO,EAAE;IACFC,SAAS;IACTC,KAAK;IACLC,gBAAgB;IAChBT,KAAK;IACLU,IAAI;IACJC,IAAI;IACJC,OAAO;IACPX,KAAK;IACLY,QAAQ;IACRC,QAAQ;IACRC,cAAc;IACdC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAGzC,YAAY,CAAC0B,aAAa,CAAC;EAE/B,OACEhC,KAAA,CAAAgD,aAAA,CAACtC,UAAU,EAAAuC,QAAA;IACTb,SAAS,EAAE3B,UAAU,CAAC,wBAAwB,EAAE2B,SAAS,CAAE;IAC3Dc,KAAK,EAAEf,EAAG;IACVE,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAItB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACiC,SAAU;IAC3Db,gBAAgB,EAAEA,gBAAiB;IACnCE,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBE,QAAQ,EAAEA,QAAS;IACnBb,KAAK,EAAEA;EAAM,GACTvB,gBAAgB,CAACO,KAAK,CAAC,GAE3Bd,KAAA,CAAAgD,aAAA,CAAC5C,UAAU,EAAA6C,QAAA;IACTd,EAAE,EAAEA,EAAG;IACPD,IAAI,EAAEL,KAAM;IACZc,QAAQ,EAAEA,QAAS;IACnBS,UAAU,EAAE,IAAK;IACjBC,kBAAkB,EAAE,IAAK;IACzBC,iBAAiB,EAAE,IAAK;IACxBC,MAAM,EAAEb,QAAQ,GAAG,OAAO,GAAGX,SAAU;IACvCyB,MAAM,EACJjB,IAAI,GACFvC,KAAA,CAAAgD,aAAA,CAAC3C,UAAU;MAACoD,KAAK,EAAElB,IAAI,CAACkB;IAAM,GAAElB,IAAI,CAACmB,OAAoB,CAAC,GACxD3B,SACL;IACD4B,SAAS,EAAEZ,YAAa;IACxBa,QAAQ,EAAEb,YAAa;IACvBc,OAAO,EAAEhB,WAAY;IACrBiB,MAAM,EAAEhB;EAAW,GACfF,cAAc,EACdrC,gBAAgB,CAACO,KAAK,CAAC,CAC5B,CACS,CAAC;AAEjB;AAEAD,aAAa,CAACkD,qBAAqB,GAAG,IAAI;AAC1C,eAAelD,aAAa"}

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

@@ -1,5 +1,5 @@
-import { Props as StringComponentProps } from '../String';
-export type Props = StringComponentProps;
+import { Props as StringFieldProps } from '../String';
+export type Props = StringFieldProps;
 declare function Email(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Email {
     var _supportsSpacingProps: boolean;

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

@@ -4,7 +4,7 @@ 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, { useContext, useMemo } from 'react';
-import StringComponent from '../String';
+import StringField from '../String';
 import SharedContext from '../../../../shared/Context';
 function Email(props) {
   const sharedContext = useContext(SharedContext);
@@ -13,7 +13,7 @@ function Email(props) {
     required: tr.emailErrorRequired,
     pattern: tr.emailErrorPattern
   }, props.errorMessages), [tr, props.errorMessages]);
-  const stringComponentProps = _objectSpread(_objectSpread({
+  const StringFieldProps = _objectSpread(_objectSpread({
     label: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.emailLabel,
     autoComplete: 'email',
     inputMode: 'email',
@@ -22,7 +22,7 @@ function Email(props) {
   }, props), {}, {
     errorMessages
   });
-  return React.createElement(StringComponent, stringComponentProps);
+  return React.createElement(StringField, StringFieldProps);
 }
 Email._supportsSpacingProps = true;
 export default Email;

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

@@ -1 +1 @@
-{"version":3,"file":"Email.js","names":["React","useContext","useMemo","StringComponent","SharedContext","Email","props","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","emailErrorRequired","pattern","emailErrorPattern","stringComponentProps","label","emailLabel","autoComplete","inputMode","trim","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Email/Email.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps\n\nfunction Email(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.emailErrorRequired,\n      pattern: tr.emailErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const stringComponentProps: Props = {\n    label: sharedContext?.translation.Forms.emailLabel,\n    autoComplete: 'email',\n    inputMode: 'email',\n    pattern:\n      \"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$\",\n    trim: true,\n    ...props,\n    errorMessages,\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nEmail._supportsSpacingProps = true\nexport default Email\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAC3B,MAAMC,aAAa,GAAGN,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMI,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAMC,aAAa,GAAGT,OAAO,CAC3B,MAAAU,aAAA;IACEC,QAAQ,EAAEL,EAAE,CAACM,kBAAkB;IAC/BC,OAAO,EAAEP,EAAE,CAACQ;EAAiB,GAC1BV,KAAK,CAACK,aAAa,CACtB,EACF,CAACH,EAAE,EAAEF,KAAK,CAACK,aAAa,CAC1B,CAAC;EAED,MAAMM,oBAA2B,GAAAL,aAAA,CAAAA,aAAA;IAC/BM,KAAK,EAAEX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACS,UAAU;IAClDC,YAAY,EAAE,OAAO;IACrBC,SAAS,EAAE,OAAO;IAClBN,OAAO,EACL,qEAAqE;IACvEO,IAAI,EAAE;EAAI,GACPhB,KAAK;IACRK;EAAa,EACd;EAED,OAAOX,KAAA,CAAAuB,aAAA,CAACpB,eAAe,EAAKc,oBAAuB,CAAC;AACtD;AAEAZ,KAAK,CAACmB,qBAAqB,GAAG,IAAI;AAClC,eAAenB,KAAK"}
+{"version":3,"file":"Email.js","names":["React","useContext","useMemo","StringField","SharedContext","Email","props","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","emailErrorRequired","pattern","emailErrorPattern","StringFieldProps","label","emailLabel","autoComplete","inputMode","trim","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Email/Email.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringFieldProps\n\nfunction Email(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.emailErrorRequired,\n      pattern: tr.emailErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const StringFieldProps: Props = {\n    label: sharedContext?.translation.Forms.emailLabel,\n    autoComplete: 'email',\n    inputMode: 'email',\n    pattern:\n      \"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$\",\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,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAC3B,MAAMC,aAAa,GAAGN,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMI,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAMC,aAAa,GAAGT,OAAO,CAC3B,MAAAU,aAAA;IACEC,QAAQ,EAAEL,EAAE,CAACM,kBAAkB;IAC/BC,OAAO,EAAEP,EAAE,CAACQ;EAAiB,GAC1BV,KAAK,CAACK,aAAa,CACtB,EACF,CAACH,EAAE,EAAEF,KAAK,CAACK,aAAa,CAC1B,CAAC;EAED,MAAMM,gBAAuB,GAAAL,aAAA,CAAAA,aAAA;IAC3BM,KAAK,EAAEX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACS,UAAU;IAClDC,YAAY,EAAE,OAAO;IACrBC,SAAS,EAAE,OAAO;IAClBN,OAAO,EACL,qEAAqE;IACvEO,IAAI,EAAE;EAAI,GACPhB,KAAK;IACRK;EAAa,EACd;EAED,OAAOX,KAAA,CAAAuB,aAAA,CAACpB,WAAW,EAAKc,gBAAmB,CAAC;AAC9C;AAEAZ,KAAK,CAACmB,qBAAqB,GAAG,IAAI;AAClC,eAAenB,KAAK"}

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

@@ -1,5 +1,5 @@
 import { FieldHelpProps, FieldProps } from '../../types';
-export type ExpiryProps = FieldProps<string> & FieldHelpProps;
+export type ExpiryProps = FieldHelpProps & FieldProps<string>;
 declare function Expiry(props: ExpiryProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Expiry {
     var _supportsEufemiaSpacingProps: boolean;

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

@@ -4,8 +4,7 @@ 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, { useContext, useRef } from 'react';
-import { makeUniqueId } from '../../../../shared/component-helper';
+import React, { useCallback, useContext, useMemo } from 'react';
 import SharedContext from '../../../../shared/Context';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import { useDataValue } from '../../hooks';
@@ -16,73 +15,84 @@ import { HelpButton } from '../../../../components';
 function Expiry(props) {
   var _value$substring;
   const sharedContext = useContext(SharedContext);
+  const translations = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const placeholders = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.DatePicker.placeholder_characters;
+  const errorMessages = useMemo(() => _objectSpread({
+    required: translations.dateErrorRequired
+  }, props.errorMessages), [translations, props.errorMessages]);
+  const validateRequired = useCallback((value, {
+    required,
+    error
+  }) => {
+    return required && !value ? error : undefined;
+  }, []);
+  const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    errorMessages,
+    fromInput: toExpiryString,
+    validateRequired
+  });
   const {
-    id: propsId,
+    id,
     className,
-    label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.expiryLabel,
+    label = translations.expiryLabel,
     error,
+    hasError,
     info,
     warning,
     help,
     disabled,
     value = '',
     labelDescription,
-    labelSecondary,
     layout = 'vertical',
-    required,
+    ariaAttributes,
     handleFocus,
     handleBlur,
     handleChange
-  } = useDataValue(_objectSpread(_objectSpread({}, props), {}, {
-    emptyValue: ''
-  }));
+  } = useDataValue(_objectSpread({}, 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 idRef = useRef(propsId || makeUniqueId()).current;
-  const status = error ? 'error' : warning ? 'warn' : info ? 'info' : null;
+  const status = hasError ? 'error' : warning ? 'warn' : info ? 'info' : null;
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-expiry', className),
-    labelSecondary: labelSecondary,
+    forId: `${id}-input-month`,
+    label: label,
+    layout: layout,
     labelDescription: labelDescription,
     info: info,
     warning: warning,
     error: error
   }, pickSpacingProps(props)), React.createElement(MultiInputMask, {
     stretch: true,
-    id: `${idRef}__input`,
-    label: label,
-    labelDirection: layout,
+    id: `${id}-input`,
     values: expiry,
     status: status,
     statusState: disabled ? 'disabled' : undefined,
     disabled: disabled,
-    required: required,
-    onChange: expiry => handleChange(expiryToString(expiry)),
+    onChange: handleChange,
     onBlur: handleBlur,
     onFocus: handleFocus,
     delimiter: "/",
     inputMode: "numeric",
-    inputs: [{
+    inputs: [_objectSpread({
       id: 'month',
       label: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.DatePicker['month'],
       mask: getMonthMask(expiry === null || expiry === void 0 ? void 0 : expiry.month),
       placeholderCharacter: placeholders['month'],
       autoComplete: 'cc-exp-month'
-    }, {
+    }, ariaAttributes), _objectSpread({
       id: 'year',
       label: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.DatePicker['year'],
       mask: [/[0-9]/, /[0-9]/],
       placeholderCharacter: placeholders['year'],
       autoComplete: 'cc-exp-year'
-    }],
+    }, ariaAttributes)],
     suffix: help ? React.createElement(HelpButton, {
       title: help.title
-    }, help.contents) : undefined
+    }, help.content) : undefined
   }));
-  function expiryToString(values) {
+  function toExpiryString(values) {
     return Object.values(values).join('');
   }
   function ensureValidMonth(month) {

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

@@ -1 +1 @@
-{"version":3,"file":"Expiry.js","names":["React","useContext","useRef","makeUniqueId","SharedContext","pickSpacingProps","useDataValue","classnames","FieldBlock","MultiInputMask","HelpButton","Expiry","props","_value$substring","sharedContext","placeholders","translation","DatePicker","placeholder_characters","id","propsId","className","label","Forms","expiryLabel","error","info","warning","help","disabled","value","labelDescription","labelSecondary","layout","required","handleFocus","handleBlur","handleChange","_objectSpread","emptyValue","expiry","month","ensureValidMonth","substring","year","idRef","current","status","createElement","_extends","stretch","labelDirection","values","statusState","undefined","onChange","expiryToString","onBlur","onFocus","delimiter","inputMode","inputs","mask","getMonthMask","placeholderCharacter","autoComplete","suffix","title","contents","Object","join","firstMask","secondMask","firstDigit","charAt","isFirstDigitValid","test","seconDigit","isSecondDigitValid","_supportsEufemiaSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Expiry/Expiry.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useDataValue } 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'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldProps<string> & FieldHelpProps\n\nfunction Expiry(props: ExpiryProps) {\n  const sharedContext = useContext(SharedContext)\n  const placeholders =\n    sharedContext?.translation.DatePicker.placeholder_characters\n\n  const {\n    id: propsId,\n    className,\n    label = sharedContext?.translation.Forms.expiryLabel,\n    error,\n    info,\n    warning,\n    help,\n    disabled,\n    value = '',\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    required,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue({\n    ...props,\n    emptyValue: '',\n  })\n\n  const expiry: ExpiryValue = {\n    month: ensureValidMonth(value?.substring(0, 2)),\n    year: value?.substring(2, 4) ?? '',\n  }\n\n  const idRef = useRef(propsId || makeUniqueId()).current\n\n  const status = error ? 'error' : warning ? 'warn' : info ? 'info' : null\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-expiry', className)}\n      labelSecondary={labelSecondary}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <MultiInputMask\n        stretch\n        id={`${idRef}__input`}\n        label={label}\n        labelDirection={layout}\n        values={expiry}\n        status={status}\n        statusState={disabled ? 'disabled' : undefined}\n        disabled={disabled}\n        required={required}\n        onChange={(expiry) => handleChange(expiryToString(expiry))}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        delimiter=\"/\"\n        inputMode=\"numeric\"\n        inputs={[\n          {\n            id: 'month',\n            label: sharedContext?.translation.DatePicker['month'],\n            mask: getMonthMask(expiry?.month),\n            placeholderCharacter: placeholders['month'],\n            autoComplete: 'cc-exp-month',\n          },\n          {\n            id: 'year',\n            label: sharedContext?.translation.DatePicker['year'],\n            mask: [/[0-9]/, /[0-9]/],\n            placeholderCharacter: placeholders['year'],\n            autoComplete: 'cc-exp-year',\n          },\n        ]}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n\n  function expiryToString(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 seconDigit = month?.charAt(1)\n    const isSecondDigitValid = secondMask.test(seconDigit)\n\n    if (seconDigit && !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","useContext","useMemo","SharedContext","pickSpacingProps","useDataValue","classnames","FieldBlock","MultiInputMask","HelpButton","Expiry","props","_value$substring","sharedContext","translations","translation","Forms","placeholders","DatePicker","placeholder_characters","errorMessages","_objectSpread","required","dateErrorRequired","validateRequired","value","error","undefined","preparedProps","fromInput","toExpiryString","id","className","label","expiryLabel","hasError","info","warning","help","disabled","labelDescription","layout","ariaAttributes","handleFocus","handleBlur","handleChange","expiry","month","ensureValidMonth","substring","year","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","seconDigit","isSecondDigitValid","_supportsEufemiaSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Expiry/Expiry.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport SharedContext from '../../../../shared/Context'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useDataValue } 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'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldHelpProps & FieldProps<string>\n\nfunction Expiry(props: ExpiryProps) {\n  const sharedContext = useContext(SharedContext)\n  const translations = sharedContext?.translation.Forms\n  const placeholders =\n    sharedContext?.translation.DatePicker.placeholder_characters\n\n  const errorMessages = useMemo(\n    () => ({\n      required: translations.dateErrorRequired,\n      ...props.errorMessages,\n    }),\n    [translations, 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    className,\n    label = translations.expiryLabel,\n    error,\n    hasError,\n    info,\n    warning,\n    help,\n    disabled,\n    value = '',\n    labelDescription,\n    layout = 'vertical',\n    ariaAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue({\n    ...preparedProps,\n  })\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      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: sharedContext?.translation.DatePicker['month'],\n            mask: getMonthMask(expiry?.month),\n            placeholderCharacter: placeholders['month'],\n            autoComplete: 'cc-exp-month',\n            ...ariaAttributes,\n          },\n          {\n            id: 'year',\n            label: sharedContext?.translation.DatePicker['year'],\n            mask: [/[0-9]/, /[0-9]/],\n            placeholderCharacter: placeholders['year'],\n            autoComplete: 'cc-exp-year',\n            ...ariaAttributes,\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 seconDigit = month?.charAt(1)\n    const isSecondDigitValid = secondMask.test(seconDigit)\n\n    if (seconDigit && !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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"}

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

@@ -1,5 +1,5 @@
-import { Props as StringComponentProps } from '../String';
-export type Props = StringComponentProps & {
+import { Props as StringFieldProps } from '../String';
+export type Props = StringFieldProps & {
     omitMask?: boolean;
     validate?: boolean;
 };

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

@@ -4,7 +4,7 @@ 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, { useContext, useMemo } from 'react';
-import StringComponent from '../String';
+import StringField from '../String';
 import SharedContext from '../../../../shared/Context';
 function NationalIdentityNumber(props) {
   var _props$pattern, _props$label, _props$width;
@@ -20,7 +20,7 @@ function NationalIdentityNumber(props) {
     pattern: errorMessage
   }, props.errorMessages), [errorMessage, props.errorMessages]);
   const mask = useMemo(() => omitMask ? Array(11).fill(/\d/) : [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, /\d/], [omitMask]);
-  const stringComponentProps = _objectSpread(_objectSpread({}, props), {}, {
+  const StringFieldProps = _objectSpread(_objectSpread({}, props), {}, {
     pattern: (_props$pattern = props.pattern) !== null && _props$pattern !== void 0 ? _props$pattern : validate && !props.validator ? '^[0-9]{11}$' : undefined,
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.nationalIdentityNumberLabel,
     errorMessages,
@@ -28,7 +28,7 @@ function NationalIdentityNumber(props) {
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium',
     inputMode: 'numeric'
   });
-  return React.createElement(StringComponent, stringComponentProps);
+  return React.createElement(StringField, StringFieldProps);
 }
 NationalIdentityNumber._supportsSpacingProps = true;
 export default NationalIdentityNumber;