@dnb/eufemia 10.13.0 → 10.14.0

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","PhoneNumber","props","sharedContext","defaultProps","value","errorMessages","_objectSpread","required","translation","Forms","phoneNumberErrorRequired","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","layout","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","help","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","getCountryData","filter","_sharedContext$locale","lang","locale","split","cdc","sort","i18n","a","b","map","country","makeObject","singleCountryCodeData","handleCountryCodeChange","data","_data$selectedKey$tri","_data$selectedKey","selectedKey","trim","Boolean","join","handleNumberChange","onFocusHandler","dataList","updateData","length","createElement","_extends","Horizontal","label_direction","mode","on_focus","on_blur","on_change","independent_width","search_numbers","no_animation","noAnimation","stretch","type","mask","onFocus","onBlur","onChange","_country$i18n$lang","selected_value","iso","content","en","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries from '../../constants/countries'\nimport StringComponent from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    width?: 'large' | 'stretch'\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n  } & {\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const defaultProps: Partial<Props> = {\n    // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n    // back to +47 once the user empty the field so handleChange send out undefined.\n    value: '+47',\n    errorMessages: {\n      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    layout = 'vertical',\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    numberMask,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    help,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n  } = useDataValue(preparedProps)\n\n  const [, countryCode, phoneNumber] =\n    value !== undefined\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n\n  const getCountryData = ({ filter = null } = {}) => {\n    const lang = sharedContext.locale?.split('-')[0]\n    return countries\n      .filter(({ cdc }) => !filter || `+${cdc}` === filter)\n      .sort(({ i18n: a }, { i18n: b }) => (a[lang] > b[lang] ? 1 : -1))\n      .map((country) => makeObject(country, lang))\n  }\n\n  const singleCountryCodeData = useMemo(() => {\n    return getCountryData({ filter: countryCode })\n  }, [])\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = data?.selectedKey?.trim() ?? emptyValue\n\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onCountryCodeChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onCountryCodeChange?.(countryCode)\n    },\n    [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (phoneNumber: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onNumberChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onNumberChange?.(phoneNumber)\n    },\n    [countryCode, emptyValue, handleChange, onNumberChange]\n  )\n\n  const onFocusHandler = ({ dataList, updateData }) => {\n    // because there can be more than one country with same cdc\n    if (dataList.length < 10) {\n      updateData(getCountryData())\n    }\n    handleFocus()\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={width !== 'stretch' ? width : undefined}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal>\n        <Autocomplete\n          className={classnames(\n            'dnb-forms-field-phone-number__country-code',\n            countryCodeFieldClassName\n          )}\n          placeholder={countryCodePlaceholder ?? ' '}\n          label_direction={layout}\n          label={\n            countryCodeLabel ??\n            sharedContext?.translation.Forms.countryCodeLabel\n          }\n          mode=\"async\"\n          data={singleCountryCodeData}\n          value={countryCode}\n          disabled={disabled}\n          on_focus={onFocusHandler}\n          on_blur={handleBlur}\n          on_change={handleCountryCodeChange}\n          independent_width\n          search_numbers\n          no_animation={props.noAnimation}\n          stretch={width === 'stretch'}\n        />\n\n        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          emptyValue=\"\"\n          layout=\"vertical\"\n          label={label ?? ' '}\n          placeholder={placeholder ?? '00 00 00 00'}\n          mask={\n            numberMask ?? [\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n            ]\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={phoneNumber}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width=\"stretch\"\n          help={help}\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\ntype CountryType = {\n  cdc: string\n  iso: string\n  i18n: {\n    en: string\n  }\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: `+${country.cdc}`,\n    selected_value: `${country.iso} (+${country.cdc})`,\n    content: `+${country.cdc} ${country.i18n[lang] ?? country.i18n.en}`,\n  }\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","PhoneNumber","props","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","phoneNumberErrorRequired","defaultProps","value","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","singleCountryCodeData","_sharedContext$locale","getCountryData","lang","locale","split","filter","handleCountryCodeChange","data","_data$selectedKey$tri","_data$selectedKey","selectedKey","trim","Boolean","join","handleNumberChange","onFocusHandler","dataList","updateData","length","_sharedContext$locale2","createElement","_extends","Horizontal","label_direction","on_focus","on_blur","on_change","independent_width","search_numbers","keep_value_and_selection","no_animation","noAnimation","stretch","type","layout","mask","onFocus","onBlur","onChange","makeObject","country","_country$i18n$lang","cdc","selected_value","iso","content","i18n","en","sort","a","b","map","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries from '../../constants/countries'\nimport StringComponent from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    width?: 'large' | 'stretch'\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n  } & {\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const defaultProps: Partial<Props> = {\n    // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n    // back to +47 once the user empty the field so handleChange send out undefined.\n    value: '+47',\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    numberMask,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    help,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n  } = useDataValue(preparedProps)\n\n  const [, countryCode, phoneNumber] =\n    value !== undefined\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n\n  const singleCountryCodeData = useMemo(() => {\n    return getCountryData({\n      lang: sharedContext.locale?.split('-')[0],\n      filter: countryCode,\n    })\n  }, [])\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = data?.selectedKey?.trim() ?? emptyValue\n\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onCountryCodeChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onCountryCodeChange?.(countryCode)\n    },\n    [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (phoneNumber: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onNumberChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onNumberChange?.(phoneNumber)\n    },\n    [countryCode, emptyValue, handleChange, onNumberChange]\n  )\n\n  const onFocusHandler = ({ dataList, updateData }) => {\n    // because there can be more than one country with same cdc\n    if (dataList.length < 10) {\n      updateData(\n        getCountryData({ lang: sharedContext.locale?.split('-')[0] })\n      )\n    }\n    handleFocus()\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={width !== 'stretch' ? width : undefined}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal>\n        <Autocomplete\n          className={classnames(\n            'dnb-forms-field-phone-number__country-code',\n            countryCodeFieldClassName\n          )}\n          placeholder={countryCodePlaceholder ?? ' '}\n          label_direction=\"vertical\"\n          label={\n            countryCodeLabel ??\n            sharedContext?.translation.Forms.countryCodeLabel\n          }\n          data={singleCountryCodeData}\n          value={countryCode}\n          disabled={disabled}\n          on_focus={onFocusHandler}\n          on_blur={handleBlur}\n          on_change={handleCountryCodeChange}\n          independent_width\n          search_numbers\n          keep_value_and_selection\n          no_animation={props.noAnimation}\n          stretch={width === 'stretch'}\n        />\n\n        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          emptyValue=\"\"\n          layout=\"vertical\"\n          label={label ?? ' '}\n          placeholder={placeholder ?? '00 00 00 00'}\n          mask={\n            numberMask ?? [\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n            ]\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={phoneNumber}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width=\"stretch\"\n          help={help}\n          required={required}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\ntype CountryType = {\n  cdc: string\n  iso: string\n  i18n: {\n    en: string\n  }\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: `+${country.cdc}`,\n    selected_value: `${country.iso} (+${country.cdc})`,\n    content: `+${country.cdc} ${country.i18n[lang] ?? country.i18n.en}`,\n  }\n}\n\nfunction getCountryData({ lang = 'en', filter = null } = {}) {\n  return countries\n    .filter(({ cdc }) => !filter || `+${cdc}` === filter)\n    .sort(({ i18n: a }, { i18n: b }) => (a[lang] > b[lang] ? 1 : -1))\n    .map((country) => makeObject(country, lang))\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

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

@@ -11,12 +11,14 @@ import SharedContext from '../../../../shared/Context';
 function SelectCountry(props) {
   var _props$placeholder, _props$label, _sharedContext$locale;
   const sharedContext = useContext(SharedContext);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const errorMessages = useMemo(() => _objectSpread({
+    required: tr.selectCountryErrorRequired
+  }, props.errorMessages), [tr, props.errorMessages]);
   const selectComponentProps = _objectSpread(_objectSpread({}, props), {}, {
     placeholder: (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryPlaceholder,
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryLabel,
-    errorMessages: _objectSpread({
-      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryErrorRequired
-    }, props.errorMessages)
+    errorMessages
   });
   const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
   const countryOptions = useMemo(() => countries.map(country => {
@@ -26,7 +28,7 @@ function SelectCountry(props) {
       value: country.iso,
       title: (_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en
     });
-  }), [sharedContext.locale]);
+  }), [lang]);
   return React.createElement(Selection, selectComponentProps, countryOptions);
 }
 SelectCountry._supportsSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectCountry.js","names":["React","useContext","useMemo","Selection","Option","countries","SharedContext","SelectCountry","props","_props$placeholder","_props$label","_sharedContext$locale","sharedContext","selectComponentProps","_objectSpread","placeholder","translation","Forms","selectCountryPlaceholder","label","selectCountryLabel","errorMessages","required","selectCountryErrorRequired","lang","locale","split","countryOptions","map","country","_country$i18n$lang","createElement","key","iso","value","title","i18n","en","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport Selection, { Props as SelectionProps } from '../Selection'\nimport Option from '../Option'\nimport countries from '../../constants/countries'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = SelectionProps\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const selectComponentProps: Props = {\n    ...props,\n    placeholder:\n      props.placeholder ??\n      sharedContext?.translation.Forms.selectCountryPlaceholder,\n    label:\n      props.label ?? sharedContext?.translation.Forms.selectCountryLabel,\n    errorMessages: {\n      required:\n        sharedContext?.translation.Forms.selectCountryErrorRequired,\n      ...props.errorMessages,\n    },\n  }\n\n  const lang = sharedContext.locale?.split('-')[0]\n  const countryOptions = useMemo(\n    () =>\n      countries.map((country) => (\n        <Option\n          key={country.iso}\n          value={country.iso}\n          title={country.i18n[lang] ?? country.i18n.en}\n        />\n      )),\n    [sharedContext.locale]\n  )\n\n  return <Selection {...selectComponentProps}>{countryOptions}</Selection>\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAmC,cAAc;AACjE,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,kBAAA,EAAAC,YAAA,EAAAC,qBAAA;EACnC,MAAMC,aAAa,GAAGX,UAAU,CAACK,aAAa,CAAC;EAE/C,MAAMO,oBAA2B,GAAAC,aAAA,CAAAA,aAAA,KAC5BN,KAAK;IACRO,WAAW,GAAAN,kBAAA,GACTD,KAAK,CAACO,WAAW,cAAAN,kBAAA,cAAAA,kBAAA,GACjBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC,wBAAwB;IAC3DC,KAAK,GAAAT,YAAA,GACHF,KAAK,CAACW,KAAK,cAAAT,YAAA,cAAAA,YAAA,GAAIE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACG,kBAAkB;IACpEC,aAAa,EAAAP,aAAA;MACXQ,QAAQ,EACNV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACM;IAA0B,GAC1Df,KAAK,CAACa,aAAa;EACvB,EACF;EAED,MAAMG,IAAI,IAAAb,qBAAA,GAAGC,aAAa,CAACa,MAAM,cAAAd,qBAAA,uBAApBA,qBAAA,CAAsBe,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAChD,MAAMC,cAAc,GAAGzB,OAAO,CAC5B,MACEG,SAAS,CAACuB,GAAG,CAAEC,OAAO;IAAA,IAAAC,kBAAA;IAAA,OACpB9B,KAAA,CAAA+B,aAAA,CAAC3B,MAAM;MACL4B,GAAG,EAAEH,OAAO,CAACI,GAAI;MACjBC,KAAK,EAAEL,OAAO,CAACI,GAAI;MACnBE,KAAK,GAAAL,kBAAA,GAAED,OAAO,CAACO,IAAI,CAACZ,IAAI,CAAC,cAAAM,kBAAA,cAAAA,kBAAA,GAAID,OAAO,CAACO,IAAI,CAACC;IAAG,CAC9C,CAAC;EAAA,CACH,CAAC,EACJ,CAACzB,aAAa,CAACa,MAAM,CACvB,CAAC;EAED,OAAOzB,KAAA,CAAA+B,aAAA,CAAC5B,SAAS,EAAKU,oBAAoB,EAAGc,cAA0B,CAAC;AAC1E;AAEApB,aAAa,CAAC+B,qBAAqB,GAAG,IAAI;AAC1C,eAAe/B,aAAa"}
+{"version":3,"file":"SelectCountry.js","names":["React","useContext","useMemo","Selection","Option","countries","SharedContext","SelectCountry","props","_props$placeholder","_props$label","_sharedContext$locale","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","selectCountryErrorRequired","selectComponentProps","placeholder","selectCountryPlaceholder","label","selectCountryLabel","lang","locale","split","countryOptions","map","country","_country$i18n$lang","createElement","key","iso","value","title","i18n","en","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport Selection, { Props as SelectionProps } from '../Selection'\nimport Option from '../Option'\nimport countries from '../../constants/countries'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = SelectionProps\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.selectCountryErrorRequired,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const selectComponentProps: Props = {\n    ...props,\n    placeholder:\n      props.placeholder ??\n      sharedContext?.translation.Forms.selectCountryPlaceholder,\n    label:\n      props.label ?? sharedContext?.translation.Forms.selectCountryLabel,\n    errorMessages,\n  }\n\n  const lang = sharedContext.locale?.split('-')[0]\n  const countryOptions = useMemo(\n    () =>\n      countries.map((country) => (\n        <Option\n          key={country.iso}\n          value={country.iso}\n          title={country.i18n[lang] ?? country.i18n.en}\n        />\n      )),\n    [lang]\n  )\n\n  return <Selection {...selectComponentProps}>{countryOptions}</Selection>\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAmC,cAAc;AACjE,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,kBAAA,EAAAC,YAAA,EAAAC,qBAAA;EACnC,MAAMC,aAAa,GAAGX,UAAU,CAACK,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAMC,aAAa,GAAGd,OAAO,CAC3B,MAAAe,aAAA;IACEC,QAAQ,EAAEL,EAAE,CAACM;EAA0B,GACpCX,KAAK,CAACQ,aAAa,CACtB,EACF,CAACH,EAAE,EAAEL,KAAK,CAACQ,aAAa,CAC1B,CAAC;EAED,MAAMI,oBAA2B,GAAAH,aAAA,CAAAA,aAAA,KAC5BT,KAAK;IACRa,WAAW,GAAAZ,kBAAA,GACTD,KAAK,CAACa,WAAW,cAAAZ,kBAAA,cAAAA,kBAAA,GACjBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACO,wBAAwB;IAC3DC,KAAK,GAAAb,YAAA,GACHF,KAAK,CAACe,KAAK,cAAAb,YAAA,cAAAA,YAAA,GAAIE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACS,kBAAkB;IACpER;EAAa,EACd;EAED,MAAMS,IAAI,IAAAd,qBAAA,GAAGC,aAAa,CAACc,MAAM,cAAAf,qBAAA,uBAApBA,qBAAA,CAAsBgB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAChD,MAAMC,cAAc,GAAG1B,OAAO,CAC5B,MACEG,SAAS,CAACwB,GAAG,CAAEC,OAAO;IAAA,IAAAC,kBAAA;IAAA,OACpB/B,KAAA,CAAAgC,aAAA,CAAC5B,MAAM;MACL6B,GAAG,EAAEH,OAAO,CAACI,GAAI;MACjBC,KAAK,EAAEL,OAAO,CAACI,GAAI;MACnBE,KAAK,GAAAL,kBAAA,GAAED,OAAO,CAACO,IAAI,CAACZ,IAAI,CAAC,cAAAM,kBAAA,cAAAA,kBAAA,GAAID,OAAO,CAACO,IAAI,CAACC;IAAG,CAC9C,CAAC;EAAA,CACH,CAAC,EACJ,CAACb,IAAI,CACP,CAAC;EAED,OAAOzB,KAAA,CAAAgC,aAAA,CAAC7B,SAAS,EAAKiB,oBAAoB,EAAGQ,cAA0B,CAAC;AAC1E;AAEArB,aAAa,CAACgC,qBAAqB,GAAG,IAAI;AAC1C,eAAehC,aAAa"}

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

@@ -4,7 +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 } from 'react';
+import React, { useContext, useMemo, useCallback } from 'react';
 import classnames from 'classnames';
 import { HelpButton, Input, Textarea } from '../../../../components';
 import InputMasked from '../../../../components/InputMasked';
@@ -13,30 +13,40 @@ import FieldBlock from '../../FieldBlock';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 function StringComponent(props) {
-  var _props$minLength, _props$maxLength, _props$schema, _props$width, _value$length, _value$length2, _value$toString;
+  var _props$width, _value$length, _value$length2, _value$toString;
   const sharedContext = useContext(SharedContext);
-  const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
-    errorMessages: _objectSpread({
-      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.inputErrorRequired,
-      minLength: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stringInputErrorMinLength.replace('{minLength}', (_props$minLength = props.minLength) === null || _props$minLength === void 0 ? void 0 : _props$minLength.toString()),
-      maxLength: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stringInputErrorMaxLength.replace('{maxLength}', (_props$maxLength = props.maxLength) === null || _props$maxLength === void 0 ? void 0 : _props$maxLength.toString()),
-      pattern: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.inputErrorPattern
-    }, props.errorMessages),
-    schema: (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const errorMessages = useMemo(() => {
+    var _props$minLength, _props$maxLength;
+    return _objectSpread({
+      required: tr.inputErrorRequired,
+      minLength: tr.stringInputErrorMinLength.replace('{minLength}', (_props$minLength = props.minLength) === null || _props$minLength === void 0 ? void 0 : _props$minLength.toString()),
+      maxLength: tr.stringInputErrorMaxLength.replace('{maxLength}', (_props$maxLength = props.maxLength) === null || _props$maxLength === void 0 ? void 0 : _props$maxLength.toString()),
+      pattern: tr.inputErrorPattern
+    }, props.errorMessages);
+  }, [tr, props.errorMessages, props.minLength, props.maxLength]);
+  const schema = useMemo(() => {
+    var _props$schema;
+    return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
       type: 'string',
       minLength: props.minLength,
       maxLength: props.maxLength,
       pattern: props.pattern
-    },
-    fromInput: ({
-      value,
-      cleanedValue
-    }) => {
-      if (value === '') {
-        return props.emptyValue;
-      }
-      return cleanedValue !== null && cleanedValue !== void 0 ? cleanedValue : value;
-    },
+    };
+  }, [props.schema, props.minLength, props.maxLength, props.pattern]);
+  const fromInput = useCallback(({
+    value,
+    cleanedValue
+  }) => {
+    if (value === '') {
+      return props.emptyValue;
+    }
+    return cleanedValue !== null && cleanedValue !== void 0 ? cleanedValue : value;
+  }, [props.emptyValue]);
+  const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    errorMessages,
+    schema,
+    fromInput,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'large'
   });
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","StringComponent","props","_props$minLength","_props$maxLength","_props$schema","_props$width","_value$length","_value$length2","_value$toString","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","value","cleanedValue","emptyValue","width","id","name","className","autoComplete","innerRef","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","help","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","handleFocus","handleBlur","handleChange","characterCounterElement","length","undefined","cn","sharedProps","suffix","createElement","title","contents","on_focus","on_blur","on_change","stretch","inner_ref","status","_extends","forId","contentsWidth","autoresize_max_rows","icon","icon_position","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    clear?: boolean\n    autoresize?: boolean\n    autoComplete?: HTMLInputElement['autocomplete']\n    autoresizeMaxRows?: number\n    characterCounter?: boolean\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: {\n      required: sharedContext?.translation.Forms.inputErrorRequired,\n      minLength:\n        sharedContext?.translation.Forms.stringInputErrorMinLength.replace(\n          '{minLength}',\n          props.minLength?.toString()\n        ),\n      maxLength:\n        sharedContext?.translation.Forms.stringInputErrorMaxLength.replace(\n          '{maxLength}',\n          props.maxLength?.toString()\n        ),\n      pattern: sharedContext?.translation.Forms.inputErrorPattern,\n      ...props.errorMessages,\n    },\n    schema: props.schema ?? {\n      type: 'string',\n      minLength: props.minLength,\n      maxLength: props.maxLength,\n      pattern: props.pattern,\n    },\n    fromInput: ({\n      value,\n      cleanedValue,\n    }: {\n      value: string\n      cleanedValue: string\n    }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return cleanedValue ?? value\n    },\n    width: props.width ?? 'large',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    innerRef,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const characterCounterElement = characterCounter\n    ? props.maxLength\n      ? `${value?.length ?? '0'}/${props.maxLength}`\n      : `${value?.length ?? '0'}`\n    : undefined\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps = {\n    id,\n    name,\n    autoComplete,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.contents}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled: disabled,\n    stretch: width !== undefined,\n    inner_ref: innerRef,\n    status: error ? 'error' : undefined,\n    value: value?.toString() ?? '',\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary ?? characterCounterElement}\n      info={info}\n      warning={warning}\n      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          {...sharedProps}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n        />\n      ) : mask ? (\n        <InputMasked\n          {...sharedProps}\n          mask={mask}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n        />\n      ) : (\n        <Input\n          {...sharedProps}\n          type={type}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
+{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","StringComponent","props","_props$width","_value$length","_value$length2","_value$toString","sharedContext","tr","translation","Forms","errorMessages","_props$minLength","_props$maxLength","_objectSpread","required","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","_props$schema","type","fromInput","value","cleanedValue","emptyValue","preparedProps","width","id","name","className","autoComplete","innerRef","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","help","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","handleFocus","handleBlur","handleChange","characterCounterElement","length","undefined","cn","sharedProps","suffix","createElement","title","contents","on_focus","on_blur","on_change","stretch","inner_ref","status","_extends","forId","contentsWidth","autoresize_max_rows","icon","icon_position","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { JSONSchema7 } from 'json-schema'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    clear?: boolean\n    autoresize?: boolean\n    autoComplete?: HTMLInputElement['autocomplete']\n    autoresizeMaxRows?: number\n    characterCounter?: boolean\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minLength: tr.stringInputErrorMinLength.replace(\n        '{minLength}',\n        props.minLength?.toString()\n      ),\n      maxLength: tr.stringInputErrorMaxLength.replace(\n        '{maxLength}',\n        props.maxLength?.toString()\n      ),\n      pattern: tr.inputErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages, props.minLength, props.maxLength]\n  )\n  const schema = useMemo<JSONSchema7>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    ({ value, cleanedValue }: { value: string; cleanedValue: string }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return cleanedValue ?? value\n    },\n    [props.emptyValue]\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput,\n    width: props.width ?? 'large',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    innerRef,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const characterCounterElement = characterCounter\n    ? props.maxLength\n      ? `${value?.length ?? '0'}/${props.maxLength}`\n      : `${value?.length ?? '0'}`\n    : undefined\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps = {\n    id,\n    name,\n    autoComplete,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.contents}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled: disabled,\n    stretch: width !== undefined,\n    inner_ref: innerRef,\n    status: error ? 'error' : undefined,\n    value: value?.toString() ?? '',\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary ?? characterCounterElement}\n      info={info}\n      warning={warning}\n      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          {...sharedProps}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n        />\n      ) : mask ? (\n        <InputMasked\n          {...sharedProps}\n          mask={mask}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n        />\n      ) : (\n        <Input\n          {...sharedProps}\n          type={type}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

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

@@ -14,3 +14,4 @@ export { default as ArraySelection } from './ArraySelection';
 export { default as Option } from './Option';
 export { default as SelectCountry } from './SelectCountry';
 export { default as BankAccountNumber } from './BankAccountNumber';
+export { default as Expiry } from './Expiry';

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

@@ -14,4 +14,5 @@ export { default as ArraySelection } from './ArraySelection';
 export { default as Option } from './Option';
 export { default as SelectCountry } from './SelectCountry';
 export { default as BankAccountNumber } from './BankAccountNumber';
+export { default as Expiry } from './Expiry';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","String","Number","Toggle","Boolean","Currency","Date","Email","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU;AAC5C,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,OAAO,QAAQ,WAAW;AAC9C,SAASJ,OAAO,IAAIK,QAAQ,QAAQ,YAAY;AAChD,SAASL,OAAO,IAAIM,IAAI,QAAQ,QAAQ;AACxC,SAASN,OAAO,IAAIO,KAAK,QAAQ,SAAS;AAC1C,SAASP,OAAO,IAAIQ,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASR,OAAO,IAAIS,WAAW,QAAQ,eAAe;AACtD,SAAST,OAAO,IAAIU,kBAAkB,QAAQ,sBAAsB;AACpE,SAASV,OAAO,IAAIW,iBAAiB,QAAQ,qBAAqB;AAClE,SAASX,OAAO,IAAIY,SAAS,QAAQ,aAAa;AAClD,SAASZ,OAAO,IAAIa,cAAc,QAAQ,kBAAkB;AAC5D,SAASb,OAAO,IAAIc,MAAM,QAAQ,UAAU;AAC5C,SAASd,OAAO,IAAIe,aAAa,QAAQ,iBAAiB;AAC1D,SAASf,OAAO,IAAIgB,iBAAiB,QAAQ,qBAAqB"}
+{"version":3,"file":"index.js","names":["default","String","Number","Toggle","Boolean","Currency","Date","Email","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Expiry"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as Expiry } from './Expiry'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU;AAC5C,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,OAAO,QAAQ,WAAW;AAC9C,SAASJ,OAAO,IAAIK,QAAQ,QAAQ,YAAY;AAChD,SAASL,OAAO,IAAIM,IAAI,QAAQ,QAAQ;AACxC,SAASN,OAAO,IAAIO,KAAK,QAAQ,SAAS;AAC1C,SAASP,OAAO,IAAIQ,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASR,OAAO,IAAIS,WAAW,QAAQ,eAAe;AACtD,SAAST,OAAO,IAAIU,kBAAkB,QAAQ,sBAAsB;AACpE,SAASV,OAAO,IAAIW,iBAAiB,QAAQ,qBAAqB;AAClE,SAASX,OAAO,IAAIY,SAAS,QAAQ,aAAa;AAClD,SAASZ,OAAO,IAAIa,cAAc,QAAQ,kBAAkB;AAC5D,SAASb,OAAO,IAAIc,MAAM,QAAQ,UAAU;AAC5C,SAASd,OAAO,IAAIe,aAAa,QAAQ,iBAAiB;AAC1D,SAASf,OAAO,IAAIgB,iBAAiB,QAAQ,qBAAqB;AAClE,SAAShB,OAAO,IAAIiB,MAAM,QAAQ,UAAU"}

package/es/extensions/forms/Field/style/dnb-forms-field.css

@@ -77,4 +77,17 @@
   grid-column-gap: var(--spacing-small);
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
+}
+
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
+}
+
+.dnb-forms-field-expiry {
+  width: var(--forms-field-width--small);
+}
+.dnb-forms-field-expiry .dnb-input__shell {
+  justify-content: center;
 }

package/es/extensions/forms/Field/style/dnb-forms-field.min.css

@@ -1 +1 @@
-.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-postal-code-and-city--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-postal-code-and-city--width-large{width:var(--forms-field-width--large)}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:var(--forms-field-width--large)}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:var(--forms-field-width--medium)}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:var(--forms-field-width--small)}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);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{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}
+.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-postal-code-and-city--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-postal-code-and-city--width-large{width:var(--forms-field-width--large)}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:var(--forms-field-width--large)}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:var(--forms-field-width--medium)}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:var(--forms-field-width--small)}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);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{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}.dnb-forms-field-expiry{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-input__shell{justify-content:center}

package/es/extensions/forms/Field/style/dnb-forms-field.scss

@@ -2,3 +2,4 @@
 @import '../PostalCodeAndCity/style/dnb-postal-code-and-city.scss';
 @import '../Selection/style/dnb-selection.scss';
 @import '../ArraySelection/style/dnb-array-selection.scss';
+@import '../Expiry/style/dnb-expiry.scss';

package/es/extensions/forms/FieldBlock/FieldBlock.js

@@ -13,7 +13,7 @@ import classnames from 'classnames';
 import { Space, FormLabel, FormStatus } from '../../../components';
 import { FormError } from '../types';
 import FieldBlockContext from './FieldBlockContext';
-import { findElementInChildren } from '../../../shared/component-helper';
+import { findElementInChildren, warn } from '../../../shared/component-helper';
 function FieldBlock(props) {
   const nestedFieldBlockContext = useContext(FieldBlockContext);
   const {
@@ -83,7 +83,13 @@ function FieldBlock(props) {
   }, [errorProp, fieldErrorRecord, showFieldErrorRecord]);
   const mainClasses = classnames('dnb-forms-field-block', className, width !== undefined && `dnb-forms-field-block--width-${width}`);
   const gridClasses = `dnb-forms-field-block__grid dnb-forms-field-block--layout-${layout}`;
-  const enableFieldset = useMemo(() => label && (asFieldset || !nestedFieldBlockContext && findElementInChildren(children, child => child.props.label)), []);
+  const enableFieldset = useEnableFieldset({
+    label,
+    forId,
+    asFieldset,
+    children,
+    nestedFieldBlockContext
+  });
   const state = error || warning || info;
   const stateStatus = error ? 'error' : warning ? 'warn' : info ? 'info' : null;
   const Label = ({
@@ -91,7 +97,7 @@ function FieldBlock(props) {
   }) => {
     return React.createElement(FormLabel, {
       element: enableFieldset ? 'legend' : 'label',
-      for_id: enableFieldset ? undefined : forId,
+      forId: enableFieldset ? undefined : forId,
       space: {
         top: 0,
         bottom: 'x-small'
@@ -129,6 +135,33 @@ function FieldBlock(props) {
     }
   })))));
 }
+function useEnableFieldset({
+  label,
+  forId,
+  asFieldset,
+  children,
+  nestedFieldBlockContext
+}) {
+  return useMemo(() => {
+    let result = asFieldset;
+    if (label && !result && !nestedFieldBlockContext) {
+      let count = 0;
+      findElementInChildren(children, child => {
+        var _child$props, _child$type;
+        if (typeof (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.label) !== 'undefined' || (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type['_formElement']) === true) {
+          count++;
+        }
+        if (count > 1) {
+          return result = true;
+        }
+      });
+      if (forId && count > 1) {
+        warn(`You may not use forId="${forId}" as there where given several (${count}) form elements as children.`);
+      }
+    }
+    return Boolean(result);
+  }, [children]);
+}
 FieldBlock._supportsSpacingProps = true;
 export default FieldBlock;
 //# sourceMappingURL=FieldBlock.js.map

package/es/extensions/forms/FieldBlock/FieldBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","labelSecondary","asFieldset","info","warning","error","errorProp","width","contentsWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","id","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","child","state","stateStatus","Label","createElement","element","for_id","space","top","bottom","Provider","value","_extends","Fragment","text","toString","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport { findElementInChildren } from '../../../shared/component-helper'\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'labelSecondary'\n  | 'info'\n  | 'warning'\n  | 'error'\n> & {\n  forId?: string\n  contentClassName?: string\n  children: React.ReactNode\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  /** Typography size */\n  size?: 'medium' | 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    width,\n    contentsWidth,\n    size,\n    contentClassName,\n    children,\n    ...rest\n  } = props\n\n  const [fieldErrorRecord, setFieldErrorRecord] = useState<\n    Record<string, FormError>\n  >({})\n  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n    Record<string, boolean>\n  >({})\n\n  const setError = useCallback(\n    (id, error) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setError(id, error)\n        return\n      }\n\n      setFieldErrorRecord((existing) => {\n        if (error) {\n          return {\n            ...existing,\n            [id]: error,\n          }\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [id]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const setShowError = useCallback(\n    (id, show) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setShowError(id, show)\n        return\n      }\n\n      setShowFieldErrorRecord((existing) => {\n        if (show) {\n          return {\n            ...existing,\n            [id]: true,\n          }\n        } else {\n          const { [id]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const error = useMemo(() => {\n    if (errorProp) {\n      return errorProp\n    }\n    const errors = Object.entries(fieldErrorRecord)\n      .filter(([id]) => showFieldErrorRecord[id] === true)\n      .map(([, error]) => error)\n    return errors.length > 0\n      ? new Error(errors.map((error) => error.message).join(' | '))\n      : undefined\n  }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useMemo(\n    () =>\n      label &&\n      (asFieldset ||\n        (!nestedFieldBlockContext &&\n          findElementInChildren(\n            children,\n            (child: React.ReactElement) => child.props.label\n          ))),\n    []\n  )\n\n  const state = error || warning || info\n  const stateStatus = error\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const Label = ({ children }) => {\n    return (\n      <FormLabel\n        element={enableFieldset ? 'legend' : 'label'}\n        for_id={enableFieldset ? undefined : forId}\n        space={{ top: 0, bottom: 'x-small' }}\n        size={size}\n      >\n        {children}\n      </FormLabel>\n    )\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setError,\n        setShowError,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {labelDescription || labelSecondary ? (\n            <div className=\"dnb-forms-field-block__label\">\n              {label || labelDescription ? (\n                <Label>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </Label>\n              ) : (\n                <>&nbsp;</>\n              )}\n              {labelSecondary && (\n                <span className=\"dnb-forms-field-block__label-secondary\">\n                  {labelSecondary}\n                </span>\n              )}\n            </div>\n          ) : (\n            label && <Label>{label}</Label>\n          )}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentsWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentsWidth}`,\n              contentClassName\n            )}\n          >\n            {children}\n          </div>\n\n          {stateStatus && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state={stateStatus}\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  error?.message ||\n                  (state instanceof Error && state.message) ||\n                  (state instanceof FormError && state.message) ||\n                  state?.toString()\n                }\n                label={label as string}\n                space={{ top: 'x-small' }}\n              />\n            </div>\n          )}\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","warn","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","labelSecondary","asFieldset","info","warning","error","errorProp","width","contentsWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","id","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","useEnableFieldset","state","stateStatus","Label","createElement","element","space","top","bottom","Provider","value","_extends","Fragment","text","toString","result","count","child","_child$props","_child$type","type","Boolean","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport {\n  findElementInChildren,\n  warn,\n} from '../../../shared/component-helper'\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'labelSecondary'\n  | 'info'\n  | 'warning'\n  | 'error'\n> & {\n  forId?: string\n  contentClassName?: string\n  children: React.ReactNode\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  /** Typography size */\n  size?: 'medium' | 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    width,\n    contentsWidth,\n    size,\n    contentClassName,\n    children,\n    ...rest\n  } = props\n\n  const [fieldErrorRecord, setFieldErrorRecord] = useState<\n    Record<string, FormError>\n  >({})\n  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n    Record<string, boolean>\n  >({})\n\n  const setError = useCallback(\n    (id, error) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setError(id, error)\n        return\n      }\n\n      setFieldErrorRecord((existing) => {\n        if (error) {\n          return {\n            ...existing,\n            [id]: error,\n          }\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [id]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const setShowError = useCallback(\n    (id, show) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setShowError(id, show)\n        return\n      }\n\n      setShowFieldErrorRecord((existing) => {\n        if (show) {\n          return {\n            ...existing,\n            [id]: true,\n          }\n        } else {\n          const { [id]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const error = useMemo(() => {\n    if (errorProp) {\n      return errorProp\n    }\n    const errors = Object.entries(fieldErrorRecord)\n      .filter(([id]) => showFieldErrorRecord[id] === true)\n      .map(([, error]) => error)\n    return errors.length > 0\n      ? new Error(errors.map((error) => error.message).join(' | '))\n      : undefined\n  }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    forId,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const state = error || warning || info\n  const stateStatus = error\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const Label = ({ children }) => {\n    return (\n      <FormLabel\n        element={enableFieldset ? 'legend' : 'label'}\n        forId={enableFieldset ? undefined : forId}\n        space={{ top: 0, bottom: 'x-small' }}\n        size={size}\n      >\n        {children}\n      </FormLabel>\n    )\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setError,\n        setShowError,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {labelDescription || labelSecondary ? (\n            <div className=\"dnb-forms-field-block__label\">\n              {label || labelDescription ? (\n                <Label>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </Label>\n              ) : (\n                <>&nbsp;</>\n              )}\n              {labelSecondary && (\n                <span className=\"dnb-forms-field-block__label-secondary\">\n                  {labelSecondary}\n                </span>\n              )}\n            </div>\n          ) : (\n            label && <Label>{label}</Label>\n          )}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentsWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentsWidth}`,\n              contentClassName\n            )}\n          >\n            {children}\n          </div>\n\n          {stateStatus && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state={stateStatus}\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  error?.message ||\n                  (state instanceof Error && state.message) ||\n                  (state instanceof FormError && state.message) ||\n                  state?.toString()\n                }\n                label={label as string}\n                space={{ top: 'x-small' }}\n              />\n            </div>\n          )}\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nfunction useEnableFieldset({\n  label,\n  forId,\n  asFieldset,\n  children,\n  nestedFieldBlockContext,\n}) {\n  return useMemo(() => {\n    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          typeof child?.props?.label !== 'undefined' ||\n          child?.type?.['_formElement'] === true\n        ) {\n          count++\n        }\n        if (count > 1) {\n          return (result = true)\n        }\n      })\n\n      if (forId && count > 1) {\n        warn(\n          `You may not use forId=\"${forId}\" as there where given several (${count}) form elements as children.`\n        )\n      }\n    }\n\n    return Boolean(result)\n  }, [children])\n}\n\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}

package/es/extensions/forms/Form/Element/Element.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "className", "onSubmit"];

package/es/extensions/forms/Form/Element/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","names":["React","Context","Space","classnames","FormElement","_ref","children","className","onSubmit","rest","_objectWithoutProperties","_excluded","dataContext","useContext","_isInsideFormElement","createElement","_extends","element","onSubmitHandler","event","_dataContext$handleSu","preventDefault","formElement","target","handleSubmit","call"],"sources":["../../../../../../src/extensions/forms/Form/Element/Element.tsx"],"sourcesContent":["import React from 'react'\nimport Context from '../../DataContext/Context'\nimport Space from '../../../../components/space/Space'\nimport classnames from 'classnames'\nimport type { SpacingProps } from '../../../../shared/types'\n\nexport type Props = React.HTMLAttributes<HTMLFormElement> & SpacingProps\n\nexport default function FormElement({\n  children,\n  className = null,\n  onSubmit = null,\n  ...rest\n}: Props) {\n  const dataContext = React.useContext(Context)\n\n  /**\n   * Set to true,\n   * this way we prevent \"handleSubmit\" to be called twice when the SubmitButton is pressed.\n   */\n  dataContext._isInsideFormElement = true\n\n  return (\n    <Space\n      element=\"form\"\n      className={classnames('dnb-forms-form', className)}\n      onSubmit={onSubmitHandler}\n      {...rest}\n    >\n      {children}\n    </Space>\n  )\n\n  function onSubmitHandler(event: React.SyntheticEvent<HTMLFormElement>) {\n    event?.preventDefault()\n\n    const formElement = event.target as HTMLFormElement\n    dataContext?.handleSubmit?.({ formElement })\n\n    if (typeof onSubmit === 'function') {\n      onSubmit(event)\n    }\n  }\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,2BAA2B;AAC/C,OAAOC,KAAK,MAAM,oCAAoC;AACtD,OAAOC,UAAU,MAAM,YAAY;AAKnC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAKzB;EAAA,IAL0B;MAClCC,QAAQ;MACRC,SAAS,GAAG,IAAI;MAChBC,QAAQ,GAAG;IAEN,CAAC,GAAAH,IAAA;IADHI,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,MAAMC,WAAW,GAAGZ,KAAK,CAACa,UAAU,CAACZ,OAAO,CAAC;EAM7CW,WAAW,CAACE,oBAAoB,GAAG,IAAI;EAEvC,OACEd,KAAA,CAAAe,aAAA,CAACb,KAAK,EAAAc,QAAA;IACJC,OAAO,EAAC,MAAM;IACdV,SAAS,EAAEJ,UAAU,CAAC,gBAAgB,EAAEI,SAAS,CAAE;IACnDC,QAAQ,EAAEU;EAAgB,GACtBT,IAAI,GAEPH,QACI,CAAC;EAGV,SAASY,eAAeA,CAACC,KAA4C,EAAE;IAAA,IAAAC,qBAAA;IACrED,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,cAAc,CAAC,CAAC;IAEvB,MAAMC,WAAW,GAAGH,KAAK,CAACI,MAAyB;IACnDX,WAAW,aAAXA,WAAW,wBAAAQ,qBAAA,GAAXR,WAAW,CAAEY,YAAY,cAAAJ,qBAAA,uBAAzBA,qBAAA,CAAAK,IAAA,CAAAb,WAAW,EAAiB;MAAEU;IAAY,CAAC,CAAC;IAE5C,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAACW,KAAK,CAAC;IACjB;EACF;AACF"}
+{"version":3,"file":"Element.js","names":["React","Context","Space","classnames","FormElement","_ref","children","className","onSubmit","rest","_objectWithoutProperties","_excluded","dataContext","useContext","_isInsideFormElement","createElement","_extends","element","onSubmitHandler","event","_dataContext$handleSu","preventDefault","formElement","target","handleSubmit","call"],"sources":["../../../../../../src/extensions/forms/Form/Element/Element.tsx"],"sourcesContent":["import React from 'react'\nimport Context from '../../DataContext/Context'\nimport Space from '../../../../components/space/Space'\nimport classnames from 'classnames'\nimport type { SpacingProps } from '../../../../shared/types'\n\nexport type Props = React.HTMLAttributes<HTMLFormElement> & SpacingProps\n\nexport default function FormElement({\n  children,\n  className = null,\n  onSubmit = null,\n  ...rest\n}: Props) {\n  const dataContext = React.useContext(Context)\n\n  /**\n   * Set to true,\n   * this way we prevent \"handleSubmit\" to be called twice when the SubmitButton is pressed.\n   */\n  dataContext._isInsideFormElement = true\n\n  return (\n    <Space\n      element=\"form\"\n      className={classnames('dnb-forms-form', className)}\n      onSubmit={onSubmitHandler}\n      {...rest}\n    >\n      {children}\n    </Space>\n  )\n\n  function onSubmitHandler(event: React.SyntheticEvent<HTMLFormElement>) {\n    event?.preventDefault()\n\n    const formElement = event.target as HTMLFormElement\n    dataContext?.handleSubmit?.({ formElement })\n\n    if (typeof onSubmit === 'function') {\n      onSubmit(event)\n    }\n  }\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,2BAA2B;AAC/C,OAAOC,KAAK,MAAM,oCAAoC;AACtD,OAAOC,UAAU,MAAM,YAAY;AAKnC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAKzB;EAAA,IAL0B;MAClCC,QAAQ;MACRC,SAAS,GAAG,IAAI;MAChBC,QAAQ,GAAG;IAEN,CAAC,GAAAH,IAAA;IADHI,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,MAAMC,WAAW,GAAGZ,KAAK,CAACa,UAAU,CAACZ,OAAO,CAAC;EAM7CW,WAAW,CAACE,oBAAoB,GAAG,IAAI;EAEvC,OACEd,KAAA,CAAAe,aAAA,CAACb,KAAK,EAAAc,QAAA;IACJC,OAAO,EAAC,MAAM;IACdV,SAAS,EAAEJ,UAAU,CAAC,gBAAgB,EAAEI,SAAS,CAAE;IACnDC,QAAQ,EAAEU;EAAgB,GACtBT,IAAI,GAEPH,QACI,CAAC;EAGV,SAASY,eAAeA,CAACC,KAA4C,EAAE;IAAA,IAAAC,qBAAA;IACrED,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,cAAc,CAAC,CAAC;IAEvB,MAAMC,WAAW,GAAGH,KAAK,CAACI,MAAyB;IACnDX,WAAW,aAAXA,WAAW,wBAAAQ,qBAAA,GAAXR,WAAW,CAAEY,YAAY,cAAAJ,qBAAA,uBAAzBA,qBAAA,CAAAK,IAAA,CAAAb,WAAW,EAAiB;MAAEU;IAAY,CAAC,CAAC;IAE5C,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAACW,KAAK,CAAC;IACjB;EACF;AACF"}

package/es/extensions/forms/Form/Handler/Handler.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId", "autoComplete"];
 import React from 'react';

package/es/extensions/forms/Form/Handler/Handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handler.js","names":["React","Provider","FormElement","FormHandler","_ref","children","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React from 'react'\nimport { JsonObject } from 'json-pointer'\nimport Provider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    defaultData,\n    data,\n    schema,\n    onChange,\n    onPathChange,\n    onSubmit: (data: Data) => {\n      if (typeof onSubmit === 'function') {\n        onSubmit(data)\n      }\n    },\n    onSubmitRequest,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n  } as Omit<ProviderProps<Data>, 'children'>\n\n  return (\n    <Provider {...providerProps}>\n      <FormElement {...rest}>{children}</FormElement>\n    </Provider>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,MAER,4BAA4B;AACnC,OAAOC,WAAW,MAAM,YAAY;AAapC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAa8B;EAAA,IAbJ;MAC3DC,QAAQ;MACRC,WAAW;MACXC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,YAAY;MACZC,QAAQ;MACRC,eAAe;MACfC,iBAAiB;MACjBC,gBAAgB;MAChBC;IAE4D,CAAC,GAAAX,IAAA;IAD1DY,IAAI,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAEP,MAAMC,aAAa,GAAG;IACpBb,WAAW;IACXC,IAAI;IACJC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAGJ,IAAU,IAAK;MACxB,IAAI,OAAOI,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAACJ,IAAI,CAAC;MAChB;IACF,CAAC;IACDK,eAAe;IACfC,iBAAiB;IACjBC,gBAAgB;IAChBC;EACF,CAA0C;EAE1C,OACEf,KAAA,CAAAoB,aAAA,CAACnB,QAAQ,EAAKkB,aAAa,EACzBnB,KAAA,CAAAoB,aAAA,CAAClB,WAAW,EAAKc,IAAI,EAAGX,QAAsB,CACtC,CAAC;AAEf"}
+{"version":3,"file":"Handler.js","names":["React","Provider","FormElement","FormHandler","_ref","children","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React from 'react'\nimport { JsonObject } from 'json-pointer'\nimport Provider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    defaultData,\n    data,\n    schema,\n    onChange,\n    onPathChange,\n    onSubmit: (data: Data) => {\n      if (typeof onSubmit === 'function') {\n        onSubmit(data)\n      }\n    },\n    onSubmitRequest,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n  } as Omit<ProviderProps<Data>, 'children'>\n\n  return (\n    <Provider {...providerProps}>\n      <FormElement {...rest}>{children}</FormElement>\n    </Provider>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,MAER,4BAA4B;AACnC,OAAOC,WAAW,MAAM,YAAY;AAapC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAa8B;EAAA,IAbJ;MAC3DC,QAAQ;MACRC,WAAW;MACXC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,YAAY;MACZC,QAAQ;MACRC,eAAe;MACfC,iBAAiB;MACjBC,gBAAgB;MAChBC;IAE4D,CAAC,GAAAX,IAAA;IAD1DY,IAAI,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAEP,MAAMC,aAAa,GAAG;IACpBb,WAAW;IACXC,IAAI;IACJC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAGJ,IAAU,IAAK;MACxB,IAAI,OAAOI,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAACJ,IAAI,CAAC;MAChB;IACF,CAAC;IACDK,eAAe;IACfC,iBAAiB;IACjBC,gBAAgB;IAChBC;EACF,CAA0C;EAE1C,OACEf,KAAA,CAAAoB,aAAA,CAACnB,QAAQ,EAAKkB,aAAa,EACzBnB,KAAA,CAAAoB,aAAA,CAAClB,WAAW,EAAKc,IAAI,EAAGX,QAAsB,CACtC,CAAC;AAEf"}

package/es/extensions/forms/hooks/index.d.ts

@@ -1 +1,4 @@
 export { default as useDataValue } from './useDataValue';
+export { default as useMountEffect } from './useMountEffect';
+export { default as useUpdateEffect } from './useUpdateEffect';
+export { default as useProcessManager } from './useProcessManager';

package/es/extensions/forms/hooks/index.js

@@ -1 +1,5 @@
-export { default as useDataValue } from './useDataValue';
+export { default as useDataValue } from './useDataValue';
+export { default as useMountEffect } from './useMountEffect';
+export { default as useUpdateEffect } from './useUpdateEffect';
+export { default as useProcessManager } from './useProcessManager';
+//# sourceMappingURL=index.js.map

package/es/extensions/forms/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","useDataValue"],"sources":["../../../../../src/extensions/forms/hooks/index.ts"],"sourcesContent":["export { default as useDataValue } from './useDataValue'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,YAAY,QAAQ,gBAAgB"}
+{"version":3,"file":"index.js","names":["default","useDataValue","useMountEffect","useUpdateEffect","useProcessManager"],"sources":["../../../../../src/extensions/forms/hooks/index.ts"],"sourcesContent":["export { default as useDataValue } from './useDataValue'\nexport { default as useMountEffect } from './useMountEffect'\nexport { default as useUpdateEffect } from './useUpdateEffect'\nexport { default as useProcessManager } from './useProcessManager'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,YAAY,QAAQ,gBAAgB;AACxD,SAASD,OAAO,IAAIE,cAAc,QAAQ,kBAAkB;AAC5D,SAASF,OAAO,IAAIG,eAAe,QAAQ,mBAAmB;AAC9D,SAASH,OAAO,IAAII,iBAAiB,QAAQ,qBAAqB"}