@dnb/eufemia 10.34.1 → 10.35.0

package/es/extensions/forms/Form/Section/EditContainer/EditToolbarTools.js

@@ -0,0 +1,59 @@
+"use client";
+
+import React, { useCallback, useContext, useState } from 'react';
+import { Button, Flex, FormStatus } from '../../../../../components';
+import useTranslation from '../../../hooks/useTranslation';
+import SectionContainerContext from '../containers/SectionContainerContext';
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
+import { check, close } from '../../../../../icons';
+import useContainerDataStore from './useContainerDataStore';
+import useEditContainerToolbar from './useEditContainerToolbar';
+export default function EditToolbarTools() {
+  useEditContainerToolbar();
+  const {
+    restoreOriginalData
+  } = useContainerDataStore();
+  const {
+    switchContainerMode
+  } = useContext(SectionContainerContext) || {};
+  const {
+    hasVisibleError,
+    hasSubmitError
+  } = useContext(FieldBoundaryContext) || {};
+  const translation = useTranslation().Section;
+  const [showError, setShowError] = useState(false);
+  const cancelHandler = useCallback(() => {
+    if (hasSubmitError) {
+      setShowError(true);
+    } else {
+      setShowError(false);
+      restoreOriginalData();
+      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('view');
+    }
+  }, [hasSubmitError, restoreOriginalData, switchContainerMode]);
+  const doneHandler = useCallback(() => {
+    if (hasVisibleError) {
+      setShowError(true);
+    } else {
+      setShowError(false);
+      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('view');
+    }
+  }, [hasVisibleError, switchContainerMode]);
+  return React.createElement(React.Fragment, null, React.createElement(FormStatus, {
+    show: showError && hasVisibleError,
+    no_animation: false
+  }, translation.errorInSection), React.createElement(Flex.Horizontal, {
+    gap: "large"
+  }, React.createElement(Button, {
+    variant: "tertiary",
+    icon: check,
+    icon_position: "left",
+    on_click: doneHandler
+  }, translation.done), React.createElement(Button, {
+    variant: "tertiary",
+    icon: close,
+    icon_position: "left",
+    on_click: cancelHandler
+  }, translation.cancel)));
+}
+//# sourceMappingURL=EditToolbarTools.js.map

package/es/extensions/forms/Form/Section/EditContainer/EditToolbarTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useState","Button","Flex","FormStatus","useTranslation","SectionContainerContext","FieldBoundaryContext","check","close","useContainerDataStore","useEditContainerToolbar","EditToolbarTools","restoreOriginalData","switchContainerMode","hasVisibleError","hasSubmitError","translation","Section","showError","setShowError","cancelHandler","doneHandler","createElement","Fragment","show","no_animation","errorInSection","Horizontal","gap","variant","icon","icon_position","on_click","done","cancel"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext, useState } from 'react'\nimport { Button, Flex, FormStatus } from '../../../../../components'\nimport useTranslation from '../../../hooks/useTranslation'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { check, close } from '../../../../../icons'\nimport useContainerDataStore from './useContainerDataStore'\nimport useEditContainerToolbar from './useEditContainerToolbar'\n\nexport default function EditToolbarTools() {\n  useEditContainerToolbar()\n  const { restoreOriginalData } = useContainerDataStore()\n\n  const { switchContainerMode } = useContext(SectionContainerContext) || {}\n  const { hasVisibleError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().Section\n\n  const [showError, setShowError] = useState(false)\n\n  const cancelHandler = useCallback(() => {\n    if (hasSubmitError) {\n      setShowError(true)\n    } else {\n      setShowError(false)\n      restoreOriginalData()\n      switchContainerMode?.('view')\n    }\n  }, [hasSubmitError, restoreOriginalData, switchContainerMode])\n  const doneHandler = useCallback(() => {\n    if (hasVisibleError) {\n      setShowError(true)\n    } else {\n      setShowError(false)\n      switchContainerMode?.('view')\n    }\n  }, [hasVisibleError, switchContainerMode])\n\n  return (\n    <>\n      <FormStatus show={showError && hasVisibleError} no_animation={false}>\n        {translation.errorInSection}\n      </FormStatus>\n      <Flex.Horizontal gap=\"large\">\n        <Button\n          variant=\"tertiary\"\n          icon={check}\n          icon_position=\"left\"\n          on_click={doneHandler}\n        >\n          {translation.done}\n        </Button>\n\n        <Button\n          variant=\"tertiary\"\n          icon={close}\n          icon_position=\"left\"\n          on_click={cancelHandler}\n        >\n          {translation.cancel}\n        </Button>\n      </Flex.Horizontal>\n    </>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAChE,SAASC,MAAM,EAAEC,IAAI,EAAEC,UAAU,QAAQ,2BAA2B;AACpE,OAAOC,cAAc,MAAM,+BAA+B;AAC1D,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,oBAAoB,MAAM,yDAAyD;AAC1F,SAASC,KAAK,EAAEC,KAAK,QAAQ,sBAAsB;AACnD,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,uBAAuB,MAAM,2BAA2B;AAE/D,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzCD,uBAAuB,CAAC,CAAC;EACzB,MAAM;IAAEE;EAAoB,CAAC,GAAGH,qBAAqB,CAAC,CAAC;EAEvD,MAAM;IAAEI;EAAoB,CAAC,GAAGd,UAAU,CAACM,uBAAuB,CAAC,IAAI,CAAC,CAAC;EACzE,MAAM;IAAES,eAAe;IAAEC;EAAe,CAAC,GACvChB,UAAU,CAACO,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAExC,MAAMU,WAAW,GAAGZ,cAAc,CAAC,CAAC,CAACa,OAAO;EAE5C,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMoB,aAAa,GAAGtB,WAAW,CAAC,MAAM;IACtC,IAAIiB,cAAc,EAAE;MAClBI,YAAY,CAAC,IAAI,CAAC;IACpB,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBP,mBAAmB,CAAC,CAAC;MACrBC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACE,cAAc,EAAEH,mBAAmB,EAAEC,mBAAmB,CAAC,CAAC;EAC9D,MAAMQ,WAAW,GAAGvB,WAAW,CAAC,MAAM;IACpC,IAAIgB,eAAe,EAAE;MACnBK,YAAY,CAAC,IAAI,CAAC;IACpB,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBN,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACC,eAAe,EAAED,mBAAmB,CAAC,CAAC;EAE1C,OACEhB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACE1B,KAAA,CAAAyB,aAAA,CAACnB,UAAU;IAACqB,IAAI,EAAEN,SAAS,IAAIJ,eAAgB;IAACW,YAAY,EAAE;EAAM,GACjET,WAAW,CAACU,cACH,CAAC,EACb7B,KAAA,CAAAyB,aAAA,CAACpB,IAAI,CAACyB,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1B/B,KAAA,CAAAyB,aAAA,CAACrB,MAAM;IACL4B,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEvB,KAAM;IACZwB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEX;EAAY,GAErBL,WAAW,CAACiB,IACP,CAAC,EAETpC,KAAA,CAAAyB,aAAA,CAACrB,MAAM;IACL4B,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEtB,KAAM;IACZuB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEZ;EAAc,GAEvBJ,WAAW,CAACkB,MACP,CACO,CACjB,CAAC;AAEP"}

package/es/extensions/forms/Form/Section/EditContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './EditContainer';
+export * from './EditContainer';

package/es/extensions/forms/Form/Section/EditContainer/index.js

@@ -0,0 +1,3 @@
+export { default } from './EditContainer';
+export * from './EditContainer';
+//# sourceMappingURL=index.js.map

package/es/extensions/forms/Form/Section/EditContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/index.ts"],"sourcesContent":["export { default } from './EditContainer'\nexport * from './EditContainer'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,iBAAiB;AACzC,cAAc,iBAAiB"}

package/es/extensions/forms/Form/Section/EditContainer/useContainerDataStore.d.ts

@@ -0,0 +1,3 @@
+export default function useContainerDataStore(): {
+    restoreOriginalData: () => void;
+};

package/es/extensions/forms/Form/Section/EditContainer/useContainerDataStore.js

@@ -0,0 +1,46 @@
+"use client";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useCallback, useContext, useEffect, useRef } from 'react';
+import { extendDeep } from '../../../../../shared/component-helper';
+import DataContext from '../../../DataContext/Context';
+import SectionContainerContext from '../containers/SectionContainerContext';
+import useDataValue from '../../../hooks/useDataValue';
+import { usePath } from '../../../hooks';
+export default function useContainerDataStore() {
+  const valueBackupRef = useRef();
+  const {
+    makePath
+  } = usePath();
+  const {
+    getData
+  } = useDataValue();
+  const {
+    data: dataFromContext,
+    setData
+  } = useContext(DataContext);
+  const {
+    containerMode
+  } = useContext(SectionContainerContext) || {};
+  useEffect(() => {
+    if (containerMode === 'edit' && !valueBackupRef.current) {
+      valueBackupRef.current = getData('/', {
+        includeCurrentPath: true
+      });
+    }
+    if (containerMode === 'view') {
+      valueBackupRef.current = null;
+    }
+  }, [containerMode, getData, makePath]);
+  const restoreOriginalData = useCallback(() => {
+    if (valueBackupRef.current) {
+      setData === null || setData === void 0 ? void 0 : setData(extendDeep(_objectSpread({}, dataFromContext), valueBackupRef.current));
+    }
+  }, [dataFromContext, setData]);
+  return {
+    restoreOriginalData
+  };
+}
+//# sourceMappingURL=useContainerDataStore.js.map

package/es/extensions/forms/Form/Section/EditContainer/useContainerDataStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerDataStore.js","names":["useCallback","useContext","useEffect","useRef","extendDeep","DataContext","SectionContainerContext","useDataValue","usePath","useContainerDataStore","valueBackupRef","makePath","getData","data","dataFromContext","setData","containerMode","current","includeCurrentPath","restoreOriginalData","_objectSpread"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/useContainerDataStore.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useRef } from 'react'\nimport { extendDeep } from '../../../../../shared/component-helper'\nimport DataContext from '../../../DataContext/Context'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport useDataValue from '../../../hooks/useDataValue'\nimport { usePath } from '../../../hooks'\n\nexport default function useContainerDataStore() {\n  const valueBackupRef = useRef<unknown>()\n\n  const { makePath } = usePath()\n  const { getData } = useDataValue()\n  const { data: dataFromContext, setData } = useContext(DataContext)\n  // const { path } = useContext(SectionContext) || {}\n  const { containerMode } = useContext(SectionContainerContext) || {}\n\n  useEffect(() => {\n    // console.log('path', path)\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = getData('/', {\n        includeCurrentPath: true,\n      })\n      // console.log('dataFromContext', dataFromContext)\n      // console.log('valueBackupRef.current', valueBackupRef.current)\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [containerMode, getData, makePath])\n\n  const restoreOriginalData = useCallback(() => {\n    if (valueBackupRef.current) {\n      setData?.(extendDeep({ ...dataFromContext }, valueBackupRef.current))\n    }\n  }, [dataFromContext, setData])\n\n  return {\n    restoreOriginalData,\n  }\n}\n"],"mappings":";;;;;AAAA,SAASA,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAClE,SAASC,UAAU,QAAQ,wCAAwC;AACnE,OAAOC,WAAW,MAAM,8BAA8B;AACtD,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,YAAY,MAAM,6BAA6B;AACtD,SAASC,OAAO,QAAQ,gBAAgB;AAExC,eAAe,SAASC,qBAAqBA,CAAA,EAAG;EAC9C,MAAMC,cAAc,GAAGP,MAAM,CAAU,CAAC;EAExC,MAAM;IAAEQ;EAAS,CAAC,GAAGH,OAAO,CAAC,CAAC;EAC9B,MAAM;IAAEI;EAAQ,CAAC,GAAGL,YAAY,CAAC,CAAC;EAClC,MAAM;IAAEM,IAAI,EAAEC,eAAe;IAAEC;EAAQ,CAAC,GAAGd,UAAU,CAACI,WAAW,CAAC;EAElE,MAAM;IAAEW;EAAc,CAAC,GAAGf,UAAU,CAACK,uBAAuB,CAAC,IAAI,CAAC,CAAC;EAEnEJ,SAAS,CAAC,MAAM;IAEd,IAAIc,aAAa,KAAK,MAAM,IAAI,CAACN,cAAc,CAACO,OAAO,EAAE;MACvDP,cAAc,CAACO,OAAO,GAAGL,OAAO,CAAC,GAAG,EAAE;QACpCM,kBAAkB,EAAE;MACtB,CAAC,CAAC;IAGJ;IACA,IAAIF,aAAa,KAAK,MAAM,EAAE;MAC5BN,cAAc,CAACO,OAAO,GAAG,IAAI;IAC/B;EACF,CAAC,EAAE,CAACD,aAAa,EAAEJ,OAAO,EAAED,QAAQ,CAAC,CAAC;EAEtC,MAAMQ,mBAAmB,GAAGnB,WAAW,CAAC,MAAM;IAC5C,IAAIU,cAAc,CAACO,OAAO,EAAE;MAC1BF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGX,UAAU,CAAAgB,aAAA,KAAMN,eAAe,GAAIJ,cAAc,CAACO,OAAO,CAAC,CAAC;IACvE;EACF,CAAC,EAAE,CAACH,eAAe,EAAEC,OAAO,CAAC,CAAC;EAE9B,OAAO;IACLI;EACF,CAAC;AACH"}

package/es/extensions/forms/Form/Section/EditContainer/useEditContainerToolbar.d.ts

@@ -0,0 +1 @@
+export default function useEditContainerToolbar(): void;

package/es/extensions/forms/Form/Section/EditContainer/useEditContainerToolbar.js

@@ -0,0 +1,19 @@
+"use client";
+
+import { useContext, useEffect } from 'react';
+import SectionContainerContext from '../containers/SectionContainerContext';
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
+export default function useEditContainerToolbar() {
+  const {
+    switchContainerMode
+  } = useContext(SectionContainerContext) || {};
+  const {
+    hasSubmitError
+  } = useContext(FieldBoundaryContext) || {};
+  useEffect(() => {
+    if (hasSubmitError) {
+      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
+    }
+  }, [hasSubmitError, switchContainerMode]);
+}
+//# sourceMappingURL=useEditContainerToolbar.js.map

package/es/extensions/forms/Form/Section/EditContainer/useEditContainerToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditContainerToolbar.js","names":["useContext","useEffect","SectionContainerContext","FieldBoundaryContext","useEditContainerToolbar","switchContainerMode","hasSubmitError"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/useEditContainerToolbar.ts"],"sourcesContent":["import { useContext, useEffect } from 'react'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function useEditContainerToolbar() {\n  const { switchContainerMode } = useContext(SectionContainerContext) || {}\n  const { hasSubmitError } = useContext(FieldBoundaryContext) || {}\n\n  useEffect(() => {\n    // Ensure the edit container is always in edit mode when the form has a submit error\n    if (hasSubmitError) {\n      switchContainerMode?.('edit')\n    }\n  }, [hasSubmitError, switchContainerMode])\n}\n"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,SAAS,QAAQ,OAAO;AAC7C,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,oBAAoB,MAAM,yDAAyD;AAE1F,eAAe,SAASC,uBAAuBA,CAAA,EAAG;EAChD,MAAM;IAAEC;EAAoB,CAAC,GAAGL,UAAU,CAACE,uBAAuB,CAAC,IAAI,CAAC,CAAC;EACzE,MAAM;IAAEI;EAAe,CAAC,GAAGN,UAAU,CAACG,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAEjEF,SAAS,CAAC,MAAM;IAEd,IAAIK,cAAc,EAAE;MAClBD,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACC,cAAc,EAAED,mBAAmB,CAAC,CAAC;AAC3C"}

package/es/extensions/forms/Form/Section/Section.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SectionContextState } from './SectionContext';
 import type { Props as DataContextProps } from '../../DataContext/Provider';
+import type { ContainerMode } from './containers/SectionContainer';
 import type { FieldSectionProps, Path, FieldProps } from '../../types';
 export type OverwritePropsDefaults = {
     [key: Path]: (FieldProps & FieldSectionProps) | OverwritePropsDefaults;
@@ -19,6 +20,11 @@ export type SectionProps<overwriteProps = OverwritePropsDefaults> = {
      * Makes all fields inside it required.
      */
     required?: boolean;
+    /**
+     * Defines the container mode. Can be `view` or `edit`.
+     * Defaults to `view`.
+     */
+    containerMode?: ContainerMode;
     /**
      * Only for internal use and undocumented for now.
      * Prioritize error techniques for the section.
@@ -31,6 +37,8 @@ export type LocalProps = SectionProps & {
 };
 declare function SectionComponent(props: LocalProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SectionComponent {
-    var _supportsSpacingProps: string;
+    var ViewContainer: typeof import("./ViewContainer/ViewContainer").default;
+    var EditContainer: typeof import("./EditContainer/EditContainer").default;
+    var _supportsSpacingProps: any;
 }
 export default SectionComponent;

package/es/extensions/forms/Form/Section/Section.js

@@ -9,6 +9,9 @@ import SectionContext from './SectionContext';
 import DataContext from '../../DataContext/Context';
 import Provider from '../../DataContext/Provider/Provider';
 import FieldPropsProvider from '../FieldProps';
+import SectionContainerProvider from './containers/SectionContainerProvider';
+import ViewContainer from './ViewContainer';
+import EditContainer from './EditContainer';
 function SectionComponent(props) {
   var _nestedProps$overwrit;
   const {
@@ -18,6 +21,7 @@ function SectionComponent(props) {
     required,
     data,
     defaultData,
+    containerMode = 'view',
     onChange,
     errorPrioritization = ['contextSchema'],
     children
@@ -53,11 +57,15 @@ function SectionComponent(props) {
       errorPrioritization,
       props
     }
+  }, React.createElement(SectionContainerProvider, {
+    containerMode: containerMode
   }, React.createElement(FieldPropsProvider, _extends({
     overwriteProps: _objectSpread(_objectSpread({}, overwriteProps), nestedProps === null || nestedProps === void 0 ? void 0 : (_nestedProps$overwrit = nestedProps.overwriteProps) === null || _nestedProps$overwrit === void 0 ? void 0 : _nestedProps$overwrit[path.substring(1)]),
     translations: translations
-  }, fieldProps), children));
+  }, fieldProps), children)));
 }
-SectionComponent._supportsSpacingProps = 'children';
+SectionComponent.ViewContainer = ViewContainer;
+SectionComponent.EditContainer = EditContainer;
+SectionComponent._supportsSpacingProps = undefined;
 export default SectionComponent;
 //# sourceMappingURL=Section.js.map

package/es/extensions/forms/Form/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","useCallback","useContext","useMemo","SectionContext","DataContext","Provider","FieldPropsProvider","SectionComponent","props","_nestedProps$overwrit","path","overwriteProps","translations","required","data","defaultData","onChange","errorPrioritization","children","startsWith","Error","hasContext","addOnChangeHandler","nestedPath","nestedProps","handleChange","args","identifier","fieldProps","undefined","createElement","value","_extends","_objectSpread","substring","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Section/Section.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport SectionContext, { SectionContextState } from './SectionContext'\nimport DataContext from '../../DataContext/Context'\nimport Provider from '../../DataContext/Provider/Provider'\nimport FieldPropsProvider from '../FieldProps'\n\nimport type { Props as DataContextProps } from '../../DataContext/Provider'\nimport type {\n  FieldSectionProps,\n  Path,\n  FieldProps,\n  OnChange,\n} from '../../types'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]: (FieldProps & FieldSectionProps) | OverwritePropsDefaults\n}\nexport type SectionProps<overwriteProps = OverwritePropsDefaults> = {\n  /**\n   * Path to the section.\n   * When defined, fields inside the section will get this path as a prefix of their own path.\n   */\n  path?: Path\n\n  /**\n   * Overwrite field props for the section.\n   */\n  overwriteProps?: overwriteProps | OverwritePropsDefaults\n\n  /**\n   * Makes all fields inside it required.\n   */\n  required?: boolean\n\n  /**\n   * Only for internal use and undocumented for now.\n   * Prioritize error techniques for the section.\n   * Can be `fieldSchema`, `sectionSchema` or `contextSchema.\n   */\n  errorPrioritization?: SectionContextState['errorPrioritization']\n} & Pick<\n  DataContextProps<unknown>,\n  'data' | 'defaultData' | 'onChange' | 'translations'\n>\n\nexport type LocalProps = SectionProps & {\n  children: React.ReactNode\n}\n\nfunction SectionComponent(props: LocalProps) {\n  const {\n    path,\n    overwriteProps,\n    translations,\n    required,\n    data,\n    defaultData,\n    onChange,\n    errorPrioritization = ['contextSchema'],\n    children,\n  } = props\n\n  if (path && !path.startsWith('/')) {\n    throw new Error(`path=\"${path}\" must start with a slash`)\n  }\n\n  const { hasContext, addOnChangeHandler } = useContext(DataContext)\n\n  const { path: nestedPath, props: nestedProps } =\n    useContext(SectionContext) || {}\n\n  const handleChange = useCallback<OnChange<unknown>>(\n    (...args) => onChange?.(...args),\n    [onChange]\n  )\n  addOnChangeHandler?.(handleChange)\n\n  const identifier = useMemo(() => {\n    return `${nestedPath && nestedPath !== '/' ? nestedPath : ''}${\n      path || ''\n    }`\n  }, [path, nestedPath])\n  const fieldProps = required ? { required: true } : undefined\n\n  if (!hasContext) {\n    return (\n      <Provider data={data} defaultData={defaultData}>\n        <SectionComponent {...props} />\n      </Provider>\n    )\n  }\n\n  return (\n    <SectionContext.Provider\n      value={{\n        path: identifier,\n        errorPrioritization,\n        props,\n      }}\n    >\n      <FieldPropsProvider\n        overwriteProps={{\n          ...overwriteProps,\n          ...(nestedProps?.overwriteProps?.[\n            path.substring(1)\n          ] as OverwritePropsDefaults),\n        }}\n        translations={translations}\n        {...fieldProps}\n      >\n        {children}\n      </FieldPropsProvider>\n    </SectionContext.Provider>\n  )\n}\n\nSectionComponent._supportsSpacingProps = 'children'\nexport default SectionComponent\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC/D,OAAOC,cAAc,MAA+B,kBAAkB;AACtE,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,QAAQ,MAAM,qCAAqC;AAC1D,OAAOC,kBAAkB,MAAM,eAAe;AA6C9C,SAASC,gBAAgBA,CAACC,KAAiB,EAAE;EAAA,IAAAC,qBAAA;EAC3C,MAAM;IACJC,IAAI;IACJC,cAAc;IACdC,YAAY;IACZC,QAAQ;IACRC,IAAI;IACJC,WAAW;IACXC,QAAQ;IACRC,mBAAmB,GAAG,CAAC,eAAe,CAAC;IACvCC;EACF,CAAC,GAAGV,KAAK;EAET,IAAIE,IAAI,IAAI,CAACA,IAAI,CAACS,UAAU,CAAC,GAAG,CAAC,EAAE;IACjC,MAAM,IAAIC,KAAK,CAAE,SAAQV,IAAK,2BAA0B,CAAC;EAC3D;EAEA,MAAM;IAAEW,UAAU;IAAEC;EAAmB,CAAC,GAAGrB,UAAU,CAACG,WAAW,CAAC;EAElE,MAAM;IAAEM,IAAI,EAAEa,UAAU;IAAEf,KAAK,EAAEgB;EAAY,CAAC,GAC5CvB,UAAU,CAACE,cAAc,CAAC,IAAI,CAAC,CAAC;EAElC,MAAMsB,YAAY,GAAGzB,WAAW,CAC9B,CAAC,GAAG0B,IAAI,KAAKV,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,GAAGU,IAAI,CAAC,EAChC,CAACV,QAAQ,CACX,CAAC;EACDM,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAGG,YAAY,CAAC;EAElC,MAAME,UAAU,GAAGzB,OAAO,CAAC,MAAM;IAC/B,OAAQ,GAAEqB,UAAU,IAAIA,UAAU,KAAK,GAAG,GAAGA,UAAU,GAAG,EAAG,GAC3Db,IAAI,IAAI,EACT,EAAC;EACJ,CAAC,EAAE,CAACA,IAAI,EAAEa,UAAU,CAAC,CAAC;EACtB,MAAMK,UAAU,GAAGf,QAAQ,GAAG;IAAEA,QAAQ,EAAE;EAAK,CAAC,GAAGgB,SAAS;EAE5D,IAAI,CAACR,UAAU,EAAE;IACf,OACEtB,KAAA,CAAA+B,aAAA,CAACzB,QAAQ;MAACS,IAAI,EAAEA,IAAK;MAACC,WAAW,EAAEA;IAAY,GAC7ChB,KAAA,CAAA+B,aAAA,CAACvB,gBAAgB,EAAKC,KAAQ,CACtB,CAAC;EAEf;EAEA,OACET,KAAA,CAAA+B,aAAA,CAAC3B,cAAc,CAACE,QAAQ;IACtB0B,KAAK,EAAE;MACLrB,IAAI,EAAEiB,UAAU;MAChBV,mBAAmB;MACnBT;IACF;EAAE,GAEFT,KAAA,CAAA+B,aAAA,CAACxB,kBAAkB,EAAA0B,QAAA;IACjBrB,cAAc,EAAAsB,aAAA,CAAAA,aAAA,KACTtB,cAAc,GACba,WAAW,aAAXA,WAAW,wBAAAf,qBAAA,GAAXe,WAAW,CAAEb,cAAc,cAAAF,qBAAA,uBAA3BA,qBAAA,CACFC,IAAI,CAACwB,SAAS,CAAC,CAAC,CAAC,CAClB,CACD;IACFtB,YAAY,EAAEA;EAAa,GACvBgB,UAAU,GAEbV,QACiB,CACG,CAAC;AAE9B;AAEAX,gBAAgB,CAAC4B,qBAAqB,GAAG,UAAU;AACnD,eAAe5B,gBAAgB"}
+{"version":3,"file":"Section.js","names":["React","useCallback","useContext","useMemo","SectionContext","DataContext","Provider","FieldPropsProvider","SectionContainerProvider","ViewContainer","EditContainer","SectionComponent","props","_nestedProps$overwrit","path","overwriteProps","translations","required","data","defaultData","containerMode","onChange","errorPrioritization","children","startsWith","Error","hasContext","addOnChangeHandler","nestedPath","nestedProps","handleChange","args","identifier","fieldProps","undefined","createElement","value","_extends","_objectSpread","substring","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Section/Section.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport SectionContext, { SectionContextState } from './SectionContext'\nimport DataContext from '../../DataContext/Context'\nimport Provider from '../../DataContext/Provider/Provider'\nimport FieldPropsProvider from '../FieldProps'\nimport SectionContainerProvider from './containers/SectionContainerProvider'\nimport ViewContainer from './ViewContainer'\nimport EditContainer from './EditContainer'\n\nimport type { Props as DataContextProps } from '../../DataContext/Provider'\nimport type { ContainerMode } from './containers/SectionContainer'\nimport type {\n  FieldSectionProps,\n  Path,\n  FieldProps,\n  OnChange,\n} from '../../types'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]: (FieldProps & FieldSectionProps) | OverwritePropsDefaults\n}\nexport type SectionProps<overwriteProps = OverwritePropsDefaults> = {\n  /**\n   * Path to the section.\n   * When defined, fields inside the section will get this path as a prefix of their own path.\n   */\n  path?: Path\n\n  /**\n   * Overwrite field props for the section.\n   */\n  overwriteProps?: overwriteProps | OverwritePropsDefaults\n\n  /**\n   * Makes all fields inside it required.\n   */\n  required?: boolean\n\n  /**\n   * Defines the container mode. Can be `view` or `edit`.\n   * Defaults to `view`.\n   */\n  containerMode?: ContainerMode\n\n  /**\n   * Only for internal use and undocumented for now.\n   * Prioritize error techniques for the section.\n   * Can be `fieldSchema`, `sectionSchema` or `contextSchema.\n   */\n  errorPrioritization?: SectionContextState['errorPrioritization']\n} & Pick<\n  DataContextProps<unknown>,\n  'data' | 'defaultData' | 'onChange' | 'translations'\n>\n\nexport type LocalProps = SectionProps & {\n  children: React.ReactNode\n}\n\nfunction SectionComponent(props: LocalProps) {\n  const {\n    path,\n    overwriteProps,\n    translations,\n    required,\n    data,\n    defaultData,\n    containerMode = 'view',\n    onChange,\n    errorPrioritization = ['contextSchema'],\n    children,\n  } = props\n\n  if (path && !path.startsWith('/')) {\n    throw new Error(`path=\"${path}\" must start with a slash`)\n  }\n\n  const { hasContext, addOnChangeHandler } = useContext(DataContext)\n\n  const { path: nestedPath, props: nestedProps } =\n    useContext(SectionContext) || {}\n\n  const handleChange = useCallback<OnChange<unknown>>(\n    (...args) => onChange?.(...args),\n    [onChange]\n  )\n  addOnChangeHandler?.(handleChange)\n\n  const identifier = useMemo(() => {\n    return `${nestedPath && nestedPath !== '/' ? nestedPath : ''}${\n      path || ''\n    }`\n  }, [path, nestedPath])\n  const fieldProps = required ? { required: true } : undefined\n\n  if (!hasContext) {\n    return (\n      <Provider data={data} defaultData={defaultData}>\n        <SectionComponent {...props} />\n      </Provider>\n    )\n  }\n\n  return (\n    <SectionContext.Provider\n      value={{\n        path: identifier,\n        errorPrioritization,\n        props,\n      }}\n    >\n      <SectionContainerProvider containerMode={containerMode}>\n        <FieldPropsProvider\n          overwriteProps={{\n            ...overwriteProps,\n            ...(nestedProps?.overwriteProps?.[\n              path.substring(1)\n            ] as OverwritePropsDefaults),\n          }}\n          translations={translations}\n          {...fieldProps}\n        >\n          {children}\n        </FieldPropsProvider>\n      </SectionContainerProvider>\n    </SectionContext.Provider>\n  )\n}\n\nSectionComponent.ViewContainer = ViewContainer\nSectionComponent.EditContainer = EditContainer\n\nSectionComponent._supportsSpacingProps = undefined\nexport default SectionComponent\n"],"mappings":"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"}

package/es/extensions/forms/Form/Section/SectionContext.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { OnChange, Path } from '../../types';
+import { Path } from '../../types';
 import { SectionProps } from '.';
 export interface SectionContextState {
     path?: Path;
     props?: SectionProps;
     errorPrioritization?: Array<'fieldSchema' | 'sectionSchema' | 'contextSchema'>;
-    handleChange?: OnChange<unknown>;
 }
 declare const SectionContext: React.Context<SectionContextState>;
 export default SectionContext;

package/es/extensions/forms/Form/Section/SectionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContext.js","names":["React","SectionContext","createContext","undefined"],"sources":["../../../../../../src/extensions/forms/Form/Section/SectionContext.tsx"],"sourcesContent":["import React from 'react'\nimport { OnChange, Path } from '../../types'\nimport { SectionProps } from '.'\n\nexport interface SectionContextState {\n  path?: Path\n  props?: SectionProps\n  errorPrioritization?: Array<\n    'fieldSchema' | 'sectionSchema' | 'contextSchema'\n  >\n  handleChange?: OnChange<unknown>\n}\n\nconst SectionContext = React.createContext<\n  SectionContextState | undefined\n>(undefined)\n\nexport default SectionContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAazB,MAAMC,cAAc,GAAGD,KAAK,CAACE,aAAa,CAExCC,SAAS,CAAC;AAEZ,eAAeF,cAAc"}
+{"version":3,"file":"SectionContext.js","names":["React","SectionContext","createContext","undefined"],"sources":["../../../../../../src/extensions/forms/Form/Section/SectionContext.tsx"],"sourcesContent":["import React from 'react'\nimport { Path } from '../../types'\nimport { SectionProps } from '.'\n\nexport interface SectionContextState {\n  path?: Path\n  props?: SectionProps\n  errorPrioritization?: Array<\n    'fieldSchema' | 'sectionSchema' | 'contextSchema'\n  >\n}\n\nconst SectionContext = React.createContext<\n  SectionContextState | undefined\n>(undefined)\n\nexport default SectionContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAYzB,MAAMC,cAAc,GAAGD,KAAK,CAACE,aAAa,CAExCC,SAAS,CAAC;AAEZ,eAAeF,cAAc"}

package/es/extensions/forms/Form/Section/SectionDocs.js

@@ -1,6 +1,6 @@
 export const SectionProperties = {
   path: {
-    doc: 'A path (JSON Pointer) to the array to iterate over.',
+    doc: 'A path to the section (JSON Pointer). When defined, fields inside the section will get this path as a prefix of their own path.',
     type: 'string',
     status: 'optional'
   },
@@ -29,6 +29,11 @@ export const SectionProperties = {
     type: 'object',
     status: 'optional'
   },
+  containerMode: {
+    doc: 'Defines the container mode. Can be `view` or `edit`. Defaults to `view`.',
+    type: 'string',
+    status: 'optional'
+  },
   children: {
     doc: 'All the fields and values inside the section.',
     type: 'React.Node',

package/es/extensions/forms/Form/Section/SectionDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionDocs.js","names":["SectionProperties","path","doc","type","status","overwriteProps","translation","required","defaultData","data","children","SectionEvents","onChange"],"sources":["../../../../../../src/extensions/forms/Form/Section/SectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SectionProperties: PropertiesTableProps = {\n  path: {\n    doc: 'A path (JSON Pointer) to the array to iterate over.',\n    type: 'string',\n    status: 'optional',\n  },\n  overwriteProps: {\n    doc: 'Overwrite field props for the section.',\n    type: 'object',\n    status: 'optional',\n  },\n  translation: {\n    doc: \"Provide a translation for the section (e.g. `{'nb-NO': { MySection: { MyField: { label: 'Custom' }}}}`).\",\n    type: 'object',\n    status: 'optional',\n  },\n  required: {\n    doc: 'Makes all fields inside it required.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  defaultData: {\n    doc: 'Provide default data to the section fields and values, in case the data context (Form.Handler) is not available.',\n    type: 'object',\n    status: 'optional',\n  },\n  data: {\n    doc: 'Provide data to the section fields and values, in case the data context (Form.Handler) is not available.',\n    type: 'object',\n    status: 'optional',\n  },\n  children: {\n    doc: 'All the fields and values inside the section.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n\nexport const SectionEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,iBAAuC,GAAG;EACrDC,IAAI,EAAE;IACJC,GAAG,EAAE,qDAAqD;IAC1DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,cAAc,EAAE;IACdH,GAAG,EAAE,wCAAwC;IAC7CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,WAAW,EAAE;IACXN,GAAG,EAAE,kHAAkH;IACvHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMO,aAAmC,GAAG;EACjDC,QAAQ,EAAE;IACRV,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"SectionDocs.js","names":["SectionProperties","path","doc","type","status","overwriteProps","translation","required","defaultData","data","containerMode","children","SectionEvents","onChange"],"sources":["../../../../../../src/extensions/forms/Form/Section/SectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SectionProperties: PropertiesTableProps = {\n  path: {\n    doc: 'A path to the section (JSON Pointer). When defined, fields inside the section will get this path as a prefix of their own path.',\n    type: 'string',\n    status: 'optional',\n  },\n  overwriteProps: {\n    doc: 'Overwrite field props for the section.',\n    type: 'object',\n    status: 'optional',\n  },\n  translation: {\n    doc: \"Provide a translation for the section (e.g. `{'nb-NO': { MySection: { MyField: { label: 'Custom' }}}}`).\",\n    type: 'object',\n    status: 'optional',\n  },\n  required: {\n    doc: 'Makes all fields inside it required.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  defaultData: {\n    doc: 'Provide default data to the section fields and values, in case the data context (Form.Handler) is not available.',\n    type: 'object',\n    status: 'optional',\n  },\n  data: {\n    doc: 'Provide data to the section fields and values, in case the data context (Form.Handler) is not available.',\n    type: 'object',\n    status: 'optional',\n  },\n  containerMode: {\n    doc: 'Defines the container mode. Can be `view` or `edit`. Defaults to `view`.',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'All the fields and values inside the section.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n\nexport const SectionEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,iBAAuC,GAAG;EACrDC,IAAI,EAAE;IACJC,GAAG,EAAE,iIAAiI;IACtIC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,cAAc,EAAE;IACdH,GAAG,EAAE,wCAAwC;IAC7CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,WAAW,EAAE;IACXN,GAAG,EAAE,kHAAkH;IACvHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,aAAa,EAAE;IACbR,GAAG,EAAE,0EAA0E;IAC/EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,QAAQ,EAAE;IACRT,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMQ,aAAmC,GAAG;EACjDC,QAAQ,EAAE;IACRX,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/Form/Section/ViewContainer/ViewContainer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Props as FlexContainerProps } from '../../../../../components/flex/Container';
+import { SectionContainerProps } from '../containers/SectionContainer';
+export type Props = {
+    title?: React.ReactNode;
+};
+export type AllProps = Props & SectionContainerProps & FlexContainerProps;
+declare function ViewContainer(props: AllProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ViewContainer {
+    var _supportsSpacingProps: boolean;
+}
+export default ViewContainer;

package/es/extensions/forms/Form/Section/ViewContainer/ViewContainer.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _Toolbar;
+const _excluded = ["children", "className", "title"];
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { convertJsxToString } from '../../../../../shared/component-helper';
+import { Flex } from '../../../../../components';
+import { Lead } from '../../../../../elements';
+import ViewToolbarTools from './ViewToolbarTools';
+import SectionContainer from '../containers/SectionContainer';
+import Toolbar from '../containers/Toolbar';
+function ViewContainer(props) {
+  const _ref = props || {},
+    {
+      children,
+      className,
+      title
+    } = _ref,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  const ariaLabel = useMemo(() => convertJsxToString(title), [title]);
+  return React.createElement(SectionContainer, _extends({
+    mode: "view",
+    ariaLabel: ariaLabel,
+    className: classnames('dnb-forms-section-view-block', className)
+  }, restProps), React.createElement(Flex.Stack, null, title && React.createElement(Lead, {
+    size: "basis"
+  }, title), children, _Toolbar || (_Toolbar = React.createElement(Toolbar, null, React.createElement(ViewToolbarTools, null)))));
+}
+ViewContainer._supportsSpacingProps = true;
+export default ViewContainer;
+//# sourceMappingURL=ViewContainer.js.map

package/es/extensions/forms/Form/Section/ViewContainer/ViewContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewContainer.js","names":["React","useMemo","classnames","convertJsxToString","Flex","Lead","ViewToolbarTools","SectionContainer","Toolbar","ViewContainer","props","_ref","children","className","title","restProps","_objectWithoutProperties","_excluded","ariaLabel","createElement","_extends","mode","Stack","size","_Toolbar","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/ViewContainer/ViewContainer.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../../shared/component-helper'\nimport { Flex } from '../../../../../components'\nimport { Props as FlexContainerProps } from '../../../../../components/flex/Container'\nimport { Lead } from '../../../../../elements'\nimport ViewToolbarTools from './ViewToolbarTools'\nimport SectionContainer, {\n  SectionContainerProps,\n} from '../containers/SectionContainer'\nimport Toolbar from '../containers/Toolbar'\n\nexport type Props = {\n  title?: React.ReactNode\n}\n\nexport type AllProps = Props & SectionContainerProps & FlexContainerProps\n\nfunction ViewContainer(props: AllProps) {\n  const { children, className, title, ...restProps } = props || {}\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n\n  return (\n    <SectionContainer\n      mode=\"view\"\n      ariaLabel={ariaLabel}\n      className={classnames('dnb-forms-section-view-block', className)}\n      {...restProps}\n    >\n      <Flex.Stack>\n        {title && <Lead size=\"basis\">{title}</Lead>}\n        {children}\n        <Toolbar>\n          <ViewToolbarTools />\n        </Toolbar>\n      </Flex.Stack>\n    </SectionContainer>\n  )\n}\n\nViewContainer._supportsSpacingProps = true\nexport default ViewContainer\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,wCAAwC;AAC3E,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,gBAAgB,MAEhB,gCAAgC;AACvC,OAAOC,OAAO,MAAM,uBAAuB;AAQ3C,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAAC,IAAA,GAAqDD,KAAK,IAAI,CAAC,CAAC;IAA1D;MAAEE,QAAQ;MAAEC,SAAS;MAAEC;IAAoB,CAAC,GAAAH,IAAA;IAAXI,SAAS,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAChD,MAAMC,SAAS,GAAGjB,OAAO,CAAC,MAAME,kBAAkB,CAACW,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEnE,OACEd,KAAA,CAAAmB,aAAA,CAACZ,gBAAgB,EAAAa,QAAA;IACfC,IAAI,EAAC,MAAM;IACXH,SAAS,EAAEA,SAAU;IACrBL,SAAS,EAAEX,UAAU,CAAC,8BAA8B,EAAEW,SAAS;EAAE,GAC7DE,SAAS,GAEbf,KAAA,CAAAmB,aAAA,CAACf,IAAI,CAACkB,KAAK,QACRR,KAAK,IAAId,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAACkB,IAAI,EAAC;EAAO,GAAET,KAAY,CAAC,EAC1CF,QAAQ,EAAAY,QAAA,KAAAA,QAAA,GACTxB,KAAA,CAAAmB,aAAA,CAACX,OAAO,QACNR,KAAA,CAAAmB,aAAA,CAACb,gBAAgB,MAAE,CACZ,CAAC,CACA,CACI,CAAC;AAEvB;AAEAG,aAAa,CAACgB,qBAAqB,GAAG,IAAI;AAC1C,eAAehB,aAAa"}

package/es/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.d.ts

@@ -0,0 +1,3 @@
+import { PropertiesTableProps } from '../../../../../shared/types';
+export declare const ViewContainerProperties: PropertiesTableProps;
+export declare const ViewContainerEvents: PropertiesTableProps;

package/es/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.js

@@ -0,0 +1,19 @@
+export const ViewContainerProperties = {
+  title: {
+    doc: 'The title of the container.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  variant: {
+    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
+    type: 'string',
+    status: 'optional'
+  },
+  '[FlexVertical](/uilib/layout/flex/container/)': {
+    doc: 'All Flex.Vertical properties.',
+    type: 'Various',
+    status: 'optional'
+  }
+};
+export const ViewContainerEvents = {};
+//# sourceMappingURL=ViewContainerDocs.js.map

package/es/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewContainerDocs.js","names":["ViewContainerProperties","title","doc","type","status","variant","ViewContainerEvents"],"sources":["../../../../../../../src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../../shared/types'\n\nexport const ViewContainerProperties: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',\n    type: 'string',\n    status: 'optional',\n  },\n  '[FlexVertical](/uilib/layout/flex/container/)': {\n    doc: 'All Flex.Vertical properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const ViewContainerEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,KAAK,EAAE;IACLC,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2FAA2F;IAChGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACD,+CAA+C,EAAE;IAC/CF,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAME,mBAAyC,GAAG,CAAC,CAAC"}

package/es/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.d.ts

@@ -0,0 +1 @@
+export default function ViewToolbarTools(): import("react/jsx-runtime").JSX.Element;

package/es/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.js

@@ -0,0 +1,26 @@
+"use client";
+
+import React, { useCallback, useContext } from 'react';
+import { Button, Flex } from '../../../../../components';
+import useTranslation from '../../../hooks/useTranslation';
+import SectionContainerContext from '../containers/SectionContainerContext';
+import { edit } from '../../../../../icons';
+export default function ViewToolbarTools() {
+  const sectionContainerContext = useContext(SectionContainerContext);
+  const {
+    switchContainerMode
+  } = sectionContainerContext !== null && sectionContainerContext !== void 0 ? sectionContainerContext : {};
+  const translation = useTranslation().Section;
+  const editHandler = useCallback(() => {
+    switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
+  }, [switchContainerMode]);
+  return React.createElement(Flex.Horizontal, {
+    gap: "large"
+  }, React.createElement(Button, {
+    variant: "tertiary",
+    icon: edit,
+    icon_position: "left",
+    on_click: editHandler
+  }, translation.edit));
+}
+//# sourceMappingURL=ViewToolbarTools.js.map

package/es/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewToolbarTools.js","names":["React","useCallback","useContext","Button","Flex","useTranslation","SectionContainerContext","edit","ViewToolbarTools","sectionContainerContext","switchContainerMode","translation","Section","editHandler","createElement","Horizontal","gap","variant","icon","icon_position","on_click"],"sources":["../../../../../../../src/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport { Button, Flex } from '../../../../../components'\nimport useTranslation from '../../../hooks/useTranslation'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport { edit } from '../../../../../icons'\n\nexport default function ViewToolbarTools() {\n  const sectionContainerContext = useContext(SectionContainerContext)\n  const { switchContainerMode } = sectionContainerContext ?? {}\n\n  const translation = useTranslation().Section\n\n  const editHandler = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal gap=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={edit}\n        icon_position=\"left\"\n        on_click={editHandler}\n      >\n        {translation.edit}\n      </Button>\n    </Flex.Horizontal>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,SAASC,MAAM,EAAEC,IAAI,QAAQ,2BAA2B;AACxD,OAAOC,cAAc,MAAM,+BAA+B;AAC1D,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,SAASC,IAAI,QAAQ,sBAAsB;AAE3C,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,uBAAuB,GAAGP,UAAU,CAACI,uBAAuB,CAAC;EACnE,MAAM;IAAEI;EAAoB,CAAC,GAAGD,uBAAuB,aAAvBA,uBAAuB,cAAvBA,uBAAuB,GAAI,CAAC,CAAC;EAE7D,MAAME,WAAW,GAAGN,cAAc,CAAC,CAAC,CAACO,OAAO;EAE5C,MAAMC,WAAW,GAAGZ,WAAW,CAAC,MAAM;IACpCS,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,OACEV,KAAA,CAAAc,aAAA,CAACV,IAAI,CAACW,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1BhB,KAAA,CAAAc,aAAA,CAACX,MAAM;IACLc,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEX,IAAK;IACXY,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEP;EAAY,GAErBF,WAAW,CAACJ,IACP,CACO,CAAC;AAEtB"}

package/es/extensions/forms/Form/Section/ViewContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ViewContainer';
+export * from './ViewContainer';

package/es/extensions/forms/Form/Section/ViewContainer/index.js

@@ -0,0 +1,3 @@
+export { default } from './ViewContainer';
+export * from './ViewContainer';
+//# sourceMappingURL=index.js.map

package/es/extensions/forms/Form/Section/ViewContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../../src/extensions/forms/Form/Section/ViewContainer/index.ts"],"sourcesContent":["export { default } from './ViewContainer'\nexport * from './ViewContainer'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,iBAAiB;AACzC,cAAc,iBAAiB"}

package/es/extensions/forms/Form/Section/containers/SectionContainer.d.ts

@@ -0,0 +1,19 @@
+import { Props as FlexContainerProps } from '../../../../../components/flex/Container';
+export type ContainerMode = 'view' | 'edit';
+export type SectionContainerProps = {
+    /**
+     * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.
+     * Defaults to `outline`.
+     */
+    variant?: 'outline' | 'basic';
+};
+export type Props = {
+    mode: ContainerMode;
+    open?: boolean | undefined;
+    ariaLabel?: string;
+} & SectionContainerProps;
+declare function SectionContainer(props: Props & FlexContainerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SectionContainer {
+    var _supportsSpacingProps: boolean;
+}
+export default SectionContainer;

package/es/extensions/forms/Form/Section/containers/SectionContainer.js

@@ -0,0 +1,83 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["mode", "open", "ariaLabel", "onAnimationEnd", "className", "children", "variant"];
+import React, { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
+import classnames from 'classnames';
+import { Flex, HeightAnimation } from '../../../../../components';
+import SectionContainerContext from './SectionContainerContext';
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
+function SectionContainer(props) {
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  const containerRef = useRef();
+  const contextRef = useRef();
+  contextRef.current = useContext(SectionContainerContext) || {};
+  const {
+    hasError,
+    hasSubmitError
+  } = useContext(FieldBoundaryContext) || {};
+  contextRef.current.hasError = hasError;
+  contextRef.current.hasSubmitError = hasSubmitError;
+  if (hasSubmitError) {
+    contextRef.current.containerMode = 'edit';
+  }
+  const {
+    switchContainerMode,
+    containerMode
+  } = contextRef.current;
+  const {
+      mode,
+      open,
+      ariaLabel,
+      onAnimationEnd,
+      className,
+      children,
+      variant = 'outline'
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  const openRef = useRef(open !== null && open !== void 0 ? open : containerMode === mode);
+  const setOpenState = useCallback(open => {
+    openRef.current = open;
+    forceUpdate();
+  }, []);
+  useEffect(() => {
+    if (typeof open !== 'undefined') {
+      setOpenState(open);
+    } else {
+      if (openRef.current !== (containerMode === mode)) {
+        setOpenState(containerMode === mode);
+      }
+    }
+  }, [containerMode, mode, open, setOpenState]);
+  const handleAnimationEnd = useCallback(state => {
+    if (contextRef.current.hasSubmitError) {
+      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
+    }
+    if (state === 'opened') {
+      const preventFocusOnErrorOpening = !contextRef.current.hasSubmitError;
+      if (preventFocusOnErrorOpening) {
+        var _containerRef$current, _containerRef$current2;
+        containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.focus) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.call(_containerRef$current);
+      }
+    }
+    onAnimationEnd === null || onAnimationEnd === void 0 ? void 0 : onAnimationEnd(state);
+  }, [onAnimationEnd, switchContainerMode]);
+  return React.createElement(HeightAnimation, {
+    className: classnames('dnb-forms-section-block', className, variant && `dnb-forms-section-block--variant-${variant}`, contextRef.current.hasSubmitError && 'dnb-forms-section-block--error'),
+    open: openRef.current,
+    onAnimationEnd: handleAnimationEnd,
+    duration: 450,
+    keepInDOM: true
+  }, React.createElement(Flex.Stack, _extends({
+    className: "dnb-forms-section-block__inner"
+  }, restProps, {
+    element: "section",
+    "aria-label": ariaLabel,
+    innerRef: containerRef,
+    tabIndex: -1
+  }), children));
+}
+SectionContainer._supportsSpacingProps = true;
+export default SectionContainer;
+//# sourceMappingURL=SectionContainer.js.map

package/es/extensions/forms/Form/Section/containers/SectionContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainer.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","SectionContainerContext","FieldBoundaryContext","SectionContainer","props","forceUpdate","containerRef","contextRef","current","hasError","hasSubmitError","containerMode","switchContainerMode","mode","open","ariaLabel","onAnimationEnd","className","children","variant","restProps","_objectWithoutProperties","_excluded","openRef","setOpenState","handleAnimationEnd","state","preventFocusOnErrorOpening","_containerRef$current","_containerRef$current2","focus","call","createElement","duration","keepInDOM","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainer.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Flex, HeightAnimation } from '../../../../../components'\nimport SectionContainerContext, {\n  SectionContainerContextState,\n} from './SectionContainerContext'\nimport { Props as FlexContainerProps } from '../../../../../components/flex/Container'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport type ContainerMode = 'view' | 'edit'\nexport type SectionContainerProps = {\n  /**\n   * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.\n   * Defaults to `outline`.\n   */\n  variant?: 'outline' | 'basic'\n}\n\nexport type Props = {\n  mode: ContainerMode\n  open?: boolean | undefined\n  ariaLabel?: string\n} & SectionContainerProps\n\nfunction SectionContainer(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const containerRef = useRef<HTMLDivElement>()\n  const contextRef = useRef<\n    SectionContainerContextState & {\n      hasError?: boolean\n      hasSubmitError?: boolean\n    }\n  >()\n  contextRef.current = useContext(SectionContainerContext) || {}\n\n  const { hasError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasSubmitError = hasSubmitError\n\n  // - Set the container mode to \"edit\" if we have an error\n  if (hasSubmitError) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { switchContainerMode, containerMode } = contextRef.current\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    variant = 'outline',\n    ...restProps\n  } = props\n\n  const openRef = useRef(open ?? containerMode === mode)\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    // - Set the open state, if it's controlled\n    if (typeof open !== 'undefined') {\n      setOpenState(open)\n    } else {\n      // - Open the block with animation, if it's in the right mode\n      if (openRef.current !== (containerMode === mode)) {\n        setOpenState(containerMode === mode)\n      }\n    }\n  }, [containerMode, mode, open, setOpenState])\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      // - Keep the block open if we have an error\n      if (contextRef.current.hasSubmitError) {\n        switchContainerMode?.('edit')\n      }\n\n      if (state === 'opened') {\n        const preventFocusOnErrorOpening =\n          !contextRef.current.hasSubmitError\n        if (preventFocusOnErrorOpening) {\n          containerRef?.current?.focus?.()\n        }\n      }\n\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, switchContainerMode]\n  )\n\n  return (\n    <HeightAnimation\n      className={classnames(\n        'dnb-forms-section-block',\n        variant && `dnb-forms-section-block--variant-${variant}`,\n        contextRef.current.hasSubmitError &&\n          'dnb-forms-section-block--error',\n        className\n      )}\n      open={openRef.current}\n      onAnimationEnd={handleAnimationEnd}\n      duration={450}\n      keepInDOM // Ensure fields get mounted so they will sync with the data context\n    >\n      <Flex.Stack\n        className=\"dnb-forms-section-block__inner\"\n        {...restProps}\n        element=\"section\"\n        aria-label={ariaLabel}\n        innerRef={containerRef}\n        tabIndex={-1}\n      >\n        {children}\n      </Flex.Stack>\n    </HeightAnimation>\n  )\n}\n\nSectionContainer._supportsSpacingProps = true\nexport default SectionContainer\n"],"mappings":"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"}

package/es/extensions/forms/Form/Section/containers/SectionContainerContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ContainerMode } from './SectionContainer';
+export interface SectionContainerContextState {
+    containerMode?: ContainerMode;
+    switchContainerMode?: (mode: ContainerMode) => void;
+}
+declare const SectionContainerContext: React.Context<SectionContainerContextState>;
+export default SectionContainerContext;