@dnb/eufemia 10.14.0 → 10.15.0

package/es/extensions/forms/FieldBlock/FieldBlock.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "forId", "layout", "label", "labelDescription", "labelSecondary", "asFieldset", "info", "warning", "error", "width", "contentsWidth", "size", "contentClassName", "children"];
+const _excluded = ["className", "forId", "layout", "label", "labelDescription", "labelSecondary", "asFieldset", "info", "warning", "error", "disabled", "width", "contentsWidth", "size", "contentClassName", "children"];
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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; }
@@ -13,7 +13,7 @@ import classnames from 'classnames';
 import { Space, FormLabel, FormStatus } from '../../../components';
 import { FormError } from '../types';
 import FieldBlockContext from './FieldBlockContext';
-import { findElementInChildren, warn } from '../../../shared/component-helper';
+import { findElementInChildren } from '../../../shared/component-helper';
 function FieldBlock(props) {
   const nestedFieldBlockContext = useContext(FieldBlockContext);
   const {
@@ -27,6 +27,7 @@ function FieldBlock(props) {
       info,
       warning,
       error: errorProp,
+      disabled,
       width,
       contentsWidth,
       size,
@@ -36,40 +37,40 @@ function FieldBlock(props) {
     rest = _objectWithoutProperties(props, _excluded);
   const [fieldErrorRecord, setFieldErrorRecord] = useState({});
   const [showFieldErrorRecord, setShowFieldErrorRecord] = useState({});
-  const setError = useCallback((id, error) => {
+  const setError = useCallback((identifier, error) => {
     if (nestedFieldBlockContext) {
-      nestedFieldBlockContext.setError(id, error);
+      nestedFieldBlockContext.setError(identifier, error);
       return;
     }
     setFieldErrorRecord(existing => {
       if (error) {
         return _objectSpread(_objectSpread({}, existing), {}, {
-          [id]: error
+          [identifier]: error
         });
       } else {
         const {
-            [id]: removed
+            [identifier]: removed
           } = existing,
-          newRecord = _objectWithoutProperties(existing, [id].map(_toPropertyKey));
+          newRecord = _objectWithoutProperties(existing, [identifier].map(_toPropertyKey));
         return newRecord;
       }
     });
   }, [nestedFieldBlockContext]);
-  const setShowError = useCallback((id, show) => {
+  const setShowError = useCallback((identifier, show) => {
     if (nestedFieldBlockContext) {
-      nestedFieldBlockContext.setShowError(id, show);
+      nestedFieldBlockContext.setShowError(identifier, show);
       return;
     }
     setShowFieldErrorRecord(existing => {
       if (show) {
         return _objectSpread(_objectSpread({}, existing), {}, {
-          [id]: true
+          [identifier]: true
         });
       } else {
         const {
-            [id]: removed
+            [identifier]: removed
           } = existing,
-          newRecord = _objectWithoutProperties(existing, [id].map(_toPropertyKey));
+          newRecord = _objectWithoutProperties(existing, [identifier].map(_toPropertyKey));
         return newRecord;
       }
     });
@@ -78,14 +79,13 @@ function FieldBlock(props) {
     if (errorProp) {
       return errorProp;
     }
-    const errors = Object.entries(fieldErrorRecord).filter(([id]) => showFieldErrorRecord[id] === true).map(([, error]) => error);
+    const errors = Object.entries(fieldErrorRecord).filter(([identifier]) => showFieldErrorRecord[identifier] === true).map(([, error]) => error);
     return errors.length > 0 ? new Error(errors.map(error => error.message).join(' | ')) : undefined;
   }, [errorProp, fieldErrorRecord, showFieldErrorRecord]);
   const mainClasses = classnames('dnb-forms-field-block', className, width !== undefined && `dnb-forms-field-block--width-${width}`);
   const gridClasses = `dnb-forms-field-block__grid dnb-forms-field-block--layout-${layout}`;
   const enableFieldset = useEnableFieldset({
     label,
-    forId,
     asFieldset,
     children,
     nestedFieldBlockContext
@@ -102,7 +102,8 @@ function FieldBlock(props) {
         top: 0,
         bottom: 'x-small'
       },
-      size: size
+      size: size,
+      disabled: disabled
     }, children);
   };
   return React.createElement(FieldBlockContext.Provider, {
@@ -137,7 +138,6 @@ function FieldBlock(props) {
 }
 function useEnableFieldset({
   label,
-  forId,
   asFieldset,
   children,
   nestedFieldBlockContext
@@ -155,9 +155,6 @@ function useEnableFieldset({
           return result = true;
         }
       });
-      if (forId && count > 1) {
-        warn(`You may not use forId="${forId}" as there where given several (${count}) form elements as children.`);
-      }
     }
     return Boolean(result);
   }, [children]);

package/es/extensions/forms/FieldBlock/FieldBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","warn","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","labelSecondary","asFieldset","info","warning","error","errorProp","width","contentsWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","id","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","useEnableFieldset","state","stateStatus","Label","createElement","element","space","top","bottom","Provider","value","_extends","Fragment","text","toString","result","count","child","_child$props","_child$type","type","Boolean","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport {\n  findElementInChildren,\n  warn,\n} from '../../../shared/component-helper'\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'labelSecondary'\n  | 'info'\n  | 'warning'\n  | 'error'\n> & {\n  forId?: string\n  contentClassName?: string\n  children: React.ReactNode\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  /** Typography size */\n  size?: 'medium' | 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    width,\n    contentsWidth,\n    size,\n    contentClassName,\n    children,\n    ...rest\n  } = props\n\n  const [fieldErrorRecord, setFieldErrorRecord] = useState<\n    Record<string, FormError>\n  >({})\n  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n    Record<string, boolean>\n  >({})\n\n  const setError = useCallback(\n    (id, error) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setError(id, error)\n        return\n      }\n\n      setFieldErrorRecord((existing) => {\n        if (error) {\n          return {\n            ...existing,\n            [id]: error,\n          }\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [id]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const setShowError = useCallback(\n    (id, show) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setShowError(id, show)\n        return\n      }\n\n      setShowFieldErrorRecord((existing) => {\n        if (show) {\n          return {\n            ...existing,\n            [id]: true,\n          }\n        } else {\n          const { [id]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const error = useMemo(() => {\n    if (errorProp) {\n      return errorProp\n    }\n    const errors = Object.entries(fieldErrorRecord)\n      .filter(([id]) => showFieldErrorRecord[id] === true)\n      .map(([, error]) => error)\n    return errors.length > 0\n      ? new Error(errors.map((error) => error.message).join(' | '))\n      : undefined\n  }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    forId,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const state = error || warning || info\n  const stateStatus = error\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const Label = ({ children }) => {\n    return (\n      <FormLabel\n        element={enableFieldset ? 'legend' : 'label'}\n        forId={enableFieldset ? undefined : forId}\n        space={{ top: 0, bottom: 'x-small' }}\n        size={size}\n      >\n        {children}\n      </FormLabel>\n    )\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setError,\n        setShowError,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {labelDescription || labelSecondary ? (\n            <div className=\"dnb-forms-field-block__label\">\n              {label || labelDescription ? (\n                <Label>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </Label>\n              ) : (\n                <>&nbsp;</>\n              )}\n              {labelSecondary && (\n                <span className=\"dnb-forms-field-block__label-secondary\">\n                  {labelSecondary}\n                </span>\n              )}\n            </div>\n          ) : (\n            label && <Label>{label}</Label>\n          )}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentsWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentsWidth}`,\n              contentClassName\n            )}\n          >\n            {children}\n          </div>\n\n          {stateStatus && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state={stateStatus}\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  error?.message ||\n                  (state instanceof Error && state.message) ||\n                  (state instanceof FormError && state.message) ||\n                  state?.toString()\n                }\n                label={label as string}\n                space={{ top: 'x-small' }}\n              />\n            </div>\n          )}\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nfunction useEnableFieldset({\n  label,\n  forId,\n  asFieldset,\n  children,\n  nestedFieldBlockContext,\n}) {\n  return useMemo(() => {\n    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          typeof child?.props?.label !== 'undefined' ||\n          child?.type?.['_formElement'] === true\n        ) {\n          count++\n        }\n        if (count > 1) {\n          return (result = true)\n        }\n      })\n\n      if (forId && count > 1) {\n        warn(\n          `You may not use forId=\"${forId}\" as there where given several (${count}) form elements as children.`\n        )\n      }\n    }\n\n    return Boolean(result)\n  }, [children])\n}\n\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AACzE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,KAAK,EAAEC,SAAS,EAAEC,UAAU,QAAQ,qBAAqB;AAClE,SAASC,SAAS,QAAoC,UAAU;AAChE,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,SACEC,qBAAqB,EACrBC,IAAI,QACC,kCAAkC;AA0BzC,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,uBAAuB,GAAGb,UAAU,CAACQ,iBAAiB,CAAC;EAE7D,MAAM;MACJM,SAAS;MACTC,KAAK;MACLC,MAAM,GAAG,UAAU;MACnBC,KAAK;MACLC,gBAAgB;MAChBC,cAAc;MACdC,UAAU;MACVC,IAAI;MACJC,OAAO;MACPC,KAAK,EAAEC,SAAS;MAChBC,KAAK;MACLC,aAAa;MACbC,IAAI;MACJC,gBAAgB;MAChBC;IAEF,CAAC,GAAGjB,KAAK;IADJkB,IAAI,GAAAC,wBAAA,CACLnB,KAAK,EAAAoB,SAAA;EAET,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGjC,QAAQ,CAEtD,CAAC,CAAC,CAAC;EACL,MAAM,CAACkC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGnC,QAAQ,CAE9D,CAAC,CAAC,CAAC;EAEL,MAAMoC,QAAQ,GAAGnC,WAAW,CAC1B,CAACoC,EAAE,EAAEf,KAAK,KAAK;IACb,IAAIV,uBAAuB,EAAE;MAE3BA,uBAAuB,CAACwB,QAAQ,CAACC,EAAE,EAAEf,KAAK,CAAC;MAC3C;IACF;IAEAW,mBAAmB,CAAEK,QAAQ,IAAK;MAChC,IAAIhB,KAAK,EAAE;QACT,OAAAiB,aAAA,CAAAA,aAAA,KACKD,QAAQ;UACX,CAACD,EAAE,GAAGf;QAAK;MAEf,CAAC,MAAM;QAEL,MAAM;YAAE,CAACe,EAAE,GAAGG;UAAsB,CAAC,GAAGF,QAAQ;UAAtBG,SAAS,GAAAX,wBAAA,CAAKQ,QAAQ,GAAvCD,EAAE,EAAAK,GAAA,CAAAC,cAAA;QACX,OAAOF,SAAS;MAClB;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAAC7B,uBAAuB,CAC1B,CAAC;EAED,MAAMgC,YAAY,GAAG3C,WAAW,CAC9B,CAACoC,EAAE,EAAEQ,IAAI,KAAK;IACZ,IAAIjC,uBAAuB,EAAE;MAE3BA,uBAAuB,CAACgC,YAAY,CAACP,EAAE,EAAEQ,IAAI,CAAC;MAC9C;IACF;IAEAV,uBAAuB,CAAEG,QAAQ,IAAK;MACpC,IAAIO,IAAI,EAAE;QACR,OAAAN,aAAA,CAAAA,aAAA,KACKD,QAAQ;UACX,CAACD,EAAE,GAAG;QAAI;MAEd,CAAC,MAAM;QACL,MAAM;YAAE,CAACA,EAAE,GAAGG;UAAsB,CAAC,GAAGF,QAAQ;UAAtBG,SAAS,GAAAX,wBAAA,CAAKQ,QAAQ,GAAvCD,EAAE,EAAAK,GAAA,CAAAC,cAAA;QACX,OAAOF,SAAS;MAClB;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAAC7B,uBAAuB,CAC1B,CAAC;EAED,MAAMU,KAAK,GAAGxB,OAAO,CAAC,MAAM;IAC1B,IAAIyB,SAAS,EAAE;MACb,OAAOA,SAAS;IAClB;IACA,MAAMuB,MAAM,GAAGC,MAAM,CAACC,OAAO,CAAChB,gBAAgB,CAAC,CAC5CiB,MAAM,CAAC,CAAC,CAACZ,EAAE,CAAC,KAAKH,oBAAoB,CAACG,EAAE,CAAC,KAAK,IAAI,CAAC,CACnDK,GAAG,CAAC,CAAC,GAAGpB,KAAK,CAAC,KAAKA,KAAK,CAAC;IAC5B,OAAOwB,MAAM,CAACI,MAAM,GAAG,CAAC,GACpB,IAAIC,KAAK,CAACL,MAAM,CAACJ,GAAG,CAAEpB,KAAK,IAAKA,KAAK,CAAC8B,OAAO,CAAC,CAACC,IAAI,CAAC,KAAK,CAAC,CAAC,GAC3DC,SAAS;EACf,CAAC,EAAE,CAAC/B,SAAS,EAAES,gBAAgB,EAAEE,oBAAoB,CAAC,CAAC;EAEvD,MAAMqB,WAAW,GAAGrD,UAAU,CAC5B,uBAAuB,EAEvBW,SAAS,EADTW,KAAK,KAAK8B,SAAS,IAAK,gCAA+B9B,KAAM,EAE/D,CAAC;EACD,MAAMgC,WAAW,gEAEkBzC,MAAO,EACzC;EAGD,MAAM0C,cAAc,GAAGC,iBAAiB,CAAC;IACvC1C,KAAK;IACLF,KAAK;IACLK,UAAU;IACVS,QAAQ;IACRhB;EACF,CAAC,CAAC;EAEF,MAAM+C,KAAK,GAAGrC,KAAK,IAAID,OAAO,IAAID,IAAI;EACtC,MAAMwC,WAAW,GAAGtC,KAAK,GACrB,OAAO,GACPD,OAAO,GACP,MAAM,GACND,IAAI,GACJ,MAAM,GACN,IAAI;EAER,MAAMyC,KAAK,GAAGA,CAAC;IAAEjC;EAAS,CAAC,KAAK;IAC9B,OACE/B,KAAA,CAAAiE,aAAA,CAAC1D,SAAS;MACR2D,OAAO,EAAEN,cAAc,GAAG,QAAQ,GAAG,OAAQ;MAC7C3C,KAAK,EAAE2C,cAAc,GAAGH,SAAS,GAAGxC,KAAM;MAC1CkD,KAAK,EAAE;QAAEC,GAAG,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAU,CAAE;MACrCxC,IAAI,EAAEA;IAAK,GAEVE,QACQ,CAAC;EAEhB,CAAC;EAED,OACE/B,KAAA,CAAAiE,aAAA,CAACvD,iBAAiB,CAAC4D,QAAQ;IACzBC,KAAK,EAAE;MACLhC,QAAQ;MACRQ;IACF;EAAE,GAEF/C,KAAA,CAAAiE,aAAA,CAAC3D,KAAK,EAAAkE,QAAA;IACJN,OAAO,EAAEN,cAAc,GAAG,UAAU,GAAG,KAAM;IAC7C5C,SAAS,EAAE0C;EAAY,GACnB1B,IAAI,GAERhC,KAAA,CAAAiE,aAAA;IAAKjD,SAAS,EAAE2C;EAAY,GACzBvC,gBAAgB,IAAIC,cAAc,GACjCrB,KAAA,CAAAiE,aAAA;IAAKjD,SAAS,EAAC;EAA8B,GAC1CG,KAAK,IAAIC,gBAAgB,GACxBpB,KAAA,CAAAiE,aAAA,CAACD,KAAK,QACH7C,KAAK,EACLC,gBAAgB,IACfpB,KAAA,CAAAiE,aAAA;IAAMjD,SAAS,EAAC;EAA0C,GACvDI,gBACG,CAEH,CAAC,GAERpB,KAAA,CAAAiE,aAAA,CAAAjE,KAAA,CAAAyE,QAAA,QAAE,MAAQ,CACX,EACApD,cAAc,IACbrB,KAAA,CAAAiE,aAAA;IAAMjD,SAAS,EAAC;EAAwC,GACrDK,cACG,CAEL,CAAC,GAENF,KAAK,IAAInB,KAAA,CAAAiE,aAAA,CAACD,KAAK,QAAE7C,KAAa,CAC/B,EAEDnB,KAAA,CAAAiE,aAAA;IACEjD,SAAS,EAAEX,UAAU,CACnB,iCAAiC,EAGjCyB,gBAAgB,EAFhBF,aAAa,KAAK6B,SAAS,IACxB,0CAAyC7B,aAAc,EAE5D;EAAE,GAEDG,QACE,CAAC,EAELgC,WAAW,IACV/D,KAAA,CAAAiE,aAAA;IAAKjD,SAAS,EAAC;EAA+B,GAC5ChB,KAAA,CAAAiE,aAAA,CAACzD,UAAU;IACTsD,KAAK,EAAEC,WAAY;IACnBvB,EAAE,EAAEvB,KAAK,GAAI,GAAEA,KAAM,cAAa,GAAGwC,SAAU;IAC/CiB,IAAI,EACF,CAAAjD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE8B,OAAO,KACbO,KAAK,YAAYR,KAAK,IAAIQ,KAAK,CAACP,OAAQ,IACxCO,KAAK,YAAYrD,SAAS,IAAIqD,KAAK,CAACP,OAAQ,KAC7CO,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEa,QAAQ,CAAC,CAAC,CAClB;IACDxD,KAAK,EAAEA,KAAgB;IACvBgD,KAAK,EAAE;MAAEC,GAAG,EAAE;IAAU;EAAE,CAC3B,CACE,CAEJ,CACA,CACmB,CAAC;AAEjC;AAEA,SAASP,iBAAiBA,CAAC;EACzB1C,KAAK;EACLF,KAAK;EACLK,UAAU;EACVS,QAAQ;EACRhB;AACF,CAAC,EAAE;EACD,OAAOd,OAAO,CAAC,MAAM;IACnB,IAAI2E,MAAM,GAAGtD,UAAU;IAEvB,IAAIH,KAAK,IAAI,CAACyD,MAAM,IAAI,CAAC7D,uBAAuB,EAAE;MAChD,IAAI8D,KAAK,GAAG,CAAC;MAEblE,qBAAqB,CAACoB,QAAQ,EAAG+C,KAAyB,IAAK;QAAA,IAAAC,YAAA,EAAAC,WAAA;QAC7D,IACE,QAAOF,KAAK,aAALA,KAAK,wBAAAC,YAAA,GAALD,KAAK,CAAEhE,KAAK,cAAAiE,YAAA,uBAAZA,YAAA,CAAc5D,KAAK,MAAK,WAAW,IAC1C,CAAA2D,KAAK,aAALA,KAAK,wBAAAE,WAAA,GAALF,KAAK,CAAEG,IAAI,cAAAD,WAAA,uBAAXA,WAAA,CAAc,cAAc,CAAC,MAAK,IAAI,EACtC;UACAH,KAAK,EAAE;QACT;QACA,IAAIA,KAAK,GAAG,CAAC,EAAE;UACb,OAAQD,MAAM,GAAG,IAAI;QACvB;MACF,CAAC,CAAC;MAEF,IAAI3D,KAAK,IAAI4D,KAAK,GAAG,CAAC,EAAE;QACtBjE,IAAI,CACD,0BAAyBK,KAAM,mCAAkC4D,KAAM,8BAC1E,CAAC;MACH;IACF;IAEA,OAAOK,OAAO,CAACN,MAAM,CAAC;EACxB,CAAC,EAAE,CAAC7C,QAAQ,CAAC,CAAC;AAChB;AAEAlB,UAAU,CAACsE,qBAAqB,GAAG,IAAI;AACvC,eAAetE,UAAU"}
+{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","labelSecondary","asFieldset","info","warning","error","errorProp","disabled","width","contentsWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","identifier","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","useEnableFieldset","state","stateStatus","Label","createElement","element","space","top","bottom","Provider","value","_extends","Fragment","id","text","toString","result","count","child","_child$props","_child$type","type","Boolean","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport { findElementInChildren } from '../../../shared/component-helper'\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'labelSecondary'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'disabled'\n> & {\n  forId?: string\n  contentClassName?: string\n  children: React.ReactNode\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  /** Typography size */\n  size?: 'medium' | 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    disabled,\n    width,\n    contentsWidth,\n    size,\n    contentClassName,\n    children,\n    ...rest\n  } = props\n\n  const [fieldErrorRecord, setFieldErrorRecord] = useState<\n    Record<string, FormError>\n  >({})\n  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n    Record<string, boolean>\n  >({})\n\n  const setError = useCallback(\n    (identifier, error) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setError(identifier, error)\n        return\n      }\n\n      setFieldErrorRecord((existing) => {\n        if (error) {\n          return {\n            ...existing,\n            [identifier]: error,\n          }\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const setShowError = useCallback(\n    (identifier, show) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setShowError(identifier, show)\n        return\n      }\n\n      setShowFieldErrorRecord((existing) => {\n        if (show) {\n          return {\n            ...existing,\n            [identifier]: true,\n          }\n        } else {\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const error = useMemo(() => {\n    if (errorProp) {\n      return errorProp\n    }\n    const errors = Object.entries(fieldErrorRecord)\n      .filter(([identifier]) => showFieldErrorRecord[identifier] === true)\n      .map(([, error]) => error)\n    return errors.length > 0\n      ? new Error(errors.map((error) => error.message).join(' | '))\n      : undefined\n  }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const state = error || warning || info\n  const stateStatus = error\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const Label = ({ children }) => {\n    return (\n      <FormLabel\n        element={enableFieldset ? 'legend' : 'label'}\n        forId={enableFieldset ? undefined : forId}\n        space={{ top: 0, bottom: 'x-small' }}\n        size={size}\n        disabled={disabled}\n      >\n        {children}\n      </FormLabel>\n    )\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setError,\n        setShowError,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {labelDescription || labelSecondary ? (\n            <div className=\"dnb-forms-field-block__label\">\n              {label || labelDescription ? (\n                <Label>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </Label>\n              ) : (\n                <>&nbsp;</>\n              )}\n              {labelSecondary && (\n                <span className=\"dnb-forms-field-block__label-secondary\">\n                  {labelSecondary}\n                </span>\n              )}\n            </div>\n          ) : (\n            label && <Label>{label}</Label>\n          )}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentsWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentsWidth}`,\n              contentClassName\n            )}\n          >\n            {children}\n          </div>\n\n          {stateStatus && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state={stateStatus}\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  error?.message ||\n                  (state instanceof Error && state.message) ||\n                  (state instanceof FormError && state.message) ||\n                  state?.toString()\n                }\n                label={label as string}\n                space={{ top: 'x-small' }}\n              />\n            </div>\n          )}\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nfunction useEnableFieldset({\n  label,\n  asFieldset,\n  children,\n  nestedFieldBlockContext,\n}) {\n  return useMemo(() => {\n    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          typeof child?.props?.label !== 'undefined' ||\n          child?.type?.['_formElement'] === true\n        ) {\n          count++\n        }\n        if (count > 1) {\n          return (result = true)\n        }\n      })\n    }\n\n    return Boolean(result)\n  }, [children])\n}\n\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}

package/es/extensions/forms/FieldBlock/FieldBlockContext.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormError } from '../types';
 export interface FieldBlockContextState {
-    setError?: (id: string, error: FormError) => void;
-    setShowError?: (id: string, showError: boolean) => void;
+    setError?: (identifier: string, error: FormError) => void;
+    setShowError?: (identifier: string, showError: boolean) => void;
 }
 declare const FieldBlockContext: React.Context<FieldBlockContextState>;
 export default FieldBlockContext;

package/es/extensions/forms/FieldBlock/FieldBlockContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlockContext.js","names":["React","FieldBlockContext","createContext","undefined"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlockContext.ts"],"sourcesContent":["import React from 'react'\nimport { FormError } from '../types'\n\nexport interface FieldBlockContextState {\n  setError?: (id: string, error: FormError) => void\n  setShowError?: (id: string, showError: boolean) => void\n}\n\nconst FieldBlockContext = React.createContext<\n  FieldBlockContextState | undefined\n>(undefined)\n\nexport default FieldBlockContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,aAAa,CAE3CC,SAAS,CAAC;AAEZ,eAAeF,iBAAiB"}
+{"version":3,"file":"FieldBlockContext.js","names":["React","FieldBlockContext","createContext","undefined"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlockContext.ts"],"sourcesContent":["import React from 'react'\nimport { FormError } from '../types'\n\nexport interface FieldBlockContextState {\n  setError?: (identifier: string, error: FormError) => void\n  setShowError?: (identifier: string, showError: boolean) => void\n}\n\nconst FieldBlockContext = React.createContext<\n  FieldBlockContextState | undefined\n>(undefined)\n\nexport default FieldBlockContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,aAAa,CAE3CC,SAAS,CAAC;AAEZ,eAAeF,iBAAiB"}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.css

@@ -35,6 +35,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   grid-template-columns: var(--forms-field-width--medium) auto;
   grid-template-areas: "label contents" "status status";
 }
+.dnb-forms-field-block--width-stretch {
+  flex-grow: 1;
+}
 @media screen and (min-width: 30em) {
   .dnb-forms-field-block--width-small {
     width: var(--forms-field-width--small);

package/es/extensions/forms/FieldBlock/style/dnb-field-block.min.css

@@ -1 +1 @@
-:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:var(--forms-field-width--medium) auto}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:var(--forms-field-width--medium) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -27,6 +27,9 @@ fieldset.dnb-forms-field-block {
   }
 
   &--width {
+    &-stretch {
+      flex-grow: 1;
+    }
     @include allAbove(x-small) {
       &-small {
         width: var(--forms-field-width--small);

package/es/extensions/forms/constants/countries.d.ts

@@ -3,13 +3,16 @@
  *
  * cdc: Country Dialing Code
  */
-declare const _default: {
+export type CountryType = {
+    cdc: string;
+    iso: string;
     i18n: {
         en: string;
         nb: string;
     };
-    cdc: string;
-    iso: string;
-    continent: string;
-}[];
-export default _default;
+    continent: 'Asia' | 'Europe' | 'Africa' | 'Oceania' | 'Antarctica' | 'North America' | 'South America';
+    regions?: Array<'Scandinavia' | 'Nordic'>;
+};
+export declare const prioritizedCountries: string[];
+declare const countries: Array<CountryType>;
+export default countries;

package/es/extensions/forms/constants/countries.js

@@ -1,4 +1,5 @@
-export default [{
+export const prioritizedCountries = ['Norway', 'Sweden', 'Denmark', 'Finland'];
+const countries = [{
   i18n: {
     en: 'Afghanistan',
     nb: 'Afghanistan'
@@ -453,7 +454,8 @@ export default [{
   },
   cdc: '45',
   iso: 'DK',
-  continent: 'Europe'
+  continent: 'Europe',
+  regions: ['Scandinavia', 'Nordic']
 }, {
   i18n: {
     en: 'Djibouti',
@@ -581,7 +583,8 @@ export default [{
   },
   cdc: '358',
   iso: 'FI',
-  continent: 'Europe'
+  continent: 'Europe',
+  regions: ['Nordic']
 }, {
   i18n: {
     en: 'France',
@@ -773,7 +776,8 @@ export default [{
   },
   cdc: '354',
   iso: 'IS',
-  continent: 'Europe'
+  continent: 'Europe',
+  regions: ['Nordic']
 }, {
   i18n: {
     en: 'India',
@@ -1285,7 +1289,8 @@ export default [{
   },
   cdc: '47',
   iso: 'NO',
-  continent: 'Europe'
+  continent: 'Europe',
+  regions: ['Scandinavia', 'Nordic']
 }, {
   i18n: {
     en: 'Oman',
@@ -1685,7 +1690,8 @@ export default [{
   },
   cdc: '46',
   iso: 'SE',
-  continent: 'Europe'
+  continent: 'Europe',
+  regions: ['Scandinavia', 'Nordic']
 }, {
   i18n: {
     en: 'Switzerland',
@@ -1943,4 +1949,5 @@ export default [{
   iso: 'ZW',
   continent: 'Africa'
 }];
+export default countries;
 //# sourceMappingURL=countries.js.map