npm - @dnb/eufemia - Versions diffs - 10.6.0 → 10.7.0 - Mend

@dnb/eufemia 10.6.0 → 10.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

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

@@ -20,14 +20,14 @@ export default function Provider(_ref) {
     children
   } = _ref;
   const ajvSchemaValidator = useMemo(() => schema ? ajv.compile(schema) : undefined, [schema]);
-  const internalData = useRef(externalData);
+  const [internalData, setInternalData] = useState(externalData);
   const mountedFieldPathsRef = useRef([]);
   const errorsRef = useRef({});
   const [showAllErrors, setShowAllErrors] = useState(false);
   const pathsWithErrorRef = useRef([]);
   const hasErrors = useCallback(() => Boolean(mountedFieldPathsRef.current.find(mountedFieldPath => errorsRef.current[mountedFieldPath] !== undefined || pathsWithErrorRef.current.includes(mountedFieldPath))), []);
   useEffect(() => {
-    internalData.current = externalData;
+    setInternalData(externalData);
   }, [externalData]);
   const validateBySchema = useCallback(data => {
     if (!ajvSchemaValidator) {
@@ -48,15 +48,15 @@ export default function Provider(_ref) {
   }, []);
   const handlePathChange = useCallback((path, value) => {
     onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value);
-    const newData = structuredClone(internalData.current);
+    const newData = structuredClone(internalData);
     if (path) {
       pointer.set(newData, path, value);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(newData);
     validateBySchemaAndUpdateState(newData);
-    internalData.current = newData;
+    setInternalData(newData);
     setShowAllErrors(false);
-  }, [onChange, onPathChange, validateBySchemaAndUpdateState]);
+  }, [internalData, onChange, onPathChange, validateBySchemaAndUpdateState]);
   const handleMountField = useCallback(path => {
     mountedFieldPathsRef.current = addListPath(mountedFieldPathsRef.current, path);
   }, []);
@@ -65,7 +65,7 @@ export default function Provider(_ref) {
   }, []);
   const handleSubmit = useCallback(() => {
     if (!hasErrors()) {
-      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(internalData.current);
+      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(internalData);
       if (scrollTopOnSubmit) {
         var _window;
         window && ((_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
@@ -77,8 +77,8 @@ export default function Provider(_ref) {
       setShowAllErrors(true);
       onSubmitRequest === null || onSubmitRequest === void 0 ? void 0 : onSubmitRequest();
     }
-    return internalData.current;
-  }, [scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest]);
+    return internalData;
+  }, [internalData, scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest]);
   useEffect(() => {
     if (externalData) {
       validateBySchemaAndUpdateState(externalData);
@@ -86,7 +86,7 @@ export default function Provider(_ref) {
   }, []);
   return React.createElement(Context.Provider, {
     value: {
-      data: internalData.current,
+      data: internalData,
       handlePathChange,
       handleSubmit,
       errors: errorsRef.current,

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

	@@ -1 +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","_ref","data","externalData","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","children","ajvSchemaValidator","compile","undefined","internalData","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 = useRef<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 internalData.current = 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.current) as Data\n if (path) {\n pointer.set(newData, path, value)\n }\n onChange?.(newData)\n\n validateBySchemaAndUpdateState(newData)\n\n internalData.current = newData\n\n setShowAllErrors(false)\n },\n [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.current 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.current\n }, [scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest])\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.current,\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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"}
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","_ref","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":"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;AAoB/B,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,CAAAC,IAAA,EAShB;EAAA,IAT0C;IACxDC,IAAI,EAAEC,YAAY;IAClBC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,QAAQ;IACRC,eAAe;IACfC,iBAAiB;IACjBC;EACW,CAAC,GAAAT,IAAA;EACZ,MAAMU,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,CAAC5B,QAAQ,CAAC8B,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,CAACQ,IAAY,EAAEoC,QAAiB,KAAK;IACnCV,iBAAiB,CAACG,OAAO,GAAGO,QAAQ,GAChCtC,WAAW,CAAC4B,iBAAiB,CAACG,OAAO,EAAE7B,IAAI,CAAC,GAC5CG,cAAc,CAACuB,iBAAiB,CAACG,OAAO,EAAE7B,IAAI,CAAC;EACrD,CAAC,EACD,EACF,CAAC;EAED,MAAMqC,gBAAgB,GAAG7C,WAAW,CAClC,CAACQ,IAAI,EAAEsC,KAAK,KAAK;IACf1B,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGZ,IAAI,EAAEsC,KAAK,CAAC;IAE3B,MAAMC,OAAO,GAAGC,eAAe,CAACpB,YAAY,CAAS;IACrD,IAAIpB,IAAI,EAAE;MACRN,OAAO,CAAC+C,GAAG,CAACF,OAAO,EAAEvC,IAAI,EAAEsC,KAAK,CAAC;IACnC;IACA3B,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,MAAMQ,gBAAgB,GAAGlD,WAAW,CAAEQ,IAAY,IAAK;IACrDsB,oBAAoB,CAACO,OAAO,GAAG/B,WAAW,CACxCwB,oBAAoB,CAACO,OAAO,EAC5B7B,IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM2C,kBAAkB,GAAGnD,WAAW,CAAEQ,IAAY,IAAK;IACvDsB,oBAAoB,CAACO,OAAO,GAAG1B,cAAc,CAC3CmB,oBAAoB,CAACO,OAAO,EAC5B7B,IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAKN,MAAM4C,YAAY,GAAGpD,WAAW,CAAC,MAAM;IACrC,IAAI,CAACmC,SAAS,CAAC,CAAC,EAAE;MAChBd,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGO,YAAoB,CAAC;MAChC,IAAIL,iBAAiB,EAAE;QAAA,IAAA8B,OAAA;QACrBC,MAAM,MAAAD,OAAA,GAAIC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,QAAQ,CAAC;UAAEC,GAAG,EAAE,CAAC;UAAEC,QAAQ,EAAE;QAAS,CAAC,CAAC;MAC5D;IACF,CAAC,MAAM;MACLxB,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,CAAA8D,aAAA,CAACrD,OAAO,CAACS,QAAQ;IACfgC,KAAK,EAAE;MACL9B,IAAI,EAAEY,YAAY;MAClBiB,gBAAgB;MAChBO,YAAY;MACZX,MAAM,EAAEV,SAAS,CAACM,OAAO;MACzBL,aAAa;MACbC,gBAAgB;MAChB0B,iBAAiB,EAAE7B,oBAAoB,CAACO,OAAO;MAC/Ca,gBAAgB;MAChBC,kBAAkB;MAClBhB,SAAS;MACTQ;IACF;EAAE,GAEDnB,QACe,CAAC;AAEvB"}

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

@@ -73,10 +73,11 @@ function NumberComponent(props) {
     labelSecondary: labelSecondary,
     info: info,
     warning: warning,
-    error: error
+    error: error,
+    contentsWidth: width !== false ? width : undefined
   }, forwardSpaceProps(props)), React.createElement(InputMasked, {
     id: id,
-    className: classnames('dnb-forms-field-number__input', inputClassName, width !== false && width !== 'stretch' && `dnb-forms-field-number__input--width-${width}`),
+    className: classnames('dnb-forms-field-number__input', inputClassName),
     placeholder: placeholder,
     value: value,
     as_number: true,
@@ -93,7 +94,7 @@ function NumberComponent(props) {
     on_blur: onBlur,
     on_change: onChange,
     disabled: disabled,
-    stretch: width === 'stretch'
+    stretch: width !== undefined
   }));
 }
 NumberComponent._supportsEufemiaSpacingProps = true;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Number.js","names":["React","InputMasked","classnames","forwardSpaceProps","FieldBlock","useField","NumberComponent","props","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","preparedProps","_objectSpread","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","undefined","fromInput","_ref","value","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","onFocus","onBlur","onChange","createElement","_extends","forId","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","right","on_focus","on_blur","on_change","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React from 'react'\nimport { InputMasked } from '../../../components'\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 } 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 FieldProps<number, undefined, ErrorMessages> & {\n inputClassName?: string\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 \| 'medium' \| 'large' \| 'stretch'\n rightAligned?: boolean\n }\n\nfunction NumberComponent(props: Props) {\n const {\n thousandSeparator,\n decimalSymbol = ',',\n decimalLimit = 12,\n prefix,\n suffix,\n rightAligned,\n } = props\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 emptyValue,\n width,\n onFocus,\n onBlur,\n onChange,\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 {...forwardSpaceProps(props)}\n >\n <InputMasked\n id={id}\n className={classnames(\n 'dnb-forms-field-number__input',\n ~~width !== false &&\n width !== 'stretch' &&\n `dnb-forms-field-number__input--width-${width}`,\n~~ inputClassName\n )}\n placeholder={placeholder}\n value={value}\n as_number\n number_mask={{\n decimalLimit,\n decimalSymbol,\n includeThousandsSeparator: thousandSeparator !== undefined,\n thousandsSeparatorSymbol:\n thousandSeparator === true ? ' ' : thousandSeparator,\n prefix,\n suffix,\n }}\n right={rightAligned}\n on_focus={onFocus}\n on_blur={onBlur}\n on_change={onChange}\n disabled={disabled}\n stretch={width ~~===~~ ~~'stretch'~~}\n />\n </FieldBlock>\n )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,qBAAqB;AACjD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,QAAQ,QAAQ,SAAS;AAkClC,SAASC,eAAeA,CAACC,KAAY,EAAE;EACrC,MAAM;IACJC,iBAAiB;IACjBC,aAAa,GAAG,GAAG;IACnBC,YAAY,GAAG,EAAE;IACjBC,MAAM;IACNC,MAAM;IACNC;EACF,CAAC,GAAGN,KAAK;EAET,MAAMO,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBR,KAAK;IACRS,MAAM,EAAET,KAAK,CAACS,MAAM,IAAI;MACtBC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEX,KAAK,CAACW,OAAO;MACtBC,OAAO,EAAEZ,KAAK,CAACY,OAAO;MACtBC,gBAAgB,EAAEb,KAAK,CAACa,gBAAgB;MACxCC,gBAAgB,EAAEd,KAAK,CAACc,gBAAgB;MACxCC,UAAU,EAAEf,KAAK,CAACe;IACpB,CAAC;IACDC,OAAO,EAAGC,QAA4B,IAAK;MACzC,IAAIA,QAAQ,KAAKC,SAAS,EAAE;QAC1B,OAAO,EAAE;MACX;MACA,OAAOD,QAAQ;IACjB,CAAC;IACDE,SAAS,EAAEC,IAAA,IAML;MAAA,IANM;QACVC,KAAK;QACLC;MAIF,CAAC,GAAAF,IAAA;MACC,IAAIC,KAAK,KAAK,EAAE,EAAE;QAChB,OAAOE,UAAU;MACnB;MACA,OAAOD,WAAW;IACpB,CAAC;IACDE,KAAK,EAAExB,KAAK,CAACwB,KAAK,IAAI;EAAQ,EAC/B;EAED,MAAM;IACJC,EAAE;IACFC,SAAS;IACTC,cAAc;IACdC,MAAM;IACNC,WAAW;IACXC,KAAK;IACLC,gBAAgB;IAChBC,cAAc;IACdX,KAAK;IACLY,QAAQ;IACRC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLb,UAAU;IACVC,KAAK;IACLa,OAAO;IACPC,MAAM;IACNC;EACF,CAAC,GAAGzC,QAAQ,CAACS,aAAa,CAAC;EAE3B,OACEd,KAAA,CAAA+C,aAAA,CAAC3C,UAAU,EAAA4C,QAAA;IACTf,SAAS,EAAE/B,UAAU,CAAC,wBAAwB,EAAE+B,SAAS,CAAE;IAC3DgB,KAAK,EAAEjB,EAAG;IACVG,MAAM,EAAEA,MAAO;IACfE,KAAK,EAAEA,KAAM;IACbC,gBAAgB,EAAEA,gBAAiB;IACnCC,cAAc,EAAEA,cAAe;IAC/BE,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAEA;~~EAAM~~,~~GACTxC~~,iBAAiB,CAACI,KAAK,CAAC,GAE5BP,KAAA,CAAA+C,aAAA,CAAC9C,WAAW;IACV+B,EAAE,EAAEA,EAAG;IACPC,SAAS,EAAE/B,UAAU,CACnB,+BAA+B,~~EAI~~/BgC,~~cAAc~~,~~EAHdH,KAAK,KAAK,KAAK,IACbA,KAAK,KAAK,SAAS,IAClB,wCAAuCA,KAAM,EAElD,~~CAAE;~~IACFK~~,WAAW,EAAEA,WAAY;IACzBR,KAAK,EAAEA,KAAM;~~IACbsB~~,SAAS;IACTC,WAAW,EAAE;~~MACXzC~~,YAAY;MACZD,aAAa;~~MACb2C~~,yBAAyB,~~EAAE5C~~,iBAAiB,KAAKiB,SAAS;~~MAC1D4B~~,wBAAwB,~~EACtB7C~~,iBAAiB,KAAK,IAAI,GAAG,GAAG,GAAGA,iBAAiB;MACtDG,MAAM;MACNC;IACF,CAAE;~~IACF0C~~,KAAK,~~EAAEzC~~,YAAa;~~IACpB0C~~,QAAQ,~~EAAEX~~,OAAQ;~~IAClBY~~,OAAO,~~EAAEX~~,MAAO;~~IAChBY~~,SAAS,~~EAAEX~~,QAAS;IACpBN,QAAQ,EAAEA,QAAS;~~IACnBkB~~,OAAO,~~EAAE3B~~,KAAK,~~KAAK~~;EAAU,CAC9B,CACS,CAAC;AAEjB;~~AAEAzB~~,eAAe,~~CAACqD~~,4BAA4B,GAAG,IAAI;AACnD,~~eAAerD~~,eAAe"}
1	+ {"version":3,"file":"Number.js","names":["React","InputMasked","classnames","forwardSpaceProps","FieldBlock","useField","NumberComponent","props","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","preparedProps","_objectSpread","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","undefined","fromInput","_ref","value","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","onFocus","onBlur","onChange","createElement","_extends","forId","contentsWidth","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","right","on_focus","on_blur","on_change","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React from 'react'\nimport { InputMasked } from '../../../components'\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 } 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 FieldProps<number, undefined, ErrorMessages> & {\n inputClassName?: string\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 \| 'medium' \| 'large' \| 'stretch'\n rightAligned?: boolean\n }\n\nfunction NumberComponent(props: Props) {\n const {\n thousandSeparator,\n decimalSymbol = ',',\n decimalLimit = 12,\n prefix,\n suffix,\n rightAligned,\n } = props\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 emptyValue,\n width,\n onFocus,\n onBlur,\n onChange,\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 as_number\n number_mask={{\n decimalLimit,\n decimalSymbol,\n includeThousandsSeparator: thousandSeparator !== undefined,\n thousandsSeparatorSymbol:\n thousandSeparator === true ? ' ' : thousandSeparator,\n prefix,\n suffix,\n }}\n right={rightAligned}\n on_focus={onFocus}\n on_blur={onBlur}\n on_change={onChange}\n disabled={disabled}\n stretch={width !== undefined}\n />\n </FieldBlock>\n )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/extensions/forms/Field/PhoneNumber.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import type { FieldProps } from '../field-types';
 export type Props = ComponentProps & FieldProps<string> & {
     countryCodeFieldClassName?: string;
     numberFieldClassName?: string;
-    width?: false | 'medium' | 'large';
+    width?: 'medium' | 'large';
 };
 declare function PhoneNumber(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PhoneNumber {

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

@@ -60,7 +60,7 @@ function PhoneNumber(props) {
     onChange === null || onChange === void 0 ? void 0 : onChange([countryCode, value].filter(Boolean).join(' '));
   }, [countryCode, emptyValue, onChange]);
   return React.createElement(Div, _extends({
-    className: classnames('dnb-forms-field-phone-number', className, width !== false && `dnb-forms-field-phone-number--width-${width}`)
+    className: classnames('dnb-forms-field-phone-number', className, width !== undefined && `dnb-forms-field-phone-number--width-${width}`)
   }, forwardSpaceProps(preparedProps)), React.createElement(Autocomplete, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
     label_direction: "vertical",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PhoneNumber.js","names":["React","useContext","useCallback","useMemo","Div","Autocomplete","Input","classnames","countries","forwardSpaceProps","useField","SharedContext","PhoneNumber","props","_ref","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","phoneNumberErrorRequired","className","countryCodeFieldClassName","numberFieldClassName","placeholder","label","phoneNumberLabel","value","emptyValue","error","disabled","width","onFocus","onBlur","onChange","countryCode","phoneNumber","match","countriesDropdownData","map","country","selected_key","code","selected_value","iso","content","name","handleCountryCodeChange","_ref2","data","changedData","trim","handleNumberChange","_ref3","filter","Boolean","join","createElement","_extends","label_direction","countryCodeLabel","on_change","independent_width","on_focus","on_blur","status","message","type","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from 'react'\nimport { Div } from '../../../elements'\nimport { Autocomplete, Input } 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 type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n FieldProps<string> & {\n countryCodeFieldClassName?: string\n numberFieldClassName?: string\n // Styling\n width?: ~~false \|~~ 'medium' \| 'large'\n }\n\nfunction PhoneNumber(props: Props) {\n const sharedContext = useContext(SharedContext)\n const preparedProps: Props = {\n ...props,\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 label = sharedContext?.translation.Forms.phoneNumberLabel,\n value,\n emptyValue,\n error,\n disabled,\n width = 'large',\n onFocus,\n onBlur,\n onChange,\n } = useField(preparedProps)\n\n // Split the value into country code and phone number correctly, even if one of them is not\n // filled in (avoiding number ending up in country code etc)\n const [, countryCode = '+47', phoneNumber = ''] =\n (value ?? '')?.match(/^(\\+[^ ]+)? ?(.*)$/) ?? []\n\n const countriesDropdownData = 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 handleCountryCodeChange = useCallback(\n ({ data: changedData }: { data: { selected_key: string } }) => {\n if (\n (!changedData \|\| !changedData.selected_key.trim()) &&\n !phoneNumber.trim()\n ) {\n onChange?.(emptyValue)\n return\n }\n\n onChange?.(`${changedData?.selected_key \|\| ''} ${phoneNumber}`)\n },\n [phoneNumber, emptyValue, onChange]\n )\n\n const handleNumberChange = useCallback(\n ({ value }: { value: string }) => {\n if (!value.trim() && !countryCode.trim()) {\n onChange?.(emptyValue)\n return\n }\n\n onChange?.([countryCode, value].filter(Boolean).join(' '))\n },\n [countryCode, emptyValue, onChange]\n )\n\n return (\n <Div\n className={classnames(\n 'dnb-forms-field-phone-number',\n width !== ~~false~~ && `dnb-forms-field-phone-number--width-${width}`,\n className\n )}\n {...forwardSpaceProps(preparedProps)}\n >\n <Autocomplete\n className={classnames(\n 'dnb-forms-field-phone-number__country-code',\n countryCodeFieldClassName\n )}\n label_direction=\"vertical\"\n label={sharedContext?.translation.Forms.countryCodeLabel}\n data={countriesDropdownData}\n value={countryCode ?? '+47'}\n disabled={disabled}\n on_change={handleCountryCodeChange}\n independent_width\n />\n <Input\n className={classnames(\n 'dnb-forms-field-phone-number__number',\n numberFieldClassName\n )}\n label_direction=\"vertical\"\n label={label ?? ' '}\n placeholder={placeholder ?? '00 00 00 00'}\n on_change={handleNumberChange}\n on_focus={onFocus}\n on_blur={onBlur}\n value={phoneNumber}\n status={error?.message}\n disabled={disabled}\n type=\"tel\"\n />\n </Div>\n )\n}\n\nPhoneNumber._supportsEufemiaSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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~~EAE9BgB~~,SAAS,~~EADTU~~,KAAK,~~KAAK~~,~~KAAK~~,~~IAAK~~,~~uCAAsCA~~,KAAM,~~EAElE~~;EAAE,GACExB,iBAAiB,CAACO,aAAa,CAAC,GAEpChB,KAAA,CAAA2D,aAAA,CAACtD,YAAY;IACXkB,SAAS,EAAEhB,UAAU,CACnB,4CAA4C,EAC5CiB,yBACF,CAAE;~~IACFqC~~,eAAe,EAAC,UAAU;~~IAC1BlC~~,KAAK,EAAEZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEK,WAAW,CAACC,KAAK,~~CAACyC~~,gBAAiB;~~IACzDX~~,IAAI,EAAEX,qBAAsB;IAC5BX,KAAK,EAAEQ,WAAW,IAAI,KAAM;IAC5BL,QAAQ,EAAEA,QAAS;~~IACnB+B~~,SAAS,~~EAAEd~~,uBAAwB;~~IACnCe~~,iBAAiB;EAAA,CAClB,CAAC,~~EACFhE~~,KAAA,CAAA2D,aAAA,CAACrD,KAAK;IACJiB,SAAS,EAAEhB,UAAU,CACnB,sCAAsC,EACtCkB,oBACF,CAAE;~~IACFoC~~,eAAe,EAAC,UAAU;~~IAC1BlC~~,KAAK,EAAEA,KAAK,IAAI,GAAI;IACpBD,WAAW,EAAEA,WAAW,IAAI,aAAc;~~IAC1CqC~~,SAAS,~~EAAET~~,kBAAmB;~~IAC9BW~~,QAAQ,~~EAAE/B~~,OAAQ;~~IAClBgC~~,OAAO,~~EAAE/B~~,MAAO;IAChBN,KAAK,EAAES,WAAY;~~IACnB6B~~,MAAM,~~EAAEpC~~,KAAK,aAALA,KAAK,uBAALA,KAAK,~~CAAEqC~~,OAAQ;~~IACvBpC~~,QAAQ,EAAEA,QAAS;~~IACnBqC~~,IAAI,EAAC;EAAK,CACX,CACE,CAAC;AAEV;~~AAEAzD~~,WAAW,~~CAAC0D~~,4BAA4B,GAAG,IAAI;AAC/C,~~eAAe1D~~,WAAW"}
1	+ {"version":3,"file":"PhoneNumber.js","names":["React","useContext","useCallback","useMemo","Div","Autocomplete","Input","classnames","countries","forwardSpaceProps","useField","SharedContext","PhoneNumber","props","_ref","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","phoneNumberErrorRequired","className","countryCodeFieldClassName","numberFieldClassName","placeholder","label","phoneNumberLabel","value","emptyValue","error","disabled","width","onFocus","onBlur","onChange","countryCode","phoneNumber","match","countriesDropdownData","map","country","selected_key","code","selected_value","iso","content","name","handleCountryCodeChange","_ref2","data","changedData","trim","handleNumberChange","_ref3","filter","Boolean","join","createElement","_extends","undefined","label_direction","countryCodeLabel","on_change","independent_width","on_focus","on_blur","status","message","type","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from 'react'\nimport { Div } from '../../../elements'\nimport { Autocomplete, Input } 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 type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n FieldProps<string> & {\n countryCodeFieldClassName?: string\n numberFieldClassName?: string\n // Styling\n width?: 'medium' \| 'large'\n }\n\nfunction PhoneNumber(props: Props) {\n const sharedContext = useContext(SharedContext)\n const preparedProps: Props = {\n ...props,\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 label = sharedContext?.translation.Forms.phoneNumberLabel,\n value,\n emptyValue,\n error,\n disabled,\n width = 'large',\n onFocus,\n onBlur,\n onChange,\n } = useField(preparedProps)\n\n // Split the value into country code and phone number correctly, even if one of them is not\n // filled in (avoiding number ending up in country code etc)\n const [, countryCode = '+47', phoneNumber = ''] =\n (value ?? '')?.match(/^(\\+[^ ]+)? ?(.*)$/) ?? []\n\n const countriesDropdownData = 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 handleCountryCodeChange = useCallback(\n ({ data: changedData }: { data: { selected_key: string } }) => {\n if (\n (!changedData \|\| !changedData.selected_key.trim()) &&\n !phoneNumber.trim()\n ) {\n onChange?.(emptyValue)\n return\n }\n\n onChange?.(`${changedData?.selected_key \|\| ''} ${phoneNumber}`)\n },\n [phoneNumber, emptyValue, onChange]\n )\n\n const handleNumberChange = useCallback(\n ({ value }: { value: string }) => {\n if (!value.trim() && !countryCode.trim()) {\n onChange?.(emptyValue)\n return\n }\n\n onChange?.([countryCode, value].filter(Boolean).join(' '))\n },\n [countryCode, emptyValue, onChange]\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 <Autocomplete\n className={classnames(\n 'dnb-forms-field-phone-number__country-code',\n countryCodeFieldClassName\n )}\n label_direction=\"vertical\"\n label={sharedContext?.translation.Forms.countryCodeLabel}\n data={countriesDropdownData}\n value={countryCode ?? '+47'}\n disabled={disabled}\n on_change={handleCountryCodeChange}\n independent_width\n />\n <Input\n className={classnames(\n 'dnb-forms-field-phone-number__number',\n numberFieldClassName\n )}\n label_direction=\"vertical\"\n label={label ?? ' '}\n placeholder={placeholder ?? '00 00 00 00'}\n on_change={handleNumberChange}\n on_focus={onFocus}\n on_blur={onBlur}\n value={phoneNumber}\n status={error?.message}\n disabled={disabled}\n type=\"tel\"\n />\n </Div>\n )\n}\n\nPhoneNumber._supportsEufemiaSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

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

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

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

@@ -20,7 +20,7 @@ function PostalCodeAndCity(props) {
   return React.createElement(FieldGroup, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldGroupProps), React.createElement("div", {
-    className: 'dnb-forms-field-postal-code-and-city__fields' + (width !== false ? ` dnb-forms-field-postal-code-and-city--width-${width}` : "")
+    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}$',
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldGroup","StringComponent","PostalCodeAndCity","props","sharedContext","postalCode","city","width","fieldGroupProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","cityLabel","cityErrorRequired","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldGroup, { Props as FieldGroupProps } from '../FieldGroup'\nimport StringComponent, { Props as StringComponentProps } from './String'\n\nexport type Props = Omit<FieldGroupProps, 'children'> &\n Record<'postalCode' \| 'city', StringComponentProps> & {\n width?: ~~false \|~~ 'medium' \| 'large'\n }\n\nfunction PostalCodeAndCity(props: Props) {\n const sharedContext = useContext(SharedContext)\n\n const {\n postalCode = {},\n city = {},\n width = 'large',\n ...fieldGroupProps\n } = props\n\n return (\n <FieldGroup\n className={classnames(\n 'dnb-forms-field-postal-code-and-city',\n props.className\n )}\n {...fieldGroupProps}\n >\n <div\n className={classnames(\n 'dnb-forms-field-postal-code-and-city__fields',\n width !== ~~false~~ &&\n `dnb-forms-field-postal-code-and-city--width-${width}`\n )}\n >\n <StringComponent\n {...postalCode}\n pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n className={classnames(\n 'dnb-forms-field-postal-code-and-city__postal-code',\n postalCode.className\n )}\n label={\n postalCode.label ??\n sharedContext?.translation.Forms.postalCodeLabel\n }\n errorMessages={{\n required:\n sharedContext?.translation.Forms.postalCodeErrorRequired,\n pattern:\n sharedContext?.translation.Forms.postalCodeErrorPattern,\n ...postalCode.errorMessages,\n }}\n placeholder={postalCode.placeholder ?? '0000'}\n width={false}\n inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n />\n <StringComponent\n {...city}\n className={classnames(\n 'dnb-forms-field-postal-code-and-city__city',\n city.className\n )}\n label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n errorMessages={{\n required: sharedContext?.translation.Forms.cityErrorRequired,\n ...city.errorMessages,\n }}\n width=\"stretch\"\n />\n </div>\n </FieldGroup>\n )\n}\n\nPostalCodeAndCity._supportsEufemiaSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAoC,eAAe;AACpE,OAAOC,eAAe,MAAyC,UAAU;AAOzE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EACvC,MAAMC,aAAa,GAAGP,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJM,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,KAAK,GAAG;IAEV,CAAC,GAAGJ,KAAK;IADJK,eAAe,GAAAC,wBAAA,CAChBN,KAAK,EAAAO,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACX,UAAU,EAAAY,QAAA;IACTC,SAAS,EAAEf,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACU,SACR;EAAE,GACEL,eAAe,GAEnBZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CN,KAAK,~~KAAK~~,~~KAAK~~,~~mDACkCA~~,KAAM;EACvD,GAEFX,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVP,UAAU;~~IACdS~~,OAAO,~~EAAET~~,UAAU,~~CAACS~~,OAAO,IAAI,YAAa;~~IAC5CD~~,SAAS,EAAEf,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACQ,SACb,CAAE;~~IACFE~~,KAAK,~~EACHV~~,UAAU,~~CAACU~~,KAAK,~~KAChBX~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEY~~,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,~~EACNjB~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEY~~,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,~~EACLV~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEY~~,WAAW,CAACC,KAAK,CAACM;IAAsB,~~GACtDlB~~,UAAU,~~CAACc~~,aAAa,CAC3B;IACFK,WAAW,~~EAAEnB~~,UAAU,~~CAACmB~~,WAAW,IAAI,MAAO;~~IAC9CjB~~,KAAK,EAAE,KAAM;~~IACbkB~~,cAAc,EAAC;EAAyD,EACzE,CAAC,~~EACF7B~~,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVN,IAAI;IACRO,SAAS,EAAEf,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACO,SACP,CAAE;~~IACFE~~,KAAK,~~EAAET~~,IAAI,~~CAACS~~,KAAK,~~KAAIX~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEY~~,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,~~EAAEjB~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEY~~,WAAW,CAACC,KAAK,CAACU;IAAiB,~~GACzDrB~~,IAAI,~~CAACa~~,aAAa,CACrB;~~IACFZ~~,KAAK,EAAC;EAAS,EAChB,CACE,CACK,CAAC;AAEjB;AAEAL,iBAAiB,~~CAAC0B~~,4BAA4B,GAAG,IAAI;AACrD,~~eAAe1B~~,iBAAiB"}
1	+ {"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldGroup","StringComponent","PostalCodeAndCity","props","sharedContext","postalCode","city","width","fieldGroupProps","_objectWithoutProperties","_excluded","createElement","_extends","className","undefined","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","cityLabel","cityErrorRequired","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldGroup, { Props as FieldGroupProps } from '../FieldGroup'\nimport StringComponent, { Props as StringComponentProps } from './String'\n\nexport type Props = Omit<FieldGroupProps, 'children'> &\n Record<'postalCode' \| 'city', StringComponentProps> & {\n width?: 'medium' \| 'large'\n }\n\nfunction PostalCodeAndCity(props: Props) {\n const sharedContext = useContext(SharedContext)\n\n const {\n postalCode = {},\n city = {},\n width = 'large',\n ...fieldGroupProps\n } = props\n\n return (\n <FieldGroup\n className={classnames(\n 'dnb-forms-field-postal-code-and-city',\n props.className\n )}\n {...fieldGroupProps}\n >\n <div\n className={classnames(\n 'dnb-forms-field-postal-code-and-city__fields',\n width !== undefined &&\n `dnb-forms-field-postal-code-and-city--width-${width}`\n )}\n >\n <StringComponent\n {...postalCode}\n pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n className={classnames(\n 'dnb-forms-field-postal-code-and-city__postal-code',\n postalCode.className\n )}\n label={\n postalCode.label ??\n sharedContext?.translation.Forms.postalCodeLabel\n }\n errorMessages={{\n required:\n sharedContext?.translation.Forms.postalCodeErrorRequired,\n pattern:\n sharedContext?.translation.Forms.postalCodeErrorPattern,\n ...postalCode.errorMessages,\n }}\n placeholder={postalCode.placeholder ?? '0000'}\n width={false}\n inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n />\n <StringComponent\n {...city}\n className={classnames(\n 'dnb-forms-field-postal-code-and-city__city',\n city.className\n )}\n label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n errorMessages={{\n required: sharedContext?.translation.Forms.cityErrorRequired,\n ...city.errorMessages,\n }}\n width=\"stretch\"\n />\n </div>\n </FieldGroup>\n )\n}\n\nPostalCodeAndCity._supportsEufemiaSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAoC,eAAe;AACpE,OAAOC,eAAe,MAAyC,UAAU;AAOzE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EACvC,MAAMC,aAAa,GAAGP,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJM,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,KAAK,GAAG;IAEV,CAAC,GAAGJ,KAAK;IADJK,eAAe,GAAAC,wBAAA,CAChBN,KAAK,EAAAO,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACX,UAAU,EAAAY,QAAA;IACTC,SAAS,EAAEf,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACU,SACR;EAAE,GACEL,eAAe,GAEnBZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CN,KAAK,KAAKO,SAAS,mDAC8BP,KAAM;EACvD,GAEFX,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVP,UAAU;IACdU,OAAO,EAAEV,UAAU,CAACU,OAAO,IAAI,YAAa;IAC5CF,SAAS,EAAEf,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACQ,SACb,CAAE;IACFG,KAAK,EACHX,UAAU,CAACW,KAAK,KAChBZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNlB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,EACLX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDnB,UAAU,CAACe,aAAa,CAC3B;IACFK,WAAW,EAAEpB,UAAU,CAACoB,WAAW,IAAI,MAAO;IAC9ClB,KAAK,EAAE,KAAM;IACbmB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACF9B,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVN,IAAI;IACRO,SAAS,EAAEf,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACO,SACP,CAAE;IACFG,KAAK,EAAEV,IAAI,CAACU,KAAK,KAAIZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAElB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDtB,IAAI,CAACc,aAAa,CACrB;IACFb,KAAK,EAAC;EAAS,EAChB,CACE,CACK,CAAC;AAEjB;AAEAL,iBAAiB,CAAC2B,4BAA4B,GAAG,IAAI;AACrD,eAAe3B,iBAAiB"}

package/extensions/forms/Field/Selection.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import type { FieldProps } from '../field-types';
 export type Props = ComponentProps & FieldProps<string | number> & {
     children?: React.ReactNode;
     variant?: 'dropdown' | 'radio' | 'checkbox';
-    width?: false | 'medium' | 'large' | 'stretch';
+    width?: 'medium' | 'large' | 'stretch';
 };
 declare function Selection(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Selection {

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

@@ -86,7 +86,7 @@ function Selection(props) {
           };
         });
         return React.createElement(Dropdown, _extends({
-          className: classnames('dnb-forms-field-selection', className, width !== false && width !== 'stretch' && `dnb-forms-field-selection--width-${width}`),
+          className: classnames('dnb-forms-field-selection', className, width !== 'stretch' && `dnb-forms-field-selection--width-${width}`),
           list_class: "dnb-forms-field-selection__list",
           portal_class: "dnb-forms-field-selection__portal",
           title: placeholder,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Selection.js","names":["React","useCallback","Div","Dropdown","Radio","Checkbox","classnames","forwardSpaceProps","Option","useField","Selection","props","className","variant","label","layout","placeholder","value","error","disabled","emptyValue","width","onBlur","onFocus","onChange","children","handleDropdownChange","_ref","data","selected_key","handleRadioChange","_ref2","undefined","handleHide","_ref3","onBlurValue","createElement","_extends","Children","toArray","filter","child","isValidElement","type","map","i","key","title","String","Group","layout_direction","on_change","vertical","text","content","_em","list_class","portal_class","default_value","label_direction","status","message","on_show","on_hide","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Selection.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { Dropdown, Radio, Checkbox } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n FieldProps<string \| number> & {\n children?: React.ReactNode\n variant?: 'dropdown' \| 'radio' \| 'checkbox'\n // Styling\n width?: ~~false \|~~ 'medium' \| 'large' \| 'stretch'\n }\n\nfunction Selection(props: Props) {\n const {\n className,\n variant,\n label,\n layout = 'vertical',\n placeholder,\n value,\n error,\n disabled,\n emptyValue,\n width = 'large',\n onBlur,\n onFocus,\n onChange,\n children,\n } = useField(props)\n\n const handleDropdownChange = useCallback(\n ({ data: { selected_key } }) => {\n onChange?.(!selected_key ? emptyValue : selected_key)\n },\n [onChange, emptyValue]\n )\n\n const handleRadioChange = useCallback(\n ({ value }) => {\n onChange?.(value === undefined ? emptyValue : value)\n },\n [onChange, emptyValue]\n )\n\n const handleHide = useCallback(\n ({ data }) => {\n // Provide a value because selecting an option will lead to onChange and onBlur called in parallel, so onBlur might receive the old value\n onBlur?.({ onBlurValue: data?.selected_key })\n },\n [onBlur]\n )\n\n switch (variant) {\n case 'checkbox':\n return (\n <Div\n className={classnames('dnb-forms-field-selection', className)}\n {...forwardSpaceProps(props)}\n >\n {React.Children.toArray(children)\n .filter(\n (child) =>\n React.isValidElement(child) && child.type === Option\n )\n .map((child: React.ReactElement, i) => (\n <Checkbox\n key={child.props.value ?? `option-${i}`}\n label={child.props.title ?? child.props.children}\n value={String(child.props.value ?? '')}\n />\n ))}\n </Div>\n )\n case 'radio':\n return (\n <Radio.Group\n className={classnames('dnb-forms-field-selection', className)}\n label={label}\n layout_direction=\"column\"\n on_change={handleRadioChange}\n {...forwardSpaceProps(props)}\n vertical\n >\n {React.Children.toArray(children)\n .filter(\n (child) =>\n React.isValidElement(child) && child.type === Option\n )\n .map((child: React.ReactElement, i) => (\n <Radio\n key={child.props.value ?? `option-${i}`}\n label={child.props.title ?? child.props.children}\n value={String(child.props.value ?? '')}\n />\n ))}\n </Radio.Group>\n )\n default:\n case 'dropdown': {\n const data = React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.type === Option) {\n // Option components\n return child.props.text\n ? {\n selected_key: String(child.props.value ?? ''),\n content: [\n child.props.title ?? child.props.children ?? (\n <em>Untitled</em>\n ),\n child.props.text,\n ],\n }\n : {\n selected_key: child.props.value,\n content: child.props.title ?? child.props.children,\n }\n }\n\n // For other children, just show them as content\n return {\n content: child,\n }\n })\n\n return (\n <Dropdown\n className={classnames(\n 'dnb-forms-field-selection',\n width !== ~~false &&\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 default_value={String(value ?? '')}\n label={label}\n label_direction={layout}\n status={error?.message}\n disabled={disabled}\n data={data}\n on_change={handleDropdownChange}\n on_show={onFocus}\n on_hide={handleHide}\n {...forwardSpaceProps(props)}\n stretch={width === 'stretch'}\n />\n )\n }\n }\n}\n\nSelection._supportsEufemiaSpacingProps = true\nexport default Selection\n"],"mappings":"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~~EAI3BM~~,SAAS,~~EAHTS~~,KAAK,KAAK,~~KAAK,IACbA,KAAK,KAAK,~~SAAS,~~IAClB~~,oCAAmCA,KAAM,EAE9C,CAAE;UACFmC,UAAU,EAAC,iCAAiC;UAC5CC,YAAY,EAAC,mCAAmC;UAChDV,KAAK,EAAE/B,WAAY;UACnB0C,aAAa,EAAEV,MAAM,CAAC/B,KAAK,IAAI,EAAE,CAAE;UACnCH,KAAK,EAAEA,KAAM;UACb6C,eAAe,EAAE5C,MAAO;UACxB6C,MAAM,EAAE1C,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE2C,OAAQ;UACvB1C,QAAQ,EAAEA,QAAS;UACnBS,IAAI,EAAEA,IAAK;UACXuB,SAAS,EAAEzB,oBAAqB;UAChCoC,OAAO,EAAEvC,OAAQ;UACjBwC,OAAO,EAAE9B;QAAW,GAChB1B,iBAAiB,CAACI,KAAK,CAAC;UAC5BqD,OAAO,EAAE3C,KAAK,KAAK;QAAU,EAC9B,CAAC;MAEN;EACF;AACF;AAEAX,SAAS,CAACuD,4BAA4B,GAAG,IAAI;AAC7C,eAAevD,SAAS"}
1	+ {"version":3,"file":"Selection.js","names":["React","useCallback","Div","Dropdown","Radio","Checkbox","classnames","forwardSpaceProps","Option","useField","Selection","props","className","variant","label","layout","placeholder","value","error","disabled","emptyValue","width","onBlur","onFocus","onChange","children","handleDropdownChange","_ref","data","selected_key","handleRadioChange","_ref2","undefined","handleHide","_ref3","onBlurValue","createElement","_extends","Children","toArray","filter","child","isValidElement","type","map","i","key","title","String","Group","layout_direction","on_change","vertical","text","content","_em","list_class","portal_class","default_value","label_direction","status","message","on_show","on_hide","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Selection.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { Dropdown, Radio, Checkbox } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n FieldProps<string \| number> & {\n children?: React.ReactNode\n variant?: 'dropdown' \| 'radio' \| 'checkbox'\n // Styling\n width?: 'medium' \| 'large' \| 'stretch'\n }\n\nfunction Selection(props: Props) {\n const {\n className,\n variant,\n label,\n layout = 'vertical',\n placeholder,\n value,\n error,\n disabled,\n emptyValue,\n width = 'large',\n onBlur,\n onFocus,\n onChange,\n children,\n } = useField(props)\n\n const handleDropdownChange = useCallback(\n ({ data: { selected_key } }) => {\n onChange?.(!selected_key ? emptyValue : selected_key)\n },\n [onChange, emptyValue]\n )\n\n const handleRadioChange = useCallback(\n ({ value }) => {\n onChange?.(value === undefined ? emptyValue : value)\n },\n [onChange, emptyValue]\n )\n\n const handleHide = useCallback(\n ({ data }) => {\n // Provide a value because selecting an option will lead to onChange and onBlur called in parallel, so onBlur might receive the old value\n onBlur?.({ onBlurValue: data?.selected_key })\n },\n [onBlur]\n )\n\n switch (variant) {\n case 'checkbox':\n return (\n <Div\n className={classnames('dnb-forms-field-selection', className)}\n {...forwardSpaceProps(props)}\n >\n {React.Children.toArray(children)\n .filter(\n (child) =>\n React.isValidElement(child) && child.type === Option\n )\n .map((child: React.ReactElement, i) => (\n <Checkbox\n key={child.props.value ?? `option-${i}`}\n label={child.props.title ?? child.props.children}\n value={String(child.props.value ?? '')}\n />\n ))}\n </Div>\n )\n case 'radio':\n return (\n <Radio.Group\n className={classnames('dnb-forms-field-selection', className)}\n label={label}\n layout_direction=\"column\"\n on_change={handleRadioChange}\n {...forwardSpaceProps(props)}\n vertical\n >\n {React.Children.toArray(children)\n .filter(\n (child) =>\n React.isValidElement(child) && child.type === Option\n )\n .map((child: React.ReactElement, i) => (\n <Radio\n key={child.props.value ?? `option-${i}`}\n label={child.props.title ?? child.props.children}\n value={String(child.props.value ?? '')}\n />\n ))}\n </Radio.Group>\n )\n default:\n case 'dropdown': {\n const data = React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.type === Option) {\n // Option components\n return child.props.text\n ? {\n selected_key: String(child.props.value ?? ''),\n content: [\n child.props.title ?? child.props.children ?? (\n <em>Untitled</em>\n ),\n child.props.text,\n ],\n }\n : {\n selected_key: child.props.value,\n content: child.props.title ?? child.props.children,\n }\n }\n\n // For other children, just show them as content\n return {\n content: child,\n }\n })\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 default_value={String(value ?? '')}\n label={label}\n label_direction={layout}\n status={error?.message}\n disabled={disabled}\n data={data}\n on_change={handleDropdownChange}\n on_show={onFocus}\n on_hide={handleHide}\n {...forwardSpaceProps(props)}\n stretch={width === 'stretch'}\n />\n )\n }\n }\n}\n\nSelection._supportsEufemiaSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

package/extensions/forms/Field/String.js CHANGED Viewed

@@ -67,7 +67,7 @@ function StringComponent(props) {
     onChange
   } = useField(preparedProps);
   const characterCounterElement = characterCounter ? props.maxLength ? `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}/${props.maxLength}` : `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}` : undefined;
-  const cn = classnames('dnb-forms-field-string__input', inputClassName, width !== false && width !== 'stretch' && `dnb-forms-field-string__input--width-${width}`);
+  const cn = classnames('dnb-forms-field-string__input', inputClassName);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-string', className),
     forId: id,
@@ -77,7 +77,8 @@ function StringComponent(props) {
     labelSecondary: labelSecondary ?? characterCounterElement,
     info: info,
     warning: warning,
-    error: error
+    error: error,
+    contentsWidth: width !== false ? width : undefined
   }, forwardSpaceProps(props)), multiline ? React.createElement(Textarea, {
     id: id,
     className: cn,
@@ -89,7 +90,7 @@ function StringComponent(props) {
     autoresize: autoresize,
     autoresize_max_rows: autoresizeMaxRows,
     disabled: disabled,
-    stretch: width === 'stretch'
+    stretch: width !== undefined
   }) : mask ? React.createElement(InputMasked, {
     className: cn,
     mask: mask,
@@ -101,7 +102,7 @@ function StringComponent(props) {
     on_blur: onBlur,
     on_change: onChange,
     disabled: disabled,
-    stretch: width === 'stretch'
+    stretch: width !== undefined
   }) : React.createElement(Input, {
     id: id,
     className: cn,
@@ -115,7 +116,7 @@ function StringComponent(props) {
     on_blur: onBlur,
     on_change: onChange,
     disabled: disabled,
-    stretch: width === 'stretch'
+    stretch: width !== undefined
   }));
 }
 StringComponent._supportsEufemiaSpacingProps = true;

package/extensions/forms/Field/String.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"String.js","names":["React","useContext","classnames","Input","Textarea","InputMasked","forwardSpaceProps","SharedContext","FieldBlock","useField","StringComponent","props","_props$minLength","_props$maxLength","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","_ref","value","cleanedValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","onFocus","onBlur","onChange","characterCounterElement","length","undefined","cn","createElement","_extends","forId","on_focus","on_blur","on_change","autoresize_max_rows","stretch","icon","icon_position","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/String.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { Input, Textarea } from '../../../components'\nimport { InputProps } from '../../../components/input/Input'\nimport InputMasked, {\n InputMaskedProps,\n} from '../../../components/InputMasked'\nimport { forwardSpaceProps } from '../utils'\nimport SharedContext from '../../../shared/Context'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n required?: string\n schema?: string\n minLength?: string\n maxLength?: string\n pattern?: string\n}\nexport type Props = ComponentProps &\n FieldProps<string, undefined, ErrorMessages> & {\n inputClassName?: string\n type?: InputProps['type']\n multiline?: boolean\n leftIcon?: string\n rightIcon?: string\n clear?: boolean\n autoresize?: boolean\n autoresizeMaxRows?: number\n characterCounter?: boolean\n mask?: InputMaskedProps['mask']\n // Validation\n minLength?: number\n maxLength?: number\n pattern?: string\n // Styling\n width?: false \| 'medium' \| 'large' \| 'stretch'\n }\n\nfunction StringComponent(props: Props) {\n const sharedContext = useContext(SharedContext)\n\n const preparedProps: Props = {\n ...props,\n errorMessages: {\n required: sharedContext?.translation.Forms.inputErrorRequired,\n minLength:\n sharedContext?.translation.Forms.stringInputErrorMinLength.replace(\n '{minLength}',\n props.minLength?.toString()\n ),\n maxLength:\n sharedContext?.translation.Forms.stringInputErrorMaxLength.replace(\n '{maxLength}',\n props.maxLength?.toString()\n ),\n pattern: sharedContext?.translation.Forms.inputErrorPattern,\n ...props.errorMessages,\n },\n schema: props.schema ?? {\n type: 'string',\n minLength: props.minLength,\n maxLength: props.maxLength,\n pattern: props.pattern,\n },\n fromInput: ({\n value,\n cleanedValue,\n }: {\n value: string\n cleanedValue: string\n }) => {\n if (value === '') {\n return props.emptyValue\n }\n // Cleaned value for masked\n return cleanedValue ?? value\n },\n width: props.width ?? 'large',\n }\n const {\n id,\n className,\n inputClassName,\n layout,\n type,\n placeholder,\n label,\n labelDescription,\n labelSecondary,\n value,\n info,\n warning,\n error,\n disabled,\n multiline,\n leftIcon,\n rightIcon,\n clear,\n autoresize = true,\n autoresizeMaxRows = 6,\n characterCounter,\n mask,\n width,\n onFocus,\n onBlur,\n onChange,\n } = useField(preparedProps)\n\n const characterCounterElement = characterCounter\n ? props.maxLength\n ? `${value?.length ?? '0'}/${props.maxLength}`\n : `${value?.length ?? '0'}`\n : undefined\n const cn = classnames(\n 'dnb-forms-field-string__input'~~,\n width~~ ~~!== false &&\n width !== 'stretch' &&\n `dnb-forms-field-string__input--width-${width}`,\n~~ inputClassName\n )\n\n return (\n <FieldBlock\n className={classnames('dnb-forms-field-string', className)}\n forId={id}\n layout={layout}\n label={label}\n labelDescription={labelDescription}\n labelSecondary={labelSecondary ?? characterCounterElement}\n info={info}\n warning={warning}\n error={error}\n {...forwardSpaceProps(props)}\n >\n {multiline ? (\n <Textarea\n id={id}\n className={cn}\n placeholder={placeholder}\n value={value}\n on_focus={onFocus}\n on_blur={onBlur}\n on_change={onChange}\n autoresize={autoresize}\n autoresize_max_rows={autoresizeMaxRows}\n disabled={disabled}\n stretch={width ~~===~~ ~~'stretch'~~}\n />\n ) : mask ? (\n <InputMasked\n className={cn}\n mask={mask}\n placeholder={placeholder}\n value={value?.toString() ?? ''}\n icon={leftIcon ?? rightIcon}\n icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n on_focus={onFocus}\n on_blur={onBlur}\n on_change={onChange}\n disabled={disabled}\n stretch={width ~~===~~ ~~'stretch'~~}\n />\n ) : (\n <Input\n id={id}\n className={cn}\n type={type}\n placeholder={placeholder}\n value={value?.toString() ?? ''}\n icon={leftIcon ?? rightIcon}\n icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n clear={clear}\n on_focus={onFocus}\n on_blur={onBlur}\n on_change={onChange}\n disabled={disabled}\n stretch={width ~~===~~ ~~'stretch'~~}\n />\n )}\n </FieldBlock>\n )\n}\n\nStringComponent._supportsEufemiaSpacingProps = true\nexport default StringComponent\n"],"mappings":"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~~CACnB~~,+BAA+B,~~EAI/BsC~~,cAAc,~~EAHdH,KAAK,KAAK,KAAK,IACbA,KAAK,KAAK,SAAS,IAClB,wCAAuCA,KAAM,EAElD,~~CAAC;~~EAED~~,~~OACErC~~,KAAA,CAAAiE,aAAA,CAACzD,UAAU,EAAA0D,QAAA;IACT3B,SAAS,EAAErC,UAAU,CAAC,wBAAwB,EAAEqC,SAAS,CAAE;IAC3D4B,KAAK,EAAE7B,EAAG;IACVG,MAAM,EAAEA,MAAO;IACfE,KAAK,EAAEA,KAAM;IACbC,gBAAgB,EAAEA,gBAAiB;IACnCC,cAAc,EAAEA,cAAc,IAAIgB,uBAAwB;IAC1Df,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAEA;~~EAAM~~,~~GACT1C~~,iBAAiB,CAACK,KAAK,CAAC,GAE3BuC,SAAS,GACRlD,KAAA,CAAAiE,aAAA,CAAC7D,QAAQ;IACPkC,EAAE,EAAEA,EAAG;IACPC,SAAS,EAAEyB,EAAG;IACdtB,WAAW,EAAEA,WAAY;IACzBR,KAAK,EAAEA,KAAM;~~IACbkC~~,QAAQ,~~EAAEV~~,OAAQ;~~IAClBW~~,OAAO,~~EAAEV~~,MAAO;~~IAChBW~~,SAAS,~~EAAEV~~,QAAS;IACpBN,UAAU,EAAEA,UAAW;~~IACvBiB~~,mBAAmB,~~EAAEhB~~,iBAAkB;IACvCN,QAAQ,EAAEA,QAAS;~~IACnBuB~~,OAAO,~~EAAEnC~~,KAAK,~~KAAK~~;EAAU,CAC9B,CAAC,~~GACAoB~~,IAAI,GACNzD,KAAA,CAAAiE,aAAA,CAAC5D,WAAW;IACVkC,SAAS,EAAEyB,EAAG;IACdP,IAAI,EAAEA,IAAK;IACXf,WAAW,EAAEA,WAAY;IACzBR,KAAK,EAAE,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAET,QAAQ,CAAC,CAAC,KAAI,EAAG;IAC/~~BgD~~,IAAI,~~EAAEtB~~,QAAQ,IAAIC,SAAU;~~IAC5BsB~~,aAAa,~~EAAEtB~~,SAAS,IAAI,CAACD,QAAQ,GAAG,OAAO,GAAGY,SAAU;~~IAC5DK~~,QAAQ,~~EAAEV~~,OAAQ;~~IAClBW~~,OAAO,~~EAAEV~~,MAAO;~~IAChBW~~,SAAS,~~EAAEV~~,QAAS;IACpBX,QAAQ,EAAEA,QAAS;~~IACnBuB~~,OAAO,~~EAAEnC~~,KAAK,~~KAAK~~;EAAU,CAC9B,CAAC,~~GAEFrC~~,KAAA,CAAAiE,aAAA,CAAC9D,KAAK;IACJmC,EAAE,EAAEA,EAAG;IACPC,SAAS,EAAEyB,EAAG;IACdjC,IAAI,EAAEA,IAAK;IACXW,WAAW,EAAEA,WAAY;IACzBR,KAAK,EAAE,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAET,QAAQ,CAAC,CAAC,KAAI,EAAG;IAC/~~BgD~~,IAAI,~~EAAEtB~~,QAAQ,IAAIC,SAAU;~~IAC5BsB~~,aAAa,~~EAAEtB~~,SAAS,IAAI,CAACD,QAAQ,GAAG,OAAO,GAAGY,SAAU;IAC5DV,KAAK,EAAEA,KAAM;~~IACbe~~,QAAQ,~~EAAEV~~,OAAQ;~~IAClBW~~,OAAO,~~EAAEV~~,MAAO;~~IAChBW~~,SAAS,~~EAAEV~~,QAAS;IACpBX,QAAQ,EAAEA,QAAS;~~IACnBuB~~,OAAO,~~EAAEnC~~,KAAK,~~KAAK~~;EAAU,CAC9B,CAEO,CAAC;AAEjB;~~AAEA3B~~,eAAe,~~CAACiE~~,4BAA4B,GAAG,IAAI;AACnD,~~eAAejE~~,eAAe"}
1	+ {"version":3,"file":"String.js","names":["React","useContext","classnames","Input","Textarea","InputMasked","forwardSpaceProps","SharedContext","FieldBlock","useField","StringComponent","props","_props$minLength","_props$maxLength","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","_ref","value","cleanedValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","onFocus","onBlur","onChange","characterCounterElement","length","undefined","cn","createElement","_extends","forId","contentsWidth","on_focus","on_blur","on_change","autoresize_max_rows","stretch","icon","icon_position","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/String.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { Input, Textarea } from '../../../components'\nimport { InputProps } from '../../../components/input/Input'\nimport InputMasked, {\n InputMaskedProps,\n} from '../../../components/InputMasked'\nimport { forwardSpaceProps } from '../utils'\nimport SharedContext from '../../../shared/Context'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n required?: string\n schema?: string\n minLength?: string\n maxLength?: string\n pattern?: string\n}\nexport type Props = ComponentProps &\n FieldProps<string, undefined, ErrorMessages> & {\n inputClassName?: string\n type?: InputProps['type']\n multiline?: boolean\n leftIcon?: string\n rightIcon?: string\n clear?: boolean\n autoresize?: boolean\n autoresizeMaxRows?: number\n characterCounter?: boolean\n mask?: InputMaskedProps['mask']\n // Validation\n minLength?: number\n maxLength?: number\n pattern?: string\n // Styling\n width?: false \| 'medium' \| 'large' \| 'stretch'\n }\n\nfunction StringComponent(props: Props) {\n const sharedContext = useContext(SharedContext)\n\n const preparedProps: Props = {\n ...props,\n errorMessages: {\n required: sharedContext?.translation.Forms.inputErrorRequired,\n minLength:\n sharedContext?.translation.Forms.stringInputErrorMinLength.replace(\n '{minLength}',\n props.minLength?.toString()\n ),\n maxLength:\n sharedContext?.translation.Forms.stringInputErrorMaxLength.replace(\n '{maxLength}',\n props.maxLength?.toString()\n ),\n pattern: sharedContext?.translation.Forms.inputErrorPattern,\n ...props.errorMessages,\n },\n schema: props.schema ?? {\n type: 'string',\n minLength: props.minLength,\n maxLength: props.maxLength,\n pattern: props.pattern,\n },\n fromInput: ({\n value,\n cleanedValue,\n }: {\n value: string\n cleanedValue: string\n }) => {\n if (value === '') {\n return props.emptyValue\n }\n // Cleaned value for masked\n return cleanedValue ?? value\n },\n width: props.width ?? 'large',\n }\n const {\n id,\n className,\n inputClassName,\n layout,\n type,\n placeholder,\n label,\n labelDescription,\n labelSecondary,\n value,\n info,\n warning,\n error,\n disabled,\n multiline,\n leftIcon,\n rightIcon,\n clear,\n autoresize = true,\n autoresizeMaxRows = 6,\n characterCounter,\n mask,\n width,\n onFocus,\n onBlur,\n onChange,\n } = useField(preparedProps)\n\n const characterCounterElement = characterCounter\n ? props.maxLength\n ? `${value?.length ?? '0'}/${props.maxLength}`\n : `${value?.length ?? '0'}`\n : undefined\n const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n return (\n <FieldBlock\n className={classnames('dnb-forms-field-string', className)}\n forId={id}\n layout={layout}\n label={label}\n labelDescription={labelDescription}\n labelSecondary={labelSecondary ?? characterCounterElement}\n info={info}\n warning={warning}\n error={error}\n contentsWidth={width !== false ? width : undefined}\n {...forwardSpaceProps(props)}\n >\n {multiline ? (\n <Textarea\n id={id}\n className={cn}\n placeholder={placeholder}\n value={value}\n on_focus={onFocus}\n on_blur={onBlur}\n on_change={onChange}\n autoresize={autoresize}\n autoresize_max_rows={autoresizeMaxRows}\n disabled={disabled}\n stretch={width !== undefined}\n />\n ) : mask ? (\n <InputMasked\n className={cn}\n mask={mask}\n placeholder={placeholder}\n value={value?.toString() ?? ''}\n icon={leftIcon ?? rightIcon}\n icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n on_focus={onFocus}\n on_blur={onBlur}\n on_change={onChange}\n disabled={disabled}\n stretch={width !== undefined}\n />\n ) : (\n <Input\n id={id}\n className={cn}\n type={type}\n placeholder={placeholder}\n value={value?.toString() ?? ''}\n icon={leftIcon ?? rightIcon}\n icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n clear={clear}\n on_focus={onFocus}\n on_blur={onBlur}\n on_change={onChange}\n disabled={disabled}\n stretch={width !== undefined}\n />\n )}\n </FieldBlock>\n )\n}\n\nStringComponent._supportsEufemiaSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

package/extensions/forms/Field/style/dnb-phone-number.css CHANGED Viewed

@@ -5,6 +5,9 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-phone-number--width-stretch {
+  width: 100%;
+}
 .dnb-forms-field-phone-number--width-large {
   width: 336px;
 }

package/extensions/forms/Field/style/dnb-phone-number.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}
1	+ .dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}

package/extensions/forms/Field/style/dnb-phone-number.scss CHANGED Viewed

@@ -5,6 +5,10 @@
   flex-flow: row;
   column-gap: var(--spacing-small);
+  &--width-stretch {
+    width: 100%;
+  }
   &--width-large {
     width: $forms-field-width-large;
   }

package/extensions/forms/Field/style/index.d.ts CHANGED Viewed

@@ -2,5 +2,6 @@
  * Web Style Import
  *
  */
-import './dnb-national-identity-number.scss';
 import './dnb-phone-number.scss';
+import './dnb-postal-code-and-city.scss';
+import './dnb-selection.scss';

package/extensions/forms/Field/style/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
-import "./dnb-national-identity-number.min.css";
 import "./dnb-phone-number.min.css";
+import "./dnb-postal-code-and-city.min.css";
+import "./dnb-selection.min.css";
 //# sourceMappingURL=index.js.map

package/extensions/forms/Field/style/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/extensions/forms/Field/style/index.ts"],"sourcesContent":["/*\n Web Style Import\n \n /\n\nimport './dnb-~~national~~-~~identity-~~number.scss'\nimport './dnb-~~phone~~-~~number~~.scss'\n"],"mappings":"AAKA,OAAO,~~wCAAqC~~;~~AAC5C~~,OAAO,~~4BAAyB~~"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/extensions/forms/Field/style/index.ts"],"sourcesContent":["/*\n Web Style Import\n \n /\n\nimport './dnb-phone-number.scss'\nimport './dnb-postal-code-and-city.scss'\nimport './dnb-selection.scss'\n"],"mappings":"AAKA,OAAO,4BAAyB;AAChC,OAAO,oCAAiC;AACxC,OAAO,yBAAsB"}

package/extensions/forms/Field/style/index.scss CHANGED Viewed

@@ -1,5 +1,3 @@
-@import './dnb-number.scss';
 @import './dnb-phone-number.scss';
 @import './dnb-postal-code-and-city.scss';
 @import './dnb-selection.scss';
-@import './dnb-string.scss';

package/extensions/forms/FieldBlock/FieldBlock.d.ts CHANGED Viewed

@@ -4,6 +4,10 @@ import type { FieldProps } from '../field-types';
 export type Props = ComponentProps & Pick<FieldProps, 'layout' | 'label' | 'labelDescription' | 'labelSecondary' | 'info' | 'warning' | 'error'> & {
     forId?: string;
     children: React.ReactNode;
+    /** Width of outer block element */
+    width?: 'medium' | 'large';
+    /** Width of contents block, while label etc can be wider if space is available */
+    contentsWidth?: 'medium' | 'large' | 'stretch';
 };
 declare function FieldBlock(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace FieldBlock {

package/extensions/forms/FieldBlock/FieldBlock.js CHANGED Viewed

@@ -16,10 +16,13 @@ function FieldBlock(props) {
     info,
     warning,
     error,
+    width,
+    contentsWidth,
     children
   } = props;
+  const cn = classnames('dnb-forms-field-block', className, width !== undefined && `dnb-forms-field-block--width-${width}`);
   return React.createElement(Div, _extends({
-    className: classnames('dnb-forms-field-block', className)
+    className: cn
   }, forwardSpaceProps(props)), labelDescription || labelSecondary ? React.createElement("div", {
     className: "dnb-forms-field-block__label-block"
   }, label || labelDescription ? React.createElement(FormLabel, {
@@ -38,7 +41,9 @@ function FieldBlock(props) {
     space: {
       bottom: 'x-small'
     }
-  }, label), children, error && React.createElement(FormStatus, {
+  }, label), React.createElement("div", {
+    className: 'dnb-forms-field-block__contents' + (contentsWidth !== undefined ? ` dnb-forms-field-block__contents--width-${contentsWidth}` : "")
+  }, children), error && React.createElement(FormStatus, {
     state: "error",
     id: forId ? `${forId}-form-status` : undefined,
     text: error === null || error === void 0 ? void 0 : error.message,