@dnb/eufemia 10.54.1 → 10.55.0

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

@@ -20,34 +20,74 @@ $breakpoints: map.merge(
 }
 
 fieldset.dnb-forms-field-block {
-  @include fieldsetReset(true);
+  @include fieldsetReset();
 }
 
 .dnb-forms-field-block {
   &__grid {
     display: grid;
+
+    // Vertical layout
+    grid-template-columns: minmax(
+      min-content,
+      var(--block-content-width, auto)
+    );
+    grid-template-areas:
+      'label'
+      'contents'
+      'status';
   }
 
-  &--layout-vertical &__grid {
-    @include formLabelWrap();
+  &__grid#{&}--layout-vertical {
+    flex-wrap: wrap;
+    & > .dnb-form-label,
+    & > .dnb-forms-field-block__label > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
   }
 
-  &--layout {
-    &-vertical {
-      grid-template-columns: auto;
-      grid-template-areas:
-        'label'
-        'contents'
-        'status';
+  // Horizontal layout
+  &__grid#{&}--layout-horizontal {
+    @include allBelow(small) {
+      & > .dnb-form-label,
+      & > .dnb-forms-field-block__label > .dnb-form-label {
+        margin-bottom: 0.5rem;
+      }
     }
-    &-horizontal {
-      grid-template-columns: fit-content(100%) auto;
+    @include allAbove(small) {
+      & > .dnb-form-label,
+      & > .dnb-forms-field-block__label > .dnb-form-label {
+        margin-top: var(--label-margin);
+        margin-bottom: var(--label-margin);
+      }
+      grid-template-columns:
+        minmax(
+          var(--dnb-forms-field-block-layout-width-min, min-content),
+          var(--dnb-forms-field-block-layout-width-max, max-content)
+        )
+        auto;
       grid-template-areas:
         'label contents'
-        'status status';
+        '. status';
+
+      .dnb-forms-field-block__contents {
+        align-self: end;
+      }
     }
   }
 
+  // Align label vertically with the content (input etc.)
+  --label-margin: 0.25rem;
+  &--label-height-small {
+    --label-margin: 0;
+  }
+  &--label-height-medium {
+    --label-margin: 0.5rem;
+  }
+  &--label-height-large {
+    --label-margin: 0.7rem;
+  }
+
   &--width {
     &-stretch {
       flex-grow: 1;
@@ -85,6 +125,7 @@ fieldset.dnb-forms-field-block {
     grid-area: status;
     .dnb-form-status__shell {
       margin-top: 0.5rem; // set margin-top on shell, so we can animate the height
+      max-width: 60ch; // to enhance readability
     }
 
     @include allBelow(xx-small) {
@@ -94,6 +135,8 @@ fieldset.dnb-forms-field-block {
 
   &__contents {
     grid-area: contents;
+
+    display: flex;
     width: 100%;
 
     &--width {

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

@@ -0,0 +1,7 @@
+.dnb-forms-field-block__label-description {
+  color: var(--sb-color-gray-dark);
+  font-size: var(--font-size-small);
+}
+.dnb-forms-field-block:not([class*="--label-height-"]) {
+  --label-margin: 0.5rem;
+}

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

@@ -0,0 +1 @@
+.dnb-forms-field-block__label-description{color:var(--sb-color-gray-dark);font-size:var(--font-size-small)}.dnb-forms-field-block:not([class*="--label-height-"]){--label-margin:0.5rem}

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

@@ -0,0 +1,10 @@
+.dnb-forms-field-block {
+  &__label-description {
+    color: var(--sb-color-gray-dark);
+    font-size: var(--font-size-small);
+  }
+
+  &:not([class*='--label-height-']) {
+    --label-margin: 0.5rem;
+  }
+}

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

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

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

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useCallback, useContext } from 'react';
+import SectionContainerContext from '../containers/SectionContainerContext';
+import ToolbarContext from '../Toolbar/ToolbarContext';
+import { useTranslation } from '../../../hooks';
+import { Button } from '../../../../../components';
+import { close } from '../../../../../icons';
+import useContainerDataStore from './useContainerDataStore';
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
+export default function CancelButton() {
+  const {
+    onCancel,
+    setShowError
+  } = useContext(ToolbarContext) || {};
+  const {
+    restoreOriginalData
+  } = useContainerDataStore();
+  const {
+    switchContainerMode,
+    initialContainerMode
+  } = useContext(SectionContainerContext) || {};
+  const {
+    hasVisibleError,
+    hasSubmitError,
+    hasError,
+    setShowBoundaryErrors
+  } = useContext(FieldBoundaryContext) || {};
+  const translation = useTranslation().SectionEditContainer;
+  const cancelHandler = useCallback(() => {
+    if (hasSubmitError || initialContainerMode === 'auto' && hasError) {
+      setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(true);
+      if (hasVisibleError) {
+        setShowError(true);
+      }
+    } else {
+      setShowError(false);
+      setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(false);
+      restoreOriginalData();
+      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('view');
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+  }, [hasError, hasSubmitError, hasVisibleError, initialContainerMode, onCancel, restoreOriginalData, setShowBoundaryErrors, setShowError, switchContainerMode]);
+  return React.createElement(Button, {
+    variant: "tertiary",
+    icon: close,
+    icon_position: "left",
+    on_click: cancelHandler
+  }, translation.cancelButton);
+}
+//# sourceMappingURL=CancelButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CancelButton.js","names":["React","useCallback","useContext","SectionContainerContext","ToolbarContext","useTranslation","Button","close","useContainerDataStore","FieldBoundaryContext","CancelButton","onCancel","setShowError","restoreOriginalData","switchContainerMode","initialContainerMode","hasVisibleError","hasSubmitError","hasError","setShowBoundaryErrors","translation","SectionEditContainer","cancelHandler","createElement","variant","icon","icon_position","on_click","cancelButton"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/CancelButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport ToolbarContext from '../Toolbar/ToolbarContext'\nimport { useTranslation } from '../../../hooks'\nimport { Button } from '../../../../../components'\nimport { close } from '../../../../../icons'\nimport useContainerDataStore from './useContainerDataStore'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function CancelButton() {\n  const { onCancel, setShowError } = useContext(ToolbarContext) || {}\n  const { restoreOriginalData } = useContainerDataStore()\n  const { switchContainerMode, initialContainerMode } =\n    useContext(SectionContainerContext) || {}\n  const {\n    hasVisibleError,\n    hasSubmitError,\n    hasError,\n    setShowBoundaryErrors,\n  } = useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().SectionEditContainer\n\n  const cancelHandler = useCallback(() => {\n    if (hasSubmitError || (initialContainerMode === 'auto' && hasError)) {\n      setShowBoundaryErrors?.(true)\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      setShowError(false)\n      setShowBoundaryErrors?.(false)\n      restoreOriginalData()\n      switchContainerMode?.('view')\n      onCancel?.()\n    }\n  }, [\n    hasError,\n    hasSubmitError,\n    hasVisibleError,\n    initialContainerMode,\n    onCancel,\n    restoreOriginalData,\n    setShowBoundaryErrors,\n    setShowError,\n    switchContainerMode,\n  ])\n\n  return (\n    <Button\n      variant=\"tertiary\"\n      icon={close}\n      icon_position=\"left\"\n      on_click={cancelHandler}\n    >\n      {translation.cancelButton}\n    </Button>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,cAAc,MAAM,2BAA2B;AACtD,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,KAAK,QAAQ,sBAAsB;AAC5C,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,oBAAoB,MAAM,yDAAyD;AAE1F,eAAe,SAASC,YAAYA,CAAA,EAAG;EACrC,MAAM;IAAEC,QAAQ;IAAEC;EAAa,CAAC,GAAGV,UAAU,CAACE,cAAc,CAAC,IAAI,CAAC,CAAC;EACnE,MAAM;IAAES;EAAoB,CAAC,GAAGL,qBAAqB,CAAC,CAAC;EACvD,MAAM;IAAEM,mBAAmB;IAAEC;EAAqB,CAAC,GACjDb,UAAU,CAACC,uBAAuB,CAAC,IAAI,CAAC,CAAC;EAC3C,MAAM;IACJa,eAAe;IACfC,cAAc;IACdC,QAAQ;IACRC;EACF,CAAC,GAAGjB,UAAU,CAACO,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAE1C,MAAMW,WAAW,GAAGf,cAAc,CAAC,CAAC,CAACgB,oBAAoB;EAEzD,MAAMC,aAAa,GAAGrB,WAAW,CAAC,MAAM;IACtC,IAAIgB,cAAc,IAAKF,oBAAoB,KAAK,MAAM,IAAIG,QAAS,EAAE;MACnEC,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,IAAI,CAAC;MAC7B,IAAIH,eAAe,EAAE;QACnBJ,YAAY,CAAC,IAAI,CAAC;MACpB;IACF,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBO,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,KAAK,CAAC;MAC9BN,mBAAmB,CAAC,CAAC;MACrBC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;MAC7BH,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,CAAC;IACd;EACF,CAAC,EAAE,CACDO,QAAQ,EACRD,cAAc,EACdD,eAAe,EACfD,oBAAoB,EACpBJ,QAAQ,EACRE,mBAAmB,EACnBM,qBAAqB,EACrBP,YAAY,EACZE,mBAAmB,CACpB,CAAC;EAEF,OACEd,KAAA,CAAAuB,aAAA,CAACjB,MAAM;IACLkB,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAElB,KAAM;IACZmB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEL;EAAc,GAEvBF,WAAW,CAACQ,YACP,CAAC;AAEb"}

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

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

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

@@ -0,0 +1,44 @@
+"use client";
+
+import React, { useCallback, useContext } from 'react';
+import SectionContainerContext from '../containers/SectionContainerContext';
+import ToolbarContext from '../Toolbar/ToolbarContext';
+import { useTranslation } from '../../../hooks';
+import { Button } from '../../../../../components';
+import { check } from '../../../../../icons';
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
+export default function DoneEditButton() {
+  const {
+    onDone,
+    setShowError
+  } = useContext(ToolbarContext) || {};
+  const {
+    switchContainerMode
+  } = useContext(SectionContainerContext) || {};
+  const {
+    hasError,
+    hasVisibleError,
+    setShowBoundaryErrors
+  } = useContext(FieldBoundaryContext) || {};
+  const translation = useTranslation().SectionEditContainer;
+  const doneHandler = useCallback(() => {
+    if (hasError) {
+      setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(true);
+      if (hasVisibleError) {
+        setShowError(true);
+      }
+    } else {
+      setShowError(false);
+      setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(false);
+      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('view');
+      onDone === null || onDone === void 0 ? void 0 : onDone();
+    }
+  }, [hasError, hasVisibleError, onDone, setShowBoundaryErrors, setShowError, switchContainerMode]);
+  return React.createElement(Button, {
+    variant: "tertiary",
+    icon: check,
+    icon_position: "left",
+    on_click: doneHandler
+  }, translation.doneButton);
+}
+//# sourceMappingURL=DoneButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DoneButton.js","names":["React","useCallback","useContext","SectionContainerContext","ToolbarContext","useTranslation","Button","check","FieldBoundaryContext","DoneEditButton","onDone","setShowError","switchContainerMode","hasError","hasVisibleError","setShowBoundaryErrors","translation","SectionEditContainer","doneHandler","createElement","variant","icon","icon_position","on_click","doneButton"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/DoneButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport ToolbarContext from '../Toolbar/ToolbarContext'\nimport { useTranslation } from '../../../hooks'\nimport { Button } from '../../../../../components'\nimport { check } from '../../../../../icons'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function DoneEditButton() {\n  const { onDone, setShowError } = useContext(ToolbarContext) || {}\n\n  const { switchContainerMode } = useContext(SectionContainerContext) || {}\n  const { hasError, hasVisibleError, setShowBoundaryErrors } =\n    useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().SectionEditContainer\n\n  const doneHandler = useCallback(() => {\n    if (hasError) {\n      setShowBoundaryErrors?.(true)\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      setShowError(false)\n      setShowBoundaryErrors?.(false)\n      switchContainerMode?.('view')\n      onDone?.()\n    }\n  }, [\n    hasError,\n    hasVisibleError,\n    onDone,\n    setShowBoundaryErrors,\n    setShowError,\n    switchContainerMode,\n  ])\n\n  return (\n    <Button\n      variant=\"tertiary\"\n      icon={check}\n      icon_position=\"left\"\n      on_click={doneHandler}\n    >\n      {translation.doneButton}\n    </Button>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,cAAc,MAAM,2BAA2B;AACtD,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,KAAK,QAAQ,sBAAsB;AAC5C,OAAOC,oBAAoB,MAAM,yDAAyD;AAE1F,eAAe,SAASC,cAAcA,CAAA,EAAG;EACvC,MAAM;IAAEC,MAAM;IAAEC;EAAa,CAAC,GAAGT,UAAU,CAACE,cAAc,CAAC,IAAI,CAAC,CAAC;EAEjE,MAAM;IAAEQ;EAAoB,CAAC,GAAGV,UAAU,CAACC,uBAAuB,CAAC,IAAI,CAAC,CAAC;EACzE,MAAM;IAAEU,QAAQ;IAAEC,eAAe;IAAEC;EAAsB,CAAC,GACxDb,UAAU,CAACM,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAExC,MAAMQ,WAAW,GAAGX,cAAc,CAAC,CAAC,CAACY,oBAAoB;EAEzD,MAAMC,WAAW,GAAGjB,WAAW,CAAC,MAAM;IACpC,IAAIY,QAAQ,EAAE;MACZE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,IAAI,CAAC;MAC7B,IAAID,eAAe,EAAE;QACnBH,YAAY,CAAC,IAAI,CAAC;MACpB;IACF,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBI,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,KAAK,CAAC;MAC9BH,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;MAC7BF,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAG,CAAC;IACZ;EACF,CAAC,EAAE,CACDG,QAAQ,EACRC,eAAe,EACfJ,MAAM,EACNK,qBAAqB,EACrBJ,YAAY,EACZC,mBAAmB,CACpB,CAAC;EAEF,OACEZ,KAAA,CAAAmB,aAAA,CAACb,MAAM;IACLc,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEd,KAAM;IACZe,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEL;EAAY,GAErBF,WAAW,CAACQ,UACP,CAAC;AAEb"}

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

@@ -9,6 +9,8 @@ export type Props = {
 export type AllProps = Props & SectionContainerProps & FlexContainerProps;
 declare function EditContainer(props: AllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace EditContainer {
+    var DoneButton: typeof import("./DoneButton").default;
+    var CancelButton: typeof import("./CancelButton").default;
     var _supportsSpacingProps: boolean;
 }
 export default EditContainer;

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

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _DoneButton, _CancelButton;
 const _excluded = ["children", "className", "title", "onDone", "onCancel"];
 import React, { useCallback, useContext, useMemo, useRef } from 'react';
 import classnames from 'classnames';
@@ -10,9 +11,10 @@ import { Flex } from '../../../../../components';
 import { Lead } from '../../../../../elements';
 import FieldBoundaryProvider from '../../../DataContext/FieldBoundary/FieldBoundaryProvider';
 import SectionContainerContext from '../containers/SectionContainerContext';
-import EditToolbarTools from './EditToolbarTools';
+import Toolbar from '../Toolbar/Toolbar';
+import DoneButton from './DoneButton';
+import CancelButton from './CancelButton';
 import SectionContainer from '../containers/SectionContainer';
-import Toolbar from '../containers/Toolbar';
 function EditContainer(props) {
   const _ref = props || {},
     {
@@ -37,6 +39,9 @@ function EditContainer(props) {
       switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
     }
   }, [containerMode, initialContainerMode, switchContainerMode]);
+  const hasToolbar = React.Children.toArray(children).some(child => {
+    return (child === null || child === void 0 ? void 0 : child['type']) === Toolbar;
+  });
   return React.createElement(FieldBoundaryProvider, {
     showErrors: validateInitially,
     onPathError: onPathError
@@ -47,11 +52,13 @@ function EditContainer(props) {
     className: classnames('dnb-forms-section-edit-block', className)
   }, restProps), React.createElement(Flex.Stack, null, title && React.createElement(Lead, {
     size: "basis"
-  }, title), children, React.createElement(Toolbar, null, React.createElement(EditToolbarTools, {
+  }, title), children, hasToolbar ? null : React.createElement(Toolbar, {
     onDone: onDone,
     onCancel: onCancel
-  })))));
+  }, _DoneButton || (_DoneButton = React.createElement(DoneButton, null)), _CancelButton || (_CancelButton = React.createElement(CancelButton, null))))));
 }
+EditContainer.DoneButton = DoneButton;
+EditContainer.CancelButton = CancelButton;
 EditContainer._supportsSpacingProps = true;
 export default EditContainer;
 //# sourceMappingURL=EditContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditContainer.js","names":["React","useCallback","useContext","useMemo","useRef","classnames","convertJsxToString","Flex","Lead","FieldBoundaryProvider","SectionContainerContext","EditToolbarTools","SectionContainer","Toolbar","EditContainer","props","_ref","children","className","title","onDone","onCancel","restProps","_objectWithoutProperties","_excluded","ariaLabel","containerMode","initialContainerMode","validateInitially","switchContainerMode","omitFocusManagementRef","onPathError","path","error","Error","current","createElement","showErrors","_extends","mode","Stack","size","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditContainer.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } 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 FieldBoundaryProvider from '../../../DataContext/FieldBoundary/FieldBoundaryProvider'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport EditToolbarTools from './EditToolbarTools'\nimport SectionContainer, {\n  SectionContainerProps,\n} from '../containers/SectionContainer'\nimport Toolbar from '../containers/Toolbar'\nimport { Path } from '../../../types'\n\nexport type Props = {\n  title?: React.ReactNode\n  onDone?: () => void\n  onCancel?: () => void\n}\n\nexport type AllProps = Props & SectionContainerProps & FlexContainerProps\n\nfunction EditContainer(props: AllProps) {\n  const { children, className, title, onDone, onCancel, ...restProps } =\n    props || {}\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n  const {\n    containerMode,\n    initialContainerMode,\n    validateInitially,\n    switchContainerMode,\n  } = useContext(SectionContainerContext) || {}\n  const omitFocusManagementRef = useRef(false)\n\n  const onPathError = useCallback(\n    (path: Path, error: Error) => {\n      if (\n        initialContainerMode === 'auto' &&\n        containerMode !== 'edit' &&\n        error instanceof Error\n      ) {\n        omitFocusManagementRef.current = true\n        switchContainerMode?.('edit')\n      }\n    },\n    [containerMode, initialContainerMode, switchContainerMode]\n  )\n\n  return (\n    <FieldBoundaryProvider\n      showErrors={validateInitially}\n      onPathError={onPathError}\n    >\n      <SectionContainer\n        mode=\"edit\"\n        ariaLabel={ariaLabel}\n        omitFocusManagementRef={omitFocusManagementRef}\n        className={classnames('dnb-forms-section-edit-block', className)}\n        {...restProps}\n      >\n        <Flex.Stack>\n          {title && <Lead size=\"basis\">{title}</Lead>}\n          {children}\n          <Toolbar>\n            <EditToolbarTools onDone={onDone} onCancel={onCancel} />\n          </Toolbar>\n        </Flex.Stack>\n      </SectionContainer>\n    </FieldBoundaryProvider>\n  )\n}\n\nEditContainer._supportsSpacingProps = true\nexport default EditContainer\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,wCAAwC;AAC3E,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,OAAOC,qBAAqB,MAAM,0DAA0D;AAC5F,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,gBAAgB,MAEhB,gCAAgC;AACvC,OAAOC,OAAO,MAAM,uBAAuB;AAW3C,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAAC,IAAA,GACED,KAAK,IAAI,CAAC,CAAC;IADP;MAAEE,QAAQ;MAAEC,SAAS;MAAEC,KAAK;MAAEC,MAAM;MAAEC;IAAuB,CAAC,GAAAL,IAAA;IAAXM,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAElE,MAAMC,SAAS,GAAGtB,OAAO,CAAC,MAAMG,kBAAkB,CAACa,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACnE,MAAM;IACJO,aAAa;IACbC,oBAAoB;IACpBC,iBAAiB;IACjBC;EACF,CAAC,GAAG3B,UAAU,CAACQ,uBAAuB,CAAC,IAAI,CAAC,CAAC;EAC7C,MAAMoB,sBAAsB,GAAG1B,MAAM,CAAC,KAAK,CAAC;EAE5C,MAAM2B,WAAW,GAAG9B,WAAW,CAC7B,CAAC+B,IAAU,EAAEC,KAAY,KAAK;IAC5B,IACEN,oBAAoB,KAAK,MAAM,IAC/BD,aAAa,KAAK,MAAM,IACxBO,KAAK,YAAYC,KAAK,EACtB;MACAJ,sBAAsB,CAACK,OAAO,GAAG,IAAI;MACrCN,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;IAC/B;EACF,CAAC,EACD,CAACH,aAAa,EAAEC,oBAAoB,EAAEE,mBAAmB,CAC3D,CAAC;EAED,OACE7B,KAAA,CAAAoC,aAAA,CAAC3B,qBAAqB;IACpB4B,UAAU,EAAET,iBAAkB;IAC9BG,WAAW,EAAEA;EAAY,GAEzB/B,KAAA,CAAAoC,aAAA,CAACxB,gBAAgB,EAAA0B,QAAA;IACfC,IAAI,EAAC,MAAM;IACXd,SAAS,EAAEA,SAAU;IACrBK,sBAAsB,EAAEA,sBAAuB;IAC/CZ,SAAS,EAAEb,UAAU,CAAC,8BAA8B,EAAEa,SAAS;EAAE,GAC7DI,SAAS,GAEbtB,KAAA,CAAAoC,aAAA,CAAC7B,IAAI,CAACiC,KAAK,QACRrB,KAAK,IAAInB,KAAA,CAAAoC,aAAA,CAAC5B,IAAI;IAACiC,IAAI,EAAC;EAAO,GAAEtB,KAAY,CAAC,EAC1CF,QAAQ,EACTjB,KAAA,CAAAoC,aAAA,CAACvB,OAAO,QACNb,KAAA,CAAAoC,aAAA,CAACzB,gBAAgB;IAACS,MAAM,EAAEA,MAAO;IAACC,QAAQ,EAAEA;EAAS,CAAE,CAChD,CACC,CACI,CACG,CAAC;AAE5B;AAEAP,aAAa,CAAC4B,qBAAqB,GAAG,IAAI;AAC1C,eAAe5B,aAAa"}
+{"version":3,"file":"EditContainer.js","names":["React","useCallback","useContext","useMemo","useRef","classnames","convertJsxToString","Flex","Lead","FieldBoundaryProvider","SectionContainerContext","Toolbar","DoneButton","CancelButton","SectionContainer","EditContainer","props","_ref","children","className","title","onDone","onCancel","restProps","_objectWithoutProperties","_excluded","ariaLabel","containerMode","initialContainerMode","validateInitially","switchContainerMode","omitFocusManagementRef","onPathError","path","error","Error","current","hasToolbar","Children","toArray","some","child","createElement","showErrors","_extends","mode","Stack","size","_DoneButton","_CancelButton","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditContainer.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } 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 FieldBoundaryProvider from '../../../DataContext/FieldBoundary/FieldBoundaryProvider'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport Toolbar from '../Toolbar/Toolbar'\nimport DoneButton from './DoneButton'\nimport CancelButton from './CancelButton'\nimport SectionContainer, {\n  SectionContainerProps,\n} from '../containers/SectionContainer'\nimport { Path } from '../../../types'\n\nexport type Props = {\n  title?: React.ReactNode\n  onDone?: () => void\n  onCancel?: () => void\n}\n\nexport type AllProps = Props & SectionContainerProps & FlexContainerProps\n\nfunction EditContainer(props: AllProps) {\n  const { children, className, title, onDone, onCancel, ...restProps } =\n    props || {}\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n  const {\n    containerMode,\n    initialContainerMode,\n    validateInitially,\n    switchContainerMode,\n  } = useContext(SectionContainerContext) || {}\n  const omitFocusManagementRef = useRef(false)\n\n  const onPathError = useCallback(\n    (path: Path, error: Error) => {\n      if (\n        initialContainerMode === 'auto' &&\n        containerMode !== 'edit' &&\n        error instanceof Error\n      ) {\n        omitFocusManagementRef.current = true\n        switchContainerMode?.('edit')\n      }\n    },\n    [containerMode, initialContainerMode, switchContainerMode]\n  )\n\n  const hasToolbar = React.Children.toArray(children).some((child) => {\n    return child?.['type'] === Toolbar\n  })\n\n  return (\n    <FieldBoundaryProvider\n      showErrors={validateInitially}\n      onPathError={onPathError}\n    >\n      <SectionContainer\n        mode=\"edit\"\n        ariaLabel={ariaLabel}\n        omitFocusManagementRef={omitFocusManagementRef}\n        className={classnames('dnb-forms-section-edit-block', className)}\n        {...restProps}\n      >\n        <Flex.Stack>\n          {title && <Lead size=\"basis\">{title}</Lead>}\n          {children}\n          {hasToolbar ? null : (\n            <Toolbar onDone={onDone} onCancel={onCancel}>\n              <DoneButton />\n              <CancelButton />\n            </Toolbar>\n          )}\n        </Flex.Stack>\n      </SectionContainer>\n    </FieldBoundaryProvider>\n  )\n}\n\nEditContainer.DoneButton = DoneButton\nEditContainer.CancelButton = CancelButton\nEditContainer._supportsSpacingProps = true\nexport default EditContainer\n"],"mappings":"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"}

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

@@ -9,7 +9,7 @@ export const EditContainerProperties = {
     type: 'string',
     status: 'optional'
   },
-  '[FlexVertical](/uilib/layout/flex/container/)': {
+  '[FlexVertical](/uilib/layout/flex/container/properties)': {
     doc: 'All Flex.Vertical properties.',
     type: 'Various',
     status: 'optional'

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

@@ -1 +1 @@
-{"version":3,"file":"EditContainerDocs.js","names":["EditContainerProperties","title","doc","type","status","variant","EditContainerEvents","onDone","onCancel"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../../shared/types'\n\nexport const EditContainerProperties: 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\n  '[FlexVertical](/uilib/layout/flex/container/)': {\n    doc: 'All Flex.Vertical properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const EditContainerEvents: PropertiesTableProps = {\n  onDone: {\n    doc: 'Callback for the done button.',\n    type: 'Function',\n    status: 'optional',\n  },\n  onCancel: {\n    doc: 'Callback for the cancel button.',\n    type: 'Function',\n    status: 'optional',\n  },\n}\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;EAED,+CAA+C,EAAE;IAC/CF,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAME,mBAAyC,GAAG;EACvDC,MAAM,EAAE;IACNL,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"EditContainerDocs.js","names":["EditContainerProperties","title","doc","type","status","variant","EditContainerEvents","onDone","onCancel"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../../shared/types'\n\nexport const EditContainerProperties: 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\n  '[FlexVertical](/uilib/layout/flex/container/properties)': {\n    doc: 'All Flex.Vertical properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const EditContainerEvents: PropertiesTableProps = {\n  onDone: {\n    doc: 'Callback for the done button.',\n    type: 'Function',\n    status: 'optional',\n  },\n  onCancel: {\n    doc: 'Callback for the cancel button.',\n    type: 'Function',\n    status: 'optional',\n  },\n}\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;EAED,yDAAyD,EAAE;IACzDF,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAME,mBAAyC,GAAG;EACvDC,MAAM,EAAE;IACNL,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -2,10 +2,11 @@ import React from 'react';
 import { SectionContextState } from './SectionContext';
 import type { Props as DataContextProps } from '../../DataContext/Provider';
 import type { ContainerMode } from './containers/SectionContainer';
-import type { FieldBlockProps, Path, FieldProps } from '../../types';
+import type { Path, FieldProps } from '../../types';
 import type { JsonObject } from '../../utils/json-pointer';
+import type { SharedFieldBlockProps } from '../../FieldBlock';
 export type OverwritePropsDefaults = {
-    [key: Path]: (FieldProps & FieldBlockProps) | OverwritePropsDefaults;
+    [key: Path]: (FieldProps & SharedFieldBlockProps) | OverwritePropsDefaults;
 };
 export type SectionProps<overwriteProps = OverwritePropsDefaults> = {
     /**
@@ -43,6 +44,7 @@ export type LocalProps = SectionProps & {
 };
 declare function SectionComponent(props: LocalProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SectionComponent {
+    var Toolbar: typeof import("./Toolbar").default;
     var ViewContainer: typeof import("./ViewContainer/ViewContainer").default;
     var EditContainer: typeof import("./EditContainer/EditContainer").default;
     var _supportsSpacingProps: any;

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

@@ -12,6 +12,7 @@ import FieldPropsProvider from '../../Field/Provider';
 import SectionContainerProvider from './containers/SectionContainerProvider';
 import ViewContainer from './ViewContainer';
 import EditContainer from './EditContainer';
+import Toolbar from './Toolbar';
 function SectionComponent(props) {
   var _path$startsWith, _nestedProps$overwrit;
   const {
@@ -66,6 +67,7 @@ function SectionComponent(props) {
     translations: translations
   }, fieldProps), children)));
 }
+SectionComponent.Toolbar = Toolbar;
 SectionComponent.ViewContainer = ViewContainer;
 SectionComponent.EditContainer = EditContainer;
 SectionComponent._supportsSpacingProps = undefined;

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","SectionContainerProvider","ViewContainer","EditContainer","SectionComponent","props","_path$startsWith","_nestedProps$overwrit","path","overwriteProps","translations","required","data","defaultData","validateInitially","containerMode","onChange","errorPrioritization","children","startsWith","call","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 '../../Field/Provider'\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  FieldBlockProps,\n  Path,\n  FieldProps,\n  OnChange,\n} from '../../types'\nimport type { JsonObject } from '../../utils/json-pointer'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]: (FieldProps & FieldBlockProps) | 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   * If set to `true`, the whole section will be validated initially. All fields will then automatically get `validateInitially` and show their error messages. Can be useful in combination with `containerMode=\"auto\"`.\n   */\n  validateInitially?: boolean\n\n  /**\n   * Defines the container mode. Can be `view`, `edit` or `auto`.\n   * When set to `auto`, the mode will initially be \"edit\" if fields contain errors.\n   * Defaults to `auto`.\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<JsonObject>,\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    validateInitially,\n    containerMode = 'auto',\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>(\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\n        validateInitially={validateInitially}\n        containerMode={containerMode}\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      </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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"}
+{"version":3,"file":"Section.js","names":["React","useCallback","useContext","useMemo","SectionContext","DataContext","Provider","FieldPropsProvider","SectionContainerProvider","ViewContainer","EditContainer","Toolbar","SectionComponent","props","_path$startsWith","_nestedProps$overwrit","path","overwriteProps","translations","required","data","defaultData","validateInitially","containerMode","onChange","errorPrioritization","children","startsWith","call","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 '../../Field/Provider'\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 { Path, FieldProps, OnChange } from '../../types'\nimport type { JsonObject } from '../../utils/json-pointer'\nimport type { SharedFieldBlockProps } from '../../FieldBlock'\nimport Toolbar from './Toolbar'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]:\n    | (FieldProps & SharedFieldBlockProps)\n    | 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   * If set to `true`, the whole section will be validated initially. All fields will then automatically get `validateInitially` and show their error messages. Can be useful in combination with `containerMode=\"auto\"`.\n   */\n  validateInitially?: boolean\n\n  /**\n   * Defines the container mode. Can be `view`, `edit` or `auto`.\n   * When set to `auto`, the mode will initially be \"edit\" if fields contain errors.\n   * Defaults to `auto`.\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<JsonObject>,\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    validateInitially,\n    containerMode = 'auto',\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>(\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\n        validateInitially={validateInitially}\n        containerMode={containerMode}\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      </SectionContainerProvider>\n    </SectionContext.Provider>\n  )\n}\n\nSectionComponent.Toolbar = Toolbar\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/Toolbar/Toolbar.d.ts

@@ -0,0 +1,7 @@
+import { SpaceAllProps } from '../../../../../components/Space';
+export type Props = SpaceAllProps & {
+    onEdit?: () => void;
+    onDone?: () => void;
+    onCancel?: () => void;
+};
+export default function Toolbar(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,59 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _Hr;
+const _excluded = ["children", "className", "onEdit", "onDone", "onCancel"];
+import React, { useContext, useEffect, useState } from 'react';
+import classnames from 'classnames';
+import { useTranslation } from '../../../hooks';
+import ToolbarContext from './ToolbarContext';
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
+import { Hr } from '../../../../../elements';
+import { Flex, FormStatus } from '../../../../../components';
+import Space from '../../../../../components/Space';
+export default function Toolbar(props) {
+  const {
+    errorInSection
+  } = useTranslation().SectionEditContainer;
+  const {
+      children,
+      className,
+      onEdit,
+      onDone,
+      onCancel
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const {
+    hasError,
+    hasVisibleError
+  } = useContext(FieldBoundaryContext) || {};
+  const [showError, setShowError] = useState(false);
+  useEffect(() => {
+    if (showError && !hasError) {
+      setShowError(false);
+    }
+  }, [hasError, showError]);
+  return React.createElement(Space, _extends({
+    className: classnames('dnb-forms-section-toolbar', className)
+  }, rest), _Hr || (_Hr = React.createElement(Hr, {
+    space: 0
+  })), React.createElement(ToolbarContext.Provider, {
+    value: {
+      setShowError,
+      onEdit,
+      onDone,
+      onCancel
+    }
+  }, React.createElement(Flex.Horizontal, {
+    top: "x-small",
+    gap: "large"
+  }, children)), React.createElement(FormStatus, {
+    show: showError && hasVisibleError,
+    shellSpace: {
+      top: 'x-small'
+    },
+    no_animation: false
+  }, errorInSection));
+}
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":["React","useContext","useEffect","useState","classnames","useTranslation","ToolbarContext","FieldBoundaryContext","Hr","Flex","FormStatus","Space","Toolbar","props","errorInSection","SectionEditContainer","children","className","onEdit","onDone","onCancel","rest","_objectWithoutProperties","_excluded","hasError","hasVisibleError","showError","setShowError","createElement","_extends","_Hr","space","Provider","value","Horizontal","top","gap","show","shellSpace","no_animation"],"sources":["../../../../../../../src/extensions/forms/Form/Section/Toolbar/Toolbar.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react'\nimport classnames from 'classnames'\nimport { useTranslation } from '../../../hooks'\nimport ToolbarContext from './ToolbarContext'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { Hr } from '../../../../../elements'\nimport { Flex, FormStatus } from '../../../../../components'\nimport Space, { SpaceAllProps } from '../../../../../components/Space'\n\nexport type Props = SpaceAllProps & {\n  onEdit?: () => void\n  onDone?: () => void\n  onCancel?: () => void\n}\n\nexport default function Toolbar(props: Props) {\n  const { errorInSection } = useTranslation().SectionEditContainer\n  const { children, className, onEdit, onDone, onCancel, ...rest } = props\n\n  const { hasError, hasVisibleError } =\n    useContext(FieldBoundaryContext) || {}\n  const [showError, setShowError] = useState(false)\n\n  useEffect(() => {\n    if (showError && !hasError) {\n      setShowError(false)\n    }\n  }, [hasError, showError])\n\n  return (\n    <Space\n      className={classnames('dnb-forms-section-toolbar', className)}\n      {...rest}\n    >\n      <Hr space={0} />\n\n      <ToolbarContext.Provider\n        value={{ setShowError, onEdit, onDone, onCancel }}\n      >\n        <Flex.Horizontal top=\"x-small\" gap=\"large\">\n          {children}\n        </Flex.Horizontal>\n      </ToolbarContext.Provider>\n\n      <FormStatus\n        show={showError && hasVisibleError}\n        shellSpace={{ top: 'x-small' }}\n        no_animation={false}\n      >\n        {errorInSection}\n      </FormStatus>\n    </Space>\n  )\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,oBAAoB,MAAM,yDAAyD;AAC1F,SAASC,EAAE,QAAQ,yBAAyB;AAC5C,SAASC,IAAI,EAAEC,UAAU,QAAQ,2BAA2B;AAC5D,OAAOC,KAAK,MAAyB,iCAAiC;AAQtE,eAAe,SAASC,OAAOA,CAACC,KAAY,EAAE;EAC5C,MAAM;IAAEC;EAAe,CAAC,GAAGT,cAAc,CAAC,CAAC,CAACU,oBAAoB;EAChE,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAkB,CAAC,GAAGP,KAAK;IAAdQ,IAAI,GAAAC,wBAAA,CAAKT,KAAK,EAAAU,SAAA;EAExE,MAAM;IAAEC,QAAQ;IAAEC;EAAgB,CAAC,GACjCxB,UAAU,CAACM,oBAAoB,CAAC,IAAI,CAAC,CAAC;EACxC,MAAM,CAACmB,SAAS,EAAEC,YAAY,CAAC,GAAGxB,QAAQ,CAAC,KAAK,CAAC;EAEjDD,SAAS,CAAC,MAAM;IACd,IAAIwB,SAAS,IAAI,CAACF,QAAQ,EAAE;MAC1BG,YAAY,CAAC,KAAK,CAAC;IACrB;EACF,CAAC,EAAE,CAACH,QAAQ,EAAEE,SAAS,CAAC,CAAC;EAEzB,OACE1B,KAAA,CAAA4B,aAAA,CAACjB,KAAK,EAAAkB,QAAA;IACJZ,SAAS,EAAEb,UAAU,CAAC,2BAA2B,EAAEa,SAAS;EAAE,GAC1DI,IAAI,GAAAS,GAAA,KAAAA,GAAA,GAER9B,KAAA,CAAA4B,aAAA,CAACpB,EAAE;IAACuB,KAAK,EAAE;EAAE,CAAE,CAAC,GAEhB/B,KAAA,CAAA4B,aAAA,CAACtB,cAAc,CAAC0B,QAAQ;IACtBC,KAAK,EAAE;MAAEN,YAAY;MAAET,MAAM;MAAEC,MAAM;MAAEC;IAAS;EAAE,GAElDpB,KAAA,CAAA4B,aAAA,CAACnB,IAAI,CAACyB,UAAU;IAACC,GAAG,EAAC,SAAS;IAACC,GAAG,EAAC;EAAO,GACvCpB,QACc,CACM,CAAC,EAE1BhB,KAAA,CAAA4B,aAAA,CAAClB,UAAU;IACT2B,IAAI,EAAEX,SAAS,IAAID,eAAgB;IACnCa,UAAU,EAAE;MAAEH,GAAG,EAAE;IAAU,CAAE;IAC/BI,YAAY,EAAE;EAAM,GAEnBzB,cACS,CACP,CAAC;AAEZ"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ToolbarContextState {
+    setShowError: (showError: boolean) => void;
+    onEdit?: () => void;
+    onDone?: () => void;
+    onCancel?: () => void;
+}
+declare const ToolbarContext: React.Context<ToolbarContextState>;
+export default ToolbarContext;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+const ToolbarContext = React.createContext(undefined);
+export default ToolbarContext;
+//# sourceMappingURL=ToolbarContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarContext.js","names":["React","ToolbarContext","createContext","undefined"],"sources":["../../../../../../../src/extensions/forms/Form/Section/Toolbar/ToolbarContext.ts"],"sourcesContent":["import React from 'react'\n\nexport interface ToolbarContextState {\n  setShowError: (showError: boolean) => void\n  onEdit?: () => void\n  onDone?: () => void\n  onCancel?: () => void\n}\n\nconst ToolbarContext = React.createContext<\n  ToolbarContextState | undefined\n>(undefined)\n\nexport default ToolbarContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,MAAMC,cAAc,GAAGD,KAAK,CAACE,aAAa,CAExCC,SAAS,CAAC;AAEZ,eAAeF,cAAc"}

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

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

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

@@ -0,0 +1,3 @@
+export const ToolbarProperties = {};
+export const ToolbarEvents = {};
+//# sourceMappingURL=ToolbarDocs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDocs.js","names":["ToolbarProperties","ToolbarEvents"],"sources":["../../../../../../../src/extensions/forms/Form/Section/Toolbar/ToolbarDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../../shared/types'\n\nexport const ToolbarProperties: PropertiesTableProps = {}\n\nexport const ToolbarEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,iBAAuC,GAAG,CAAC,CAAC;AAEzD,OAAO,MAAMC,aAAmC,GAAG,CAAC,CAAC"}

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

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

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

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

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

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

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

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

package/es/extensions/forms/Form/Section/ViewContainer/{ViewToolbarTools.js → EditButton.js}

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