@dnb/eufemia 10.8.0 → 10.9.0

package/es/extensions/forms/DataContext/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","names":["React","useEffect","useRef","useMemo","useCallback","useState","pointer","ajv","ajvErrorsToFormErrors","Context","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","Provider","data","externalData","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","children","ajvSchemaValidator","compile","undefined","internalData","setInternalData","mountedFieldPathsRef","errorsRef","showAllErrors","setShowAllErrors","pathsWithErrorRef","hasErrors","Boolean","current","find","mountedFieldPath","validateBySchema","errors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","structuredClone","set","handleMountField","handleUnMountField","handleSubmit","_window","window","scrollTo","top","behavior","createElement","mountedFieldPaths"],"sources":["../../../../../src/extensions/forms/DataContext/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useState,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { JSONSchema7 } from 'json-schema'\nimport ajv, { ajvErrorsToFormErrors } from '../utils/ajv'\nimport { FormError } from '../types'\nimport Context from './Context'\n\nexport interface Props<Data extends JsonObject> {\n  data: Partial<Data>\n  /** JSON Schema for validating the data, like during input or after attempting submit */\n  schema?: JSONSchema7\n  /** Change handler for the whole data set */\n  onChange?: (data: Data) => void\n  /** Change handler for each value  */\n  onPathChange?: (path: string, value: any) => void\n  /** Submit called, data was valid (if validation available) */\n  onSubmit?: (data: Data) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\n  children: React.ReactNode\n}\n\ntype PathList = string[]\n\nfunction addListPath(paths: PathList, path: string): PathList {\n  return paths.includes(path) ? paths : paths.concat(path)\n}\n\nfunction removeListPath(paths: PathList, path: string): PathList {\n  return paths.filter((thisPath) => thisPath !== path)\n}\n\nexport default function Provider<Data extends JsonObject>({\n  data: externalData,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  children,\n}: Props<Data>) {\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const [internalData, setInternalData] =\n    useState<Partial<Data>>(externalData)\n  const mountedFieldPathsRef = useRef<string[]>([])\n\n  // Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError>>({})\n  const [showAllErrors, setShowAllErrors] = useState<boolean>(false)\n  // Errors reported by fields, based on their direct validation rules\n  const pathsWithErrorRef = useRef<string[]>([])\n\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current[mountedFieldPath] !== undefined ||\n            pathsWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  useEffect(() => {\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    setInternalData(externalData)\n  }, [externalData])\n\n  const validateBySchema = useCallback(\n    (data: Partial<Data>): Record<string, Error> | undefined => {\n      if (!ajvSchemaValidator) {\n        // No schema-based validator. Assume data is valid.\n        return\n      }\n\n      if (!ajvSchemaValidator(data)) {\n        // Errors found\n        const errors = ajvErrorsToFormErrors(ajvSchemaValidator.errors)\n        return errors\n      } else {\n        return\n      }\n    },\n    [ajvSchemaValidator]\n  )\n\n  const validateBySchemaAndUpdateState = useCallback(\n    (data: Partial<Data>) => {\n      errorsRef.current = validateBySchema(data) ?? {}\n    },\n    [validateBySchema]\n  )\n\n  const setPathWithError = useCallback(\n    (path: string, hasError: boolean) => {\n      pathsWithErrorRef.current = hasError\n        ? addListPath(pathsWithErrorRef.current, path)\n        : removeListPath(pathsWithErrorRef.current, path)\n    },\n    []\n  )\n\n  const handlePathChange = useCallback(\n    (path, value) => {\n      onPathChange?.(path, value)\n      // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n      const newData = structuredClone(internalData) as Data\n      if (path) {\n        pointer.set(newData, path, value)\n      }\n      onChange?.(newData)\n\n      validateBySchemaAndUpdateState(newData)\n\n      setInternalData(newData)\n\n      setShowAllErrors(false)\n    },\n    [internalData, onChange, onPathChange, validateBySchemaAndUpdateState]\n  )\n\n  // Mounted fields\n  const handleMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = addListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  const handleUnMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = removeListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  /**\n   * Request to submit the whole form\n   */\n  const handleSubmit = useCallback(() => {\n    if (!hasErrors()) {\n      onSubmit?.(internalData as Data)\n      if (scrollTopOnSubmit) {\n        window && window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      setShowAllErrors(true)\n      onSubmitRequest?.()\n    }\n    return internalData\n  }, [\n    internalData,\n    scrollTopOnSubmit,\n    hasErrors,\n    onSubmit,\n    onSubmitRequest,\n  ])\n\n  useEffect(() => {\n    // Mount procedure\n    if (externalData) {\n      // Validate the initial data to know if the user can submit, and to show errors if inputs are requested to with props\n      validateBySchemaAndUpdateState(externalData)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalData,\n        handlePathChange,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setPathWithError,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Provider.js","names":["React","useEffect","useRef","useMemo","useCallback","useState","pointer","ajv","ajvErrorsToFormErrors","Context","structuredClone","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","Provider","data","externalData","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","children","ajvSchemaValidator","compile","undefined","internalData","setInternalData","mountedFieldPathsRef","errorsRef","showAllErrors","setShowAllErrors","pathsWithErrorRef","hasErrors","Boolean","current","find","mountedFieldPath","validateBySchema","errors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","set","handleMountField","handleUnMountField","handleSubmit","_window","window","scrollTo","top","behavior","createElement","mountedFieldPaths"],"sources":["../../../../../src/extensions/forms/DataContext/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useState,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { JSONSchema7 } from 'json-schema'\nimport ajv, { ajvErrorsToFormErrors } from '../utils/ajv'\nimport { FormError } from '../types'\nimport Context from './Context'\n\n/**\n * Deprecated, as it is supported my all mihor 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 interface Props<Data extends JsonObject> {\n  data: Partial<Data>\n  /** JSON Schema for validating the data, like during input or after attempting submit */\n  schema?: JSONSchema7\n  /** Change handler for the whole data set */\n  onChange?: (data: Data) => void\n  /** Change handler for each value  */\n  onPathChange?: (path: string, value: any) => void\n  /** Submit called, data was valid (if validation available) */\n  onSubmit?: (data: Data) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\n  children: React.ReactNode\n}\n\ntype PathList = string[]\n\nfunction addListPath(paths: PathList, path: string): PathList {\n  return paths.includes(path) ? paths : paths.concat(path)\n}\n\nfunction removeListPath(paths: PathList, path: string): PathList {\n  return paths.filter((thisPath) => thisPath !== path)\n}\n\nexport default function Provider<Data extends JsonObject>({\n  data: externalData,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  children,\n}: Props<Data>) {\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const [internalData, setInternalData] =\n    useState<Partial<Data>>(externalData)\n  const mountedFieldPathsRef = useRef<string[]>([])\n\n  // Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError>>({})\n  const [showAllErrors, setShowAllErrors] = useState<boolean>(false)\n  // Errors reported by fields, based on their direct validation rules\n  const pathsWithErrorRef = useRef<string[]>([])\n\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current[mountedFieldPath] !== undefined ||\n            pathsWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  useEffect(() => {\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    setInternalData(externalData)\n  }, [externalData])\n\n  const validateBySchema = useCallback(\n    (data: Partial<Data>): Record<string, Error> | undefined => {\n      if (!ajvSchemaValidator) {\n        // No schema-based validator. Assume data is valid.\n        return\n      }\n\n      if (!ajvSchemaValidator(data)) {\n        // Errors found\n        const errors = ajvErrorsToFormErrors(ajvSchemaValidator.errors)\n        return errors\n      } else {\n        return\n      }\n    },\n    [ajvSchemaValidator]\n  )\n\n  const validateBySchemaAndUpdateState = useCallback(\n    (data: Partial<Data>) => {\n      errorsRef.current = validateBySchema(data) ?? {}\n    },\n    [validateBySchema]\n  )\n\n  const setPathWithError = useCallback(\n    (path: string, hasError: boolean) => {\n      pathsWithErrorRef.current = hasError\n        ? addListPath(pathsWithErrorRef.current, path)\n        : removeListPath(pathsWithErrorRef.current, path)\n    },\n    []\n  )\n\n  const handlePathChange = useCallback(\n    (path, value) => {\n      if (!path) {\n        return\n      }\n      onPathChange?.(path, value)\n\n      // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n      const newData = structuredClone(path === '/' ? value : internalData)\n      if (path !== '/') {\n        pointer.set(newData as Data, path, value)\n      }\n\n      onChange?.(newData)\n\n      validateBySchemaAndUpdateState(newData)\n\n      setInternalData(newData)\n\n      setShowAllErrors(false)\n    },\n    [internalData, onChange, onPathChange, validateBySchemaAndUpdateState]\n  )\n\n  // Mounted fields\n  const handleMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = addListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  const handleUnMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = removeListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  /**\n   * Request to submit the whole form\n   */\n  const handleSubmit = useCallback(() => {\n    if (!hasErrors()) {\n      onSubmit?.(internalData as Data)\n      if (scrollTopOnSubmit) {\n        typeof window !== 'undefined' &&\n          window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      setShowAllErrors(true)\n      onSubmitRequest?.()\n    }\n    return internalData\n  }, [\n    internalData,\n    scrollTopOnSubmit,\n    hasErrors,\n    onSubmit,\n    onSubmitRequest,\n  ])\n\n  useEffect(() => {\n    // Mount procedure\n    if (externalData) {\n      // Validate the initial data to know if the user can submit, and to show errors if inputs are requested to with props\n      validateBySchemaAndUpdateState(externalData)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalData,\n        handlePathChange,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setPathWithError,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,SAAS,EACTC,MAAM,EACNC,OAAO,EACPC,WAAW,EACXC,QAAQ,QACH,OAAO;AACd,OAAOC,OAAO,MAAsB,cAAc;AAElD,OAAOC,GAAG,IAAIC,qBAAqB,QAAQ,cAAc;AAEzD,OAAOC,OAAO,MAAM,WAAW;AAM/B,OAAOC,eAAe,MAAM,yBAAyB;AAoBrD,SAASC,WAAWA,CAACC,KAAe,EAAEC,IAAY,EAAY;EAC5D,OAAOD,KAAK,CAACE,QAAQ,CAACD,IAAI,CAAC,GAAGD,KAAK,GAAGA,KAAK,CAACG,MAAM,CAACF,IAAI,CAAC;AAC1D;AAEA,SAASG,cAAcA,CAACJ,KAAe,EAAEC,IAAY,EAAY;EAC/D,OAAOD,KAAK,CAACK,MAAM,CAAEC,QAAQ,IAAKA,QAAQ,KAAKL,IAAI,CAAC;AACtD;AAEA,eAAe,SAASM,QAAQA,CAA0B;EACxDC,IAAI,EAAEC,YAAY;EAClBC,MAAM;EACNC,QAAQ;EACRC,YAAY;EACZC,QAAQ;EACRC,eAAe;EACfC,iBAAiB;EACjBC;AACW,CAAC,EAAE;EACd,MAAMC,kBAAkB,GAAG1B,OAAO,CAChC,MAAOmB,MAAM,GAAGf,GAAG,CAACuB,OAAO,CAACR,MAAM,CAAC,GAAGS,SAAU,EAChD,CAACT,MAAM,CACT,CAAC;EACD,MAAM,CAACU,YAAY,EAAEC,eAAe,CAAC,GACnC5B,QAAQ,CAAgBgB,YAAY,CAAC;EACvC,MAAMa,oBAAoB,GAAGhC,MAAM,CAAW,EAAE,CAAC;EAGjD,MAAMiC,SAAS,GAAGjC,MAAM,CAA4B,CAAC,CAAC,CAAC;EACvD,MAAM,CAACkC,aAAa,EAAEC,gBAAgB,CAAC,GAAGhC,QAAQ,CAAU,KAAK,CAAC;EAElE,MAAMiC,iBAAiB,GAAGpC,MAAM,CAAW,EAAE,CAAC;EAE9C,MAAMqC,SAAS,GAAGnC,WAAW,CAC3B,MACEoC,OAAO,CACLN,oBAAoB,CAACO,OAAO,CAACC,IAAI,CAC9BC,gBAAgB,IACfR,SAAS,CAACM,OAAO,CAACE,gBAAgB,CAAC,KAAKZ,SAAS,IACjDO,iBAAiB,CAACG,OAAO,CAAC3B,QAAQ,CAAC6B,gBAAgB,CACvD,CACF,CAAC,EACH,EACF,CAAC;EAED1C,SAAS,CAAC,MAAM;IAEdgC,eAAe,CAACZ,YAAY,CAAC;EAC/B,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMuB,gBAAgB,GAAGxC,WAAW,CACjCgB,IAAmB,IAAwC;IAC1D,IAAI,CAACS,kBAAkB,EAAE;MAEvB;IACF;IAEA,IAAI,CAACA,kBAAkB,CAACT,IAAI,CAAC,EAAE;MAE7B,MAAMyB,MAAM,GAAGrC,qBAAqB,CAACqB,kBAAkB,CAACgB,MAAM,CAAC;MAC/D,OAAOA,MAAM;IACf,CAAC,MAAM;MACL;IACF;EACF,CAAC,EACD,CAAChB,kBAAkB,CACrB,CAAC;EAED,MAAMiB,8BAA8B,GAAG1C,WAAW,CAC/CgB,IAAmB,IAAK;IACvBe,SAAS,CAACM,OAAO,GAAGG,gBAAgB,CAACxB,IAAI,CAAC,IAAI,CAAC,CAAC;EAClD,CAAC,EACD,CAACwB,gBAAgB,CACnB,CAAC;EAED,MAAMG,gBAAgB,GAAG3C,WAAW,CAClC,CAACS,IAAY,EAAEmC,QAAiB,KAAK;IACnCV,iBAAiB,CAACG,OAAO,GAAGO,QAAQ,GAChCrC,WAAW,CAAC2B,iBAAiB,CAACG,OAAO,EAAE5B,IAAI,CAAC,GAC5CG,cAAc,CAACsB,iBAAiB,CAACG,OAAO,EAAE5B,IAAI,CAAC;EACrD,CAAC,EACD,EACF,CAAC;EAED,MAAMoC,gBAAgB,GAAG7C,WAAW,CAClC,CAACS,IAAI,EAAEqC,KAAK,KAAK;IACf,IAAI,CAACrC,IAAI,EAAE;MACT;IACF;IACAW,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGX,IAAI,EAAEqC,KAAK,CAAC;IAG3B,MAAMC,OAAO,GAAGzC,eAAe,CAACG,IAAI,KAAK,GAAG,GAAGqC,KAAK,GAAGlB,YAAY,CAAC;IACpE,IAAInB,IAAI,KAAK,GAAG,EAAE;MAChBP,OAAO,CAAC8C,GAAG,CAACD,OAAO,EAAUtC,IAAI,EAAEqC,KAAK,CAAC;IAC3C;IAEA3B,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG4B,OAAO,CAAC;IAEnBL,8BAA8B,CAACK,OAAO,CAAC;IAEvClB,eAAe,CAACkB,OAAO,CAAC;IAExBd,gBAAgB,CAAC,KAAK,CAAC;EACzB,CAAC,EACD,CAACL,YAAY,EAAET,QAAQ,EAAEC,YAAY,EAAEsB,8BAA8B,CACvE,CAAC;EAGD,MAAMO,gBAAgB,GAAGjD,WAAW,CAAES,IAAY,IAAK;IACrDqB,oBAAoB,CAACO,OAAO,GAAG9B,WAAW,CACxCuB,oBAAoB,CAACO,OAAO,EAC5B5B,IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMyC,kBAAkB,GAAGlD,WAAW,CAAES,IAAY,IAAK;IACvDqB,oBAAoB,CAACO,OAAO,GAAGzB,cAAc,CAC3CkB,oBAAoB,CAACO,OAAO,EAC5B5B,IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAKN,MAAM0C,YAAY,GAAGnD,WAAW,CAAC,MAAM;IACrC,IAAI,CAACmC,SAAS,CAAC,CAAC,EAAE;MAChBd,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGO,YAAoB,CAAC;MAChC,IAAIL,iBAAiB,EAAE;QAAA,IAAA6B,OAAA;QACrB,OAAOC,MAAM,KAAK,WAAW,MAAAD,OAAA,GAC3BC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,QAAQ,CAAC;UAAEC,GAAG,EAAE,CAAC;UAAEC,QAAQ,EAAE;QAAS,CAAC,CAAC;MACpD;IACF,CAAC,MAAM;MACLvB,gBAAgB,CAAC,IAAI,CAAC;MACtBX,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAG,CAAC;IACrB;IACA,OAAOM,YAAY;EACrB,CAAC,EAAE,CACDA,YAAY,EACZL,iBAAiB,EACjBY,SAAS,EACTd,QAAQ,EACRC,eAAe,CAChB,CAAC;EAEFzB,SAAS,CAAC,MAAM;IAEd,IAAIoB,YAAY,EAAE;MAEhByB,8BAA8B,CAACzB,YAAY,CAAC;IAC9C;EAEF,CAAC,EAAE,EAAE,CAAC;EAEN,OACErB,KAAA,CAAA6D,aAAA,CAACpD,OAAO,CAACU,QAAQ;IACf+B,KAAK,EAAE;MACL9B,IAAI,EAAEY,YAAY;MAClBiB,gBAAgB;MAChBM,YAAY;MACZV,MAAM,EAAEV,SAAS,CAACM,OAAO;MACzBL,aAAa;MACbC,gBAAgB;MAChByB,iBAAiB,EAAE5B,oBAAoB,CAACO,OAAO;MAC/CY,gBAAgB;MAChBC,kBAAkB;MAClBf,SAAS;MACTQ;IACF;EAAE,GAEDnB,QACe,CAAC;AAEvB"}

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

@@ -1,12 +1,10 @@
 /// <reference types="react" />
 import { ContextState } from './Context';
 import Provider from './Provider';
-import SubmitButton from './SubmitButton';
 import At from './At';
 declare const DataContext: {
     Context: import("react").Context<ContextState>;
     Provider: typeof Provider;
-    SubmitButton: typeof SubmitButton;
     At: typeof At;
 };
 export type { ContextState };

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

@@ -1,11 +1,9 @@
 import Context from './Context';
 import Provider from './Provider';
-import SubmitButton from './SubmitButton';
 import At from './At';
 const DataContext = {
   Context,
   Provider,
-  SubmitButton,
   At
 };
 export default DataContext;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Context","Provider","SubmitButton","At","DataContext"],"sources":["../../../../../src/extensions/forms/DataContext/index.ts"],"sourcesContent":["import Context, { ContextState } from './Context'\nimport Provider from './Provider'\nimport SubmitButton from './SubmitButton'\nimport At from './At'\n\nconst DataContext = {\n  Context,\n  Provider,\n  SubmitButton,\n  At,\n}\n\nexport type { ContextState }\nexport default DataContext\n"],"mappings":"AAAA,OAAOA,OAAO,MAAwB,WAAW;AACjD,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,EAAE,MAAM,MAAM;AAErB,MAAMC,WAAW,GAAG;EAClBJ,OAAO;EACPC,QAAQ;EACRC,YAAY;EACZC;AACF,CAAC;AAGD,eAAeC,WAAW"}
+{"version":3,"file":"index.js","names":["Context","Provider","At","DataContext"],"sources":["../../../../../src/extensions/forms/DataContext/index.ts"],"sourcesContent":["import Context, { ContextState } from './Context'\nimport Provider from './Provider'\nimport At from './At'\n\nconst DataContext = {\n  Context,\n  Provider,\n  At,\n}\n\nexport type { ContextState }\nexport default DataContext\n"],"mappings":"AAAA,OAAOA,OAAO,MAAwB,WAAW;AACjD,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,EAAE,MAAM,MAAM;AAErB,MAAMC,WAAW,GAAG;EAClBH,OAAO;EACPC,QAAQ;EACRC;AACF,CAAC;AAGD,eAAeC,WAAW"}

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<Array<string | number>> & {
+import { FieldProps } from '../types';
+export type Props = FieldProps<Array<string | number>> & {
     children?: React.ReactNode;
     variant?: 'checkbox' | 'button';
     optionsLayout?: 'horizontal' | 'vertical';

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

@@ -5,10 +5,10 @@ import React, { useMemo } from 'react';
 import { Checkbox, Button } from '../../../components';
 import ButtonRow from '../Layout/ButtonRow';
 import classnames from 'classnames';
-import { forwardSpaceProps } from '../utils';
 import Option from './Option';
 import FieldBlock from '../FieldBlock';
-import { useField } from './hooks';
+import { useDataValue } from '../hooks';
+import { pickSpacingProps } from '../types';
 function ArraySelection(props) {
   const {
     id,
@@ -27,7 +27,7 @@ function ArraySelection(props) {
     emptyValue,
     handleChange,
     children
-  } = useField(props);
+  } = useDataValue(props);
   const fieldBlockProps = _objectSpread({
     forId: id,
     className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
@@ -39,7 +39,7 @@ function ArraySelection(props) {
     label,
     labelDescription,
     labelSecondary
-  }, forwardSpaceProps(props));
+  }, pickSpacingProps(props));
   const options = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map(option => ({
     title: option.props.title ?? option.props.children,
     value: option.props.value,

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","Button","ButtonRow","classnames","forwardSpaceProps","Option","FieldBlock","useField","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","labelSecondary","value","error","info","warning","disabled","emptyValue","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","options","Children","toArray","filter","child","isValidElement","type","map","option","title","handleSelect","selected","newValue","includes","length","createElement","i","key","text","on_click","undefined","status","checked","on_change","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, Button } from '../../../components'\nimport ButtonRow from '../Layout/ButtonRow'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = ComponentProps &\n  FieldProps<Array<string | number>> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    error,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useField(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n    ...forwardSpaceProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            {options.map((option, i) => (\n              <Button\n                key={`option-${i}-${option.value}`}\n                id={id}\n                text={option.title}\n                on_click={option.handleSelect}\n                variant={\n                  value?.includes(option.value) ? undefined : 'secondary'\n                }\n                status={error ? 'error' : undefined}\n                disabled={disabled}\n              />\n            ))}\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsEufemiaSpacingProps = true\nexport default ArraySelection\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,QAAQ,EAAEC,MAAM,QAAQ,qBAAqB;AACtD,OAAOC,SAAS,MAAM,qBAAqB;AAC3C,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,QAAQ,QAAQ,SAAS;AAiBlC,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAM;IACJC,EAAE;IACFC,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,MAAM,GAAG,UAAU;IACnBC,aAAa,GAAG,UAAU;IAC1BC,KAAK;IACLC,gBAAgB;IAChBC,cAAc;IACdC,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,QAAQ;IACRC,UAAU;IACVC,YAAY;IACZC;EACF,CAAC,GAAGlB,QAAQ,CAACE,KAAK,CAAC;EAEnB,MAAMiB,eAAe,GAAAC,aAAA;IACnBC,KAAK,EAAElB,EAAE;IACTC,SAAS,EAAER,UAAU,oFAEgCW,aAAc,IACjEH,SACF,CAAC;IACDkB,gBAAgB,EAAE,0CAA0C;IAC5DT,IAAI;IACJC,OAAO;IACPF,KAAK;IACLN,MAAM;IACNE,KAAK;IACLC,gBAAgB;IAChBC;EAAc,GACXb,iBAAiB,CAACK,KAAK,CAAC,CAC5B;EAED,MAAMqB,OAAkB,GAAG/B,OAAO,CAChC,MACED,KAAK,CAACiC,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC,CAC7BQ,MAAM,CACJC,KAAK,IAAKpC,KAAK,CAACqC,cAAc,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAK/B,MAC3D,CAAC,CACAgC,GAAG,CAAEC,MAA0B,KAAM;IACpCC,KAAK,EAAED,MAAM,CAAC7B,KAAK,CAAC8B,KAAK,IAAID,MAAM,CAAC7B,KAAK,CAACgB,QAAQ;IAClDP,KAAK,EAAEoB,MAAM,CAAC7B,KAAK,CAACS,KAAK;IACzBsB,YAAY,EAAEA,CAAA,KAAM;MAClB,MAAMC,QAAQ,GAAGH,MAAM,CAAC7B,KAAK,CAACS,KAAK;MAEnC,MAAMwB,QAAQ,GAAGxB,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEyB,QAAQ,CAACF,QAAQ,CAAC,GACtCvB,KAAK,CAACe,MAAM,CAAEf,KAAK,IAAKA,KAAK,KAAKuB,QAAQ,CAAC,GAC3C,CAAC,IAAIvB,KAAK,IAAI,EAAE,CAAC,EAAEuB,QAAQ,CAAC;MAEhCjB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGkB,QAAQ,CAACE,MAAM,KAAK,CAAC,GAAGrB,UAAU,GAAGmB,QAAQ,CAAC;IAC/D;EACF,CAAC,CAAC,CAAC,EACP,CAACjB,QAAQ,EAAEP,KAAK,EAAEK,UAAU,EAAEC,YAAY,CAC5C,CAAC;EAED,QAAQZ,OAAO;IACb,KAAK,QAAQ;MACX,OACEd,KAAA,CAAA+C,aAAA,CAACvC,UAAU,EAAKoB,eAAe,EAC7B5B,KAAA,CAAA+C,aAAA,CAAC3C,SAAS,QACP4B,OAAO,CAACO,GAAG,CAAC,CAACC,MAAM,EAAEQ,CAAC,KACrBhD,KAAA,CAAA+C,aAAA,CAAC5C,MAAM;QACL8C,GAAG,EAAG,UAASD,CAAE,IAAGR,MAAM,CAACpB,KAAM,EAAE;QACnCR,EAAE,EAAEA,EAAG;QACPsC,IAAI,EAAEV,MAAM,CAACC,KAAM;QACnBU,QAAQ,EAAEX,MAAM,CAACE,YAAa;QAC9B5B,OAAO,EACLM,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEyB,QAAQ,CAACL,MAAM,CAACpB,KAAK,CAAC,GAAGgC,SAAS,GAAG,WAC7C;QACDC,MAAM,EAAEhC,KAAK,GAAG,OAAO,GAAG+B,SAAU;QACpC5B,QAAQ,EAAEA;MAAS,CACpB,CACF,CACQ,CACD,CAAC;IAEjB,KAAK,UAAU;MACb,OACExB,KAAA,CAAA+C,aAAA,CAACvC,UAAU,EAAKoB,eAAe,EAC5BI,OAAO,CAACO,GAAG,CAAC,CAACC,MAAM,EAAEQ,CAAC,KACrBhD,KAAA,CAAA+C,aAAA,CAAC7C,QAAQ;QACP+C,GAAG,EAAG,UAASD,CAAE,IAAGR,MAAM,CAACpB,KAAM,EAAE;QACnCP,SAAS,EAAC,2CAA2C;QACrDI,KAAK,EAAEuB,MAAM,CAACC,KAAM;QACpBa,OAAO,EAAElC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEyB,QAAQ,CAACL,MAAM,CAACpB,KAAK,CAAE;QACvCI,QAAQ,EAAEA,QAAS;QACnB+B,SAAS,EAAEf,MAAM,CAACE;MAAa,CAChC,CACF,CACS,CAAC;EAEnB;AACF;AAEAhC,cAAc,CAAC8C,4BAA4B,GAAG,IAAI;AAClD,eAAe9C,cAAc"}
+{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","Button","ButtonRow","classnames","Option","FieldBlock","useDataValue","pickSpacingProps","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","labelSecondary","value","error","info","warning","disabled","emptyValue","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","options","Children","toArray","filter","child","isValidElement","type","map","option","title","handleSelect","selected","newValue","includes","length","createElement","i","key","text","on_click","undefined","status","checked","on_change","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, Button } from '../../../components'\nimport ButtonRow from '../Layout/ButtonRow'\nimport classnames from 'classnames'\nimport Option from './Option'\nimport FieldBlock from '../FieldBlock'\nimport { useDataValue } from '../hooks'\nimport { FieldProps, pickSpacingProps } from '../types'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldProps<Array<string | number>> & {\n  children?: React.ReactNode\n  variant?: 'checkbox' | 'button'\n  optionsLayout?: 'horizontal' | 'vertical'\n}\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    error,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n    ...pickSpacingProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            {options.map((option, i) => (\n              <Button\n                key={`option-${i}-${option.value}`}\n                id={id}\n                text={option.title}\n                on_click={option.handleSelect}\n                variant={\n                  value?.includes(option.value) ? undefined : 'secondary'\n                }\n                status={error ? 'error' : undefined}\n                disabled={disabled}\n              />\n            ))}\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsEufemiaSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
-import type { ComponentProps } from '../component-types';
-import type { FieldProps, FieldHelpProps } from '../field-types';
-export type Props = ComponentProps & FieldHelpProps & FieldProps<string> & {
+import { FieldProps, FieldHelpProps } from '../types';
+export type Props = FieldHelpProps & FieldProps<string> & {
     width?: false | 'small' | 'medium' | 'large' | 'stretch';
 };
 declare function CountryCode(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -3,9 +3,8 @@ import React, { useContext, useCallback, useMemo } from 'react';
 import { Autocomplete, HelpButton } from '../../../components';
 import classnames from 'classnames';
 import countries from '../constants/countries';
-import { forwardSpaceProps } from '../utils';
-import { useField } from './hooks';
-import { FormError } from '../types';
+import { useDataValue } from '../hooks';
+import { FormError, pickSpacingProps } from '../types';
 import SharedContext from '../../../shared/Context';
 function CountryCode(props) {
   const sharedContext = useContext(SharedContext);
@@ -25,7 +24,7 @@ function CountryCode(props) {
     handleFocus,
     handleBlur,
     handleChange
-  } = useField(props);
+  } = useDataValue(props);
   const autocompleteData = useMemo(() => countries.map(country => ({
     selected_key: `+${country.code}`,
     selected_value: `${country.iso} (+${country.code})`,
@@ -58,7 +57,7 @@ function CountryCode(props) {
     }, help.contents) : undefined,
     independent_width: true,
     search_numbers: true
-  }, forwardSpaceProps(props), {
+  }, pickSpacingProps(props), {
     stretch: width === 'stretch'
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CountryCode.js","names":["React","useContext","useCallback","useMemo","Autocomplete","HelpButton","classnames","countries","forwardSpaceProps","useField","FormError","SharedContext","CountryCode","props","sharedContext","className","layout","placeholder","label","translation","Forms","countryCodeLabel","value","emptyValue","info","warning","error","disabled","help","width","handleFocus","handleBlur","handleChange","autocompleteData","map","country","selected_key","code","selected_value","iso","content","name","forwardHandleChange","data","changedData","trim","valueIndex","findIndex","item","createElement","_extends","undefined","label_direction","on_focus","on_blur","on_change","status","message","Error","toString","suffix","title","contents","independent_width","search_numbers","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/CountryCode.tsx"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from 'react'\nimport { Autocomplete, HelpButton } from '../../../components'\nimport classnames from 'classnames'\nimport countries from '../constants/countries'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  FieldHelpProps &\n  FieldProps<string> & {\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction CountryCode(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    layout = 'vertical',\n    placeholder,\n    label = sharedContext?.translation.Forms.countryCodeLabel,\n    value,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useField(props)\n\n  const autocompleteData = useMemo(\n    () =>\n      countries.map((country) => ({\n        selected_key: `+${country.code}`,\n        selected_value: `${country.iso} (+${country.code})`,\n        content: `+${country.code} ${country.name}`,\n      })),\n    []\n  )\n\n  const forwardHandleChange = useCallback(\n    ({ data: changedData }: { data: { selected_key: string } }) => {\n      if (!changedData || !changedData.selected_key.trim()) {\n        handleChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.(changedData?.selected_key)\n    },\n    [emptyValue, handleChange]\n  )\n\n  const valueIndex = autocompleteData.findIndex(\n    (item) => item.selected_key === value\n  )\n\n  return (\n    <Autocomplete\n      className={classnames(\n        'dnb-forms-field-country-code',\n        width !== undefined &&\n          `dnb-forms-field-country-code--width-${width}`,\n        className\n      )}\n      placeholder={placeholder ?? ' '}\n      label_direction={layout}\n      label={label}\n      data={autocompleteData}\n      value={valueIndex}\n      disabled={disabled}\n      on_focus={handleFocus}\n      on_blur={handleBlur}\n      on_change={forwardHandleChange}\n      status={\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      }\n      suffix={\n        help ? (\n          <HelpButton title={help.title}>{help.contents}</HelpButton>\n        ) : undefined\n      }\n      independent_width\n      search_numbers\n      {...forwardSpaceProps(props)}\n      stretch={width === 'stretch'}\n    />\n  )\n}\n\nCountryCode._supportsEufemiaSpacingProps = true\nexport default CountryCode\n"],"mappings":"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"}
+{"version":3,"file":"CountryCode.js","names":["React","useContext","useCallback","useMemo","Autocomplete","HelpButton","classnames","countries","useDataValue","FormError","pickSpacingProps","SharedContext","CountryCode","props","sharedContext","className","layout","placeholder","label","translation","Forms","countryCodeLabel","value","emptyValue","info","warning","error","disabled","help","width","handleFocus","handleBlur","handleChange","autocompleteData","map","country","selected_key","code","selected_value","iso","content","name","forwardHandleChange","data","changedData","trim","valueIndex","findIndex","item","createElement","_extends","undefined","label_direction","on_focus","on_blur","on_change","status","message","Error","toString","suffix","title","contents","independent_width","search_numbers","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/CountryCode.tsx"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from 'react'\nimport { Autocomplete, HelpButton } from '../../../components'\nimport classnames from 'classnames'\nimport countries from '../constants/countries'\nimport { useDataValue } from '../hooks'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  pickSpacingProps,\n} from '../types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string> & {\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction CountryCode(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    layout = 'vertical',\n    placeholder,\n    label = sharedContext?.translation.Forms.countryCodeLabel,\n    value,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(props)\n\n  const autocompleteData = useMemo(\n    () =>\n      countries.map((country) => ({\n        selected_key: `+${country.code}`,\n        selected_value: `${country.iso} (+${country.code})`,\n        content: `+${country.code} ${country.name}`,\n      })),\n    []\n  )\n\n  const forwardHandleChange = useCallback(\n    ({ data: changedData }: { data: { selected_key: string } }) => {\n      if (!changedData || !changedData.selected_key.trim()) {\n        handleChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.(changedData?.selected_key)\n    },\n    [emptyValue, handleChange]\n  )\n\n  const valueIndex = autocompleteData.findIndex(\n    (item) => item.selected_key === value\n  )\n\n  return (\n    <Autocomplete\n      className={classnames(\n        'dnb-forms-field-country-code',\n        width !== undefined &&\n          `dnb-forms-field-country-code--width-${width}`,\n        className\n      )}\n      placeholder={placeholder ?? ' '}\n      label_direction={layout}\n      label={label}\n      data={autocompleteData}\n      value={valueIndex}\n      disabled={disabled}\n      on_focus={handleFocus}\n      on_blur={handleBlur}\n      on_change={forwardHandleChange}\n      status={\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      }\n      suffix={\n        help ? (\n          <HelpButton title={help.title}>{help.contents}</HelpButton>\n        ) : undefined\n      }\n      independent_width\n      search_numbers\n      {...pickSpacingProps(props)}\n      stretch={width === 'stretch'}\n    />\n  )\n}\n\nCountryCode._supportsEufemiaSpacingProps = true\nexport default CountryCode\n"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
-import type { ComponentProps } from '../component-types';
-import type { FieldProps, FieldHelpProps } from '../field-types';
-export type Props = ComponentProps & FieldHelpProps & FieldProps<number, undefined> & {
+import type { FieldProps, FieldHelpProps } from '../types';
+export type Props = FieldHelpProps & FieldProps<number, undefined> & {
     currency?: string;
 };
 declare function Currency(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","names":["React","classnames","NumberComponent","Currency","props","preparedProps","_objectSpread","currency","placeholder","createElement","_extends","className","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport NumberComponent from './Number'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldHelpProps &\n  FieldProps<number, undefined> & {\n    currency?: string\n  }\n\nfunction Currency(props: Props) {\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? 'NOK',\n    placeholder: props.placeholder ?? 'kr',\n  }\n\n  return (\n    <NumberComponent\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsEufemiaSpacingProps = true\nexport default Currency\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,eAAe,MAAM,UAAU;AAUtC,SAASC,QAAQA,CAACC,KAAY,EAAE;EAC9B,MAAMC,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdF,KAAK;IACRG,QAAQ,EAAEH,KAAK,CAACG,QAAQ,IAAI,KAAK;IACjCC,WAAW,EAAEJ,KAAK,CAACI,WAAW,IAAI;EAAI,EACvC;EAED,OACER,KAAA,CAAAS,aAAA,CAACP,eAAe,EAAAQ,QAAA,KACVL,aAAa;IACjBM,SAAS,EAAEV,UAAU,CAAC,0BAA0B,EAAEG,KAAK,CAACO,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAR,QAAQ,CAACS,4BAA4B,GAAG,IAAI;AAC5C,eAAeT,QAAQ"}
+{"version":3,"file":"Currency.js","names":["React","classnames","NumberComponent","Currency","props","preparedProps","_objectSpread","currency","placeholder","createElement","_extends","className","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport NumberComponent from './Number'\nimport type { FieldProps, FieldHelpProps } from '../types'\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined> & {\n    currency?: string\n  }\n\nfunction Currency(props: Props) {\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? 'NOK',\n    placeholder: props.placeholder ?? 'kr',\n  }\n\n  return (\n    <NumberComponent\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsEufemiaSpacingProps = true\nexport default Currency\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,eAAe,MAAM,UAAU;AAQtC,SAASC,QAAQA,CAACC,KAAY,EAAE;EAC9B,MAAMC,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdF,KAAK;IACRG,QAAQ,EAAEH,KAAK,CAACG,QAAQ,IAAI,KAAK;IACjCC,WAAW,EAAEJ,KAAK,CAACI,WAAW,IAAI;EAAI,EACvC;EAED,OACER,KAAA,CAAAS,aAAA,CAACP,eAAe,EAAAQ,QAAA,KACVL,aAAa;IACjBM,SAAS,EAAEV,UAAU,CAAC,0BAA0B,EAAEG,KAAK,CAACO,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAR,QAAQ,CAACS,4BAA4B,GAAG,IAAI;AAC5C,eAAeT,QAAQ"}

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

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

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

@@ -4,8 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useContext } from 'react';
 import { DatePicker, HelpButton } from '../../../components';
-import { forwardSpaceProps } from '../utils';
-import { useField } from './hooks';
+import { useDataValue } from '../hooks';
+import { pickSpacingProps } from '../types';
 import SharedContext from '../../../shared/Context';
 function DateComponent(props) {
   const sharedContext = useContext(SharedContext);
@@ -26,7 +26,7 @@ function DateComponent(props) {
     handleFocus,
     handleBlur,
     handleChange
-  } = useField(preparedProps);
+  } = useDataValue(preparedProps);
   return React.createElement(DatePicker, _extends({
     className: className,
     label: label ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.dateLabel),
@@ -43,7 +43,7 @@ function DateComponent(props) {
     on_change: handleChange,
     on_show: handleFocus,
     on_hide: handleBlur
-  }, forwardSpaceProps(props)));
+  }, pickSpacingProps(props)));
 }
 DateComponent._supportsEufemiaSpacingProps = true;
 export default DateComponent;

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useContext","DatePicker","HelpButton","forwardSpaceProps","useField","SharedContext","DateComponent","props","sharedContext","preparedProps","_objectSpread","fromInput","date","className","label","value","help","error","disabled","handleFocus","handleBlur","handleChange","createElement","_extends","translation","Forms","dateLabel","label_direction","status","message","show_input","show_cancel_button","show_reset_button","suffix","title","contents","undefined","on_change","on_show","on_hide","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Date.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { DatePicker, HelpButton } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps & FieldHelpProps & FieldProps<string>\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    fromInput: ({ date }: { date: string }) => {\n      return date\n    },\n  }\n\n  const {\n    className,\n    label,\n    value,\n    help,\n    error,\n    disabled,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useField(preparedProps)\n\n  return (\n    <DatePicker\n      className={className}\n      label={label ?? sharedContext?.translation.Forms.dateLabel}\n      label_direction=\"vertical\"\n      date={value}\n      status={error?.message}\n      disabled={disabled}\n      show_input={true}\n      show_cancel_button={true}\n      show_reset_button={true}\n      suffix={\n        help ? (\n          <HelpButton title={help.title}>{help.contents}</HelpButton>\n        ) : undefined\n      }\n      on_change={handleChange}\n      on_show={handleFocus}\n      on_hide={handleBlur}\n      {...forwardSpaceProps(props)}\n    />\n  )\n}\n\nDateComponent._supportsEufemiaSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,EAAEC,UAAU,QAAQ,qBAAqB;AAC5D,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,SAASC,QAAQ,QAAQ,SAAS;AAGlC,OAAOC,aAAa,MAAM,yBAAyB;AAInD,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,aAAa,GAAGR,UAAU,CAACK,aAAa,CAAC;EAC/C,MAAMI,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBH,KAAK;IACRI,SAAS,EAAEA,CAAC;MAAEC;IAAuB,CAAC,KAAK;MACzC,OAAOA,IAAI;IACb;EAAC,EACF;EAED,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAGjB,QAAQ,CAACK,aAAa,CAAC;EAE3B,OACEV,KAAA,CAAAuB,aAAA,CAACrB,UAAU,EAAAsB,QAAA;IACTV,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAK,KAAIN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEgB,WAAW,CAACC,KAAK,CAACC,SAAS,CAAC;IAC3DC,eAAe,EAAC,UAAU;IAC1Bf,IAAI,EAAEG,KAAM;IACZa,MAAM,EAAEX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,OAAQ;IACvBX,QAAQ,EAAEA,QAAS;IACnBY,UAAU,EAAE,IAAK;IACjBC,kBAAkB,EAAE,IAAK;IACzBC,iBAAiB,EAAE,IAAK;IACxBC,MAAM,EACJjB,IAAI,GACFjB,KAAA,CAAAuB,aAAA,CAACpB,UAAU;MAACgC,KAAK,EAAElB,IAAI,CAACkB;IAAM,GAAElB,IAAI,CAACmB,QAAqB,CAAC,GACzDC,SACL;IACDC,SAAS,EAAEhB,YAAa;IACxBiB,OAAO,EAAEnB,WAAY;IACrBoB,OAAO,EAAEnB;EAAW,GAChBjB,iBAAiB,CAACI,KAAK,CAAC,CAC7B,CAAC;AAEN;AAEAD,aAAa,CAACkC,4BAA4B,GAAG,IAAI;AACjD,eAAelC,aAAa"}
+{"version":3,"file":"Date.js","names":["React","useContext","DatePicker","HelpButton","useDataValue","pickSpacingProps","SharedContext","DateComponent","props","sharedContext","preparedProps","_objectSpread","fromInput","date","className","label","value","help","error","disabled","handleFocus","handleBlur","handleChange","createElement","_extends","translation","Forms","dateLabel","label_direction","status","message","show_input","show_cancel_button","show_reset_button","suffix","title","contents","undefined","on_change","on_show","on_hide","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Date.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { DatePicker, HelpButton } from '../../../components'\nimport { useDataValue } from '../hooks'\nimport { FieldProps, FieldHelpProps, pickSpacingProps } from '../types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = FieldHelpProps & FieldProps<string>\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    fromInput: ({ date }: { date: string }) => {\n      return date\n    },\n  }\n\n  const {\n    className,\n    label,\n    value,\n    help,\n    error,\n    disabled,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  return (\n    <DatePicker\n      className={className}\n      label={label ?? sharedContext?.translation.Forms.dateLabel}\n      label_direction=\"vertical\"\n      date={value}\n      status={error?.message}\n      disabled={disabled}\n      show_input={true}\n      show_cancel_button={true}\n      show_reset_button={true}\n      suffix={\n        help ? (\n          <HelpButton title={help.title}>{help.contents}</HelpButton>\n        ) : undefined\n      }\n      on_change={handleChange}\n      on_show={handleFocus}\n      on_hide={handleBlur}\n      {...pickSpacingProps(props)}\n    />\n  )\n}\n\nDateComponent._supportsEufemiaSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,EAAEC,UAAU,QAAQ,qBAAqB;AAC5D,SAASC,YAAY,QAAQ,UAAU;AACvC,SAAqCC,gBAAgB,QAAQ,UAAU;AACvE,OAAOC,aAAa,MAAM,yBAAyB;AAInD,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,aAAa,GAAGR,UAAU,CAACK,aAAa,CAAC;EAC/C,MAAMI,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBH,KAAK;IACRI,SAAS,EAAEA,CAAC;MAAEC;IAAuB,CAAC,KAAK;MACzC,OAAOA,IAAI;IACb;EAAC,EACF;EAED,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAGlB,YAAY,CAACM,aAAa,CAAC;EAE/B,OACEV,KAAA,CAAAuB,aAAA,CAACrB,UAAU,EAAAsB,QAAA;IACTV,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAK,KAAIN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEgB,WAAW,CAACC,KAAK,CAACC,SAAS,CAAC;IAC3DC,eAAe,EAAC,UAAU;IAC1Bf,IAAI,EAAEG,KAAM;IACZa,MAAM,EAAEX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,OAAQ;IACvBX,QAAQ,EAAEA,QAAS;IACnBY,UAAU,EAAE,IAAK;IACjBC,kBAAkB,EAAE,IAAK;IACzBC,iBAAiB,EAAE,IAAK;IACxBC,MAAM,EACJjB,IAAI,GACFjB,KAAA,CAAAuB,aAAA,CAACpB,UAAU;MAACgC,KAAK,EAAElB,IAAI,CAACkB;IAAM,GAAElB,IAAI,CAACmB,QAAqB,CAAC,GACzDC,SACL;IACDC,SAAS,EAAEhB,YAAa;IACxBiB,OAAO,EAAEnB,WAAY;IACrBoB,OAAO,EAAEnB;EAAW,GAChBhB,gBAAgB,CAACG,KAAK,CAAC,CAC5B,CAAC;AAEN;AAEAD,aAAa,CAACkC,4BAA4B,GAAG,IAAI;AACjD,eAAelC,aAAa"}

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

@@ -1,6 +1,5 @@
 import { InputMaskedProps } from '../../../components/InputMasked';
-import type { ComponentProps } from '../component-types';
-import type { FieldProps, FieldHelpProps } from '../field-types';
+import { FieldProps, FieldHelpProps } from '../types';
 interface ErrorMessages {
     required?: string;
     schema?: string;
@@ -10,7 +9,7 @@ interface ErrorMessages {
     exclusiveMaximum?: string;
     multipleOf?: string;
 }
-export type Props = ComponentProps & FieldHelpProps & FieldProps<number, undefined, ErrorMessages> & {
+export type Props = FieldHelpProps & FieldProps<number, undefined, ErrorMessages> & {
     inputClassName?: string;
     currency?: InputMaskedProps['as_currency'];
     percent?: InputMaskedProps['as_percent'];

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

@@ -5,9 +5,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useMemo } from 'react';
 import { InputMasked, HelpButton } from '../../../components';
 import classnames from 'classnames';
-import { forwardSpaceProps } from '../utils';
 import FieldBlock from '../FieldBlock';
-import { useField } from './hooks';
+import { useDataValue } from '../hooks';
+import { pickSpacingProps } from '../types';
 function NumberComponent(props) {
   const {
     currency,
@@ -90,7 +90,7 @@ function NumberComponent(props) {
     handleFocus,
     handleBlur,
     handleChange
-  } = useField(preparedProps);
+  } = useDataValue(preparedProps);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-number', className),
     forId: id,
@@ -102,7 +102,7 @@ function NumberComponent(props) {
     warning: warning,
     error: error,
     contentsWidth: width !== false ? width : undefined
-  }, forwardSpaceProps(props)), React.createElement(InputMasked, _extends({
+  }, pickSpacingProps(props)), React.createElement(InputMasked, _extends({
     id: id,
     className: classnames('dnb-forms-field-number__input', inputClassName),
     placeholder: placeholder,

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

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","useMemo","InputMasked","HelpButton","classnames","forwardSpaceProps","FieldBlock","useField","NumberComponent","props","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","undefined","thousandsSeparatorSymbol","preparedProps","_objectSpread","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","fromInput","value","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","handleFocus","handleBlur","handleChange","createElement","_extends","forId","contentsWidth","right","on_focus","on_blur","on_change","stretch","title","contents","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { InputMasked, HelpButton } from '../../../components'\nimport { InputMaskedProps } from '../../../components/InputMasked'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = ComponentProps &\n  FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const {\n    currency,\n    percent,\n    mask,\n    thousandSeparator,\n    decimalSymbol = ',',\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    if (currency) {\n      return {\n        as_currency: currency,\n      }\n    }\n    if (percent) {\n      return {\n        as_percent: percent,\n      }\n    }\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        decimalLimit,\n        decimalSymbol,\n        includeThousandsSeparator: thousandSeparator !== undefined,\n        thousandsSeparatorSymbol:\n          thousandSeparator === true ? ' ' : thousandSeparator,\n        prefix,\n        suffix,\n      },\n    }\n  }, [\n    currency,\n    percent,\n    mask,\n    decimalLimit,\n    decimalSymbol,\n    thousandSeparator,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    schema: props.schema ?? {\n      type: 'number',\n      minimum: props.minimum,\n      maximum: props.maximum,\n      exclusiveMinimum: props.exclusiveMinimum,\n      exclusiveMaximum: props.exclusiveMaximum,\n      multipleOf: props.multipleOf,\n    },\n    toInput: (external: number | undefined) => {\n      if (external === undefined) {\n        return ''\n      }\n      return external\n    },\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    help,\n    emptyValue,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useField(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...forwardSpaceProps(props)}\n    >\n      <InputMasked\n        id={id}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        {...maskProps}\n        right={rightAligned}\n        on_focus={handleFocus}\n        on_blur={handleBlur}\n        on_change={handleChange}\n        disabled={disabled}\n        stretch={width !== undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["React","useMemo","InputMasked","HelpButton","classnames","FieldBlock","useDataValue","pickSpacingProps","NumberComponent","props","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","undefined","thousandsSeparatorSymbol","preparedProps","_objectSpread","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","fromInput","value","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","handleFocus","handleBlur","handleChange","createElement","_extends","forId","contentsWidth","right","on_focus","on_blur","on_change","stretch","title","contents","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { InputMasked, HelpButton } from '../../../components'\nimport { InputMaskedProps } from '../../../components/InputMasked'\nimport classnames from 'classnames'\nimport FieldBlock from '../FieldBlock'\nimport { useDataValue } from '../hooks'\nimport { FieldProps, FieldHelpProps, pickSpacingProps } from '../types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const {\n    currency,\n    percent,\n    mask,\n    thousandSeparator,\n    decimalSymbol = ',',\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    if (currency) {\n      return {\n        as_currency: currency,\n      }\n    }\n    if (percent) {\n      return {\n        as_percent: percent,\n      }\n    }\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        decimalLimit,\n        decimalSymbol,\n        includeThousandsSeparator: thousandSeparator !== undefined,\n        thousandsSeparatorSymbol:\n          thousandSeparator === true ? ' ' : thousandSeparator,\n        prefix,\n        suffix,\n      },\n    }\n  }, [\n    currency,\n    percent,\n    mask,\n    decimalLimit,\n    decimalSymbol,\n    thousandSeparator,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    schema: props.schema ?? {\n      type: 'number',\n      minimum: props.minimum,\n      maximum: props.maximum,\n      exclusiveMinimum: props.exclusiveMinimum,\n      exclusiveMaximum: props.exclusiveMaximum,\n      multipleOf: props.multipleOf,\n    },\n    toInput: (external: number | undefined) => {\n      if (external === undefined) {\n        return ''\n      }\n      return external\n    },\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    help,\n    emptyValue,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      <InputMasked\n        id={id}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        {...maskProps}\n        right={rightAligned}\n        on_focus={handleFocus}\n        on_blur={handleBlur}\n        on_change={handleChange}\n        disabled={disabled}\n        stretch={width !== undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<number | string> & {
+import type { FieldProps } from '../types';
+export type Props = FieldProps<number | string> & {
     title?: string;
     text?: string;
     children?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Option.js","names":["React","classnames","Option","className","title","text","children","createElement","role"],"sources":["../../../../../src/extensions/forms/Field/Option.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldProps<number | string> & {\n    title?: string\n    text?: string\n    children?: React.ReactNode\n  }\n\nexport default function Option({\n  className,\n  title,\n  text,\n  children,\n}: Props) {\n  return (\n    <span\n      className={classnames('dnb-forms-field-option', className)}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\"\n    >\n      {children ?? title}\n      {text}\n    </span>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAWnC,eAAe,SAASC,MAAMA,CAAC;EAC7BC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC;AACK,CAAC,EAAE;EACR,OACEN,KAAA,CAAAO,aAAA;IACEJ,SAAS,EAAEF,UAAU,CAAC,wBAAwB,EAAEE,SAAS,CAAE;IAE3DK,IAAI,EAAC;EAAQ,GAEZF,QAAQ,IAAIF,KAAK,EACjBC,IACG,CAAC;AAEX"}
+{"version":3,"file":"Option.js","names":["React","classnames","Option","className","title","text","children","createElement","role"],"sources":["../../../../../src/extensions/forms/Field/Option.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport type { FieldProps } from '../types'\n\nexport type Props = FieldProps<number | string> & {\n  title?: string\n  text?: string\n  children?: React.ReactNode\n}\n\nexport default function Option({\n  className,\n  title,\n  text,\n  children,\n}: Props) {\n  return (\n    <span\n      className={classnames('dnb-forms-field-option', className)}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\"\n    >\n      {children ?? title}\n      {text}\n    </span>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AASnC,eAAe,SAASC,MAAMA,CAAC;EAC7BC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC;AACK,CAAC,EAAE;EACR,OACEN,KAAA,CAAAO,aAAA;IACEJ,SAAS,EAAEF,UAAU,CAAC,wBAAwB,EAAEE,SAAS,CAAE;IAE3DK,IAAI,EAAC;EAAQ,GAEZF,QAAQ,IAAIF,KAAK,EACjBC,IACG,CAAC;AAEX"}

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

@@ -1,7 +1,6 @@
 import { InputMaskedProps } from '../../../components/InputMasked';
-import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<string, undefined> & {
+import { FieldProps } from '../types';
+export type Props = FieldProps<string, undefined> & {
     countryCodeFieldClassName?: string;
     numberFieldClassName?: string;
     countryCodeLabel?: string;

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

@@ -7,8 +7,8 @@ import { Div } from '../../../elements';
 import classnames from 'classnames';
 import CountryCode from './CountryCode';
 import StringComponent from './String';
-import { forwardSpaceProps } from '../utils';
-import { useField } from './hooks';
+import { useDataValue } from '../hooks';
+import { pickSpacingProps } from '../types';
 import SharedContext from '../../../shared/Context';
 function PhoneNumber(props) {
   const sharedContext = useContext(SharedContext);
@@ -38,7 +38,7 @@ function PhoneNumber(props) {
     handleChange,
     onCountryCodeChange,
     onNumberChange
-  } = useField(preparedProps);
+  } = useDataValue(preparedProps);
   const [, countryCode, phoneNumber] = value !== undefined ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', ''];
   const handleCountryCodeChange = useCallback(countryCode => {
     if (!countryCode && !phoneNumber) {
@@ -60,7 +60,7 @@ function PhoneNumber(props) {
   }, [countryCode, emptyValue, handleChange, onNumberChange]);
   return React.createElement(Div, _extends({
     className: classnames('dnb-forms-field-phone-number', className, width !== undefined && `dnb-forms-field-phone-number--width-${width}`)
-  }, forwardSpaceProps(preparedProps)), React.createElement(CountryCode, {
+  }, pickSpacingProps(preparedProps)), React.createElement(CountryCode, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
     label: countryCodeLabel,
     value: countryCode ?? '+47',

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useContext","useCallback","Div","classnames","CountryCode","StringComponent","forwardSpaceProps","useField","SharedContext","PhoneNumber","props","sharedContext","preparedProps","_objectSpread","value","errorMessages","required","translation","Forms","phoneNumberErrorRequired","className","countryCodeFieldClassName","numberFieldClassName","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","handleCountryCodeChange","filter","Boolean","join","handleNumberChange","createElement","_extends","onChange","type","layout","mask","onFocus","onBlur","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { InputMaskedProps } from '../../../components/InputMasked'\nimport classnames from 'classnames'\nimport CountryCode from './CountryCode'\nimport StringComponent from './String'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  FieldProps<string, undefined> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    width?: 'large' | 'stretch'\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    // Important for the default value to be defined here, and not after the useField call, to avoid the UI jumping\n    // back to +47 once the user empty the field so handleChange send out undefined.\n    value: '+47',\n    errorMessages: {\n      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    numberMask,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n  } = useField(preparedProps)\n\n  const [, countryCode, phoneNumber] =\n    value !== undefined\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n\n  const handleCountryCodeChange = useCallback(\n    (countryCode: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onCountryCodeChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onCountryCodeChange?.(countryCode)\n    },\n    [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (phoneNumber: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onNumberChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onNumberChange?.(phoneNumber)\n    },\n    [countryCode, emptyValue, handleChange, onNumberChange]\n  )\n\n  return (\n    <Div\n      className={classnames(\n        'dnb-forms-field-phone-number',\n        width !== undefined &&\n          `dnb-forms-field-phone-number--width-${width}`,\n        className\n      )}\n      {...forwardSpaceProps(preparedProps)}\n    >\n      <CountryCode\n        className={classnames(\n          'dnb-forms-field-phone-number__country-code',\n          countryCodeFieldClassName\n        )}\n        label={countryCodeLabel}\n        value={countryCode ?? '+47'}\n        disabled={disabled}\n        onChange={handleCountryCodeChange}\n      />\n\n      <StringComponent\n        className={classnames(\n          'dnb-forms-field-phone-number__number',\n          numberFieldClassName\n        )}\n        type=\"tel\"\n        emptyValue=\"\"\n        layout=\"vertical\"\n        label={label ?? ' '}\n        placeholder={placeholder ?? '00 00 00 00'}\n        mask={\n          numberMask ?? [\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n          ]\n        }\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChange={handleNumberChange}\n        value={phoneNumber}\n        info={info}\n        warning={warning}\n        error={error}\n        disabled={disabled}\n        width=\"stretch\"\n      />\n    </Div>\n  )\n}\n\nPhoneNumber._supportsEufemiaSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useContext","useCallback","Div","classnames","CountryCode","StringComponent","useDataValue","pickSpacingProps","SharedContext","PhoneNumber","props","sharedContext","preparedProps","_objectSpread","value","errorMessages","required","translation","Forms","phoneNumberErrorRequired","className","countryCodeFieldClassName","numberFieldClassName","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","handleCountryCodeChange","filter","Boolean","join","handleNumberChange","createElement","_extends","onChange","type","layout","mask","onFocus","onBlur","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { InputMaskedProps } from '../../../components/InputMasked'\nimport classnames from 'classnames'\nimport CountryCode from './CountryCode'\nimport StringComponent from './String'\nimport { useDataValue } from '../hooks'\nimport { FieldProps, pickSpacingProps } from '../types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = FieldProps<string, undefined> & {\n  countryCodeFieldClassName?: string\n  numberFieldClassName?: string\n  countryCodeLabel?: string\n  numberMask?: InputMaskedProps['mask']\n  width?: 'large' | 'stretch'\n  onCountryCodeChange?: (value: string | undefined) => void\n  onNumberChange?: (value: string | undefined) => void\n}\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n    // back to +47 once the user empty the field so handleChange send out undefined.\n    value: '+47',\n    errorMessages: {\n      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    numberMask,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n  } = useDataValue(preparedProps)\n\n  const [, countryCode, phoneNumber] =\n    value !== undefined\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n\n  const handleCountryCodeChange = useCallback(\n    (countryCode: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onCountryCodeChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onCountryCodeChange?.(countryCode)\n    },\n    [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (phoneNumber: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onNumberChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onNumberChange?.(phoneNumber)\n    },\n    [countryCode, emptyValue, handleChange, onNumberChange]\n  )\n\n  return (\n    <Div\n      className={classnames(\n        'dnb-forms-field-phone-number',\n        width !== undefined &&\n          `dnb-forms-field-phone-number--width-${width}`,\n        className\n      )}\n      {...pickSpacingProps(preparedProps)}\n    >\n      <CountryCode\n        className={classnames(\n          'dnb-forms-field-phone-number__country-code',\n          countryCodeFieldClassName\n        )}\n        label={countryCodeLabel}\n        value={countryCode ?? '+47'}\n        disabled={disabled}\n        onChange={handleCountryCodeChange}\n      />\n\n      <StringComponent\n        className={classnames(\n          'dnb-forms-field-phone-number__number',\n          numberFieldClassName\n        )}\n        type=\"tel\"\n        emptyValue=\"\"\n        layout=\"vertical\"\n        label={label ?? ' '}\n        placeholder={placeholder ?? '00 00 00 00'}\n        mask={\n          numberMask ?? [\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n          ]\n        }\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChange={handleNumberChange}\n        value={phoneNumber}\n        info={info}\n        warning={warning}\n        error={error}\n        disabled={disabled}\n        width=\"stretch\"\n      />\n    </Div>\n  )\n}\n\nPhoneNumber._supportsEufemiaSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { Props as FieldGroupProps } from '../FieldGroup';
+import { Props as FieldBlockProps } from '../FieldBlock';
 import { Props as StringComponentProps } from './String';
-export type Props = Omit<FieldGroupProps, 'children'> & Record<'postalCode' | 'city', StringComponentProps> & {
+export type Props = Omit<FieldBlockProps, 'children'> & Record<'postalCode' | 'city', StringComponentProps> & {
     width?: 'small' | 'medium' | 'large';
 };
 declare function PostalCodeAndCity(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useContext } from 'react';
 import classnames from 'classnames';
 import SharedContext from '../../../shared/Context';
-import FieldGroup from '../FieldGroup';
+import FieldBlock from '../FieldBlock';
 import StringComponent from './String';
 function PostalCodeAndCity(props) {
   const sharedContext = useContext(SharedContext);
@@ -16,10 +16,10 @@ function PostalCodeAndCity(props) {
       city = {},
       width = 'large'
     } = props,
-    fieldGroupProps = _objectWithoutProperties(props, _excluded);
-  return React.createElement(FieldGroup, _extends({
+    fieldBlockProps = _objectWithoutProperties(props, _excluded);
+  return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
-  }, fieldGroupProps), React.createElement("div", {
+  }, fieldBlockProps), React.createElement("div", {
     className: 'dnb-forms-field-postal-code-and-city__fields' + (width !== undefined ? ` dnb-forms-field-postal-code-and-city--width-${width}` : "")
   }, React.createElement(StringComponent, _extends({}, postalCode, {
     pattern: postalCode.pattern ?? '^[0-9]{4}$',