@dnb/eufemia 10.10.0 → 10.12.0

package/extensions/forms/DataContext/Context.d.ts

@@ -7,6 +7,8 @@ export interface ContextState {
     data: any;
     /** Should the form validate data before submitting? */
     errors?: Record<string, Error>;
+    /** Will set autoComplete="on" on each nested Field.String and Field.Number */
+    autoComplete?: boolean;
     handlePathChange: (path: string, value: any) => void;
     handleSubmit: (props?: HandleSubmitProps) => any;
     showAllErrors: boolean;

package/extensions/forms/DataContext/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["React","defaultContextState","data","undefined","handlePathChange","handleSubmit","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","setPathWithError","_isInsideFormElement","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport interface ContextState {\n  /** The dataset for the form / form steps */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  handlePathChange: (path: string, value: any) => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: string) => void\n  handleUnMountField: (path: string) => void\n  setPathWithError: (path: string, hasError: boolean) => void\n  hasErrors: () => boolean\n  _isInsideFormElement?: boolean\n}\n\nexport const defaultContextState: ContextState = {\n  data: undefined,\n  handlePathChange: () => null,\n  handleSubmit: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  setPathWithError: () => null,\n  _isInsideFormElement: false,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAyBzB,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,IAAI,EAAEC,SAAS;EACfC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,aAAa,EAAE,KAAK;EACpBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,oBAAoB,EAAE;AACxB,CAAC;AAED,MAAMC,OAAO,GAAGd,KAAK,CAACe,aAAa,CAAed,mBAAmB,CAAC;AAEtE,eAAea,OAAO"}
+{"version":3,"file":"Context.js","names":["React","defaultContextState","data","undefined","handlePathChange","handleSubmit","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","setPathWithError","_isInsideFormElement","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport interface ContextState {\n  /** The dataset for the form / form steps */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (path: string, value: any) => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: string) => void\n  handleUnMountField: (path: string) => void\n  setPathWithError: (path: string, hasError: boolean) => void\n  hasErrors: () => boolean\n  _isInsideFormElement?: boolean\n}\n\nexport const defaultContextState: ContextState = {\n  data: undefined,\n  handlePathChange: () => null,\n  handleSubmit: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  setPathWithError: () => null,\n  _isInsideFormElement: false,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AA2BzB,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,IAAI,EAAEC,SAAS;EACfC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,aAAa,EAAE,KAAK;EACpBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,oBAAoB,EAAE;AACxB,CAAC;AAED,MAAMC,OAAO,GAAGd,KAAK,CAACe,aAAa,CAAed,mBAAmB,CAAC;AAEtE,eAAea,OAAO"}

package/extensions/forms/DataContext/Provider/Provider.d.ts

@@ -21,4 +21,4 @@ export interface Props<Data extends JsonObject> {
     sessionStorageId?: string;
     children: React.ReactNode;
 }
-export default function Provider<Data extends JsonObject>({ defaultData, data, schema, onChange, onPathChange, onSubmit, onSubmitRequest, scrollTopOnSubmit, sessionStorageId, children, }: Props<Data>): import("react/jsx-runtime").JSX.Element;
+export default function Provider<Data extends JsonObject>({ defaultData, data, schema, onChange, onPathChange, onSubmit, onSubmitRequest, scrollTopOnSubmit, sessionStorageId, children, ...rest }: Props<Data>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId", "children"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useEffect, useRef, useMemo, useCallback, useState } from 'react';
 import pointer from 'json-pointer';
 import ajv, { ajvErrorsToFormErrors } from '../../utils/ajv';
@@ -12,17 +17,18 @@ function removeListPath(paths, path) {
 const isArrayJsonPointer = /^\/\d+(\/|$)/;
 export default function Provider(_ref) {
   let {
-    defaultData,
-    data,
-    schema,
-    onChange,
-    onPathChange,
-    onSubmit,
-    onSubmitRequest,
-    scrollTopOnSubmit,
-    sessionStorageId,
-    children
-  } = _ref;
+      defaultData,
+      data,
+      schema,
+      onChange,
+      onPathChange,
+      onSubmit,
+      onSubmitRequest,
+      scrollTopOnSubmit,
+      sessionStorageId,
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   if (data !== undefined && sessionStorageId !== undefined) {
     console.error('Providing both data and sessionStorageId could lead to competing data sources. To provide default data to use only before anything is changed in the interface, use defaultData.');
   }
@@ -100,12 +106,17 @@ export default function Provider(_ref) {
       var _formElement$reset;
       onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(internalData);
       formElement === null || formElement === void 0 ? void 0 : (_formElement$reset = formElement.reset) === null || _formElement$reset === void 0 ? void 0 : _formElement$reset.call(formElement);
-      if (scrollTopOnSubmit) {
-        var _window;
-        typeof window !== 'undefined' && ((_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        }));
+      if (typeof window !== 'undefined') {
+        if (sessionStorageId) {
+          window.sessionStorage.removeItem(sessionStorageId);
+        }
+        if (scrollTopOnSubmit) {
+          var _window;
+          (_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
+        }
       }
     } else {
       setShowAllErrors(true);
@@ -119,8 +130,9 @@ export default function Provider(_ref) {
     }
   }, []);
   return React.createElement(Context.Provider, {
-    value: {
-      data: internalData,
+    value: _objectSpread(_objectSpread({
+      data: internalData
+    }, rest), {}, {
       handlePathChange,
       handleSubmit,
       errors: errorsRef.current,
@@ -131,7 +143,7 @@ export default function Provider(_ref) {
       handleUnMountField,
       hasErrors,
       setPathWithError
-    }
+    })
   }, children);
 }
 //# sourceMappingURL=Provider.js.map

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

@@ -1 +1 @@
-{"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","isArrayJsonPointer","Provider","_ref","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","children","undefined","console","error","wasMounted","initialData","window","_window$sessionStorag","sessionDataJSON","sessionStorage","getItem","JSON","parse","ajvSchemaValidator","compile","internalData","setInternalData","mountedFieldPathsRef","errorsRef","showAllErrors","setShowAllErrors","pathsWithErrorRef","hasErrors","Boolean","current","find","mountedFieldPath","validateBySchema","errors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","match","set","_window$sessionStorag2","setItem","stringify","handleMountField","handleUnMountField","handleSubmit","formElement","arguments","length","_formElement$reset","reset","call","_window","scrollTo","top","behavior","createElement","mountedFieldPaths"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/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, { ContextState } 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  /** Default source data, only used if no other source is available, and not leading to updates if changed after mount */\n  defaultData?: Partial<Data>\n  /** Dynamic source data used as both initial data, and updates internal data if changed after mount */\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  /** Key for caching the data in session storage */\n  sessionStorageId?: string\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\nconst isArrayJsonPointer = /^\\/\\d+(\\/|$)/\n\nexport default function Provider<Data extends JsonObject>({\n  defaultData,\n  data,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  children,\n}: Props<Data>) {\n  // Prop error handling\n  if (data !== undefined && sessionStorageId !== undefined) {\n    console.error(\n      'Providing both data and sessionStorageId could lead to competing data sources. To provide default data to use only before anything is changed in the interface, use defaultData.'\n    )\n  }\n\n  // State\n  const wasMounted = useRef(false)\n  const initialData = useMemo(() => {\n    if (sessionStorageId && typeof window !== 'undefined') {\n      const sessionDataJSON =\n        window.sessionStorage?.getItem(sessionStorageId)\n      if (sessionDataJSON) {\n        return JSON.parse(sessionDataJSON)\n      }\n    }\n    return data ?? defaultData\n  }, [data, defaultData, sessionStorageId])\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const [internalData, setInternalData] =\n    useState<Partial<Data>>(initialData)\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    if (!wasMounted.current) {\n      wasMounted.current = true\n      return\n    }\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    setInternalData(data)\n  }, [data])\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(\n        path === '/'\n          ? // When setting the root of the data, the whole data set should be the new value\n            value\n          : // For sub paths, use the the existing data set (or empty array/object), but modify it below (since pointer.set is not immutable)\n            internalData ?? (path.match(isArrayJsonPointer) ? [] : {})\n      )\n      if (path !== '/') {\n        pointer.set(newData as Data, path, value)\n      }\n\n      onChange?.(newData)\n\n      if (sessionStorageId && typeof window !== 'undefined') {\n        window.sessionStorage?.setItem(\n          sessionStorageId,\n          JSON.stringify(newData)\n        )\n      }\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<ContextState['handleSubmit']>(\n    ({ formElement = null } = {}) => {\n      if (!hasErrors()) {\n        onSubmit?.(internalData as Data)\n        formElement?.reset?.()\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, scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest]\n  )\n\n  useEffect(() => {\n    // Mount procedure\n    if (initialData) {\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(initialData)\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","isArrayJsonPointer","Provider","_ref","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","children","rest","_objectWithoutProperties","_excluded","undefined","console","error","wasMounted","initialData","window","_window$sessionStorag","sessionDataJSON","sessionStorage","getItem","JSON","parse","ajvSchemaValidator","compile","internalData","setInternalData","mountedFieldPathsRef","errorsRef","showAllErrors","setShowAllErrors","pathsWithErrorRef","hasErrors","Boolean","current","find","mountedFieldPath","validateBySchema","errors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","match","set","_window$sessionStorag2","setItem","stringify","handleMountField","handleUnMountField","handleSubmit","formElement","arguments","length","_formElement$reset","reset","call","removeItem","_window","scrollTo","top","behavior","createElement","_objectSpread","mountedFieldPaths"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/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, { ContextState } 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  /** Default source data, only used if no other source is available, and not leading to updates if changed after mount */\n  defaultData?: Partial<Data>\n  /** Dynamic source data used as both initial data, and updates internal data if changed after mount */\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  /** Key for caching the data in session storage */\n  sessionStorageId?: string\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\nconst isArrayJsonPointer = /^\\/\\d+(\\/|$)/\n\nexport default function Provider<Data extends JsonObject>({\n  defaultData,\n  data,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  children,\n  ...rest\n}: Props<Data>) {\n  // Prop error handling\n  if (data !== undefined && sessionStorageId !== undefined) {\n    console.error(\n      'Providing both data and sessionStorageId could lead to competing data sources. To provide default data to use only before anything is changed in the interface, use defaultData.'\n    )\n  }\n\n  // State\n  const wasMounted = useRef(false)\n  const initialData = useMemo(() => {\n    if (sessionStorageId && typeof window !== 'undefined') {\n      const sessionDataJSON =\n        window.sessionStorage?.getItem(sessionStorageId)\n      if (sessionDataJSON) {\n        return JSON.parse(sessionDataJSON)\n      }\n    }\n    return data ?? defaultData\n  }, [data, defaultData, sessionStorageId])\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const [internalData, setInternalData] =\n    useState<Partial<Data>>(initialData)\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    if (!wasMounted.current) {\n      wasMounted.current = true\n      return\n    }\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    setInternalData(data)\n  }, [data])\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(\n        path === '/'\n          ? // When setting the root of the data, the whole data set should be the new value\n            value\n          : // For sub paths, use the the existing data set (or empty array/object), but modify it below (since pointer.set is not immutable)\n            internalData ?? (path.match(isArrayJsonPointer) ? [] : {})\n      )\n      if (path !== '/') {\n        pointer.set(newData as Data, path, value)\n      }\n\n      onChange?.(newData as Data)\n\n      if (sessionStorageId && typeof window !== 'undefined') {\n        window.sessionStorage?.setItem(\n          sessionStorageId,\n          JSON.stringify(newData)\n        )\n      }\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<ContextState['handleSubmit']>(\n    ({ formElement = null } = {}) => {\n      if (!hasErrors()) {\n        onSubmit?.(internalData as Data)\n\n        formElement?.reset?.()\n\n        if (typeof window !== 'undefined') {\n          if (sessionStorageId) {\n            window.sessionStorage.removeItem(sessionStorageId)\n          }\n\n          if (scrollTopOnSubmit) {\n            window?.scrollTo({ top: 0, behavior: 'smooth' })\n          }\n        }\n      } else {\n        setShowAllErrors(true)\n        onSubmitRequest?.()\n      }\n      return internalData\n    },\n    [internalData, scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest]\n  )\n\n  useEffect(() => {\n    // Mount procedure\n    if (initialData) {\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(initialData)\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        ...rest,\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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"}

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

@@ -14,7 +14,7 @@ function NumberComponent(props) {
     percent,
     mask,
     thousandSeparator,
-    decimalSymbol = ',',
+    decimalSymbol,
     decimalLimit = 12,
     prefix,
     suffix,
@@ -73,7 +73,9 @@ function NumberComponent(props) {
   });
   const {
     id,
+    name,
     className,
+    autoComplete,
     inputClassName,
     layout,
     placeholder,
@@ -105,6 +107,8 @@ function NumberComponent(props) {
     contentsWidth: width !== false ? width : undefined
   }, pickSpacingProps(props)), React.createElement(InputMasked, _extends({
     id: id,
+    name: name,
+    autoComplete: autoComplete,
     className: classnames('dnb-forms-field-number__input', inputClassName),
     placeholder: placeholder,
     value: value

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

@@ -1 +1 @@
-{"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","_ref","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","status","stretch","title","contents","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/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 } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\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        status={error ? 'error' : undefined}\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._supportsSpacingProps = 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","_ref","value","numberValue","emptyValue","width","id","name","className","autoComplete","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","status","stretch","title","contents","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/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 } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\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    name,\n    className,\n    autoComplete,\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        name={name}\n        autoComplete={autoComplete}\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        status={error ? 'error' : undefined}\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._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

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

@@ -12,6 +12,7 @@ import FieldBlock from '../../FieldBlock';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
 function PhoneNumber(props) {
+  var _sharedContext$locale;
   const sharedContext = useContext(SharedContext);
   const defaultProps = {
     value: '+47',
@@ -45,11 +46,12 @@ function PhoneNumber(props) {
     onNumberChange
   } = useDataValue(preparedProps);
   const [, countryCode, phoneNumber] = value !== undefined ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', ''];
+  const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
   const countryCodeData = useMemo(() => countries.map(country => ({
-    selectedKey: `+${country.code}`,
-    selected_value: `${country.iso} (+${country.code})`,
-    content: `+${country.code} ${country.name}`
-  })), []);
+    selectedKey: `+${country.cdc}`,
+    selected_value: `${country.iso} (+${country.cdc})`,
+    content: `+${country.cdc} ${country.i18n[lang] ?? country.i18n.en}`
+  })), [sharedContext.locale]);
   const handleCountryCodeChange = useCallback(_ref => {
     var _data$selectedKey;
     let {
@@ -73,15 +75,13 @@ function PhoneNumber(props) {
     handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
     onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(phoneNumber);
   }, [countryCode, emptyValue, handleChange, onNumberChange]);
-  return React.createElement(FieldBlock, {
+  return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-phone-number', className),
     width: width !== 'stretch' ? width : undefined,
     info: info,
     warning: warning,
     error: error
-  }, React.createElement(Flex.Container, {
-    direction: "horizontal"
-  }, React.createElement(Autocomplete, _extends({
+  }, pickSpacingProps(props)), React.createElement(Flex.Horizontal, null, React.createElement(Autocomplete, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
     placeholder: countryCodePlaceholder ?? ' ',
     label_direction: layout,
@@ -93,10 +93,9 @@ function PhoneNumber(props) {
     on_blur: handleBlur,
     on_change: handleCountryCodeChange,
     independent_width: true,
-    search_numbers: true
-  }, pickSpacingProps(props), {
+    search_numbers: true,
     stretch: width === 'stretch'
-  })), React.createElement(StringComponent, {
+  }), React.createElement(StringComponent, {
     className: classnames('dnb-forms-field-phone-number__number', numberFieldClassName),
     type: "tel",
     emptyValue: "",

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","PhoneNumber","props","sharedContext","defaultProps","value","errorMessages","_objectSpread","required","translation","Forms","phoneNumberErrorRequired","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","layout","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","help","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","countryCodeData","map","country","selectedKey","code","selected_value","iso","content","name","handleCountryCodeChange","_ref","_data$selectedKey","data","trim","filter","Boolean","join","handleNumberChange","createElement","Container","direction","_extends","label_direction","on_focus","on_blur","on_change","independent_width","search_numbers","stretch","type","mask","onFocus","onBlur","onChange","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries from '../../constants/countries'\nimport StringComponent from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    width?: 'large' | 'stretch'\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const defaultProps: Partial<Props> = {\n    // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n    // back to +47 once the user empty the field so handleChange send out undefined.\n    value: '+47',\n    errorMessages: {\n      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    layout = 'vertical',\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    numberMask,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    help,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n  } = useDataValue(preparedProps)\n\n  const [, countryCode, phoneNumber] =\n    value !== undefined\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n\n  const countryCodeData = useMemo(\n    () =>\n      countries.map((country) => ({\n        selectedKey: `+${country.code}`,\n        selected_value: `${country.iso} (+${country.code})`,\n        content: `+${country.code} ${country.name}`,\n      })),\n    []\n  )\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = data?.selectedKey?.trim() ?? emptyValue\n\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onCountryCodeChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onCountryCodeChange?.(countryCode)\n    },\n    [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (phoneNumber: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onNumberChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onNumberChange?.(phoneNumber)\n    },\n    [countryCode, emptyValue, handleChange, onNumberChange]\n  )\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={width !== 'stretch' ? width : undefined}\n      info={info}\n      warning={warning}\n      error={error}\n    >\n      <Flex.Container direction=\"horizontal\">\n        <Autocomplete\n          className={classnames(\n            'dnb-forms-field-phone-number__country-code',\n            countryCodeFieldClassName\n          )}\n          placeholder={countryCodePlaceholder ?? ' '}\n          label_direction={layout}\n          label={\n            countryCodeLabel ??\n            sharedContext?.translation.Forms.countryCodeLabel\n          }\n          data={countryCodeData}\n          value={countryCode}\n          disabled={disabled}\n          on_focus={handleFocus}\n          on_blur={handleBlur}\n          on_change={handleCountryCodeChange}\n          independent_width\n          search_numbers\n          {...pickSpacingProps(props)}\n          stretch={width === 'stretch'}\n        />\n\n        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          emptyValue=\"\"\n          layout=\"vertical\"\n          label={label ?? ' '}\n          placeholder={placeholder ?? '00 00 00 00'}\n          mask={\n            numberMask ?? [\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n            ]\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={phoneNumber}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width=\"stretch\"\n          help={help}\n        />\n      </Flex.Container>\n    </FieldBlock>\n  )\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAC/D,SAASC,YAAY,EAAEC,IAAI,QAAQ,wBAAwB;AAE3D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,eAAe,MAAM,WAAW;AACvC,SAASC,YAAY,QAAQ,aAAa;AAC1C,OAAOC,UAAU,MAAM,kBAAkB;AAEzC,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;AActD,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAMC,aAAa,GAAGb,UAAU,CAACU,aAAa,CAAC;EAC/C,MAAMI,YAA4B,GAAG;IAGnCC,KAAK,EAAE,KAAK;IACZC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;IAAwB,GAChET,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEI,aAAa;EAE3B,CAAC;EACD,MAAMM,aAAoB,GAAAL,aAAA,CAAAA,aAAA,KACrBH,YAAY,GACZF,KAAK,CACT;EAED,MAAM;IACJW,SAAS;IACTC,yBAAyB;IACzBC,oBAAoB;IACpBC,MAAM,GAAG,UAAU;IACnBC,sBAAsB;IACtBC,WAAW;IACXC,gBAAgB;IAChBC,KAAK,GAAGjB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACW,gBAAgB;IACzDhB,KAAK;IACLiB,UAAU;IACVC,UAAU;IACVC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,KAAK,GAAG,OAAO;IACfC,IAAI;IACJC,WAAW;IACXC,UAAU;IACVC,YAAY;IACZC,mBAAmB;IACnBC;EACF,CAAC,GAAGrC,YAAY,CAACe,aAAa,CAAC;EAE/B,MAAM,GAAGuB,WAAW,EAAEC,WAAW,CAAC,GAChC/B,KAAK,KAAKgC,SAAS,GACfhC,KAAK,CAACiC,KAAK,CAAC,oBAAoB,CAAC,GACjC,CAACD,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC;EAEzB,MAAME,eAAe,GAAGlD,OAAO,CAC7B,MACEM,SAAS,CAAC6C,GAAG,CAAEC,OAAO,KAAM;IAC1BC,WAAW,EAAG,IAAGD,OAAO,CAACE,IAAK,EAAC;IAC/BC,cAAc,EAAG,GAAEH,OAAO,CAACI,GAAI,MAAKJ,OAAO,CAACE,IAAK,GAAE;IACnDG,OAAO,EAAG,IAAGL,OAAO,CAACE,IAAK,IAAGF,OAAO,CAACM,IAAK;EAC5C,CAAC,CAAC,CAAC,EACL,EACF,CAAC;EAED,MAAMC,uBAAuB,GAAGzD,WAAW,CACzC0D,IAAA,IAAiD;IAAA,IAAAC,iBAAA;IAAA,IAAhD;MAAEC;IAAwC,CAAC,GAAAF,IAAA;IAC1C,MAAMd,WAAW,GAAG,CAAAgB,IAAI,aAAJA,IAAI,wBAAAD,iBAAA,GAAJC,IAAI,CAAET,WAAW,cAAAQ,iBAAA,uBAAjBA,iBAAA,CAAmBE,IAAI,CAAC,CAAC,KAAI7B,UAAU;IAE3D,IAAI,CAACY,WAAW,IAAI,CAACC,WAAW,EAAE;MAChCJ,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGT,UAAU,CAAC;MAC1BU,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAGV,UAAU,CAAC;MACjC;IACF;IAEAS,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAACG,WAAW,EAAEC,WAAW,CAAC,CAACiB,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpEtB,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAGE,WAAW,CAAC;EACpC,CAAC,EACD,CAACC,WAAW,EAAEb,UAAU,EAAES,YAAY,EAAEC,mBAAmB,CAC7D,CAAC;EAED,MAAMuB,kBAAkB,GAAGjE,WAAW,CACnC6C,WAAmB,IAAK;IACvB,IAAI,CAACD,WAAW,IAAI,CAACC,WAAW,EAAE;MAChCJ,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGT,UAAU,CAAC;MAC1BW,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGX,UAAU,CAAC;MAC5B;IACF;IAEAS,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAACG,WAAW,EAAEC,WAAW,CAAC,CAACiB,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpErB,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGE,WAAW,CAAC;EAC/B,CAAC,EACD,CAACD,WAAW,EAAEZ,UAAU,EAAES,YAAY,EAAEE,cAAc,CACxD,CAAC;EAED,OACE9C,KAAA,CAAAqE,aAAA,CAAC3D,UAAU;IACTe,SAAS,EAAEnB,UAAU,CAAC,8BAA8B,EAAEmB,SAAS,CAAE;IACjEe,KAAK,EAAEA,KAAK,KAAK,SAAS,GAAGA,KAAK,GAAGS,SAAU;IAC/Cb,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAEA;EAAM,GAEbtC,KAAA,CAAAqE,aAAA,CAAChE,IAAI,CAACiE,SAAS;IAACC,SAAS,EAAC;EAAY,GACpCvE,KAAA,CAAAqE,aAAA,CAACjE,YAAY,EAAAoE,QAAA;IACX/C,SAAS,EAAEnB,UAAU,CACnB,4CAA4C,EAC5CoB,yBACF,CAAE;IACFI,WAAW,EAAED,sBAAsB,IAAI,GAAI;IAC3C4C,eAAe,EAAE7C,MAAO;IACxBI,KAAK,EACHD,gBAAgB,KAChBhB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACS,gBAAgB,CAClD;IACDgC,IAAI,EAAEZ,eAAgB;IACtBlC,KAAK,EAAE8B,WAAY;IACnBR,QAAQ,EAAEA,QAAS;IACnBmC,QAAQ,EAAEhC,WAAY;IACtBiC,OAAO,EAAEhC,UAAW;IACpBiC,SAAS,EAAEhB,uBAAwB;IACnCiB,iBAAiB;IACjBC,cAAc;EAAA,GACVnE,gBAAgB,CAACG,KAAK,CAAC;IAC3BiE,OAAO,EAAEvC,KAAK,KAAK;EAAU,EAC9B,CAAC,EAEFxC,KAAA,CAAAqE,aAAA,CAAC7D,eAAe;IACdiB,SAAS,EAAEnB,UAAU,CACnB,sCAAsC,EACtCqB,oBACF,CAAE;IACFqD,IAAI,EAAC,KAAK;IACV7C,UAAU,EAAC,EAAE;IACbP,MAAM,EAAC,UAAU;IACjBI,KAAK,EAAEA,KAAK,IAAI,GAAI;IACpBF,WAAW,EAAEA,WAAW,IAAI,aAAc;IAC1CmD,IAAI,EACF/C,UAAU,IAAI,CACZ,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,CAEP;IACDgD,OAAO,EAAExC,WAAY;IACrByC,MAAM,EAAExC,UAAW;IACnByC,QAAQ,EAAEhB,kBAAmB;IAC7BnD,KAAK,EAAE+B,WAAY;IACnBZ,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAC,SAAS;IACfC,IAAI,EAAEA;EAAK,CACZ,CACa,CACN,CAAC;AAEjB;AAEA5B,WAAW,CAACwE,qBAAqB,GAAG,IAAI;AACxC,eAAexE,WAAW"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","PhoneNumber","props","_sharedContext$locale","sharedContext","defaultProps","value","errorMessages","_objectSpread","required","translation","Forms","phoneNumberErrorRequired","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","layout","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","help","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","lang","locale","split","countryCodeData","map","country","selectedKey","cdc","selected_value","iso","content","i18n","en","handleCountryCodeChange","_ref","_data$selectedKey","data","trim","filter","Boolean","join","handleNumberChange","createElement","_extends","Horizontal","label_direction","on_focus","on_blur","on_change","independent_width","search_numbers","stretch","type","mask","onFocus","onBlur","onChange","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries from '../../constants/countries'\nimport StringComponent from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    width?: 'large' | 'stretch'\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const defaultProps: Partial<Props> = {\n    // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n    // back to +47 once the user empty the field so handleChange send out undefined.\n    value: '+47',\n    errorMessages: {\n      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    layout = 'vertical',\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    numberMask,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    help,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n  } = useDataValue(preparedProps)\n\n  const [, countryCode, phoneNumber] =\n    value !== undefined\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n\n  const lang = sharedContext.locale?.split('-')[0]\n  const countryCodeData = useMemo(\n    () =>\n      countries.map((country) => ({\n        selectedKey: `+${country.cdc}`,\n        selected_value: `${country.iso} (+${country.cdc})`,\n        content: `+${country.cdc} ${\n          country.i18n[lang] ?? country.i18n.en\n        }`,\n      })),\n    [sharedContext.locale]\n  )\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = data?.selectedKey?.trim() ?? emptyValue\n\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onCountryCodeChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onCountryCodeChange?.(countryCode)\n    },\n    [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (phoneNumber: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onNumberChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onNumberChange?.(phoneNumber)\n    },\n    [countryCode, emptyValue, handleChange, onNumberChange]\n  )\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={width !== 'stretch' ? width : undefined}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal>\n        <Autocomplete\n          className={classnames(\n            'dnb-forms-field-phone-number__country-code',\n            countryCodeFieldClassName\n          )}\n          placeholder={countryCodePlaceholder ?? ' '}\n          label_direction={layout}\n          label={\n            countryCodeLabel ??\n            sharedContext?.translation.Forms.countryCodeLabel\n          }\n          data={countryCodeData}\n          value={countryCode}\n          disabled={disabled}\n          on_focus={handleFocus}\n          on_blur={handleBlur}\n          on_change={handleCountryCodeChange}\n          independent_width\n          search_numbers\n          stretch={width === 'stretch'}\n        />\n\n        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          emptyValue=\"\"\n          layout=\"vertical\"\n          label={label ?? ' '}\n          placeholder={placeholder ?? '00 00 00 00'}\n          mask={\n            numberMask ?? [\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n            ]\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={phoneNumber}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width=\"stretch\"\n          help={help}\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

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

@@ -1,12 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import Selection from '../Selection';
 import Option from '../Option';
 import countries from '../../constants/countries';
 import SharedContext from '../../../../shared/Context';
 function SelectCountry(props) {
+  var _sharedContext$locale;
   const sharedContext = useContext(SharedContext);
   const selectComponentProps = _objectSpread(_objectSpread({}, props), {}, {
     placeholder: props.placeholder ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryPlaceholder),
@@ -15,11 +16,13 @@ function SelectCountry(props) {
       required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryErrorRequired
     }, props.errorMessages)
   });
-  return React.createElement(Selection, selectComponentProps, countries.map(country => React.createElement(Option, {
+  const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
+  const countryOptions = useMemo(() => countries.map(country => React.createElement(Option, {
     key: country.iso,
     value: country.iso,
-    title: country.name
-  })));
+    title: country.i18n[lang] ?? country.i18n.en
+  })), [sharedContext.locale]);
+  return React.createElement(Selection, selectComponentProps, countryOptions);
 }
 SelectCountry._supportsSpacingProps = true;
 export default SelectCountry;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectCountry.js","names":["React","useContext","Selection","Option","countries","SharedContext","SelectCountry","props","sharedContext","selectComponentProps","_objectSpread","placeholder","translation","Forms","selectCountryPlaceholder","label","selectCountryLabel","errorMessages","required","selectCountryErrorRequired","createElement","map","country","key","iso","value","title","name","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport Selection, { Props as SelectionProps } from '../Selection'\nimport Option from '../Option'\nimport countries from '../../constants/countries'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = SelectionProps\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const selectComponentProps: Props = {\n    ...props,\n    placeholder:\n      props.placeholder ??\n      sharedContext?.translation.Forms.selectCountryPlaceholder,\n    label:\n      props.label ?? sharedContext?.translation.Forms.selectCountryLabel,\n    errorMessages: {\n      required:\n        sharedContext?.translation.Forms.selectCountryErrorRequired,\n      ...props.errorMessages,\n    },\n  }\n\n  return (\n    <Selection {...selectComponentProps}>\n      {countries.map((country) => (\n        <Option\n          key={country.iso}\n          value={country.iso}\n          title={country.name}\n        />\n      ))}\n    </Selection>\n  )\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAmC,cAAc;AACjE,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,aAAa,GAAGP,UAAU,CAACI,aAAa,CAAC;EAE/C,MAAMI,oBAA2B,GAAAC,aAAA,CAAAA,aAAA,KAC5BH,KAAK;IACRI,WAAW,EACTJ,KAAK,CAACI,WAAW,KACjBH,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC,wBAAwB;IAC3DC,KAAK,EACHR,KAAK,CAACQ,KAAK,KAAIP,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACG,kBAAkB;IACpEC,aAAa,EAAAP,aAAA;MACXQ,QAAQ,EACNV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACM;IAA0B,GAC1DZ,KAAK,CAACU,aAAa;EACvB,EACF;EAED,OACEjB,KAAA,CAAAoB,aAAA,CAAClB,SAAS,EAAKO,oBAAoB,EAChCL,SAAS,CAACiB,GAAG,CAAEC,OAAO,IACrBtB,KAAA,CAAAoB,aAAA,CAACjB,MAAM;IACLoB,GAAG,EAAED,OAAO,CAACE,GAAI;IACjBC,KAAK,EAAEH,OAAO,CAACE,GAAI;IACnBE,KAAK,EAAEJ,OAAO,CAACK;EAAK,CACrB,CACF,CACQ,CAAC;AAEhB;AAEArB,aAAa,CAACsB,qBAAqB,GAAG,IAAI;AAC1C,eAAetB,aAAa"}
+{"version":3,"file":"SelectCountry.js","names":["React","useContext","useMemo","Selection","Option","countries","SharedContext","SelectCountry","props","_sharedContext$locale","sharedContext","selectComponentProps","_objectSpread","placeholder","translation","Forms","selectCountryPlaceholder","label","selectCountryLabel","errorMessages","required","selectCountryErrorRequired","lang","locale","split","countryOptions","map","country","createElement","key","iso","value","title","i18n","en","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport Selection, { Props as SelectionProps } from '../Selection'\nimport Option from '../Option'\nimport countries from '../../constants/countries'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = SelectionProps\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const selectComponentProps: Props = {\n    ...props,\n    placeholder:\n      props.placeholder ??\n      sharedContext?.translation.Forms.selectCountryPlaceholder,\n    label:\n      props.label ?? sharedContext?.translation.Forms.selectCountryLabel,\n    errorMessages: {\n      required:\n        sharedContext?.translation.Forms.selectCountryErrorRequired,\n      ...props.errorMessages,\n    },\n  }\n\n  const lang = sharedContext.locale?.split('-')[0]\n  const countryOptions = useMemo(\n    () =>\n      countries.map((country) => (\n        <Option\n          key={country.iso}\n          value={country.iso}\n          title={country.i18n[lang] ?? country.i18n.en}\n        />\n      )),\n    [sharedContext.locale]\n  )\n\n  return <Selection {...selectComponentProps}>{countryOptions}</Selection>\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAmC,cAAc;AACjE,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA;EACnC,MAAMC,aAAa,GAAGT,UAAU,CAACK,aAAa,CAAC;EAE/C,MAAMK,oBAA2B,GAAAC,aAAA,CAAAA,aAAA,KAC5BJ,KAAK;IACRK,WAAW,EACTL,KAAK,CAACK,WAAW,KACjBH,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC,wBAAwB;IAC3DC,KAAK,EACHT,KAAK,CAACS,KAAK,KAAIP,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACG,kBAAkB;IACpEC,aAAa,EAAAP,aAAA;MACXQ,QAAQ,EACNV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACM;IAA0B,GAC1Db,KAAK,CAACW,aAAa;EACvB,EACF;EAED,MAAMG,IAAI,IAAAb,qBAAA,GAAGC,aAAa,CAACa,MAAM,cAAAd,qBAAA,uBAApBA,qBAAA,CAAsBe,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAChD,MAAMC,cAAc,GAAGvB,OAAO,CAC5B,MACEG,SAAS,CAACqB,GAAG,CAAEC,OAAO,IACpB3B,KAAA,CAAA4B,aAAA,CAACxB,MAAM;IACLyB,GAAG,EAAEF,OAAO,CAACG,GAAI;IACjBC,KAAK,EAAEJ,OAAO,CAACG,GAAI;IACnBE,KAAK,EAAEL,OAAO,CAACM,IAAI,CAACX,IAAI,CAAC,IAAIK,OAAO,CAACM,IAAI,CAACC;EAAG,CAC9C,CACF,CAAC,EACJ,CAACxB,aAAa,CAACa,MAAM,CACvB,CAAC;EAED,OAAOvB,KAAA,CAAA4B,aAAA,CAACzB,SAAS,EAAKQ,oBAAoB,EAAGc,cAA0B,CAAC;AAC1E;AAEAlB,aAAa,CAAC4B,qBAAqB,GAAG,IAAI;AAC1C,eAAe5B,aAAa"}

package/extensions/forms/Field/Selection/Selection.js

@@ -4,7 +4,7 @@ var _em;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useMemo, useContext, useCallback } from 'react';
-import { Button, Dropdown, Radio, HelpButton } from '../../../../components';
+import { ToggleButton, Dropdown, Radio, HelpButton } from '../../../../components';
 import ButtonRow from '../../Form/ButtonRow';
 import FieldBlock from '../../FieldBlock';
 import classnames from 'classnames';
@@ -14,6 +14,7 @@ import Option from '../Option';
 import { useDataValue } from '../../hooks';
 import { FormError } from '../../types';
 import { pickSpacingProps } from '../../../../components/flex/utils';
+import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext';
 function Selection(props) {
   const sharedContext = useContext(SharedContext);
   const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, []);
@@ -102,15 +103,17 @@ function Selection(props) {
         value: String(option.value ?? '')
       })));
     case 'button':
-      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ButtonRow, null, options.map((option, i) => React.createElement(Button, {
+      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ButtonRow, null, React.createElement(ToggleButtonGroupContext.Provider, {
+        value: {
+          status: error ? 'error' : undefined,
+          disabled
+        }
+      }, options.map((option, i) => React.createElement(ToggleButton, {
         key: `option-${i}-${option.value}`,
-        id: id,
         text: option.title,
-        on_click: option.handleSelect,
-        variant: option.value === value ? undefined : 'secondary',
-        status: error ? 'error' : undefined,
-        disabled: disabled
-      }))));
+        on_change: option.handleSelect,
+        checked: option.value === value
+      })))));
     case 'dropdown':
       {
         const optionsData = React.Children.map(children, child => {

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","Button","Dropdown","Radio","HelpButton","ButtonRow","FieldBlock","classnames","makeUniqueId","SharedContext","Option","useDataValue","FormError","pickSpacingProps","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","labelDescription","labelSecondary","layout","optionsLayout","placeholder","value","info","warning","error","disabled","help","emptyValue","width","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","handleRadioChange","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","options","Children","toArray","filter","child","isValidElement","type","map","option","title","handleSelect","selected","createElement","Group","_extends","layout_direction","vertical","on_change","String","i","key","text","on_click","status","optionsData","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","label_direction","message","Error","toString","suffix","contents","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  Button,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport Option from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const handleRadioChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames('dnb-forms-field-selection', className)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\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            handleChange?.(selected === value ? emptyValue : selected)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'radio':\n      return (\n        <Radio.Group\n          className={cn}\n          label={label}\n          layout_direction={\n            optionsLayout === 'horizontal' ? 'row' : 'column'\n          }\n          vertical={layout === 'vertical'}\n          on_change={handleRadioChange}\n          value={String(value ?? '')}\n          {...pickSpacingProps(props)}\n        >\n          {options.map((option, i) => (\n            <Radio\n              key={`option-${i}-${option.value}`}\n              label={option.title}\n              value={String(option.value ?? '')}\n            />\n          ))}\n        </Radio.Group>\n      )\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={option.value === value ? undefined : 'secondary'}\n                status={error ? 'error' : undefined}\n                disabled={disabled}\n              />\n            ))}\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\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          disabled={disabled}\n          data={data}\n          suffix={\n            help ? (\n              <HelpButton title={help.title}>{help.contents}</HelpButton>\n            ) : undefined\n          }\n          on_change={handleDropdownChange}\n          on_show={handleShow}\n          on_hide={handleHide}\n          {...pickSpacingProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","ToggleButton","Dropdown","Radio","HelpButton","ButtonRow","FieldBlock","classnames","makeUniqueId","SharedContext","Option","useDataValue","FormError","pickSpacingProps","ToggleButtonGroupContext","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","labelDescription","labelSecondary","layout","optionsLayout","placeholder","value","info","warning","error","disabled","help","emptyValue","width","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","handleRadioChange","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","options","Children","toArray","filter","child","isValidElement","type","map","option","title","handleSelect","selected","createElement","Group","_extends","layout_direction","vertical","on_change","String","i","key","Provider","status","text","checked","optionsData","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","label_direction","message","Error","toString","suffix","contents","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport Option from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const handleRadioChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames('dnb-forms-field-selection', className)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\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            handleChange?.(selected === value ? emptyValue : selected)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'radio':\n      return (\n        <Radio.Group\n          className={cn}\n          label={label}\n          layout_direction={\n            optionsLayout === 'horizontal' ? 'row' : 'column'\n          }\n          vertical={layout === 'vertical'}\n          on_change={handleRadioChange}\n          value={String(value ?? '')}\n          {...pickSpacingProps(props)}\n        >\n          {options.map((option, i) => (\n            <Radio\n              key={`option-${i}-${option.value}`}\n              label={option.title}\n              value={String(option.value ?? '')}\n            />\n          ))}\n        </Radio.Group>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            <ToggleButtonGroupContext.Provider\n              value={{\n                status: error ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              {options.map((option, i) => (\n                <ToggleButton\n                  key={`option-${i}-${option.value}`}\n                  text={option.title}\n                  on_change={option.handleSelect}\n                  checked={option.value === value}\n                />\n              ))}\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\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          disabled={disabled}\n          data={data}\n          suffix={\n            help ? (\n              <HelpButton title={help.title}>{help.contents}</HelpButton>\n            ) : undefined\n          }\n          on_change={handleDropdownChange}\n          on_show={handleShow}\n          on_hide={handleHide}\n          {...pickSpacingProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -18,6 +18,7 @@ export type Props = FieldHelpProps & FieldProps<string, undefined | string, Erro
     innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
     clear?: boolean;
     autoresize?: boolean;
+    autoComplete?: HTMLInputElement['autocomplete'];
     autoresizeMaxRows?: number;
     characterCounter?: boolean;
     mask?: InputMaskedProps['mask'];