@dnb/eufemia 10.52.0 → 10.53.0

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

@@ -1,33 +1,73 @@
 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, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import StringField from '../String';
 import useErrorMessage from '../../hooks/useErrorMessage';
 import useTranslation from '../../hooks/useTranslation';
 function BankAccountNumber(props) {
-  var _props$pattern, _props$label, _props$width;
-  const translations = useTranslation().BankAccountNumber;
   const {
-    validate = true,
-    omitMask
-  } = props;
+    errorBankAccountNumber,
+    errorBankAccountNumberLength,
+    errorRequired,
+    label
+  } = useTranslation().BankAccountNumber;
   const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: translations.errorRequired,
-    pattern: translations.errorPattern
+    required: errorRequired,
+    pattern: errorBankAccountNumber,
+    errorBankAccountNumber,
+    errorBankAccountNumberLength
   });
+  const bankAccountNumberValidator = useCallback(value => {
+    if (value !== undefined) {
+      const bankAccountNoIs11Digits = (value === null || value === void 0 ? void 0 : value.length) === 11;
+      if (!bankAccountNoIs11Digits) {
+        return Error(errorBankAccountNumberLength);
+      }
+      if (bankAccountNoIs11Digits && !isValidAccountNumber(value)) {
+        return Error(errorBankAccountNumber);
+      }
+    }
+  }, [errorBankAccountNumber, errorBankAccountNumberLength]);
+  const {
+    validate = true,
+    omitMask,
+    validator,
+    onBlurValidator = bankAccountNumberValidator,
+    label: labelProp,
+    width
+  } = props;
   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 onBlurValidatorToUse = onBlurValidator === false ? undefined : onBlurValidator;
   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 : translations.label,
+    label: labelProp !== null && labelProp !== void 0 ? labelProp : label,
     errorMessages,
     mask,
-    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium',
-    inputMode: 'numeric'
+    width: width !== null && width !== void 0 ? width : 'medium',
+    inputMode: 'numeric',
+    validator: validate ? validator : undefined,
+    onBlurValidator: validate ? onBlurValidatorToUse : undefined,
+    exportValidators: {
+      bankAccountNumberValidator
+    }
   });
   return React.createElement(StringField, StringFieldProps);
 }
+function isValidAccountNumber(digits) {
+  let checkDigit = 2;
+  let sum = 0;
+  for (let i = digits.length - 2; i >= 0; --i) {
+    sum += parseInt(digits.charAt(i)) * checkDigit;
+    checkDigit += 1;
+    if (checkDigit > 7) {
+      checkDigit = 2;
+    }
+  }
+  const result = 11 - sum % 11;
+  const finalCheckDigit = result === 11 ? 0 : result;
+  return parseInt(digits.charAt(digits.length - 1), 10) === finalCheckDigit;
+}
 BankAccountNumber._supportsSpacingProps = true;
 export default BankAccountNumber;
 //# sourceMappingURL=BankAccountNumber.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BankAccountNumber.js","names":["React","useMemo","StringField","useErrorMessage","useTranslation","BankAccountNumber","props","_props$pattern","_props$label","_props$width","translations","validate","omitMask","errorMessages","path","required","errorRequired","pattern","errorPattern","mask","StringFieldProps","_objectSpread","className","undefined","label","width","inputMode","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringFieldProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction BankAccountNumber(props: Props) {\n  const translations = useTranslation().BankAccountNumber\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.errorRequired,\n    pattern: translations.errorPattern,\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: props.label ?? translations.label,\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,OAAO,QAAQ,OAAO;AACtC,OAAOC,WAAW,MAAqC,WAAW;AAElE,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,cAAc,MAAM,4BAA4B;AAOvD,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACvC,MAAMC,YAAY,GAAGN,cAAc,CAAC,CAAC,CAACC,iBAAiB;EACvD,MAAM;IAAEM,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGN,KAAK;EAE3C,MAAMO,aAAa,GAAGV,eAAe,CAACG,KAAK,CAACQ,IAAI,EAAER,KAAK,CAACO,aAAa,EAAE;IACrEE,QAAQ,EAAEL,YAAY,CAACM,aAAa;IACpCC,OAAO,EAAEP,YAAY,CAACQ;EACxB,CAAC,CAAC;EACF,MAAMC,IAAI,GAAGlB,OAAO,CAClB,MACEW,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,GAAAC,aAAA,CAAAA,aAAA,KACxBf,KAAK;IACRgB,SAAS,EAAE,qCAAqC;IAChDL,OAAO,GAAAV,cAAA,GAAED,KAAK,CAACW,OAAO,cAAAV,cAAA,cAAAA,cAAA,GAAKI,QAAQ,GAAG,aAAa,GAAGY,SAAU;IAChEC,KAAK,GAAAhB,YAAA,GAAEF,KAAK,CAACkB,KAAK,cAAAhB,YAAA,cAAAA,YAAA,GAAIE,YAAY,CAACc,KAAK;IACxCX,aAAa;IACbM,IAAI;IACJM,KAAK,GAAAhB,YAAA,GAAEH,KAAK,CAACmB,KAAK,cAAAhB,YAAA,cAAAA,YAAA,GAAI,QAAQ;IAC9BiB,SAAS,EAAE;EAAS,EACrB;EAED,OAAO1B,KAAA,CAAA2B,aAAA,CAACzB,WAAW,EAAKkB,gBAAmB,CAAC;AAC9C;AAEAf,iBAAiB,CAACuB,qBAAqB,GAAG,IAAI;AAC9C,eAAevB,iBAAiB"}
+{"version":3,"file":"BankAccountNumber.js","names":["React","useCallback","useMemo","StringField","useErrorMessage","useTranslation","BankAccountNumber","props","errorBankAccountNumber","errorBankAccountNumberLength","errorRequired","label","errorMessages","path","required","pattern","bankAccountNumberValidator","value","undefined","bankAccountNoIs11Digits","length","Error","isValidAccountNumber","validate","omitMask","validator","onBlurValidator","labelProp","width","mask","onBlurValidatorToUse","StringFieldProps","_objectSpread","className","inputMode","exportValidators","createElement","digits","checkDigit","sum","i","parseInt","charAt","result","finalCheckDigit","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\nimport { Validator } from '../../types'\n\nexport type Props = Omit<StringFieldProps, 'onBlurValidator'> & {\n  validate?: boolean\n  omitMask?: boolean\n  onBlurValidator?: Validator<string> | false\n}\n\nfunction BankAccountNumber(props: Props) {\n  const {\n    errorBankAccountNumber,\n    errorBankAccountNumberLength,\n    errorRequired,\n    label,\n  } = useTranslation().BankAccountNumber\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: errorRequired,\n    pattern: errorBankAccountNumber,\n    errorBankAccountNumber,\n    errorBankAccountNumberLength,\n  })\n\n  const bankAccountNumberValidator = useCallback(\n    (value: string) => {\n      if (value !== undefined) {\n        const bankAccountNoIs11Digits = value?.length === 11\n\n        if (!bankAccountNoIs11Digits) {\n          return Error(errorBankAccountNumberLength)\n        }\n\n        if (bankAccountNoIs11Digits && !isValidAccountNumber(value)) {\n          return Error(errorBankAccountNumber)\n        }\n      }\n    },\n    [errorBankAccountNumber, errorBankAccountNumberLength]\n  )\n\n  const {\n    validate = true,\n    omitMask,\n    validator,\n    onBlurValidator = bankAccountNumberValidator,\n    label: labelProp,\n    width,\n  } = props\n\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ]\n        : [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ],\n    [omitMask]\n  )\n\n  const onBlurValidatorToUse =\n    onBlurValidator === false ? undefined : onBlurValidator\n\n  const StringFieldProps: StringFieldProps = {\n    ...props,\n    className: 'dnb-forms-field-bank-account-number',\n    label: labelProp ?? label,\n    errorMessages,\n    mask,\n    width: width ?? 'medium',\n    inputMode: 'numeric',\n    validator: validate ? validator : undefined,\n    onBlurValidator: validate ? onBlurValidatorToUse : undefined,\n    exportValidators: { bankAccountNumberValidator },\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nfunction isValidAccountNumber(digits: string) {\n  let checkDigit = 2\n  let sum = 0\n\n  for (let i = digits.length - 2; i >= 0; --i) {\n    sum += parseInt(digits.charAt(i)) * checkDigit\n\n    checkDigit += 1\n\n    if (checkDigit > 7) {\n      checkDigit = 2\n    }\n  }\n\n  const result = 11 - (sum % 11)\n  const finalCheckDigit = result === 11 ? 0 : result\n\n  return parseInt(digits.charAt(digits.length - 1), 10) === finalCheckDigit\n}\n\nBankAccountNumber._supportsSpacingProps = true\nexport default BankAccountNumber\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../../../shared/types';
+export declare const BankAccountNumberProperties: PropertiesTableProps;

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

@@ -0,0 +1,18 @@
+export const BankAccountNumberProperties = {
+  validate: {
+    doc: 'Using this prop you can disable the default validation.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  help: {
+    doc: 'Provide a help button. Object consisting of `title` and `content`.',
+    type: 'object',
+    status: 'optional'
+  },
+  onBlurValidator: {
+    doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to bank account number validation, using `bankAccountNumberValidator`. Can be disabled using `false`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=BankAccountNumberDocs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BankAccountNumberDocs.js","names":["BankAccountNumberProperties","validate","doc","type","status","help","onBlurValidator"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumberDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const BankAccountNumberProperties: PropertiesTableProps = {\n  validate: {\n    doc: 'Using this prop you can disable the default validation.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n  onBlurValidator: {\n    doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to bank account number validation, using `bankAccountNumberValidator`. Can be disabled using `false`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,QAAQ,EAAE;IACRC,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,eAAe,EAAE;IACfJ,GAAG,EAAE,8aAA8a;IACnbC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.js

@@ -10,7 +10,7 @@ export const OrganizationNumberProperties = {
     status: 'optional'
   },
   onBlurValidator: {
-    doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to organization number validation, using `organizationNumberValidator`.',
+    doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to organization number validation, using `organizationNumberValidator`. Can be disabled using `false`.',
     type: 'function',
     status: 'optional'
   }

package/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationNumberDocs.js","names":["OrganizationNumberProperties","validate","doc","type","status","help","onBlurValidator"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const OrganizationNumberProperties: PropertiesTableProps = {\n  validate: {\n    doc: 'Using this prop you can disable the default validation.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n  onBlurValidator: {\n    doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to organization number validation, using `organizationNumberValidator`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,4BAAkD,GAAG;EAChEC,QAAQ,EAAE;IACRC,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,eAAe,EAAE;IACfJ,GAAG,EAAE,gZAAgZ;IACrZC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"OrganizationNumberDocs.js","names":["OrganizationNumberProperties","validate","doc","type","status","help","onBlurValidator"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const OrganizationNumberProperties: PropertiesTableProps = {\n  validate: {\n    doc: 'Using this prop you can disable the default validation.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n  onBlurValidator: {\n    doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to organization number validation, using `organizationNumberValidator`. Can be disabled using `false`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,4BAAkD,GAAG;EAChEC,QAAQ,EAAE;IACRC,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,eAAe,EAAE;IACfJ,GAAG,EAAE,+aAA+a;IACpbC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.d.ts

@@ -1,7 +1,15 @@
 import { Props as FieldBlockProps } from '../../FieldBlock';
 import { Props as StringFieldProps } from '../String';
-import { FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & Omit<FieldBlockProps, 'children'> & Partial<Record<'postalCode' | 'city', StringFieldProps>>;
+import { FieldHelpProps, Path } from '../../types';
+export type Props = FieldHelpProps & Omit<FieldBlockProps, 'children'> & Partial<Record<'postalCode' | 'city', StringFieldProps>> & {
+    /**
+     * Defines which country the postal code and city is for.
+     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.
+     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.
+     * Default: `NO`
+     */
+    country?: Path | string;
+};
 declare function PostalCodeAndCity(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PostalCodeAndCity {
     var _supportsSpacingProps: boolean;

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js

@@ -1,52 +1,94 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["postalCode", "city", "help", "width"];
+const _excluded = ["postalCode", "city", "help", "width", "country"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
+import React, { useCallback } from 'react';
 import classnames from 'classnames';
 import StringField from '../String';
 import CompositionField from '../Composition';
 import useTranslation from '../../hooks/useTranslation';
+import useDataValue from '../../hooks/useDataValue';
+import { COUNTRY as defaultCountry } from '../../../../shared/defaults';
 function PostalCodeAndCity(props) {
-  var _postalCode$pattern, _postalCode$label, _postalCode$placehold, _city$label, _city$pattern;
   const translations = useTranslation();
+  const {
+    getSourceValue
+  } = useDataValue();
   const {
       postalCode = {},
       city = {},
       help,
-      width = 'large'
+      width = 'large',
+      country = defaultCountry
     } = props,
     fieldBlockProps = _objectWithoutProperties(props, _excluded);
+  const {
+    pattern: cityPattern,
+    className: cityClassName,
+    label: cityLabel,
+    width: cityWidth,
+    errorMessages: cityErrorMessages
+  } = city;
+  const countryValue = getSourceValue(country);
+  const handleDefaults = useCallback(postalCode => {
+    const props = {};
+    switch (countryValue) {
+      case defaultCountry:
+      case 'DK':
+      case 'CH':
+        {
+          props.mask = [/\d/, /\d/, /\d/, /\d/];
+          props.pattern = '^[0-9]{4}$';
+          props.placeholder = '0000';
+          break;
+        }
+      default:
+        props.width = '8rem';
+        break;
+    }
+    return _objectSpread(_objectSpread({}, props), postalCode);
+  }, [countryValue]);
+  const {
+    mask: postalCodeMask,
+    pattern: postalCodePattern,
+    placeholder: postalCodePlaceHolder,
+    className: postalCodeClassName,
+    label: postalCodeLabel,
+    width: postalCodeWidth,
+    errorMessages: postalCodeErrorMessages
+  } = handleDefaults(postalCode);
+  const postalCodeValidationProps = {
+    mask: postalCodeMask,
+    pattern: postalCodePattern,
+    placeholder: postalCodePlaceHolder
+  };
   return React.createElement(CompositionField, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldBlockProps, {
     width: width
-  }), React.createElement(StringField, _extends({}, postalCode, {
-    pattern: (_postalCode$pattern = postalCode.pattern) !== null && _postalCode$pattern !== void 0 ? _postalCode$pattern : '^[0-9]{4}$',
-    mask: [/\d/, /\d/, /\d/, /\d/],
-    className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),
-    label: (_postalCode$label = postalCode.label) !== null && _postalCode$label !== void 0 ? _postalCode$label : translations.PostalCode.label,
+  }), React.createElement(StringField, _extends({}, postalCode, postalCodeValidationProps, {
+    className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCodeClassName),
+    label: postalCodeLabel !== null && postalCodeLabel !== void 0 ? postalCodeLabel : translations.PostalCode.label,
     errorMessages: _objectSpread({
       required: translations.PostalCode.errorRequired,
       pattern: translations.PostalCode.errorPattern
-    }, postalCode.errorMessages),
-    placeholder: (_postalCode$placehold = postalCode.placeholder) !== null && _postalCode$placehold !== void 0 ? _postalCode$placehold : '0000',
-    width: false,
+    }, postalCodeErrorMessages),
+    width: postalCodeWidth !== null && postalCodeWidth !== void 0 ? postalCodeWidth : false,
     inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input",
     inputMode: "numeric",
     autoComplete: "postal-code"
   })), React.createElement(StringField, _extends({}, city, {
-    className: classnames('dnb-forms-field-postal-code-and-city__city', city.className),
-    label: (_city$label = city.label) !== null && _city$label !== void 0 ? _city$label : translations.City.label,
+    className: classnames('dnb-forms-field-postal-code-and-city__city', cityClassName),
+    label: cityLabel !== null && cityLabel !== void 0 ? cityLabel : translations.City.label,
     errorMessages: _objectSpread({
       required: translations.City.errorRequired,
       pattern: translations.City.errorPattern
-    }, city.errorMessages),
-    pattern: (_city$pattern = city.pattern) !== null && _city$pattern !== void 0 ? _city$pattern : '^[A-Za-zÆØÅæøå -]+$',
+    }, cityErrorMessages),
+    pattern: cityPattern !== null && cityPattern !== void 0 ? cityPattern : '^[A-Za-zÆØÅæøå -]+$',
     trim: true,
-    width: "stretch",
+    width: cityWidth !== null && cityWidth !== void 0 ? cityWidth : 'stretch',
     autoComplete: "address-level2",
     help: help
   })));

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","classnames","StringField","CompositionField","useTranslation","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","_city$pattern","translations","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","mask","label","PostalCode","errorMessages","_objectSpread","required","errorRequired","errorPattern","placeholder","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport CompositionField from '../Composition'\nimport { FieldHelpProps } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>>\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    ...fieldBlockProps\n  } = props\n\n  return (\n    <CompositionField\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <StringField\n        {...postalCode}\n        pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n        mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCode.className\n        )}\n        label={postalCode.label ?? translations.PostalCode.label}\n        errorMessages={{\n          required: translations.PostalCode.errorRequired,\n          pattern: translations.PostalCode.errorPattern,\n          ...postalCode.errorMessages,\n        }}\n        placeholder={postalCode.placeholder ?? '0000'}\n        width={false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          city.className\n        )}\n        label={city.label ?? translations.City.label}\n        errorMessages={{\n          required: translations.City.errorRequired,\n          pattern: translations.City.errorPattern,\n          ...city.errorMessages,\n        }}\n        pattern={city.pattern ?? '^[A-Za-zÆØÅæøå -]+$'}\n        trim\n        width=\"stretch\"\n        autoComplete=\"address-level2\"\n        help={help}\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,gBAAgB,MAAM,gBAAgB;AAE7C,OAAOC,cAAc,MAAM,4BAA4B;AAMvD,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA,EAAAC,aAAA;EACvC,MAAMC,YAAY,GAAGR,cAAc,CAAC,CAAC;EAErC,MAAM;MACJS,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,IAAI;MACJC,KAAK,GAAG;IAEV,CAAC,GAAGV,KAAK;IADJW,eAAe,GAAAC,wBAAA,CAChBZ,KAAK,EAAAa,SAAA;EAET,OACEnB,KAAA,CAAAoB,aAAA,CAACjB,gBAAgB,EAAAkB,QAAA;IACfC,SAAS,EAAErB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACgB,SACR;EAAE,GACEL,eAAe;IACnBD,KAAK,EAAEA;EAAM,IAEbhB,KAAA,CAAAoB,aAAA,CAAClB,WAAW,EAAAmB,QAAA,KACNR,UAAU;IACdU,OAAO,GAAAhB,mBAAA,GAAEM,UAAU,CAACU,OAAO,cAAAhB,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5CiB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BF,SAAS,EAAErB,UAAU,CACnB,mDAAmD,EACnDY,UAAU,CAACS,SACb,CAAE;IACFG,KAAK,GAAAjB,iBAAA,GAAEK,UAAU,CAACY,KAAK,cAAAjB,iBAAA,cAAAA,iBAAA,GAAII,YAAY,CAACc,UAAU,CAACD,KAAM;IACzDE,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEjB,YAAY,CAACc,UAAU,CAACI,aAAa;MAC/CP,OAAO,EAAEX,YAAY,CAACc,UAAU,CAACK;IAAY,GAC1ClB,UAAU,CAACc,aAAa,CAC3B;IACFK,WAAW,GAAAvB,qBAAA,GAAEI,UAAU,CAACmB,WAAW,cAAAvB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CO,KAAK,EAAE,KAAM;IACbiB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC,SAAS;IACnBC,YAAY,EAAC;EAAa,EAC3B,CAAC,EACFnC,KAAA,CAAAoB,aAAA,CAAClB,WAAW,EAAAmB,QAAA,KACNP,IAAI;IACRQ,SAAS,EAAErB,UAAU,CACnB,4CAA4C,EAC5Ca,IAAI,CAACQ,SACP,CAAE;IACFG,KAAK,GAAAf,WAAA,GAAEI,IAAI,CAACW,KAAK,cAAAf,WAAA,cAAAA,WAAA,GAAIE,YAAY,CAACwB,IAAI,CAACX,KAAM;IAC7CE,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEjB,YAAY,CAACwB,IAAI,CAACN,aAAa;MACzCP,OAAO,EAAEX,YAAY,CAACwB,IAAI,CAACL;IAAY,GACpCjB,IAAI,CAACa,aAAa,CACrB;IACFJ,OAAO,GAAAZ,aAAA,GAAEG,IAAI,CAACS,OAAO,cAAAZ,aAAA,cAAAA,aAAA,GAAI,qBAAsB;IAC/C0B,IAAI;IACJrB,KAAK,EAAC,SAAS;IACfmB,YAAY,EAAC,gBAAgB;IAC7BpB,IAAI,EAAEA;EAAK,EACZ,CACe,CAAC;AAEvB;AAEAV,iBAAiB,CAACiC,qBAAqB,GAAG,IAAI;AAC9C,eAAejC,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useCallback","classnames","StringField","CompositionField","useTranslation","useDataValue","COUNTRY","defaultCountry","PostalCodeAndCity","props","translations","getSourceValue","postalCode","city","help","width","country","fieldBlockProps","_objectWithoutProperties","_excluded","pattern","cityPattern","className","cityClassName","label","cityLabel","cityWidth","errorMessages","cityErrorMessages","countryValue","handleDefaults","mask","placeholder","_objectSpread","postalCodeMask","postalCodePattern","postalCodePlaceHolder","postalCodeClassName","postalCodeLabel","postalCodeWidth","postalCodeErrorMessages","postalCodeValidationProps","createElement","_extends","PostalCode","required","errorRequired","errorPattern","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport CompositionField from '../Composition'\nimport { FieldHelpProps, Path } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\nimport useDataValue from '../../hooks/useDataValue'\nimport { COUNTRY as defaultCountry } from '../../../../shared/defaults'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>> & {\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.\n     * Default: `NO`\n     */\n    // Add type for all country codes?\n    country?: Path | string\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\n  const { getSourceValue } = useDataValue()\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    country = defaultCountry,\n    ...fieldBlockProps\n  } = props\n\n  const {\n    pattern: cityPattern,\n    className: cityClassName,\n    label: cityLabel,\n    width: cityWidth,\n    errorMessages: cityErrorMessages,\n  } = city\n\n  const countryValue = getSourceValue(country)\n  const handleDefaults = useCallback(\n    (postalCode: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryValue) {\n        case defaultCountry:\n        case 'DK':\n        case 'CH': {\n          props.mask = [/\\d/, /\\d/, /\\d/, /\\d/]\n          props.pattern = '^[0-9]{4}$'\n          props.placeholder = '0000'\n          break\n        }\n        default:\n          props.width = '8rem'\n          break\n      }\n\n      return { ...props, ...postalCode }\n    },\n    [countryValue]\n  )\n\n  const {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n    className: postalCodeClassName,\n    label: postalCodeLabel,\n    width: postalCodeWidth,\n    errorMessages: postalCodeErrorMessages,\n  } = handleDefaults(postalCode)\n\n  const postalCodeValidationProps = {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n  }\n\n  return (\n    <CompositionField\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <StringField\n        {...postalCode}\n        {...postalCodeValidationProps}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCodeClassName\n        )}\n        label={postalCodeLabel ?? translations.PostalCode.label}\n        errorMessages={{\n          required: translations.PostalCode.errorRequired,\n          pattern: translations.PostalCode.errorPattern,\n          ...postalCodeErrorMessages,\n        }}\n        width={postalCodeWidth ?? false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          cityClassName\n        )}\n        label={cityLabel ?? translations.City.label}\n        errorMessages={{\n          required: translations.City.errorRequired,\n          pattern: translations.City.errorPattern,\n          ...cityErrorMessages,\n        }}\n        pattern={cityPattern ?? '^[A-Za-zÆØÅæøå -]+$'}\n        trim\n        width={cityWidth ?? 'stretch'}\n        autoComplete=\"address-level2\"\n        help={help}\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":"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"}

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.js

@@ -1,4 +1,9 @@
 export const PostalCodeAndCityProperties = {
+  country: {
+    doc: 'Defines which country the postal code and city is for, based on the ISO 3166-1 alpha-2 format i.e. `NO`, `DE` etc. ' + 'Setting it to anything other than `NO` will remove the default norwegian postal code pattern. ' + 'You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`. ' + 'Defaults to `NO`',
+    type: ['Path', 'string'],
+    status: 'optional'
+  },
   postalCode: {
     doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postcode.',
     type: 'object',

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCityDocs.js","names":["PostalCodeAndCityProperties","postalCode","doc","type","status","city","help"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PostalCodeAndCityProperties: PropertiesTableProps = {\n  postalCode: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postcode.',\n    type: 'object',\n    status: 'required',\n  },\n  city: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for city.',\n    type: 'object',\n    status: 'required',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,UAAU,EAAE;IACVC,GAAG,EAAE,wGAAwG;IAC7GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"PostalCodeAndCityDocs.js","names":["PostalCodeAndCityProperties","country","doc","type","status","postalCode","city","help"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PostalCodeAndCityProperties: PropertiesTableProps = {\n  country: {\n    doc:\n      'Defines which country the postal code and city is for, based on the ISO 3166-1 alpha-2 format i.e. `NO`, `DE` etc. ' +\n      'Setting it to anything other than `NO` will remove the default norwegian postal code pattern. ' +\n      'You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`. ' +\n      'Defaults to `NO`',\n    type: ['Path', 'string'],\n    status: 'optional',\n  },\n  postalCode: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postcode.',\n    type: 'object',\n    status: 'required',\n  },\n  city: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for city.',\n    type: 'object',\n    status: 'required',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,OAAO,EAAE;IACPC,GAAG,EACD,qHAAqH,GACrH,gGAAgG,GAChG,kHAAkH,GAClH,kBAAkB;IACpBC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;IACxBC,MAAM,EAAE;EACV,CAAC;EACDC,UAAU,EAAE;IACVH,GAAG,EAAE,wGAAwG;IAC7GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAE;IACJL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Field/Slider/Slider.js

@@ -48,7 +48,9 @@ function SliderComponent(props) {
     handleChange,
     handleFocus,
     handleBlur
-  } = useFieldProps(preparedProps);
+  } = useFieldProps(preparedProps, {
+    omitMultiplePathWarning: true
+  });
   const handleLocalChange = useCallback(_ref2 => {
     let {
       value

package/extensions/forms/Field/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useRef","FieldBlock","useFieldProps","Slider","pickSpacingProps","HelpButton","DataContext","useDataValue","SliderComponent","props","_ref","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","preparedProps","_objectSpread","step","min","max","id","width","layout","label","help","labelDescription","info","warning","error","hasError","disabled","handleChange","handleFocus","handleBlur","handleLocalChange","_ref2","forEach","i","updateDataValue","fieldBlockProps","forId","sliderProps","status","undefined","suffix","createElement","title","content","on_change","on_drag_start","on_drag_end","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldBlockWidth,\n  FieldHelpProps,\n  FieldProps,\n  Path,\n} from '../../types'\nimport Slider, { SliderProps } from '../../../../components/Slider'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { HelpButton } from '../../../../components'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\n\nexport type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {\n  value: string\n}\n\nexport type SliderValue = number | Array<number>\nexport type Props = FieldHelpProps &\n  FieldProps<SliderValue> & {\n    /**\n     * Define an array with JSON Pointers for multiple thumb buttons.\n     */\n    paths?: Array<Path>\n    step?: SliderProps['step'] | Path\n    min?: SliderProps['min'] | Path\n    max?: SliderProps['max'] | Path\n    vertical?: SliderProps['vertical']\n    reverse?: SliderProps['reverse']\n    hideButtons?: SliderProps['hideButtons']\n    multiThumbBehavior?: SliderProps['multiThumbBehavior']\n    thumbTitle?: SliderProps['thumbTitle']\n    subtractTitle?: SliderProps['subtractTitle']\n    addTitle?: SliderProps['addTitle']\n    numberFormat?: SliderProps['numberFormat']\n    tooltip?: SliderProps['tooltip']\n    alwaysShowTooltip?: SliderProps['alwaysShowTooltip']\n    extensions?: SliderProps['extensions']\n\n    /** Styling */\n    width?: FieldBlockWidth\n  }\n\nfunction SliderComponent(props: Props) {\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const { getSourceValue } = useDataValue()\n  const getValues = useCallback(\n    (source: SliderValue | Path | Array<Path>) => {\n      if (Array.isArray(source)) {\n        return source.map((s) => getSourceValue(s) || 0)\n      }\n\n      return getSourceValue(source) || 0\n    },\n    [getSourceValue]\n  )\n\n  const value = getValues(props.paths ?? props.path ?? props.value)\n  const preparedProps = {\n    ...props,\n    step: getSourceValue(props.step),\n    min: getSourceValue(props.min),\n    max: getSourceValue(props.max),\n  }\n\n  const {\n    id,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    layout,\n    label,\n    help,\n    labelDescription,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    handleChange,\n    handleFocus,\n    handleBlur,\n  } = useFieldProps(preparedProps)\n\n  const handleLocalChange = useCallback(\n    ({ value }: { value: number | number[] }) => {\n      if (Array.isArray(props.paths) && Array.isArray(value)) {\n        value.forEach((value, i) => {\n          dataContextRef.current.updateDataValue(props.paths[i], value)\n        })\n      }\n\n      handleChange?.(value)\n    },\n    [handleChange, props.paths]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    value,\n    step,\n    min,\n    max,\n    disabled,\n    status: hasError ? 'error' : undefined,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical: props.vertical,\n    reverse: props.reverse,\n    hideButtons: props.hideButtons,\n    multiThumbBehavior: props.multiThumbBehavior,\n    thumbTitle: props.thumbTitle,\n    subtractTitle: props.subtractTitle,\n    addTitle: props.addTitle,\n    numberFormat: props.numberFormat,\n    tooltip: props.tooltip,\n    alwaysShowTooltip: props.alwaysShowTooltip,\n    extensions: props.extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useRef","FieldBlock","useFieldProps","Slider","pickSpacingProps","HelpButton","DataContext","useDataValue","SliderComponent","props","_ref","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","preparedProps","_objectSpread","step","min","max","id","width","layout","label","help","labelDescription","info","warning","error","hasError","disabled","handleChange","handleFocus","handleBlur","omitMultiplePathWarning","handleLocalChange","_ref2","forEach","i","updateDataValue","fieldBlockProps","forId","sliderProps","status","undefined","suffix","createElement","title","content","on_change","on_drag_start","on_drag_end","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldBlockWidth,\n  FieldHelpProps,\n  FieldProps,\n  Path,\n} from '../../types'\nimport Slider, { SliderProps } from '../../../../components/Slider'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { HelpButton } from '../../../../components'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\n\nexport type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {\n  value: string\n}\n\nexport type SliderValue = number | Array<number>\nexport type Props = FieldHelpProps &\n  FieldProps<SliderValue> & {\n    /**\n     * Define an array with JSON Pointers for multiple thumb buttons.\n     */\n    paths?: Array<Path>\n    step?: SliderProps['step'] | Path\n    min?: SliderProps['min'] | Path\n    max?: SliderProps['max'] | Path\n    vertical?: SliderProps['vertical']\n    reverse?: SliderProps['reverse']\n    hideButtons?: SliderProps['hideButtons']\n    multiThumbBehavior?: SliderProps['multiThumbBehavior']\n    thumbTitle?: SliderProps['thumbTitle']\n    subtractTitle?: SliderProps['subtractTitle']\n    addTitle?: SliderProps['addTitle']\n    numberFormat?: SliderProps['numberFormat']\n    tooltip?: SliderProps['tooltip']\n    alwaysShowTooltip?: SliderProps['alwaysShowTooltip']\n    extensions?: SliderProps['extensions']\n\n    /** Styling */\n    width?: FieldBlockWidth\n  }\n\nfunction SliderComponent(props: Props) {\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const { getSourceValue } = useDataValue()\n  const getValues = useCallback(\n    (source: SliderValue | Path | Array<Path>) => {\n      if (Array.isArray(source)) {\n        return source.map((s) => getSourceValue(s) || 0)\n      }\n\n      return getSourceValue(source) || 0\n    },\n    [getSourceValue]\n  )\n\n  const value = getValues(props.paths ?? props.path ?? props.value)\n  const preparedProps = {\n    ...props,\n    step: getSourceValue(props.step),\n    min: getSourceValue(props.min),\n    max: getSourceValue(props.max),\n  }\n\n  const {\n    id,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    layout,\n    label,\n    help,\n    labelDescription,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    handleChange,\n    handleFocus,\n    handleBlur,\n  } = useFieldProps(preparedProps, {\n    omitMultiplePathWarning: true,\n  })\n\n  const handleLocalChange = useCallback(\n    ({ value }: { value: number | number[] }) => {\n      if (Array.isArray(props.paths) && Array.isArray(value)) {\n        value.forEach((value, i) => {\n          dataContextRef.current.updateDataValue(props.paths[i], value)\n        })\n      }\n\n      handleChange?.(value)\n    },\n    [handleChange, props.paths]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    value,\n    step,\n    min,\n    max,\n    disabled,\n    status: hasError ? 'error' : undefined,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical: props.vertical,\n    reverse: props.reverse,\n    hideButtons: props.hideButtons,\n    multiThumbBehavior: props.multiThumbBehavior,\n    thumbTitle: props.thumbTitle,\n    subtractTitle: props.subtractTitle,\n    addTitle: props.addTitle,\n    numberFormat: props.numberFormat,\n    tooltip: props.tooltip,\n    alwaysShowTooltip: props.alwaysShowTooltip,\n    extensions: props.extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}

package/extensions/forms/FieldBlock/FieldBlock.js

@@ -49,6 +49,8 @@ function FieldBlock(props) {
       children
     } = _Object$assign,
     rest = _objectWithoutProperties(_Object$assign, _excluded);
+  const hasCustomWidth = /\d(rem)$/.test(String(width));
+  const hasCustomContentWidth = /\d(rem)$/.test(String(contentWidth));
   const iterateItemContext = useContext(IterateElementContext);
   const {
     index: iterateIndex
@@ -88,7 +90,7 @@ function FieldBlock(props) {
       }
     }
     return content;
-  }, [iterateIndex, labelProp, labelSuffixText]);
+  }, [iterateIndex, labelProp, labelSuffixText, optionalLabelSuffix]);
   const setInternalRecord = useCallback(props => {
     const {
       stateId,
@@ -246,7 +248,7 @@ function FieldBlock(props) {
     mountedFieldsRef.current = {};
     stateRecordRef.current = {};
   }, []);
-  const mainClasses = classnames('dnb-forms-field-block', className, width !== undefined && `dnb-forms-field-block--width-${width}`);
+  const mainClasses = classnames('dnb-forms-field-block', className, width && `dnb-forms-field-block--width-${hasCustomWidth ? 'custom' : width}`);
   const gridClasses = `dnb-forms-field-block__grid dnb-forms-field-block--layout-${layout}`;
   const enableFieldset = useEnableFieldset({
     label,
@@ -265,6 +267,20 @@ function FieldBlock(props) {
     size: labelSize,
     disabled
   };
+  const mainStyle = useMemo(() => {
+    if (hasCustomWidth) {
+      return {
+        '--dnb-forms-field-block-width': width
+      };
+    }
+  }, [hasCustomWidth, width]);
+  const contentsStyle = useMemo(() => {
+    if (hasCustomContentWidth) {
+      return {
+        '--dnb-forms-field-block-content-width': contentWidth
+      };
+    }
+  }, [contentWidth, hasCustomContentWidth]);
   if (dataContext !== null && dataContext !== void 0 && dataContext.prerenderFieldProps) {
     return null;
   }
@@ -283,6 +299,7 @@ function FieldBlock(props) {
     }
   }, React.createElement(Space, _extends({
     element: enableFieldset ? 'fieldset' : 'div',
+    style: mainStyle,
     className: mainClasses
   }, rest), React.createElement("div", {
     className: gridClasses
@@ -295,7 +312,8 @@ function FieldBlock(props) {
   }, labelDescription)))), React.createElement("div", {
     className: "dnb-forms-field-block__status"
   }, React.createElement(FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.error), React.createElement(FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.warning), React.createElement(FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.info)), React.createElement("div", {
-    className: classnames('dnb-forms-field-block__contents', contentClassName, contentWidth && `dnb-forms-field-block__contents--width-${contentWidth}`, align && `dnb-forms-field-block__contents--align-${align}`, composition && `dnb-forms-field-block__contents__composition--${composition === true ? 'horizontal' : composition}`),
+    style: contentsStyle,
+    className: classnames('dnb-forms-field-block__contents', contentClassName, contentWidth && `dnb-forms-field-block__contents--width-${hasCustomContentWidth ? 'custom' : contentWidth}`, align && `dnb-forms-field-block__contents--align-${align}`, composition && `dnb-forms-field-block__contents__composition--${composition === true ? 'horizontal' : composition}`),
     ref: contentsRef
   }, children))));
 }