@dnb/eufemia 10.27.0 → 10.28.0

package/es/extensions/forms/Form/Visibility/VisibilityDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityDocs.js","names":["VisibilityProperties","pathDefined","doc","type","status","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","inferData","visible","animate","KeepInDOM","element","children"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathValue: {\n    doc: 'Given data context path must match, as well as the `whenValue` value.',\n    type: 'string',\n    status: 'optional',\n  },\n  whenValue: {\n    doc: 'The value to match. Should be used together with `pathValue`.',\n    type: 'string',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly by boolean value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  KeepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbH,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,SAAS,EAAE;IACTR,GAAG,EAAE,uEAAuE;IAC5EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,uDAAuD;IAC5DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,OAAO,EAAE;IACPd,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDa,QAAQ,EAAE;IACRf,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"VisibilityDocs.js","names":["VisibilityProperties","pathDefined","doc","type","status","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","inferData","visible","animate","keepInDOM","element","children"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathValue: {\n    doc: 'Given data context path must match, as well as the `whenValue` value.',\n    type: 'string',\n    status: 'optional',\n  },\n  whenValue: {\n    doc: 'The value to match. Should be used together with `pathValue`.',\n    type: 'string',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly by boolean value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible. Can be used to let fields run validation.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbH,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,SAAS,EAAE;IACTR,GAAG,EAAE,uEAAuE;IAC5EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,OAAO,EAAE;IACPd,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDa,QAAQ,EAAE;IACRf,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/Form/data-context/getData.d.ts

@@ -1,8 +1,9 @@
 import { SharedStateId } from '../../../../shared/helpers/useSharedState';
-import type { FilterData } from '../../DataContext/Context';
+import type { UseDataReturnGetValue, UseDataReturnFilterData } from './useData';
 type SetDataReturn<Data> = {
     data: Data;
-    filterData: (filterDataHandler: FilterData) => Partial<Data>;
+    getValue: UseDataReturnGetValue<Data>;
+    filterData: UseDataReturnFilterData<Data>;
 };
 export default function getData<Data>(id: SharedStateId): SetDataReturn<Data>;
 export {};

package/es/extensions/forms/Form/data-context/getData.js

@@ -1,3 +1,4 @@
+import pointer from 'json-pointer';
 import { createSharedState } from '../../../../shared/helpers/useSharedState';
 export default function getData(id) {
   const sharedState = createSharedState(id);
@@ -7,8 +8,15 @@ export default function getData(id) {
     var _sharedAttachments$da, _sharedAttachments$da2;
     return (_sharedAttachments$da = sharedAttachments.data) === null || _sharedAttachments$da === void 0 ? void 0 : (_sharedAttachments$da2 = _sharedAttachments$da.filterDataHandler) === null || _sharedAttachments$da2 === void 0 ? void 0 : _sharedAttachments$da2.call(_sharedAttachments$da, data, filter);
   };
+  const getValue = path => {
+    if (pointer.has(data, path)) {
+      return pointer.get(data, path);
+    }
+    return undefined;
+  };
   return {
     data,
+    getValue,
     filterData
   };
 }

package/es/extensions/forms/Form/data-context/getData.js.map

@@ -1 +1 @@
-{"version":3,"file":"getData.js","names":["createSharedState","getData","id","sharedState","sharedAttachments","data","get","filterData","filter","_sharedAttachments$da","_sharedAttachments$da2","filterDataHandler","call"],"sources":["../../../../../../src/extensions/forms/Form/data-context/getData.tsx"],"sourcesContent":["import {\n  SharedStateId,\n  createSharedState,\n} from '../../../../shared/helpers/useSharedState'\nimport type {\n  FilterData,\n  FilterDataHandler,\n} from '../../DataContext/Context'\n\ntype SharedAttachment<Data> = {\n  filterDataHandler: FilterDataHandler<Data>\n}\n\ntype SetDataReturn<Data> = {\n  data: Data\n  filterData: (filterDataHandler: FilterData) => Partial<Data>\n}\n\nexport default function getData<Data>(\n  id: SharedStateId\n): SetDataReturn<Data> {\n  const sharedState = createSharedState(id)\n  const sharedAttachments = createSharedState<SharedAttachment<Data>>(\n    id + '-attachments'\n  )\n\n  const data = sharedState.get() as Data\n  const filterData: SetDataReturn<Data>['filterData'] = (filter) =>\n    sharedAttachments.data?.filterDataHandler?.(data, filter)\n\n  return {\n    data,\n    filterData,\n  }\n}\n"],"mappings":"AAAA,SAEEA,iBAAiB,QACZ,2CAA2C;AAelD,eAAe,SAASC,OAAOA,CAC7BC,EAAiB,EACI;EACrB,MAAMC,WAAW,GAAGH,iBAAiB,CAACE,EAAE,CAAC;EACzC,MAAME,iBAAiB,GAAGJ,iBAAiB,CACzCE,EAAE,GAAG,cACP,CAAC;EAED,MAAMG,IAAI,GAAGF,WAAW,CAACG,GAAG,CAAC,CAAS;EACtC,MAAMC,UAA6C,GAAIC,MAAM;IAAA,IAAAC,qBAAA,EAAAC,sBAAA;IAAA,QAAAD,qBAAA,GAC3DL,iBAAiB,CAACC,IAAI,cAAAI,qBAAA,wBAAAC,sBAAA,GAAtBD,qBAAA,CAAwBE,iBAAiB,cAAAD,sBAAA,uBAAzCA,sBAAA,CAAAE,IAAA,CAAAH,qBAAA,EAA4CJ,IAAI,EAAEG,MAAM,CAAC;EAAA;EAE3D,OAAO;IACLH,IAAI;IACJE;EACF,CAAC;AACH"}
+{"version":3,"file":"getData.js","names":["pointer","createSharedState","getData","id","sharedState","sharedAttachments","data","get","filterData","filter","_sharedAttachments$da","_sharedAttachments$da2","filterDataHandler","call","getValue","path","has","undefined"],"sources":["../../../../../../src/extensions/forms/Form/data-context/getData.tsx"],"sourcesContent":["import pointer from 'json-pointer'\nimport {\n  SharedStateId,\n  createSharedState,\n} from '../../../../shared/helpers/useSharedState'\nimport type { FilterDataHandler } from '../../DataContext/Context'\nimport type { Path } from '../../types'\nimport type {\n  UseDataReturnGetValue,\n  UseDataReturnFilterData,\n} from './useData'\n\ntype SharedAttachment<Data> = {\n  filterDataHandler: FilterDataHandler<Data>\n}\n\ntype SetDataReturn<Data> = {\n  data: Data\n  getValue: UseDataReturnGetValue<Data>\n  filterData: UseDataReturnFilterData<Data>\n}\n\nexport default function getData<Data>(\n  id: SharedStateId\n): SetDataReturn<Data> {\n  const sharedState = createSharedState(id)\n  const sharedAttachments = createSharedState<SharedAttachment<Data>>(\n    id + '-attachments'\n  )\n\n  const data = sharedState.get() as Data\n\n  const filterData: SetDataReturn<Data>['filterData'] = (filter) =>\n    sharedAttachments.data?.filterDataHandler?.(data, filter)\n\n  const getValue = (path: Path) => {\n    if (pointer.has(data, path)) {\n      return pointer.get(data, path)\n    }\n\n    return undefined\n  }\n\n  return {\n    data,\n    getValue,\n    filterData,\n  }\n}\n"],"mappings":"AAAA,OAAOA,OAAO,MAAM,cAAc;AAClC,SAEEC,iBAAiB,QACZ,2CAA2C;AAkBlD,eAAe,SAASC,OAAOA,CAC7BC,EAAiB,EACI;EACrB,MAAMC,WAAW,GAAGH,iBAAiB,CAACE,EAAE,CAAC;EACzC,MAAME,iBAAiB,GAAGJ,iBAAiB,CACzCE,EAAE,GAAG,cACP,CAAC;EAED,MAAMG,IAAI,GAAGF,WAAW,CAACG,GAAG,CAAC,CAAS;EAEtC,MAAMC,UAA6C,GAAIC,MAAM;IAAA,IAAAC,qBAAA,EAAAC,sBAAA;IAAA,QAAAD,qBAAA,GAC3DL,iBAAiB,CAACC,IAAI,cAAAI,qBAAA,wBAAAC,sBAAA,GAAtBD,qBAAA,CAAwBE,iBAAiB,cAAAD,sBAAA,uBAAzCA,sBAAA,CAAAE,IAAA,CAAAH,qBAAA,EAA4CJ,IAAI,EAAEG,MAAM,CAAC;EAAA;EAE3D,MAAMK,QAAQ,GAAIC,IAAU,IAAK;IAC/B,IAAIf,OAAO,CAACgB,GAAG,CAACV,IAAI,EAAES,IAAI,CAAC,EAAE;MAC3B,OAAOf,OAAO,CAACO,GAAG,CAACD,IAAI,EAAES,IAAI,CAAC;IAChC;IAEA,OAAOE,SAAS;EAClB,CAAC;EAED,OAAO;IACLX,IAAI;IACJQ,QAAQ;IACRN;EACF,CAAC;AACH"}

package/es/extensions/forms/Form/data-context/useData.d.ts

@@ -4,11 +4,14 @@ import { FilterData } from '../../DataContext/Context';
 type PathImpl<T, P extends string> = P extends `${infer Key}/${infer Rest}` ? Key extends keyof T ? Rest extends '' ? T[Key] : PathImpl<T[Key], Rest> : never : T[P & keyof T];
 type PathType<T, P extends string> = P extends `/${infer Rest}` ? PathImpl<T, Rest> : never;
 type UseDataReturnUpdate<Data> = <P extends Path>(path: P, value: ((value: PathType<Data, P>) => unknown) | unknown) => void;
+export type UseDataReturnGetValue<Data> = <P extends Path>(path: P) => PathType<Data, P>;
+export type UseDataReturnFilterData<Data> = (filterDataHandler: FilterData) => Partial<Data>;
 type UseDataReturn<Data> = {
     data: Data;
-    update: UseDataReturnUpdate<Data>;
     set: (newData: Data) => void;
-    filterData: (filterDataHandler: FilterData) => Partial<Data>;
+    update: UseDataReturnUpdate<Data>;
+    getValue: UseDataReturnGetValue<Data>;
+    filterData: UseDataReturnFilterData<Data>;
 };
 /**
  * Custom hook that provides form data management functionality.

package/es/extensions/forms/Form/data-context/useData.js

@@ -30,11 +30,13 @@ export default function useData(id = undefined, initialData = undefined) {
     const existingData = sharedDataRef.current.data || {};
     const existingValue = pointer.has(existingData, path) ? pointer.get(existingData, path) : undefined;
     const newValue = typeof value === 'function' ? value(existingValue) : value;
-    pointer.set(existingData, path, newValue);
-    if (id) {
-      sharedDataRef.current.extend(existingData);
-    } else {
-      updateDataValue(path, newValue);
+    if (newValue !== existingValue) {
+      pointer.set(existingData, path, newValue);
+      if (id) {
+        sharedDataRef.current.extend(existingData);
+      } else {
+        updateDataValue(path, newValue);
+      }
     }
   }, [id, updateDataValue]);
   const filterData = useCallback(filter => {
@@ -45,6 +47,12 @@ export default function useData(id = undefined, initialData = undefined) {
     }
     return context === null || context === void 0 ? void 0 : context.filterDataHandler(data, filter);
   }, [context, id]);
+  const getValue = useCallback(path => {
+    if (pointer.has(sharedDataRef.current.data, path)) {
+      return pointer.get(sharedDataRef.current.data, path);
+    }
+    return undefined;
+  }, []);
   useMountEffect(() => {
     if (id && !sharedDataRef.current.hadInitialData && initialData) {
       sharedDataRef.current.extend(initialData);
@@ -57,7 +65,8 @@ export default function useData(id = undefined, initialData = undefined) {
     data,
     update: updateHandler,
     set: setHandler,
+    getValue,
     filterData
-  }), [data, filterData, setHandler, updateHandler]);
+  }), [data, filterData, getValue, setHandler, updateHandler]);
 }
 //# sourceMappingURL=useData.js.map

package/es/extensions/forms/Form/data-context/useData.js.map

@@ -1 +1 @@
-{"version":3,"file":"useData.js","names":["useCallback","useContext","useMemo","useReducer","useRef","pointer","useSharedState","useMountEffect","DataContext","useData","id","undefined","initialData","sharedDataRef","sharedAttachmentsRef","forceUpdate","current","context","data","updateDataValue","setData","rerenderUseDataHook","setHandler","newData","update","updateHandler","path","value","existingData","existingValue","has","get","newValue","set","extend","filterData","filter","_sharedAttachmentsRef","_sharedAttachmentsRef2","filterDataHandler","call","hadInitialData"],"sources":["../../../../../../src/extensions/forms/Form/data-context/useData.tsx"],"sourcesContent":["import {\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react'\nimport pointer from 'json-pointer'\nimport {\n  SharedStateId,\n  useSharedState,\n} from '../../../../shared/helpers/useSharedState'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport type { Path } from '../../types'\nimport DataContext, {\n  FilterData,\n  FilterDataHandler,\n} from '../../DataContext/Context'\n\ntype PathImpl<T, P extends string> = P extends `${infer Key}/${infer Rest}`\n  ? Key extends keyof T\n    ? Rest extends ''\n      ? T[Key]\n      : PathImpl<T[Key], Rest>\n    : never\n  : T[P & keyof T]\n\ntype PathType<T, P extends string> = P extends `/${infer Rest}`\n  ? PathImpl<T, Rest>\n  : never\n\ntype UseDataReturnUpdate<Data> = <P extends Path>(\n  path: P,\n  value: ((value: PathType<Data, P>) => unknown) | unknown\n) => void\n\ntype UseDataReturn<Data> = {\n  data: Data\n  update: UseDataReturnUpdate<Data>\n  set: (newData: Data) => void\n  filterData: (filterDataHandler: FilterData) => Partial<Data>\n}\n\ntype SharedAttachment<Data> = {\n  rerenderUseDataHook: () => void\n  filterDataHandler?: FilterDataHandler<Data>\n}\n\n/**\n * Custom hook that provides form data management functionality.\n *\n * @template Data - The type of data being managed.\n * @param {SharedStateId} id - The identifier for the data.\n * @param {Data} initialData - The initial data value (optional).\n * @returns {UseDataReturn<Data>} An object containing the data and data management functions.\n */\nexport default function useData<Data>(\n  id: SharedStateId = undefined,\n  initialData: Data = undefined\n): UseDataReturn<Data> {\n  const sharedDataRef =\n    useRef<ReturnType<typeof useSharedState<Data>>>(null)\n  const sharedAttachmentsRef =\n    useRef<ReturnType<typeof useSharedState<SharedAttachment<Data>>>>(null)\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  sharedDataRef.current = useSharedState<Data>(\n    id,\n    initialData,\n    forceUpdate\n  )\n\n  // If no id is provided, use the context data\n  const context = useContext(DataContext)\n  if (!id && context?.data) {\n    sharedDataRef.current.data = context.data\n  }\n  const updateDataValue = context?.updateDataValue\n  const setData = context?.setData\n\n  sharedAttachmentsRef.current = useSharedState<SharedAttachment<Data>>(\n    id + '-attachments',\n    { rerenderUseDataHook: forceUpdate }\n  )\n\n  const setHandler = useCallback(\n    (newData: Data) => {\n      if (id) {\n        sharedDataRef.current.update(newData)\n      } else {\n        setData?.(newData)\n      }\n    },\n    [id, setData]\n  )\n\n  const updateHandler = useCallback<UseDataReturnUpdate<Data>>(\n    (path, value = undefined) => {\n      const existingData = sharedDataRef.current.data || ({} as Data)\n      const existingValue = pointer.has(existingData, path)\n        ? pointer.get(existingData, path)\n        : undefined\n\n      // get new value\n      const newValue =\n        typeof value === 'function' ? value(existingValue) : value\n\n      // update existing data\n      pointer.set(existingData, path, newValue)\n\n      // update provider\n      if (id) {\n        sharedDataRef.current.extend(existingData)\n      } else {\n        updateDataValue(path, newValue)\n      }\n    },\n    [id, updateDataValue]\n  )\n\n  const filterData = useCallback<UseDataReturn<Data>['filterData']>(\n    (filter) => {\n      const data = sharedDataRef.current.data\n\n      if (id) {\n        return sharedAttachmentsRef.current.data?.filterDataHandler?.(\n          data,\n          filter\n        )\n      }\n\n      return context?.filterDataHandler(data, filter)\n    },\n    [context, id]\n  )\n\n  useMountEffect(() => {\n    if (id && !sharedDataRef.current.hadInitialData && initialData) {\n      sharedDataRef.current.extend(initialData)\n    }\n  })\n\n  const { data } = sharedDataRef.current\n\n  return useMemo(\n    () => ({\n      data,\n      update: updateHandler,\n      set: setHandler,\n      filterData,\n    }),\n    [data, filterData, setHandler, updateHandler]\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"useData.js","names":["useCallback","useContext","useMemo","useReducer","useRef","pointer","useSharedState","useMountEffect","DataContext","useData","id","undefined","initialData","sharedDataRef","sharedAttachmentsRef","forceUpdate","current","context","data","updateDataValue","setData","rerenderUseDataHook","setHandler","newData","update","updateHandler","path","value","existingData","existingValue","has","get","newValue","set","extend","filterData","filter","_sharedAttachmentsRef","_sharedAttachmentsRef2","filterDataHandler","call","getValue","hadInitialData"],"sources":["../../../../../../src/extensions/forms/Form/data-context/useData.tsx"],"sourcesContent":["import {\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react'\nimport pointer from 'json-pointer'\nimport {\n  SharedStateId,\n  useSharedState,\n} from '../../../../shared/helpers/useSharedState'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport type { Path } from '../../types'\nimport DataContext, {\n  FilterData,\n  FilterDataHandler,\n} from '../../DataContext/Context'\n\ntype PathImpl<T, P extends string> = P extends `${infer Key}/${infer Rest}`\n  ? Key extends keyof T\n    ? Rest extends ''\n      ? T[Key]\n      : PathImpl<T[Key], Rest>\n    : never\n  : T[P & keyof T]\n\ntype PathType<T, P extends string> = P extends `/${infer Rest}`\n  ? PathImpl<T, Rest>\n  : never\n\ntype UseDataReturnUpdate<Data> = <P extends Path>(\n  path: P,\n  value: ((value: PathType<Data, P>) => unknown) | unknown\n) => void\n\nexport type UseDataReturnGetValue<Data> = <P extends Path>(\n  path: P\n) => PathType<Data, P>\n\nexport type UseDataReturnFilterData<Data> = (\n  filterDataHandler: FilterData\n) => Partial<Data>\n\ntype UseDataReturn<Data> = {\n  data: Data\n  set: (newData: Data) => void\n  update: UseDataReturnUpdate<Data>\n  getValue: UseDataReturnGetValue<Data>\n  filterData: UseDataReturnFilterData<Data>\n}\n\ntype SharedAttachment<Data> = {\n  rerenderUseDataHook: () => void\n  filterDataHandler?: FilterDataHandler<Data>\n}\n\n/**\n * Custom hook that provides form data management functionality.\n *\n * @template Data - The type of data being managed.\n * @param {SharedStateId} id - The identifier for the data.\n * @param {Data} initialData - The initial data value (optional).\n * @returns {UseDataReturn<Data>} An object containing the data and data management functions.\n */\nexport default function useData<Data>(\n  id: SharedStateId = undefined,\n  initialData: Data = undefined\n): UseDataReturn<Data> {\n  const sharedDataRef =\n    useRef<ReturnType<typeof useSharedState<Data>>>(null)\n  const sharedAttachmentsRef =\n    useRef<ReturnType<typeof useSharedState<SharedAttachment<Data>>>>(null)\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  sharedDataRef.current = useSharedState<Data>(\n    id,\n    initialData,\n    forceUpdate\n  )\n\n  // If no id is provided, use the context data\n  const context = useContext(DataContext)\n  if (!id && context?.data) {\n    sharedDataRef.current.data = context.data\n  }\n  const updateDataValue = context?.updateDataValue\n  const setData = context?.setData\n\n  sharedAttachmentsRef.current = useSharedState<SharedAttachment<Data>>(\n    id + '-attachments',\n    { rerenderUseDataHook: forceUpdate }\n  )\n\n  const setHandler = useCallback(\n    (newData: Data) => {\n      if (id) {\n        sharedDataRef.current.update(newData)\n      } else {\n        setData?.(newData)\n      }\n    },\n    [id, setData]\n  )\n\n  const updateHandler = useCallback<UseDataReturnUpdate<Data>>(\n    (path, value = undefined) => {\n      const existingData = sharedDataRef.current.data || ({} as Data)\n      const existingValue = pointer.has(existingData, path)\n        ? pointer.get(existingData, path)\n        : undefined\n\n      // get new value\n      const newValue =\n        typeof value === 'function' ? value(existingValue) : value\n\n      if (newValue !== existingValue) {\n        // update existing data\n        pointer.set(existingData, path, newValue)\n\n        // update provider\n        if (id) {\n          sharedDataRef.current.extend(existingData)\n        } else {\n          updateDataValue(path, newValue)\n        }\n      }\n    },\n    [id, updateDataValue]\n  )\n\n  const filterData = useCallback<UseDataReturn<Data>['filterData']>(\n    (filter) => {\n      const data = sharedDataRef.current.data\n\n      if (id) {\n        return sharedAttachmentsRef.current.data?.filterDataHandler?.(\n          data,\n          filter\n        )\n      }\n\n      return context?.filterDataHandler(data, filter)\n    },\n    [context, id]\n  )\n\n  const getValue = useCallback<UseDataReturn<Data>['getValue']>((path) => {\n    if (pointer.has(sharedDataRef.current.data, path)) {\n      return pointer.get(sharedDataRef.current.data, path)\n    }\n\n    return undefined\n  }, [])\n\n  useMountEffect(() => {\n    if (id && !sharedDataRef.current.hadInitialData && initialData) {\n      sharedDataRef.current.extend(initialData)\n    }\n  })\n\n  const { data } = sharedDataRef.current\n\n  return useMemo(\n    () => ({\n      data,\n      update: updateHandler,\n      set: setHandler,\n      getValue,\n      filterData,\n    }),\n    [data, filterData, getValue, setHandler, updateHandler]\n  )\n}\n"],"mappings":"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"}

package/es/extensions/forms/Iterate/AnimatedContainer/ElementBlock.js

@@ -65,7 +65,7 @@ function ElementBlock(props) {
     if (contextRef.current.hasErrorAndShowIt) {
       switchContainerMode('edit');
     }
-    const preventFocusOnErrorOpening = !contextRef.current.hasError;
+    const preventFocusOnErrorOpening = !contextRef.current.hasErrorAndShowIt;
     if (preventFocusOnErrorOpening) {
       if (state === 'opened') {
         var _contextRef$current, _contextRef$current$e, _contextRef$current$e2, _contextRef$current$e3;
@@ -102,7 +102,7 @@ function ElementBlock(props) {
       handleRemoveBlock
     }
   }, React.createElement(HeightAnimation, {
-    className: classnames('dnb-form-iterate-block', className, isNew && 'dnb-form-iterate-block--new', contextRef.current.hasError && 'dnb-form-iterate-block--error'),
+    className: classnames('dnb-form-iterate-block', className, isNew && 'dnb-form-iterate-block--new', contextRef.current.hasErrorAndShowIt && 'dnb-form-iterate-block--error'),
     open: openRef.current,
     onAnimationEnd: handleAnimationEnd,
     duration: 450,

package/es/extensions/forms/Iterate/AnimatedContainer/ElementBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementBlock.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","IterateElementContext","ElementBlockContext","FieldBoundaryContext","ElementBlock","props","forceUpdate","contextRef","current","hasError","hasErrorAndShowIt","containerMode","handleRemove","switchContainerMode","isNew","mode","open","ariaLabel","onAnimationEnd","className","children","openDelay","restProps","_objectWithoutProperties","_excluded","openRef","isRemoving","setOpenState","setTimeout","handleAnimationEnd","state","preventFocusOnErrorOpening","_contextRef$current","_contextRef$current$e","_contextRef$current$e2","_contextRef$current$e3","elementRef","focus","call","window","requestAnimationFrame","_document$activeEleme","document","activeElement","closest","_contextRef$current2","elements","containerRef","querySelectorAll","length","e","_contextRef$current3","_contextRef$current3$","fulfillRemove","handleRemoveBlock","keepItems","createElement","Provider","value","duration","keepInDOM","Stack","_extends","element","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/AnimatedContainer/ElementBlock.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Flex, HeightAnimation } from '../../../../components'\nimport IterateElementContext, {\n  IterateElementContextState,\n} from '../IterateElementContext'\nimport ElementBlockContext from './ElementBlockContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { ContainerMode } from '../Array/types'\n\nexport type Props = {\n  mode: ContainerMode\n  open?: boolean | undefined\n  ariaLabel?: string\n  openDelay?: number\n}\n\nfunction ElementBlock(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const contextRef = useRef<\n    IterateElementContextState & {\n      hasError?: boolean\n      hasErrorAndShowIt?: boolean\n    }\n  >()\n  contextRef.current = useContext(IterateElementContext) || {}\n\n  const { hasError, hasErrorAndShowIt } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasErrorAndShowIt = hasErrorAndShowIt\n  if (hasErrorAndShowIt) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { handleRemove, switchContainerMode, containerMode, isNew } =\n    contextRef.current\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    openDelay = 100,\n    ...restProps\n  } = props\n\n  const openRef = useRef(open ?? (containerMode === mode && !isNew))\n  const isRemoving = useRef(false)\n\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    if (!isRemoving.current) {\n      // - Set the open state, if it's controlled\n      if (typeof open !== 'undefined') {\n        setOpenState(open)\n      } else {\n        // - Open the block with animation, if it's in the right mode\n        if (openRef.current !== (containerMode === mode)) {\n          if (isNew) {\n            setTimeout(() => {\n              setOpenState(containerMode === mode)\n            }, openDelay) // in order to apply the animation\n          } else {\n            setOpenState(containerMode === mode)\n          }\n        }\n      }\n    }\n  }, [containerMode, isNew, mode, open, openDelay, setOpenState])\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      if (contextRef.current.hasErrorAndShowIt) {\n        switchContainerMode('edit')\n      }\n\n      const preventFocusOnErrorOpening = !contextRef.current.hasError\n      if (preventFocusOnErrorOpening) {\n        if (state === 'opened') {\n          contextRef.current?.elementRef?.current?.focus?.()\n        } else {\n          // Wait until the element is removed, then check if we can set focus\n          window.requestAnimationFrame(() => {\n            // try to focus on the second last element\n            try {\n              if (\n                // But not when we focus is already inside our element\n                !document.activeElement?.closest(\n                  '.dnb-form-iterate__element'\n                )\n              ) {\n                const elements =\n                  contextRef.current?.containerRef.current.querySelectorAll<HTMLDivElement>(\n                    '.dnb-form-iterate__element'\n                  )\n                elements[elements.length - 1].focus()\n              }\n            } catch (e) {\n              /**/\n            }\n          })\n        }\n      }\n\n      if (!openRef.current && isRemoving.current) {\n        isRemoving.current = false\n        contextRef.current?.fulfillRemove?.()\n      }\n\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, switchContainerMode]\n  )\n  const handleRemoveBlock = useCallback(() => {\n    isRemoving.current = true\n    handleRemove?.({ keepItems: true })\n    setOpenState(false)\n  }, [handleRemove, setOpenState])\n\n  return (\n    <ElementBlockContext.Provider value={{ handleRemoveBlock }}>\n      <HeightAnimation\n        className={classnames(\n          'dnb-form-iterate-block',\n          isNew && 'dnb-form-iterate-block--new',\n          contextRef.current.hasError && 'dnb-form-iterate-block--error',\n          className\n        )}\n        open={openRef.current}\n        onAnimationEnd={handleAnimationEnd}\n        duration={450}\n        keepInDOM // Ensure fields get mounted so they will sync with the data context\n      >\n        <Flex.Stack\n          className=\"dnb-form-iterate-block__inner\"\n          {...restProps}\n          element=\"section\"\n          aria-label={ariaLabel}\n        >\n          {children}\n        </Flex.Stack>\n      </HeightAnimation>\n    </ElementBlockContext.Provider>\n  )\n}\n\nElementBlock._supportsSpacingProps = true\nexport default ElementBlock\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,MAAM,QACD,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,OAAOC,qBAAqB,MAErB,0BAA0B;AACjC,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,oBAAoB,MAAM,sDAAsD;AAWvF,SAASC,YAAYA,CAACC,KAAiC,EAAE;EACvD,MAAM,GAAGC,WAAW,CAAC,GAAGV,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAElD,MAAMW,UAAU,GAAGV,MAAM,CAKvB,CAAC;EACHU,UAAU,CAACC,OAAO,GAAGd,UAAU,CAACO,qBAAqB,CAAC,IAAI,CAAC,CAAC;EAE5D,MAAM;IAAEQ,QAAQ;IAAEC;EAAkB,CAAC,GACnChB,UAAU,CAACS,oBAAoB,CAAC,IAAI,CAAC,CAAC;EACxCI,UAAU,CAACC,OAAO,CAACC,QAAQ,GAAGA,QAAQ;EACtCF,UAAU,CAACC,OAAO,CAACE,iBAAiB,GAAGA,iBAAiB;EACxD,IAAIA,iBAAiB,EAAE;IACrBH,UAAU,CAACC,OAAO,CAACG,aAAa,GAAG,MAAM;EAC3C;EAEA,MAAM;IAAEC,YAAY;IAAEC,mBAAmB;IAAEF,aAAa;IAAEG;EAAM,CAAC,GAC/DP,UAAU,CAACC,OAAO;EAEpB,MAAM;MACJO,IAAI;MACJC,IAAI;MACJC,SAAS;MACTC,cAAc;MACdC,SAAS;MACTC,QAAQ;MACRC,SAAS,GAAG;IAEd,CAAC,GAAGhB,KAAK;IADJiB,SAAS,GAAAC,wBAAA,CACVlB,KAAK,EAAAmB,SAAA;EAET,MAAMC,OAAO,GAAG5B,MAAM,CAACmB,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAKL,aAAa,KAAKI,IAAI,IAAI,CAACD,KAAM,CAAC;EAClE,MAAMY,UAAU,GAAG7B,MAAM,CAAC,KAAK,CAAC;EAEhC,MAAM8B,YAAY,GAAGlC,WAAW,CAAEuB,IAAa,IAAK;IAClDS,OAAO,CAACjB,OAAO,GAAGQ,IAAI;IACtBV,WAAW,CAAC,CAAC;EACf,CAAC,EAAE,EAAE,CAAC;EAENX,SAAS,CAAC,MAAM;IACd,IAAI,CAAC+B,UAAU,CAAClB,OAAO,EAAE;MAEvB,IAAI,OAAOQ,IAAI,KAAK,WAAW,EAAE;QAC/BW,YAAY,CAACX,IAAI,CAAC;MACpB,CAAC,MAAM;QAEL,IAAIS,OAAO,CAACjB,OAAO,MAAMG,aAAa,KAAKI,IAAI,CAAC,EAAE;UAChD,IAAID,KAAK,EAAE;YACTc,UAAU,CAAC,MAAM;cACfD,YAAY,CAAChB,aAAa,KAAKI,IAAI,CAAC;YACtC,CAAC,EAAEM,SAAS,CAAC;UACf,CAAC,MAAM;YACLM,YAAY,CAAChB,aAAa,KAAKI,IAAI,CAAC;UACtC;QACF;MACF;IACF;EACF,CAAC,EAAE,CAACJ,aAAa,EAAEG,KAAK,EAAEC,IAAI,EAAEC,IAAI,EAAEK,SAAS,EAAEM,YAAY,CAAC,CAAC;EAG/D,MAAME,kBAAkB,GAAGpC,WAAW,CACnCqC,KAAK,IAAK;IACT,IAAIvB,UAAU,CAACC,OAAO,CAACE,iBAAiB,EAAE;MACxCG,mBAAmB,CAAC,MAAM,CAAC;IAC7B;IAEA,MAAMkB,0BAA0B,GAAG,CAACxB,UAAU,CAACC,OAAO,CAACC,QAAQ;IAC/D,IAAIsB,0BAA0B,EAAE;MAC9B,IAAID,KAAK,KAAK,QAAQ,EAAE;QAAA,IAAAE,mBAAA,EAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;QACtB,CAAAH,mBAAA,GAAAzB,UAAU,CAACC,OAAO,cAAAwB,mBAAA,wBAAAC,qBAAA,GAAlBD,mBAAA,CAAoBI,UAAU,cAAAH,qBAAA,wBAAAC,sBAAA,GAA9BD,qBAAA,CAAgCzB,OAAO,cAAA0B,sBAAA,wBAAAC,sBAAA,GAAvCD,sBAAA,CAAyCG,KAAK,cAAAF,sBAAA,uBAA9CA,sBAAA,CAAAG,IAAA,CAAAJ,sBAAiD,CAAC;MACpD,CAAC,MAAM;QAELK,MAAM,CAACC,qBAAqB,CAAC,MAAM;UAEjC,IAAI;YAAA,IAAAC,qBAAA;YACF,IAEE,GAAAA,qBAAA,GAACC,QAAQ,CAACC,aAAa,cAAAF,qBAAA,eAAtBA,qBAAA,CAAwBG,OAAO,CAC9B,4BACF,CAAC,GACD;cAAA,IAAAC,oBAAA;cACA,MAAMC,QAAQ,IAAAD,oBAAA,GACZtC,UAAU,CAACC,OAAO,cAAAqC,oBAAA,uBAAlBA,oBAAA,CAAoBE,YAAY,CAACvC,OAAO,CAACwC,gBAAgB,CACvD,4BACF,CAAC;cACHF,QAAQ,CAACA,QAAQ,CAACG,MAAM,GAAG,CAAC,CAAC,CAACZ,KAAK,CAAC,CAAC;YACvC;UACF,CAAC,CAAC,OAAOa,CAAC,EAAE,CAEZ;QACF,CAAC,CAAC;MACJ;IACF;IAEA,IAAI,CAACzB,OAAO,CAACjB,OAAO,IAAIkB,UAAU,CAAClB,OAAO,EAAE;MAAA,IAAA2C,oBAAA,EAAAC,qBAAA;MAC1C1B,UAAU,CAAClB,OAAO,GAAG,KAAK;MAC1B,CAAA2C,oBAAA,GAAA5C,UAAU,CAACC,OAAO,cAAA2C,oBAAA,wBAAAC,qBAAA,GAAlBD,oBAAA,CAAoBE,aAAa,cAAAD,qBAAA,uBAAjCA,qBAAA,CAAAd,IAAA,CAAAa,oBAAoC,CAAC;IACvC;IAEAjC,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGY,KAAK,CAAC;EACzB,CAAC,EACD,CAACZ,cAAc,EAAEL,mBAAmB,CACtC,CAAC;EACD,MAAMyC,iBAAiB,GAAG7D,WAAW,CAAC,MAAM;IAC1CiC,UAAU,CAAClB,OAAO,GAAG,IAAI;IACzBI,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG;MAAE2C,SAAS,EAAE;IAAK,CAAC,CAAC;IACnC5B,YAAY,CAAC,KAAK,CAAC;EACrB,CAAC,EAAE,CAACf,YAAY,EAAEe,YAAY,CAAC,CAAC;EAEhC,OACEnC,KAAA,CAAAgE,aAAA,CAACtD,mBAAmB,CAACuD,QAAQ;IAACC,KAAK,EAAE;MAAEJ;IAAkB;EAAE,GACzD9D,KAAA,CAAAgE,aAAA,CAACxD,eAAe;IACdmB,SAAS,EAAErB,UAAU,CACnB,wBAAwB,EAGxBqB,SAAS,EAFTL,KAAK,IAAI,6BAA6B,EACtCP,UAAU,CAACC,OAAO,CAACC,QAAQ,IAAI,+BAEjC,CAAE;IACFO,IAAI,EAAES,OAAO,CAACjB,OAAQ;IACtBU,cAAc,EAAEW,kBAAmB;IACnC8B,QAAQ,EAAE,GAAI;IACdC,SAAS;EAAA,GAETpE,KAAA,CAAAgE,aAAA,CAACzD,IAAI,CAAC8D,KAAK,EAAAC,QAAA;IACT3C,SAAS,EAAC;EAA+B,GACrCG,SAAS;IACbyC,OAAO,EAAC,SAAS;IACjB,cAAY9C;EAAU,IAErBG,QACS,CACG,CACW,CAAC;AAEnC;AAEAhB,YAAY,CAAC4D,qBAAqB,GAAG,IAAI;AACzC,eAAe5D,YAAY"}
+{"version":3,"file":"ElementBlock.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","IterateElementContext","ElementBlockContext","FieldBoundaryContext","ElementBlock","props","forceUpdate","contextRef","current","hasError","hasErrorAndShowIt","containerMode","handleRemove","switchContainerMode","isNew","mode","open","ariaLabel","onAnimationEnd","className","children","openDelay","restProps","_objectWithoutProperties","_excluded","openRef","isRemoving","setOpenState","setTimeout","handleAnimationEnd","state","preventFocusOnErrorOpening","_contextRef$current","_contextRef$current$e","_contextRef$current$e2","_contextRef$current$e3","elementRef","focus","call","window","requestAnimationFrame","_document$activeEleme","document","activeElement","closest","_contextRef$current2","elements","containerRef","querySelectorAll","length","e","_contextRef$current3","_contextRef$current3$","fulfillRemove","handleRemoveBlock","keepItems","createElement","Provider","value","duration","keepInDOM","Stack","_extends","element","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/AnimatedContainer/ElementBlock.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Flex, HeightAnimation } from '../../../../components'\nimport IterateElementContext, {\n  IterateElementContextState,\n} from '../IterateElementContext'\nimport ElementBlockContext from './ElementBlockContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { ContainerMode } from '../Array/types'\n\nexport type Props = {\n  mode: ContainerMode\n  open?: boolean | undefined\n  ariaLabel?: string\n  openDelay?: number\n}\n\nfunction ElementBlock(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const contextRef = useRef<\n    IterateElementContextState & {\n      hasError?: boolean\n      hasErrorAndShowIt?: boolean\n    }\n  >()\n  contextRef.current = useContext(IterateElementContext) || {}\n\n  const { hasError, hasErrorAndShowIt } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasErrorAndShowIt = hasErrorAndShowIt\n\n  // - Set the container mode to \"edit\" if we have an error\n  if (hasErrorAndShowIt) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { handleRemove, switchContainerMode, containerMode, isNew } =\n    contextRef.current\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    openDelay = 100,\n    ...restProps\n  } = props\n\n  const openRef = useRef(open ?? (containerMode === mode && !isNew))\n  const isRemoving = useRef(false)\n\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    if (!isRemoving.current) {\n      // - Set the open state, if it's controlled\n      if (typeof open !== 'undefined') {\n        setOpenState(open)\n      } else {\n        // - Open the block with animation, if it's in the right mode\n        if (openRef.current !== (containerMode === mode)) {\n          if (isNew) {\n            setTimeout(() => {\n              setOpenState(containerMode === mode)\n            }, openDelay) // in order to apply the animation\n          } else {\n            setOpenState(containerMode === mode)\n          }\n        }\n      }\n    }\n  }, [containerMode, isNew, mode, open, openDelay, setOpenState])\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      // - Keep the block open if we have an error\n      if (contextRef.current.hasErrorAndShowIt) {\n        switchContainerMode('edit')\n      }\n\n      const preventFocusOnErrorOpening =\n        !contextRef.current.hasErrorAndShowIt\n      if (preventFocusOnErrorOpening) {\n        if (state === 'opened') {\n          contextRef.current?.elementRef?.current?.focus?.()\n        } else {\n          // Wait until the element is removed, then check if we can set focus\n          window.requestAnimationFrame(() => {\n            // try to focus on the second last element\n            try {\n              if (\n                // But not when we focus is already inside our element\n                !document.activeElement?.closest(\n                  '.dnb-form-iterate__element'\n                )\n              ) {\n                const elements =\n                  contextRef.current?.containerRef.current.querySelectorAll<HTMLDivElement>(\n                    '.dnb-form-iterate__element'\n                  )\n                elements[elements.length - 1].focus()\n              }\n            } catch (e) {\n              /**/\n            }\n          })\n        }\n      }\n\n      if (!openRef.current && isRemoving.current) {\n        isRemoving.current = false\n        contextRef.current?.fulfillRemove?.()\n      }\n\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, switchContainerMode]\n  )\n  const handleRemoveBlock = useCallback(() => {\n    isRemoving.current = true\n    handleRemove?.({ keepItems: true })\n    setOpenState(false)\n  }, [handleRemove, setOpenState])\n\n  return (\n    <ElementBlockContext.Provider value={{ handleRemoveBlock }}>\n      <HeightAnimation\n        className={classnames(\n          'dnb-form-iterate-block',\n          isNew && 'dnb-form-iterate-block--new',\n          contextRef.current.hasErrorAndShowIt &&\n            'dnb-form-iterate-block--error',\n          className\n        )}\n        open={openRef.current}\n        onAnimationEnd={handleAnimationEnd}\n        duration={450}\n        keepInDOM // Ensure fields get mounted so they will sync with the data context\n      >\n        <Flex.Stack\n          className=\"dnb-form-iterate-block__inner\"\n          {...restProps}\n          element=\"section\"\n          aria-label={ariaLabel}\n        >\n          {children}\n        </Flex.Stack>\n      </HeightAnimation>\n    </ElementBlockContext.Provider>\n  )\n}\n\nElementBlock._supportsSpacingProps = true\nexport default ElementBlock\n"],"mappings":"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"}

package/es/extensions/forms/Iterate/Array/Array.js

@@ -67,7 +67,9 @@ function ArrayComponent(props) {
         isNew,
         containerMode: modesRef.current[id],
         switchContainerMode: mode => {
+          var _isNewRef$current;
           modesRef.current[id] = mode;
+          (_isNewRef$current = isNewRef.current) === null || _isNewRef$current === void 0 ? true : delete _isNewRef$current[id];
           forceUpdate();
         },
         handleChange: (path, value) => {
@@ -91,10 +93,10 @@ function ArrayComponent(props) {
           handleChange(newArrayValue);
         },
         fulfillRemove: () => {
-          var _modesRef$current, _isNewRef$current;
+          var _modesRef$current, _isNewRef$current2;
           valueWhileClosingRef.current = null;
           (_modesRef$current = modesRef.current) === null || _modesRef$current === void 0 ? true : delete _modesRef$current[id];
-          (_isNewRef$current = isNewRef.current) === null || _isNewRef$current === void 0 ? true : delete _isNewRef$current[id];
+          (_isNewRef$current2 = isNewRef.current) === null || _isNewRef$current2 === void 0 ? true : delete _isNewRef$current2[id];
           const findIndex = idsRef.current.indexOf(id);
           idsRef.current.splice(findIndex, 1);
           forceUpdate();

package/es/extensions/forms/Iterate/Array/Array.js.map

@@ -1 +1 @@
-{"version":3,"file":"Array.js","names":["React","useMemo","useRef","useEffect","useReducer","createRef","useContext","Fragment","classnames","pointer","useFieldProps","makeUniqueId","Flex","pickSpacingProps","pickFlexContainerProps","IterateElementContext","SummaryListContext","ValueBlockContext","FieldBoundaryProvider","structuredClone","ArrayComponent","props","_props$value","salt","forceUpdate","summaryListContext","valueBlockContext","path","value","arrayValue","withoutFlex","emptyValue","placeholder","handleChange","onChange","children","idsRef","isNewRef","modesRef","valueWhileClosingRef","valueCountRef","containerRef","hadPushRef","innerRefs","omitFlex","current","elementData","_ref","map","index","_valueCountRef$curren","id","hasNewItems","length","push","isNew","containerMode","switchContainerMode","mode","newArrayValue","_objectSpread","set","handlePush","element","handleRemove","keepItems","splice","fulfillRemove","_modesRef$current","_isNewRef$current","findIndex","indexOf","restoreOriginalValue","last","flexProps","className","innerRef","WrapperElement","Stack","createElement","elementProps","elementRef","renderChildren","elementChild","contextValue","content","Array","isArray","child","Provider","key","Item","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useRef,\n  useEffect,\n  useReducer,\n  createRef,\n  useContext,\n  Fragment,\n} from 'react'\nimport classnames from 'classnames'\nimport pointer from 'json-pointer'\nimport { useFieldProps } from '../../hooks'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport { Flex } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport {\n  BasicProps as FlexContainerProps,\n  Props as FlexContainerAllProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport IterateElementContext, {\n  IterateElementContextState,\n} from '../IterateElementContext'\nimport SummaryListContext from '../../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from '../../ValueBlock/ValueBlockContext'\nimport FieldBoundaryProvider from '../../DataContext/FieldBoundary/FieldBoundaryProvider'\n\nimport type { ContainerMode, ElementChild, Props, Value } from './types'\nimport type { Identifier, Path } from '../../types'\n\n/**\n * Deprecated, as it is supported by all major browsers and Node.js >=v18\n * So its a question of time, when we will remove this polyfill\n */\nimport structuredClone from '@ungap/structured-clone'\n\nexport type * from './types'\n\nfunction ArrayComponent(props: Props) {\n  const [salt, forceUpdate] = useReducer(() => ({}), {})\n\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n\n  const {\n    path,\n    value: arrayValue,\n    withoutFlex,\n    emptyValue,\n    placeholder,\n    handleChange,\n    onChange,\n    children,\n  } = useFieldProps<Value, Props>(props)\n\n  const idsRef = useRef<Array<Identifier>>([])\n  const isNewRef = useRef<Record<string, boolean>>({})\n  const modesRef = useRef<Record<Identifier, ContainerMode>>({})\n  const valueWhileClosingRef = useRef<Array<unknown>>()\n  const valueCountRef = useRef(arrayValue)\n  const containerRef = useRef<HTMLDivElement>()\n  const hadPushRef = useRef<boolean>()\n  const innerRefs = useRef<\n    Record<string, React.RefObject<HTMLDivElement>>\n  >({})\n\n  const omitFlex = withoutFlex ?? (summaryListContext || valueBlockContext)\n\n  useEffect(() => {\n    // Update inside the useEffect, to support React.StrictMode\n    valueCountRef.current = arrayValue || []\n  }, [arrayValue])\n\n  const elementData = useMemo(() => {\n    return ((valueWhileClosingRef.current || arrayValue) ?? []).map(\n      (value, index) => {\n        const id = idsRef.current[index] || makeUniqueId()\n\n        const hasNewItems =\n          arrayValue.length > valueCountRef.current?.length\n\n        if (!idsRef.current[index]) {\n          isNewRef.current[id] = hasNewItems\n          idsRef.current.push(id)\n        }\n\n        const isNew = isNewRef.current[id] || false\n        if (!modesRef.current[id]) {\n          modesRef.current[id] = isNew ? 'edit' : 'view'\n        }\n\n        return {\n          id,\n          path,\n          value,\n          index,\n          arrayValue,\n          containerRef,\n          isNew,\n          containerMode: modesRef.current[id],\n          switchContainerMode: (mode: ContainerMode) => {\n            modesRef.current[id] = mode\n            forceUpdate()\n          },\n          handleChange: (path: Path, value: unknown) => {\n            const newArrayValue = structuredClone(arrayValue)\n\n            // Make sure we have a new object reference,\n            // else two new objects will be the same\n            newArrayValue[index] = { ...newArrayValue[index] }\n\n            pointer.set(newArrayValue, path, value)\n            handleChange(newArrayValue)\n          },\n          handlePush: (element: unknown) => {\n            hadPushRef.current = true\n            handleChange([...(arrayValue ?? []), element])\n          },\n          handleRemove: ({ keepItems = false } = {}) => {\n            if (keepItems) {\n              // Add a backup as the array value while animating\n              valueWhileClosingRef.current = arrayValue\n            }\n\n            const newArrayValue = structuredClone(arrayValue)\n            newArrayValue.splice(index, 1)\n            handleChange(newArrayValue)\n          },\n\n          // - Called after animation end\n          fulfillRemove: () => {\n            valueWhileClosingRef.current = null\n            delete modesRef.current?.[id]\n            delete isNewRef.current?.[id]\n            const findIndex = idsRef.current.indexOf(id)\n            idsRef.current.splice(findIndex, 1)\n            forceUpdate()\n          },\n\n          // - Called when cancel button press\n          restoreOriginalValue: (value: unknown) => {\n            const newArrayValue = structuredClone(arrayValue)\n            newArrayValue[index] = value\n            handleChange(newArrayValue)\n          },\n        } as IterateElementContextState\n      }\n    )\n\n    // In order to update \"valueWhileClosingRef\" we need to have \"salt\" in the deps array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [salt, arrayValue, path, handleChange])\n\n  // - Call the onChange callback when a new element is added without calling \"handlePush\"\n  useMemo(() => {\n    const last = elementData?.[elementData.length - 1]\n    if (last?.isNew && !hadPushRef.current) {\n      onChange?.(arrayValue)\n    } else {\n      hadPushRef.current = false\n    }\n  }, [arrayValue, elementData, onChange])\n\n  const flexProps: FlexContainerProps & {\n    innerRef: FlexContainerAllProps['innerRef']\n  } = {\n    className: classnames('dnb-form-iterate', props?.className),\n    ...pickFlexContainerProps(props as FlexContainerProps),\n    ...pickSpacingProps(props),\n    innerRef: containerRef,\n  }\n\n  const WrapperElement = omitFlex ? Fragment : Flex.Stack\n\n  return (\n    <WrapperElement {...(omitFlex ? null : flexProps)}>\n      {arrayValue === emptyValue || props?.value?.length === 0\n        ? placeholder\n        : elementData.map((elementProps) => {\n            const { id, value, index } = elementProps\n            const elementRef = (innerRefs.current[id] =\n              innerRefs.current[id] || createRef<HTMLDivElement>())\n\n            const renderChildren = (elementChild: ElementChild) => {\n              return typeof elementChild === 'function'\n                ? elementChild(value, index)\n                : elementChild\n            }\n\n            const contextValue = {\n              ...elementProps,\n              elementRef,\n            }\n\n            const content = Array.isArray(children)\n              ? children.map((child) => renderChildren(child))\n              : renderChildren(children)\n\n            if (omitFlex) {\n              return (\n                <IterateElementContext.Provider\n                  key={`element-${id}`}\n                  value={contextValue}\n                >\n                  <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n                </IterateElementContext.Provider>\n              )\n            }\n\n            return (\n              <Flex.Item\n                className=\"dnb-form-iterate__element\"\n                tabIndex={-1}\n                innerRef={elementRef}\n                key={`element-${id}`}\n              >\n                <IterateElementContext.Provider value={contextValue}>\n                  <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n                </IterateElementContext.Provider>\n              </Flex.Item>\n            )\n          })}\n    </WrapperElement>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":"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"}
+{"version":3,"file":"Array.js","names":["React","useMemo","useRef","useEffect","useReducer","createRef","useContext","Fragment","classnames","pointer","useFieldProps","makeUniqueId","Flex","pickSpacingProps","pickFlexContainerProps","IterateElementContext","SummaryListContext","ValueBlockContext","FieldBoundaryProvider","structuredClone","ArrayComponent","props","_props$value","salt","forceUpdate","summaryListContext","valueBlockContext","path","value","arrayValue","withoutFlex","emptyValue","placeholder","handleChange","onChange","children","idsRef","isNewRef","modesRef","valueWhileClosingRef","valueCountRef","containerRef","hadPushRef","innerRefs","omitFlex","current","elementData","_ref","map","index","_valueCountRef$curren","id","hasNewItems","length","push","isNew","containerMode","switchContainerMode","mode","_isNewRef$current","newArrayValue","_objectSpread","set","handlePush","element","handleRemove","keepItems","splice","fulfillRemove","_modesRef$current","_isNewRef$current2","findIndex","indexOf","restoreOriginalValue","last","flexProps","className","innerRef","WrapperElement","Stack","createElement","elementProps","elementRef","renderChildren","elementChild","contextValue","content","Array","isArray","child","Provider","key","Item","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useRef,\n  useEffect,\n  useReducer,\n  createRef,\n  useContext,\n  Fragment,\n} from 'react'\nimport classnames from 'classnames'\nimport pointer from 'json-pointer'\nimport { useFieldProps } from '../../hooks'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport { Flex } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport {\n  BasicProps as FlexContainerProps,\n  Props as FlexContainerAllProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport IterateElementContext, {\n  IterateElementContextState,\n} from '../IterateElementContext'\nimport SummaryListContext from '../../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from '../../ValueBlock/ValueBlockContext'\nimport FieldBoundaryProvider from '../../DataContext/FieldBoundary/FieldBoundaryProvider'\n\nimport type { ContainerMode, ElementChild, Props, Value } from './types'\nimport type { Identifier, Path } from '../../types'\n\n/**\n * Deprecated, as it is supported by all major browsers and Node.js >=v18\n * So its a question of time, when we will remove this polyfill\n */\nimport structuredClone from '@ungap/structured-clone'\n\nexport type * from './types'\n\nfunction ArrayComponent(props: Props) {\n  const [salt, forceUpdate] = useReducer(() => ({}), {})\n\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n\n  const {\n    path,\n    value: arrayValue,\n    withoutFlex,\n    emptyValue,\n    placeholder,\n    handleChange,\n    onChange,\n    children,\n  } = useFieldProps<Value, Props>(props)\n\n  const idsRef = useRef<Array<Identifier>>([])\n  const isNewRef = useRef<Record<string, boolean>>({})\n  const modesRef = useRef<Record<Identifier, ContainerMode>>({})\n  const valueWhileClosingRef = useRef<Array<unknown>>()\n  const valueCountRef = useRef(arrayValue)\n  const containerRef = useRef<HTMLDivElement>()\n  const hadPushRef = useRef<boolean>()\n  const innerRefs = useRef<\n    Record<string, React.RefObject<HTMLDivElement>>\n  >({})\n\n  const omitFlex = withoutFlex ?? (summaryListContext || valueBlockContext)\n\n  useEffect(() => {\n    // Update inside the useEffect, to support React.StrictMode\n    valueCountRef.current = arrayValue || []\n  }, [arrayValue])\n\n  const elementData = useMemo(() => {\n    return ((valueWhileClosingRef.current || arrayValue) ?? []).map(\n      (value, index) => {\n        const id = idsRef.current[index] || makeUniqueId()\n\n        const hasNewItems =\n          arrayValue.length > valueCountRef.current?.length\n\n        if (!idsRef.current[index]) {\n          isNewRef.current[id] = hasNewItems\n          idsRef.current.push(id)\n        }\n\n        const isNew = isNewRef.current[id] || false\n        if (!modesRef.current[id]) {\n          modesRef.current[id] = isNew ? 'edit' : 'view'\n        }\n\n        return {\n          id,\n          path,\n          value,\n          index,\n          arrayValue,\n          containerRef,\n          isNew,\n          containerMode: modesRef.current[id],\n          switchContainerMode: (mode: ContainerMode) => {\n            modesRef.current[id] = mode\n            delete isNewRef.current?.[id]\n            forceUpdate()\n          },\n          handleChange: (path: Path, value: unknown) => {\n            const newArrayValue = structuredClone(arrayValue)\n\n            // Make sure we have a new object reference,\n            // else two new objects will be the same\n            newArrayValue[index] = { ...newArrayValue[index] }\n\n            pointer.set(newArrayValue, path, value)\n            handleChange(newArrayValue)\n          },\n          handlePush: (element: unknown) => {\n            hadPushRef.current = true\n            handleChange([...(arrayValue ?? []), element])\n          },\n          handleRemove: ({ keepItems = false } = {}) => {\n            if (keepItems) {\n              // Add a backup as the array value while animating\n              valueWhileClosingRef.current = arrayValue\n            }\n\n            const newArrayValue = structuredClone(arrayValue)\n            newArrayValue.splice(index, 1)\n            handleChange(newArrayValue)\n          },\n\n          // - Called after animation end\n          fulfillRemove: () => {\n            valueWhileClosingRef.current = null\n            delete modesRef.current?.[id]\n            delete isNewRef.current?.[id]\n            const findIndex = idsRef.current.indexOf(id)\n            idsRef.current.splice(findIndex, 1)\n            forceUpdate()\n          },\n\n          // - Called when cancel button press\n          restoreOriginalValue: (value: unknown) => {\n            const newArrayValue = structuredClone(arrayValue)\n            newArrayValue[index] = value\n            handleChange(newArrayValue)\n          },\n        } as IterateElementContextState\n      }\n    )\n\n    // In order to update \"valueWhileClosingRef\" we need to have \"salt\" in the deps array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [salt, arrayValue, path, handleChange])\n\n  // - Call the onChange callback when a new element is added without calling \"handlePush\"\n  useMemo(() => {\n    const last = elementData?.[elementData.length - 1]\n    if (last?.isNew && !hadPushRef.current) {\n      onChange?.(arrayValue)\n    } else {\n      hadPushRef.current = false\n    }\n  }, [arrayValue, elementData, onChange])\n\n  const flexProps: FlexContainerProps & {\n    innerRef: FlexContainerAllProps['innerRef']\n  } = {\n    className: classnames('dnb-form-iterate', props?.className),\n    ...pickFlexContainerProps(props as FlexContainerProps),\n    ...pickSpacingProps(props),\n    innerRef: containerRef,\n  }\n\n  const WrapperElement = omitFlex ? Fragment : Flex.Stack\n\n  return (\n    <WrapperElement {...(omitFlex ? null : flexProps)}>\n      {arrayValue === emptyValue || props?.value?.length === 0\n        ? placeholder\n        : elementData.map((elementProps) => {\n            const { id, value, index } = elementProps\n            const elementRef = (innerRefs.current[id] =\n              innerRefs.current[id] || createRef<HTMLDivElement>())\n\n            const renderChildren = (elementChild: ElementChild) => {\n              return typeof elementChild === 'function'\n                ? elementChild(value, index)\n                : elementChild\n            }\n\n            const contextValue = {\n              ...elementProps,\n              elementRef,\n            }\n\n            const content = Array.isArray(children)\n              ? children.map((child) => renderChildren(child))\n              : renderChildren(children)\n\n            if (omitFlex) {\n              return (\n                <IterateElementContext.Provider\n                  key={`element-${id}`}\n                  value={contextValue}\n                >\n                  <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n                </IterateElementContext.Provider>\n              )\n            }\n\n            return (\n              <Flex.Item\n                className=\"dnb-form-iterate__element\"\n                tabIndex={-1}\n                innerRef={elementRef}\n                key={`element-${id}`}\n              >\n                <IterateElementContext.Provider value={contextValue}>\n                  <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n                </IterateElementContext.Provider>\n              </Flex.Item>\n            )\n          })}\n    </WrapperElement>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":"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"}

package/es/extensions/forms/Iterate/EditContainer/EditToolbarTools.js

@@ -7,8 +7,8 @@ import useTranslation from '../../hooks/useTranslation';
 import IterateElementContext from '../IterateElementContext';
 import { check, close } from '../../../../icons';
 import RemoveButton from '../RemoveButton';
+import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext';
 export default function EditToolbarTools() {
-  const iterateElementContext = useContext(IterateElementContext);
   const {
     restoreOriginalValue,
     switchContainerMode,
@@ -16,7 +16,10 @@ export default function EditToolbarTools() {
     arrayValue,
     index,
     isNew
-  } = iterateElementContext !== null && iterateElementContext !== void 0 ? iterateElementContext : {};
+  } = useContext(IterateElementContext) || {};
+  const {
+    hasErrorAndShowIt
+  } = useContext(FieldBoundaryContext) || {};
   const translation = useTranslation().Iterate;
   const valueBackupRef = useRef();
   const wasNew = useWasNew({
@@ -46,7 +49,8 @@ export default function EditToolbarTools() {
     variant: "tertiary",
     icon: check,
     icon_position: "left",
-    on_click: doneHandler
+    on_click: doneHandler,
+    disabled: hasErrorAndShowIt
   }, translation.done), wasNew ? _RemoveButton || (_RemoveButton = React.createElement(RemoveButton, null)) : React.createElement(Button, {
     variant: "tertiary",
     icon: close,

package/es/extensions/forms/Iterate/EditContainer/EditToolbarTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useEffect","useRef","Button","Flex","useTranslation","IterateElementContext","check","close","RemoveButton","EditToolbarTools","iterateElementContext","restoreOriginalValue","switchContainerMode","containerMode","arrayValue","index","isNew","translation","Iterate","valueBackupRef","wasNew","useWasNew","current","cancelHandler","doneHandler","createElement","Horizontal","spacing","variant","icon","icon_position","on_click","done","_RemoveButton","cancel","wasNewRef"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport { Button, Flex } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { check, close } from '../../../../icons'\nimport RemoveButton from '../RemoveButton'\nimport { ContainerMode } from '../Array/types'\n\nexport default function EditToolbarTools() {\n  const iterateElementContext = useContext(IterateElementContext)\n  const {\n    restoreOriginalValue,\n    switchContainerMode,\n    containerMode,\n    arrayValue,\n    index,\n    isNew,\n  } = iterateElementContext ?? {}\n\n  const translation = useTranslation().Iterate\n  const valueBackupRef = useRef<unknown>()\n  const wasNew = useWasNew({ isNew, containerMode })\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const cancelHandler = useCallback(() => {\n    if (valueBackupRef.current) {\n      restoreOriginalValue?.(valueBackupRef.current)\n    }\n    switchContainerMode?.('view')\n  }, [restoreOriginalValue, switchContainerMode])\n  const doneHandler = useCallback(() => {\n    switchContainerMode?.('view')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal spacing=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={check}\n        icon_position=\"left\"\n        on_click={doneHandler}\n      >\n        {translation.done}\n      </Button>\n\n      {wasNew ? (\n        <RemoveButton />\n      ) : (\n        <Button\n          variant=\"tertiary\"\n          icon={close}\n          icon_position=\"left\"\n          on_click={cancelHandler}\n        >\n          {translation.cancel}\n        </Button>\n      )}\n    </Flex.Horizontal>\n  )\n}\n\nexport function useWasNew({\n  isNew,\n  containerMode,\n}: {\n  isNew: boolean\n  containerMode: ContainerMode\n}) {\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  return wasNewRef.current\n}\n"],"mappings":"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"}
+{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useEffect","useRef","Button","Flex","useTranslation","IterateElementContext","check","close","RemoveButton","FieldBoundaryContext","EditToolbarTools","restoreOriginalValue","switchContainerMode","containerMode","arrayValue","index","isNew","hasErrorAndShowIt","translation","Iterate","valueBackupRef","wasNew","useWasNew","current","cancelHandler","doneHandler","createElement","Horizontal","spacing","variant","icon","icon_position","on_click","disabled","done","_RemoveButton","cancel","wasNewRef"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport { Button, Flex } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { check, close } from '../../../../icons'\nimport RemoveButton from '../RemoveButton'\nimport { ContainerMode } from '../Array/types'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function EditToolbarTools() {\n  const {\n    restoreOriginalValue,\n    switchContainerMode,\n    containerMode,\n    arrayValue,\n    index,\n    isNew,\n  } = useContext(IterateElementContext) || {}\n  const { hasErrorAndShowIt } = useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().Iterate\n  const valueBackupRef = useRef<unknown>()\n  const wasNew = useWasNew({ isNew, containerMode })\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const cancelHandler = useCallback(() => {\n    if (valueBackupRef.current) {\n      restoreOriginalValue?.(valueBackupRef.current)\n    }\n    switchContainerMode?.('view')\n  }, [restoreOriginalValue, switchContainerMode])\n  const doneHandler = useCallback(() => {\n    switchContainerMode?.('view')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal spacing=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={check}\n        icon_position=\"left\"\n        on_click={doneHandler}\n        disabled={hasErrorAndShowIt}\n      >\n        {translation.done}\n      </Button>\n\n      {wasNew ? (\n        <RemoveButton />\n      ) : (\n        <Button\n          variant=\"tertiary\"\n          icon={close}\n          icon_position=\"left\"\n          on_click={cancelHandler}\n        >\n          {translation.cancel}\n        </Button>\n      )}\n    </Flex.Horizontal>\n  )\n}\n\nexport function useWasNew({\n  isNew,\n  containerMode,\n}: {\n  isNew: boolean\n  containerMode: ContainerMode\n}) {\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  return wasNewRef.current\n}\n"],"mappings":"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"}

package/es/extensions/forms/Iterate/style/dnb-form-iterate.css

@@ -12,7 +12,7 @@
   flex: 1;
   margin-bottom: var(--space);
   padding: var(--padding, 1rem);
-  transition: transform 400ms var(--easing-default) 50ms;
+  transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
 .dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {

package/es/extensions/forms/Iterate/style/dnb-form-iterate.min.css

@@ -1 +1 @@
-.dnb-form-iterate-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-form-iterate-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-form-iterate-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-form-iterate-block__inner{flex:1;margin-bottom:var(--space);padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms}.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem;box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-form-iterate-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner{transform:translateY(-.5rem)}.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner{transform:translateY(0)}.dnb-form-iterate__element{outline:none}.dnb-form-iterate>.dnb-form-iterate__element:has(.dnb-form-iterate-block){margin-top:0}
+.dnb-form-iterate-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-form-iterate-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-form-iterate-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-form-iterate-block__inner{flex:1;margin-bottom:var(--space);padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem;box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-form-iterate-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner{transform:translateY(-.5rem)}.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner{transform:translateY(0)}.dnb-form-iterate__element{outline:none}.dnb-form-iterate>.dnb-form-iterate__element:has(.dnb-form-iterate-block){margin-top:0}

package/es/extensions/forms/Iterate/style/dnb-form-iterate.scss

@@ -38,7 +38,9 @@
         box-shadow: inset 0 0 0 2px var(--block-outline-color);
       }
 
-      transition: transform 400ms var(--easing-default) 50ms;
+      transition:
+        transform 400ms var(--easing-default) 50ms,
+        box-shadow 0.8s var(--easing-default);
       transform: translateY(-2.5rem);
 
       .dnb-dl .dnb-dd {

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

@@ -499,7 +499,7 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
   flex: 1;
   margin-bottom: var(--space);
   padding: var(--padding, 1rem);
-  transition: transform 400ms var(--easing-default) 50ms;
+  transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
 .dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {

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

@@ -1 +1 @@
-.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{display:flex}.dnb-forms-field-number__contents--has-controls .dnb-input__input{align-items:center}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border{border-radius:0}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover,html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within{box-shadow:none}.dnb-forms-field-number__contents--has-controls>.dnb-input__border--root{--input-border-inset: ;--input-border-inset--hover: ;--input-border-inset--active: ;--input-border-inset--focus: ;--input-border-inset--disabled: }html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button{color:var(--color-fire-red)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover{color:var(--color-white)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.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__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block{width:100%}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}.dnb-forms-button-row{display:flex;flex-flow:row;flex-wrap:wrap;gap:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]),.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top],.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-button--primary:not([class*=space__left]),.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}:root{--forms-card-max-width:36.5rem}.dnb-forms-form .dnb-card{max-width:var(--forms-card-max-width)}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-submit-indicator{--padding-left:0.5em;display:inline}.dnb-form-submit-indicator__content{font-size:0;line-height:1em;transition:font-size .8s var(--easing-default);will-change:font-size}.dnb-form-submit-indicator__content b{animation-delay:.2s;animation-duration:1.3s;animation-iteration-count:infinite;animation-name:submit-indicator-dot;color:var(--dots-color,currentColor);opacity:.2;padding-left:.125em}.dnb-form-submit-indicator__content b:first-of-type{animation-delay:50ms;padding-left:var(--padding-left)}.dnb-form-submit-indicator__content b:nth-of-type(2){animation-delay:.2s}.dnb-form-submit-indicator__content b:nth-of-type(3){animation-delay:.4s}html[data-visual-test] .dnb-form-submit-indicator__content b{animation:none}.dnb-form-submit-indicator--state-pending .dnb-form-submit-indicator__content{font-size:1em;font-weight:var(--font-weight-bold)}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content{font-size:1em}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon{color:var(--color-success-green);padding-left:var(--padding-left)}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon--default{font-size:1em}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content__label{font-size:var(--font-size-small);padding-left:calc(var(--padding-left)*2)}.dnb-form-submit-indicator--inline-wrap .dnb-form-submit-indicator__content{--padding-left:0.25em;display:flex}@keyframes submit-indicator-dot{0%{opacity:.2}15%{opacity:1}50%{opacity:1}60%{opacity:.3}to{opacity:.2}}@keyframes submit-indicator-success{0%{font-size:1em;opacity:.2}20%{font-size:1em;opacity:1}80%{opacity:1}85%{font-size:1em;opacity:.3}90%{opacity:0}to{font-size:0;opacity:0}}.dnb-form-iterate-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-form-iterate-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-form-iterate-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-form-iterate-block__inner{flex:1;margin-bottom:var(--space);padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms}.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem;box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-form-iterate-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner{transform:translateY(-.5rem)}.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner{transform:translateY(0)}.dnb-form-iterate__element{outline:none}.dnb-form-iterate>.dnb-form-iterate__element:has(.dnb-form-iterate-block){margin-top:0}.dnb-form-summary-list.dnb-dl .dnb-dt,.dnb-form-summary-list.dnb-dl:not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-form-summary-list.dnb-dl>.dnb-dd>.dnb-dl{margin:0}.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-form-summary-list.dnb-dl.dnb-dl__layout--grid{row-gap:var(--spacing-medium)}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__sidebar{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-card{--border-color:var(--color-pistachio);max-width:var(--forms-card-max-width)}@media screen and (min-width:40em){.dnb-forms-wizard-layout+.dnb-form-status+.dnb-form-status:not([class*=space__left]),.dnb-forms-wizard-layout+.dnb-form-status:not([class*=space__left]){margin-left:var(--spacing-medium)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-step{outline:none}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}.dnb-forms-field-expiry .dnb-multi-input-mask{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell{justify-content:center}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{display:flex}.dnb-forms-field-number__contents--has-controls .dnb-input__input{align-items:center}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border{border-radius:0}.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within,.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover,html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within{box-shadow:none}.dnb-forms-field-number__contents--has-controls>.dnb-input__border--root{--input-border-inset: ;--input-border-inset--hover: ;--input-border-inset--active: ;--input-border-inset--focus: ;--input-border-inset--disabled: }html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button{color:var(--color-fire-red)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover{color:var(--color-white)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}.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__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block{width:100%}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}.dnb-forms-button-row{display:flex;flex-flow:row;flex-wrap:wrap;gap:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]),.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top],.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-button--primary:not([class*=space__left]),.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}:root{--forms-card-max-width:36.5rem}.dnb-forms-form .dnb-card{max-width:var(--forms-card-max-width)}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-submit-indicator{--padding-left:0.5em;display:inline}.dnb-form-submit-indicator__content{font-size:0;line-height:1em;transition:font-size .8s var(--easing-default);will-change:font-size}.dnb-form-submit-indicator__content b{animation-delay:.2s;animation-duration:1.3s;animation-iteration-count:infinite;animation-name:submit-indicator-dot;color:var(--dots-color,currentColor);opacity:.2;padding-left:.125em}.dnb-form-submit-indicator__content b:first-of-type{animation-delay:50ms;padding-left:var(--padding-left)}.dnb-form-submit-indicator__content b:nth-of-type(2){animation-delay:.2s}.dnb-form-submit-indicator__content b:nth-of-type(3){animation-delay:.4s}html[data-visual-test] .dnb-form-submit-indicator__content b{animation:none}.dnb-form-submit-indicator--state-pending .dnb-form-submit-indicator__content{font-size:1em;font-weight:var(--font-weight-bold)}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content{font-size:1em}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon{color:var(--color-success-green);padding-left:var(--padding-left)}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon--default{font-size:1em}.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content__label{font-size:var(--font-size-small);padding-left:calc(var(--padding-left)*2)}.dnb-form-submit-indicator--inline-wrap .dnb-form-submit-indicator__content{--padding-left:0.25em;display:flex}@keyframes submit-indicator-dot{0%{opacity:.2}15%{opacity:1}50%{opacity:1}60%{opacity:.3}to{opacity:.2}}@keyframes submit-indicator-success{0%{font-size:1em;opacity:.2}20%{font-size:1em;opacity:1}80%{opacity:1}85%{font-size:1em;opacity:.3}90%{opacity:0}to{font-size:0;opacity:0}}.dnb-form-iterate-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-form-iterate-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-form-iterate-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-form-iterate-block__inner{flex:1;margin-bottom:var(--space);padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem;box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-form-iterate-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner{transform:translateY(-.5rem)}.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner{transform:translateY(0)}.dnb-form-iterate__element{outline:none}.dnb-form-iterate>.dnb-form-iterate__element:has(.dnb-form-iterate-block){margin-top:0}.dnb-form-summary-list.dnb-dl .dnb-dt,.dnb-form-summary-list.dnb-dl:not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-form-summary-list.dnb-dl>.dnb-dd>.dnb-dl{margin:0}.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-form-summary-list.dnb-dl.dnb-dl__layout--grid{row-gap:var(--spacing-medium)}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__sidebar{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-card{--border-color:var(--color-pistachio);max-width:var(--forms-card-max-width)}@media screen and (min-width:40em){.dnb-forms-wizard-layout+.dnb-form-status+.dnb-form-status:not([class*=space__left]),.dnb-forms-wizard-layout+.dnb-form-status:not([class*=space__left]){margin-left:var(--spacing-medium)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}.dnb-forms-step{outline:none}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}

package/es/extensions/payment-card/PaymentCard.d.ts

@@ -33,10 +33,12 @@ export enum BankAxept {
   Black,
   Gold,
   Black20,
-  Gray
+  Gray,
+  GrayDark
 }
 export enum BankAxeptType {
   BankAxept,
+  Credit,
   None
 }
 export enum Designs {

package/es/extensions/payment-card/icons/Credit.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CreditLogoSVG: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default CreditLogoSVG;