@dnb/eufemia 10.31.0 → 10.33.0

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

@@ -1 +1 @@
-:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block{width:100%}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}

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

@@ -24,8 +24,6 @@ fieldset.dnb-forms-field-block {
 }
 
 .dnb-forms-field-block {
-  width: 100%;
-
   &__grid {
     display: grid;
   }

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

@@ -15,7 +15,7 @@ export default function FormElement(_ref) {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const dataContext = React.useContext(Context);
-  dataContext._isInsideFormElement = true;
+  dataContext.isInsideFormElement = true;
   return React.createElement(Space, _extends({
     element: "form",
     className: classnames('dnb-forms-form', className),

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

@@ -1 +1 @@
-{"version":3,"file":"Element.js","names":["React","Context","Space","classnames","FormElement","_ref","children","className","onSubmit","rest","_objectWithoutProperties","_excluded","dataContext","useContext","_isInsideFormElement","createElement","_extends","element","onSubmitHandler","event","_dataContext$handleSu","preventDefault","formElement","target","handleSubmit","call"],"sources":["../../../../../../src/extensions/forms/Form/Element/Element.tsx"],"sourcesContent":["import React from 'react'\nimport Context from '../../DataContext/Context'\nimport Space from '../../../../components/space/Space'\nimport classnames from 'classnames'\nimport type { SpacingProps } from '../../../../shared/types'\n\nexport type Props = React.HTMLAttributes<HTMLFormElement> & SpacingProps\n\nexport default function FormElement({\n  children,\n  className = null,\n  onSubmit = null,\n  ...rest\n}: Props) {\n  const dataContext = React.useContext(Context)\n\n  /**\n   * Set to true,\n   * this way we prevent \"handleSubmit\" to be called twice when the SubmitButton is pressed.\n   */\n  dataContext._isInsideFormElement = true\n\n  return (\n    <Space\n      element=\"form\"\n      className={classnames('dnb-forms-form', className)}\n      onSubmit={onSubmitHandler}\n      {...rest}\n    >\n      {children}\n    </Space>\n  )\n\n  function onSubmitHandler(event: React.SyntheticEvent<HTMLFormElement>) {\n    event?.preventDefault()\n\n    const formElement = event.target as HTMLFormElement\n    dataContext?.handleSubmit?.({ formElement })\n\n    if (typeof onSubmit === 'function') {\n      onSubmit(event)\n    }\n  }\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,2BAA2B;AAC/C,OAAOC,KAAK,MAAM,oCAAoC;AACtD,OAAOC,UAAU,MAAM,YAAY;AAKnC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAKzB;EAAA,IAL0B;MAClCC,QAAQ;MACRC,SAAS,GAAG,IAAI;MAChBC,QAAQ,GAAG;IAEN,CAAC,GAAAH,IAAA;IADHI,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,MAAMC,WAAW,GAAGZ,KAAK,CAACa,UAAU,CAACZ,OAAO,CAAC;EAM7CW,WAAW,CAACE,oBAAoB,GAAG,IAAI;EAEvC,OACEd,KAAA,CAAAe,aAAA,CAACb,KAAK,EAAAc,QAAA;IACJC,OAAO,EAAC,MAAM;IACdV,SAAS,EAAEJ,UAAU,CAAC,gBAAgB,EAAEI,SAAS,CAAE;IACnDC,QAAQ,EAAEU;EAAgB,GACtBT,IAAI,GAEPH,QACI,CAAC;EAGV,SAASY,eAAeA,CAACC,KAA4C,EAAE;IAAA,IAAAC,qBAAA;IACrED,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,cAAc,CAAC,CAAC;IAEvB,MAAMC,WAAW,GAAGH,KAAK,CAACI,MAAyB;IACnDX,WAAW,aAAXA,WAAW,wBAAAQ,qBAAA,GAAXR,WAAW,CAAEY,YAAY,cAAAJ,qBAAA,uBAAzBA,qBAAA,CAAAK,IAAA,CAAAb,WAAW,EAAiB;MAAEU;IAAY,CAAC,CAAC;IAE5C,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAACW,KAAK,CAAC;IACjB;EACF;AACF"}
+{"version":3,"file":"Element.js","names":["React","Context","Space","classnames","FormElement","_ref","children","className","onSubmit","rest","_objectWithoutProperties","_excluded","dataContext","useContext","isInsideFormElement","createElement","_extends","element","onSubmitHandler","event","_dataContext$handleSu","preventDefault","formElement","target","handleSubmit","call"],"sources":["../../../../../../src/extensions/forms/Form/Element/Element.tsx"],"sourcesContent":["import React from 'react'\nimport Context from '../../DataContext/Context'\nimport Space from '../../../../components/space/Space'\nimport classnames from 'classnames'\nimport type { SpacingProps } from '../../../../shared/types'\n\nexport type Props = React.HTMLAttributes<HTMLFormElement> & SpacingProps\n\nexport default function FormElement({\n  children,\n  className = null,\n  onSubmit = null,\n  ...rest\n}: Props) {\n  const dataContext = React.useContext(Context)\n\n  /**\n   * Set to true,\n   * this way we prevent \"handleSubmit\" to be called twice when the SubmitButton is pressed.\n   */\n  dataContext.isInsideFormElement = true\n\n  return (\n    <Space\n      element=\"form\"\n      className={classnames('dnb-forms-form', className)}\n      onSubmit={onSubmitHandler}\n      {...rest}\n    >\n      {children}\n    </Space>\n  )\n\n  function onSubmitHandler(event: React.SyntheticEvent<HTMLFormElement>) {\n    event?.preventDefault()\n\n    const formElement = event.target as HTMLFormElement\n    dataContext?.handleSubmit?.({ formElement })\n\n    if (typeof onSubmit === 'function') {\n      onSubmit(event)\n    }\n  }\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,2BAA2B;AAC/C,OAAOC,KAAK,MAAM,oCAAoC;AACtD,OAAOC,UAAU,MAAM,YAAY;AAKnC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAKzB;EAAA,IAL0B;MAClCC,QAAQ;MACRC,SAAS,GAAG,IAAI;MAChBC,QAAQ,GAAG;IAEN,CAAC,GAAAH,IAAA;IADHI,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,MAAMC,WAAW,GAAGZ,KAAK,CAACa,UAAU,CAACZ,OAAO,CAAC;EAM7CW,WAAW,CAACE,mBAAmB,GAAG,IAAI;EAEtC,OACEd,KAAA,CAAAe,aAAA,CAACb,KAAK,EAAAc,QAAA;IACJC,OAAO,EAAC,MAAM;IACdV,SAAS,EAAEJ,UAAU,CAAC,gBAAgB,EAAEI,SAAS,CAAE;IACnDC,QAAQ,EAAEU;EAAgB,GACtBT,IAAI,GAEPH,QACI,CAAC;EAGV,SAASY,eAAeA,CAACC,KAA4C,EAAE;IAAA,IAAAC,qBAAA;IACrED,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,cAAc,CAAC,CAAC;IAEvB,MAAMC,WAAW,GAAGH,KAAK,CAACI,MAAyB;IACnDX,WAAW,aAAXA,WAAW,wBAAAQ,qBAAA,GAAXR,WAAW,CAAEY,YAAY,cAAAJ,qBAAA,uBAAzBA,qBAAA,CAAAK,IAAA,CAAAb,WAAW,EAAiB;MAAEU;IAAY,CAAC,CAAC;IAE5C,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAACW,KAAK,CAAC;IACjB;EACF;AACF"}

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

@@ -1,15 +1,29 @@
 import React from 'react';
 import { Props as DataContextProps } from '../../DataContext/Provider';
-import { UseFieldProps } from '../../types';
 import { FormStatusProps } from '../../../../components/FormStatus';
 import { ContextProps } from '../../../../shared/Context';
-export type FieldPropsProps = UseFieldProps & {
+import type { FieldProps, Path } from '../../types';
+export type FieldPropsProps = FieldProps & {
     children: React.ReactNode;
+    /**
+     * Locale to use for all nested Eufemia components
+     */
+    locale?: DataContextProps<unknown>['locale'];
+    /**
+     * Provide your own translations. Use the same format as defined in the translation files
+     */
+    translations?: DataContextProps<unknown>['translations'];
+    /** For internal use only */
+    overwriteProps?: {
+        [key: Path]: FieldProps;
+    };
+    /** For internal use only */
+    deep?: boolean;
+    /** For internal use only */
     formElement?: ContextProps['formElement'];
+    /** For internal use only */
     FormStatus?: {
         globalStatus: FormStatusProps;
     };
-    locale?: DataContextProps<unknown>['locale'];
-    translations?: DataContextProps<unknown>['translations'];
 };
-export default function FieldProps(props: FieldPropsProps): import("react/jsx-runtime").JSX.Element;
+export default function FieldPropsProvider(props: FieldPropsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,33 +1,40 @@
 "use client";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "formElement", "FormStatus"],
-  _excluded2 = ["locale", "translations"];
-import React, { useContext, useRef } from 'react';
+const _excluded = ["children", "formElement", "FormStatus", "overwriteProps", "deep"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
 import DataContext from '../../DataContext/Context';
 import { assignPropsWithContext } from '../../../../shared/component-helper';
 import FieldPropsContext from './FieldPropsContext';
 import SharedProvider from '../../../../shared/Provider';
-export default function FieldProps(props) {
+export default function FieldPropsProvider(props) {
   const {
       children,
       formElement,
-      FormStatus
+      FormStatus,
+      overwriteProps,
+      deep
     } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+    restProps = _objectWithoutProperties(props, _excluded);
   const nestedContext = useContext(FieldPropsContext);
   const dataContextRef = useRef();
   dataContextRef.current = useContext(DataContext);
   const sharedProviderProps = {};
-  const _ref = Object.assign((nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedContext) || {}, rest),
-    {
-      locale,
-      translations
-    } = _ref,
-    restOfRest = _objectWithoutProperties(_ref, _excluded2);
-  if (typeof restOfRest.disabled === 'boolean') {
+  const {
+    locale,
+    translations
+  } = useMemo(() => {
+    return _objectSpread(_objectSpread({}, restProps), removeUndefined(nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedProps));
+  }, [nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedProps, restProps]);
+  const nestedFieldProps = useMemo(() => {
+    return Object.assign((nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedProps) || {}, restProps);
+  }, [nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedProps, restProps]);
+  if (typeof nestedFieldProps.disabled === 'boolean') {
     sharedProviderProps.formElement = {
-      disabled: restOfRest.disabled
+      disabled: nestedFieldProps.disabled
     };
   }
   if (formElement) {
@@ -42,18 +49,30 @@ export default function FieldProps(props) {
   if (translations) {
     sharedProviderProps.translations = wrapFormsTranslations(translations);
   }
-  function extend(fieldProps) {
+  const extend = useCallback(fieldProps => {
+    var _fieldProps$path, _fieldProps$path$spli, _nestedContext$inheri;
     const {
-      required
+      required: requiredByContext
     } = dataContextRef.current;
-    return nestedContext.extend(assignPropsWithContext(fieldProps, {
-      required
-    }, restOfRest));
-  }
+    const key = fieldProps === null || fieldProps === void 0 ? void 0 : (_fieldProps$path = fieldProps.path) === null || _fieldProps$path === void 0 ? void 0 : (_fieldProps$path$spli = _fieldProps$path.split('/')) === null || _fieldProps$path$spli === void 0 ? void 0 : _fieldProps$path$spli.pop();
+    const overwrite = overwriteProps === null || overwriteProps === void 0 ? void 0 : overwriteProps[key];
+    if (overwrite && fieldProps !== null && fieldProps !== void 0 && fieldProps.schema) {
+      Object.keys(fieldProps.schema).forEach(key => {
+        if (overwrite !== null && overwrite !== void 0 && overwrite[key]) {
+          fieldProps.schema[key] = overwrite[key];
+        }
+      });
+    }
+    const value = assignPropsWithContext(overwrite ? _objectSpread(_objectSpread({}, fieldProps), overwrite) : fieldProps, {
+      required: requiredByContext !== null && requiredByContext !== void 0 ? requiredByContext : nestedContext === null || nestedContext === void 0 ? void 0 : (_nestedContext$inheri = nestedContext.inheritedContext) === null || _nestedContext$inheri === void 0 ? void 0 : _nestedContext$inheri.required
+    }, nestedFieldProps);
+    return deep ? nestedContext.extend(value) : value;
+  }, [deep, nestedContext, overwriteProps, nestedFieldProps]);
   return React.createElement(FieldPropsContext.Provider, {
     value: {
       extend,
-      inheritedContext: rest
+      inheritedProps: restProps,
+      inheritedContext: nestedFieldProps
     }
   }, React.createElement(SharedProvider, sharedProviderProps, children));
 }
@@ -75,4 +94,13 @@ function wrapFormsTranslations(translations) {
   }
   return result;
 }
+function removeUndefined(obj = {}) {
+  const result = {};
+  for (const key in obj) {
+    if (obj[key] !== undefined) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
 //# sourceMappingURL=FieldProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldProps.js","names":["React","useContext","useRef","DataContext","assignPropsWithContext","FieldPropsContext","SharedProvider","FieldProps","props","children","formElement","FormStatus","rest","_objectWithoutProperties","_excluded","nestedContext","dataContextRef","current","sharedProviderProps","_ref","Object","assign","inheritedContext","locale","translations","restOfRest","_excluded2","disabled","wrapFormsTranslations","extend","fieldProps","required","createElement","Provider","value","result","trObj","newObj","Forms","key","newKeyObj","subKey"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldProps.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport { Props as DataContextProps } from '../../DataContext/Provider'\nimport { UseFieldProps } from '../../types'\nimport { FormStatusProps } from '../../../../components/FormStatus'\nimport { assignPropsWithContext } from '../../../../shared/component-helper'\nimport FieldPropsContext from './FieldPropsContext'\nimport SharedProvider from '../../../../shared/Provider'\nimport { ContextProps } from '../../../../shared/Context'\n\nexport type FieldPropsProps = UseFieldProps & {\n  children: React.ReactNode\n  formElement?: ContextProps['formElement']\n  FormStatus?: { globalStatus: FormStatusProps }\n  locale?: DataContextProps<unknown>['locale']\n  translations?: DataContextProps<unknown>['translations']\n}\n\nexport default function FieldProps(props: FieldPropsProps) {\n  const { children, formElement, FormStatus, ...rest } = props\n\n  const nestedContext = useContext(FieldPropsContext)\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const sharedProviderProps: ContextProps = {}\n\n  // Extract props to be used in the shared global context\n  const { locale, translations, ...restOfRest } = Object.assign(\n    nestedContext?.inheritedContext || {},\n    rest\n  ) as ContextProps & {\n    disabled?: boolean\n  }\n  if (typeof restOfRest.disabled === 'boolean') {\n    sharedProviderProps.formElement = { disabled: restOfRest.disabled }\n  }\n  if (formElement) {\n    sharedProviderProps.formElement = formElement\n  }\n  if (FormStatus) {\n    sharedProviderProps.FormStatus = FormStatus\n  }\n  if (locale) {\n    sharedProviderProps.locale = locale\n  }\n  if (translations) {\n    sharedProviderProps.translations = wrapFormsTranslations(translations)\n  }\n\n  function extend<T>(fieldProps: T) {\n    // Extract props from data context to be used in fields\n    const { required } = dataContextRef.current\n\n    return nestedContext.extend(\n      assignPropsWithContext(fieldProps, { required }, restOfRest)\n    ) as T\n  }\n\n  return (\n    <FieldPropsContext.Provider value={{ extend, inheritedContext: rest }}>\n      <SharedProvider {...sharedProviderProps}>{children}</SharedProvider>\n    </FieldPropsContext.Provider>\n  )\n}\n\nfunction wrapFormsTranslations(\n  translations: ContextProps['translations']\n) {\n  const result = {}\n  const trObj = translations as Record<\n    ContextProps['locale'],\n    Record<string, Record<string, string>>\n  >\n\n  for (const locale in trObj) {\n    const newObj: Record<\n      'Forms',\n      Record<string, Record<string, string>>\n    > = {\n      Forms: {},\n    }\n\n    for (const key in trObj[locale]) {\n      const newKeyObj: Record<string, string> = {}\n\n      for (const subKey in trObj[locale][key]) {\n        newKeyObj[subKey] = trObj[locale][key][subKey]\n      }\n\n      newObj.Forms[key] = newKeyObj\n    }\n\n    result[locale] = newObj\n  }\n\n  return result\n}\n"],"mappings":"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"}
+{"version":3,"file":"FieldProps.js","names":["React","useCallback","useContext","useMemo","useRef","DataContext","assignPropsWithContext","FieldPropsContext","SharedProvider","FieldPropsProvider","props","children","formElement","FormStatus","overwriteProps","deep","restProps","_objectWithoutProperties","_excluded","nestedContext","dataContextRef","current","sharedProviderProps","locale","translations","_objectSpread","removeUndefined","inheritedProps","nestedFieldProps","Object","assign","disabled","wrapFormsTranslations","extend","fieldProps","_fieldProps$path","_fieldProps$path$spli","_nestedContext$inheri","required","requiredByContext","key","path","split","pop","overwrite","schema","keys","forEach","value","inheritedContext","createElement","Provider","result","trObj","newObj","Forms","newKeyObj","subKey","obj","undefined"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldProps.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport { Props as DataContextProps } from '../../DataContext/Provider'\nimport { FormStatusProps } from '../../../../components/FormStatus'\nimport { assignPropsWithContext } from '../../../../shared/component-helper'\nimport FieldPropsContext from './FieldPropsContext'\nimport SharedProvider from '../../../../shared/Provider'\nimport { ContextProps } from '../../../../shared/Context'\nimport type { FieldProps, Path, UseFieldProps } from '../../types'\n\nexport type FieldPropsProps = FieldProps & {\n  children: React.ReactNode\n\n  /**\n   * Locale to use for all nested Eufemia components\n   */\n  locale?: DataContextProps<unknown>['locale']\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translations?: DataContextProps<unknown>['translations']\n\n  /** For internal use only */\n  overwriteProps?: {\n    [key: Path]: FieldProps\n  }\n\n  /** For internal use only */\n  deep?: boolean\n\n  /** For internal use only */\n  formElement?: ContextProps['formElement']\n\n  /** For internal use only */\n  FormStatus?: { globalStatus: FormStatusProps }\n}\n\nexport default function FieldPropsProvider(props: FieldPropsProps) {\n  const {\n    children,\n    formElement,\n    FormStatus,\n    overwriteProps,\n    deep,\n    ...restProps\n  } = props\n\n  const nestedContext = useContext(FieldPropsContext)\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const sharedProviderProps: ContextProps = {}\n\n  // Extract props to be used in the shared global context\n  const { locale, translations } = useMemo(() => {\n    return {\n      ...restProps,\n      ...removeUndefined(nestedContext?.inheritedProps),\n    } as ContextProps\n  }, [nestedContext?.inheritedProps, restProps])\n\n  const nestedFieldProps = useMemo(() => {\n    return Object.assign(\n      nestedContext?.inheritedProps || {},\n      restProps\n    ) as UseFieldProps\n  }, [nestedContext?.inheritedProps, restProps])\n\n  if (typeof nestedFieldProps.disabled === 'boolean') {\n    sharedProviderProps.formElement = {\n      disabled: nestedFieldProps.disabled,\n    }\n  }\n  if (formElement) {\n    sharedProviderProps.formElement = formElement\n  }\n  if (FormStatus) {\n    sharedProviderProps.FormStatus = FormStatus\n  }\n  if (locale) {\n    sharedProviderProps.locale = locale\n  }\n  if (translations) {\n    sharedProviderProps.translations = wrapFormsTranslations(translations)\n  }\n\n  const extend = useCallback(\n    <T extends FieldProps>(fieldProps: T) => {\n      // Extract props from data context to be used in fields\n      const { required: requiredByContext } = dataContextRef.current\n\n      // Extract props from overwriteProps to be used in fields\n      const key = fieldProps?.path?.split('/')?.pop()\n      const overwrite = overwriteProps?.[key]\n\n      // Overwrite given schema props\n      if (overwrite && fieldProps?.schema) {\n        Object.keys(fieldProps.schema).forEach((key) => {\n          if (overwrite?.[key]) {\n            fieldProps.schema[key] = overwrite[key]\n          }\n        })\n      }\n\n      const value = assignPropsWithContext(\n        overwrite ? { ...fieldProps, ...overwrite } : fieldProps,\n        {\n          required:\n            requiredByContext ?? nestedContext?.inheritedContext?.required,\n        },\n        nestedFieldProps as Record<string, unknown>\n      )\n\n      return (deep ? nestedContext.extend(value) : value) as T\n    },\n    [deep, nestedContext, overwriteProps, nestedFieldProps]\n  )\n\n  return (\n    <FieldPropsContext.Provider\n      value={{\n        extend,\n        inheritedProps: restProps,\n        inheritedContext: nestedFieldProps,\n      }}\n    >\n      <SharedProvider {...sharedProviderProps}>{children}</SharedProvider>\n    </FieldPropsContext.Provider>\n  )\n}\n\nfunction wrapFormsTranslations(\n  translations: ContextProps['translations']\n) {\n  const result = {}\n  const trObj = translations as Record<\n    ContextProps['locale'],\n    Record<string, Record<string, string>>\n  >\n\n  for (const locale in trObj) {\n    const newObj: Record<\n      'Forms',\n      Record<string, Record<string, string>>\n    > = {\n      Forms: {},\n    }\n\n    for (const key in trObj[locale]) {\n      const newKeyObj: Record<string, string> = {}\n\n      for (const subKey in trObj[locale][key]) {\n        newKeyObj[subKey] = trObj[locale][key][subKey]\n      }\n\n      newObj.Forms[key] = newKeyObj\n    }\n\n    result[locale] = newObj\n  }\n\n  return result\n}\n\nfunction removeUndefined(obj = {}) {\n  const result = {}\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      result[key] = obj[key]\n    }\n  }\n  return result\n}\n"],"mappings":"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"}

package/es/extensions/forms/Form/FieldProps/FieldPropsContext.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { UseFieldProps } from '../../types';
 export type FieldPropsContextProps = {
     extend: <T = UseFieldProps>(props: T) => T;
+    inheritedProps?: UseFieldProps;
     inheritedContext?: UseFieldProps;
 };
 declare const FieldPropsContext: React.Context<FieldPropsContextProps>;

package/es/extensions/forms/Form/FieldProps/FieldPropsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldPropsContext.js","names":["React","extend","props","FieldPropsContext","createContext"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldPropsContext.ts"],"sourcesContent":["import React from 'react'\nimport { UseFieldProps } from '../../types'\n\nexport type FieldPropsContextProps = {\n  extend: <T = UseFieldProps>(props: T) => T\n  inheritedContext?: UseFieldProps\n}\n\nconst extend: FieldPropsContextProps['extend'] = (props) => props\nconst FieldPropsContext = React.createContext<FieldPropsContextProps>({\n  extend,\n})\n\nexport default FieldPropsContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,MAAwC,GAAIC,KAAK,IAAKA,KAAK;AACjE,MAAMC,iBAAiB,GAAGH,KAAK,CAACI,aAAa,CAAyB;EACpEH;AACF,CAAC,CAAC;AAEF,eAAeE,iBAAiB"}
+{"version":3,"file":"FieldPropsContext.js","names":["React","extend","props","FieldPropsContext","createContext"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldPropsContext.ts"],"sourcesContent":["import React from 'react'\nimport { UseFieldProps } from '../../types'\n\nexport type FieldPropsContextProps = {\n  extend: <T = UseFieldProps>(props: T) => T\n  inheritedProps?: UseFieldProps\n  inheritedContext?: UseFieldProps\n}\n\nconst extend: FieldPropsContextProps['extend'] = (props) => props\nconst FieldPropsContext = React.createContext<FieldPropsContextProps>({\n  extend,\n})\n\nexport default FieldPropsContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,MAAMC,MAAwC,GAAIC,KAAK,IAAKA,KAAK;AACjE,MAAMC,iBAAiB,GAAGH,KAAK,CAACI,aAAa,CAAyB;EACpEH;AACF,CAAC,CAAC;AAEF,eAAeE,iBAAiB"}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { SectionContextState } from './SectionContext';
+import type { Props as DataContextProps } from '../../DataContext/Provider';
+import type { FieldSectionProps, Path, FieldProps } from '../../types';
+export type OverwritePropsDefaults = {
+    [key: Path]: (FieldProps & FieldSectionProps) | OverwritePropsDefaults;
+};
+export type SectionProps<overwriteProps = OverwritePropsDefaults> = {
+    /**
+     * Path to the section.
+     * When defined, fields inside the section will get this path as a prefix of their own path.
+     */
+    path?: Path;
+    /**
+     * Overwrite field props for the section.
+     */
+    overwriteProps?: overwriteProps | OverwritePropsDefaults;
+    /**
+     * Provide your own translations. Use the same format as defined in the translation files
+     */
+    translations?: DataContextProps<unknown>['translations'];
+    /**
+     * Makes all fields inside it required.
+     */
+    required?: boolean;
+    /**
+     * Callback when fields in the section are changed.
+     */
+    onChange?: (data: unknown) => void;
+    /**
+     * Only for internal use and undocumented for now.
+     * Prioritize error techniques for the section.
+     * Can be `fieldSchema`, `sectionSchema` or `contextSchema.
+     */
+    errorPrioritization?: SectionContextState['errorPrioritization'];
+};
+export type LocalProps = SectionProps & {
+    children: React.ReactNode;
+};
+declare function SectionComponent(props: LocalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SectionComponent {
+    var _supportsSpacingProps: string;
+}
+export default SectionComponent;

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

@@ -0,0 +1,56 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
+import pointer from 'json-pointer';
+import SectionContext from './SectionContext';
+import FieldPropsProvider from '../FieldProps';
+function SectionComponent(props) {
+  var _nestedProps$overwrit;
+  const {
+    path,
+    overwriteProps,
+    translations,
+    required,
+    onChange,
+    errorPrioritization = ['contextSchema'],
+    children
+  } = props;
+  if (path && !path.startsWith('/')) {
+    throw new Error(`path="${path}" must start with a slash`);
+  }
+  const {
+    path: nestedPath,
+    handleChange: handleNestedChange,
+    props: nestedProps
+  } = useContext(SectionContext) || {};
+  const dataRef = useRef({});
+  const handleChange = useCallback((path, value) => {
+    pointer.set(dataRef.current, path, value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(dataRef.current);
+    handleNestedChange === null || handleNestedChange === void 0 ? void 0 : handleNestedChange(path, value);
+  }, [handleNestedChange, onChange]);
+  const identifier = useMemo(() => {
+    return `${nestedPath && nestedPath !== '/' ? nestedPath : ''}${path || ''}`;
+  }, [path, nestedPath]);
+  const fieldProps = required ? {
+    required: true
+  } : undefined;
+  return React.createElement(SectionContext.Provider, {
+    value: {
+      path: identifier,
+      errorPrioritization,
+      handleChange,
+      props
+    }
+  }, 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));
+}
+SectionComponent._supportsSpacingProps = 'children';
+export default SectionComponent;
+//# sourceMappingURL=Section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","names":["React","useCallback","useContext","useMemo","useRef","pointer","SectionContext","FieldPropsProvider","SectionComponent","props","_nestedProps$overwrit","path","overwriteProps","translations","required","onChange","errorPrioritization","children","startsWith","Error","nestedPath","handleChange","handleNestedChange","nestedProps","dataRef","value","set","current","identifier","fieldProps","undefined","createElement","Provider","_extends","_objectSpread","substring","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Section/Section.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport pointer from 'json-pointer'\nimport SectionContext, { SectionContextState } from './SectionContext'\nimport FieldPropsProvider from '../FieldProps'\n\nimport type { Props as DataContextProps } from '../../DataContext/Provider'\nimport type { FieldSectionProps, Path, FieldProps } 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   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translations?: DataContextProps<unknown>['translations']\n\n  /**\n   * Makes all fields inside it required.\n   */\n  required?: boolean\n\n  /**\n   * Callback when fields in the section are changed.\n   */\n  onChange?: (data: unknown) => void\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}\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    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 {\n    path: nestedPath,\n    handleChange: handleNestedChange,\n    props: nestedProps,\n  } = useContext(SectionContext) || {}\n\n  const dataRef = useRef<unknown>({})\n  const handleChange = useCallback(\n    (path: Path, value: unknown) => {\n      pointer.set(dataRef.current, path, value)\n      onChange?.(dataRef.current)\n      handleNestedChange?.(path, value)\n    },\n    [handleNestedChange, onChange]\n  )\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  return (\n    <SectionContext.Provider\n      value={{\n        path: identifier,\n        errorPrioritization,\n        handleChange,\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,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,OAAO,MAAM,cAAc;AAClC,OAAOC,cAAc,MAA+B,kBAAkB;AACtE,OAAOC,kBAAkB,MAAM,eAAe;AA+C9C,SAASC,gBAAgBA,CAACC,KAAiB,EAAE;EAAA,IAAAC,qBAAA;EAC3C,MAAM;IACJC,IAAI;IACJC,cAAc;IACdC,YAAY;IACZC,QAAQ;IACRC,QAAQ;IACRC,mBAAmB,GAAG,CAAC,eAAe,CAAC;IACvCC;EACF,CAAC,GAAGR,KAAK;EAET,IAAIE,IAAI,IAAI,CAACA,IAAI,CAACO,UAAU,CAAC,GAAG,CAAC,EAAE;IACjC,MAAM,IAAIC,KAAK,CAAE,SAAQR,IAAK,2BAA0B,CAAC;EAC3D;EAEA,MAAM;IACJA,IAAI,EAAES,UAAU;IAChBC,YAAY,EAAEC,kBAAkB;IAChCb,KAAK,EAAEc;EACT,CAAC,GAAGrB,UAAU,CAACI,cAAc,CAAC,IAAI,CAAC,CAAC;EAEpC,MAAMkB,OAAO,GAAGpB,MAAM,CAAU,CAAC,CAAC,CAAC;EACnC,MAAMiB,YAAY,GAAGpB,WAAW,CAC9B,CAACU,IAAU,EAAEc,KAAc,KAAK;IAC9BpB,OAAO,CAACqB,GAAG,CAACF,OAAO,CAACG,OAAO,EAAEhB,IAAI,EAAEc,KAAK,CAAC;IACzCV,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGS,OAAO,CAACG,OAAO,CAAC;IAC3BL,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAGX,IAAI,EAAEc,KAAK,CAAC;EACnC,CAAC,EACD,CAACH,kBAAkB,EAAEP,QAAQ,CAC/B,CAAC;EAED,MAAMa,UAAU,GAAGzB,OAAO,CAAC,MAAM;IAC/B,OAAQ,GAAEiB,UAAU,IAAIA,UAAU,KAAK,GAAG,GAAGA,UAAU,GAAG,EAAG,GAC3DT,IAAI,IAAI,EACT,EAAC;EACJ,CAAC,EAAE,CAACA,IAAI,EAAES,UAAU,CAAC,CAAC;EACtB,MAAMS,UAAU,GAAGf,QAAQ,GAAG;IAAEA,QAAQ,EAAE;EAAK,CAAC,GAAGgB,SAAS;EAE5D,OACE9B,KAAA,CAAA+B,aAAA,CAACzB,cAAc,CAAC0B,QAAQ;IACtBP,KAAK,EAAE;MACLd,IAAI,EAAEiB,UAAU;MAChBZ,mBAAmB;MACnBK,YAAY;MACZZ;IACF;EAAE,GAEFT,KAAA,CAAA+B,aAAA,CAACxB,kBAAkB,EAAA0B,QAAA;IACjBrB,cAAc,EAAAsB,aAAA,CAAAA,aAAA,KACTtB,cAAc,GACbW,WAAW,aAAXA,WAAW,wBAAAb,qBAAA,GAAXa,WAAW,CAAEX,cAAc,cAAAF,qBAAA,uBAA3BA,qBAAA,CACFC,IAAI,CAACwB,SAAS,CAAC,CAAC,CAAC,CAClB,CACD;IACFtB,YAAY,EAAEA;EAAa,GACvBgB,UAAU,GAEbZ,QACiB,CACG,CAAC;AAE9B;AAEAT,gBAAgB,CAAC4B,qBAAqB,GAAG,UAAU;AACnD,eAAe5B,gBAAgB"}

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

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

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

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

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

@@ -0,0 +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 { Path } from '../../types'\nimport { SectionProps } from '.'\n\nexport interface SectionContextState {\n  path?: Path\n  errorPrioritization?: Array<\n    'fieldSchema' | 'sectionSchema' | 'contextSchema'\n  >\n  handleChange?: (path: Path, data: unknown) => void\n  props?: SectionProps\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"}

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

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

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

@@ -0,0 +1,35 @@
+export const SectionProperties = {
+  path: {
+    doc: 'A path (JSON Pointer) to the array to iterate over.',
+    type: 'string',
+    status: 'optional'
+  },
+  overwriteProps: {
+    doc: 'Overwrite field props for the section.',
+    type: 'object',
+    status: 'optional'
+  },
+  translation: {
+    doc: "Provide a translation for the section (e.g. `{'nb-NO': { MySection: { MyField: { label: 'Custom' }}}}`).",
+    type: 'object',
+    status: 'optional'
+  },
+  required: {
+    doc: 'Makes all fields inside it required.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  children: {
+    doc: 'All the fields and values inside the section.',
+    type: 'React.Node',
+    status: 'optional'
+  }
+};
+export const SectionEvents = {
+  onChange: {
+    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.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=SectionDocs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDocs.js","names":["SectionProperties","path","doc","type","status","overwriteProps","translation","required","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  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,QAAQ,EAAE;IACRN,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMK,aAAmC,GAAG;EACjDC,QAAQ,EAAE;IACRR,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

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

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

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

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

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

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

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

@@ -24,13 +24,13 @@ function SubmitButton(props) {
   const {
     formState,
     handleSubmit,
-    _isInsideFormElement
+    isInsideFormElement
   } = useContext(DataContext) || {};
   const onClickHandler = useCallback(() => {
-    if (!_isInsideFormElement) {
+    if (!isInsideFormElement) {
       handleSubmit === null || handleSubmit === void 0 ? void 0 : handleSubmit();
     }
-  }, [_isInsideFormElement, handleSubmit]);
+  }, [isInsideFormElement, handleSubmit]);
   return React.createElement(Button, _extends({
     className: classnames('dnb-forms-submit-button', className),
     onClick: onClickHandler,

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

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.js","names":["React","useCallback","useContext","classnames","DataContext","Button","SubmitIndicator","useTranslation","send","SubmitButton","props","translations","variant","className","showIndicator","children","text","rest","_objectWithoutProperties","_excluded","content","sendText","formState","handleSubmit","_isInsideFormElement","onClickHandler","createElement","_extends","onClick","type","icon","state","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport DataContext from '../../DataContext/Context'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\nimport SubmitIndicator from '../SubmitIndicator'\nimport useTranslation from '../../hooks/useTranslation'\nimport { send } from '../../../../icons'\n\nexport type Props = {\n  /**\n   * Show the submit indicator\n   */\n  showIndicator?: boolean\n} & ComponentProps &\n  Omit<ButtonProps, 'variant'> &\n  Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>> & {\n    variant?: 'send'\n  }\n\nfunction SubmitButton(props: Props) {\n  const translations = useTranslation().SubmitButton\n\n  const { variant, className, showIndicator, children, text, ...rest } =\n    props\n\n  const content =\n    text ||\n    children ||\n    (variant === 'send' ? translations.sendText : translations.text)\n\n  const { formState, handleSubmit, _isInsideFormElement } =\n    useContext(DataContext) || {}\n\n  const onClickHandler = useCallback(() => {\n    if (!_isInsideFormElement) {\n      handleSubmit?.()\n    }\n  }, [_isInsideFormElement, handleSubmit])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-submit-button', className)}\n      onClick={onClickHandler}\n      type=\"submit\"\n      icon={variant === 'send' ? send : null}\n      {...rest}\n    >\n      {content}\n\n      <SubmitIndicator\n        state={\n          showIndicator ? 'pending' : formState // will be enabled in a follow-up PR\n        }\n      />\n    </Button>\n  )\n}\n\nSubmitButton._supportsSpacingProps = true\nexport default SubmitButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,MAAM,MAAuB,sCAAsC;AAC1E,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,cAAc,MAAM,4BAA4B;AACvD,SAASC,IAAI,QAAQ,mBAAmB;AAaxC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,YAAY,GAAGJ,cAAc,CAAC,CAAC,CAACE,YAAY;EAElD,MAAM;MAAEG,OAAO;MAAEC,SAAS;MAAEC,aAAa;MAAEC,QAAQ;MAAEC;IAAc,CAAC,GAClEN,KAAK;IADuDO,IAAI,GAAAC,wBAAA,CAChER,KAAK,EAAAS,SAAA;EAEP,MAAMC,OAAO,GACXJ,IAAI,IACJD,QAAQ,KACPH,OAAO,KAAK,MAAM,GAAGD,YAAY,CAACU,QAAQ,GAAGV,YAAY,CAACK,IAAI,CAAC;EAElE,MAAM;IAAEM,SAAS;IAAEC,YAAY;IAAEC;EAAqB,CAAC,GACrDtB,UAAU,CAACE,WAAW,CAAC,IAAI,CAAC,CAAC;EAE/B,MAAMqB,cAAc,GAAGxB,WAAW,CAAC,MAAM;IACvC,IAAI,CAACuB,oBAAoB,EAAE;MACzBD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC;IAClB;EACF,CAAC,EAAE,CAACC,oBAAoB,EAAED,YAAY,CAAC,CAAC;EAExC,OACEvB,KAAA,CAAA0B,aAAA,CAACrB,MAAM,EAAAsB,QAAA;IACLd,SAAS,EAAEV,UAAU,CAAC,yBAAyB,EAAEU,SAAS,CAAE;IAC5De,OAAO,EAAEH,cAAe;IACxBI,IAAI,EAAC,QAAQ;IACbC,IAAI,EAAElB,OAAO,KAAK,MAAM,GAAGJ,IAAI,GAAG;EAAK,GACnCS,IAAI,GAEPG,OAAO,EAERpB,KAAA,CAAA0B,aAAA,CAACpB,eAAe;IACdyB,KAAK,EACHjB,aAAa,GAAG,SAAS,GAAGQ;EAC7B,CACF,CACK,CAAC;AAEb;AAEAb,YAAY,CAACuB,qBAAqB,GAAG,IAAI;AACzC,eAAevB,YAAY"}
+{"version":3,"file":"SubmitButton.js","names":["React","useCallback","useContext","classnames","DataContext","Button","SubmitIndicator","useTranslation","send","SubmitButton","props","translations","variant","className","showIndicator","children","text","rest","_objectWithoutProperties","_excluded","content","sendText","formState","handleSubmit","isInsideFormElement","onClickHandler","createElement","_extends","onClick","type","icon","state","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport DataContext from '../../DataContext/Context'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\nimport SubmitIndicator from '../SubmitIndicator'\nimport useTranslation from '../../hooks/useTranslation'\nimport { send } from '../../../../icons'\n\nexport type Props = {\n  /**\n   * Show the submit indicator\n   */\n  showIndicator?: boolean\n} & ComponentProps &\n  Omit<ButtonProps, 'variant'> &\n  Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>> & {\n    variant?: 'send'\n  }\n\nfunction SubmitButton(props: Props) {\n  const translations = useTranslation().SubmitButton\n\n  const { variant, className, showIndicator, children, text, ...rest } =\n    props\n\n  const content =\n    text ||\n    children ||\n    (variant === 'send' ? translations.sendText : translations.text)\n\n  const { formState, handleSubmit, isInsideFormElement } =\n    useContext(DataContext) || {}\n\n  const onClickHandler = useCallback(() => {\n    if (!isInsideFormElement) {\n      handleSubmit?.()\n    }\n  }, [isInsideFormElement, handleSubmit])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-submit-button', className)}\n      onClick={onClickHandler}\n      type=\"submit\"\n      icon={variant === 'send' ? send : null}\n      {...rest}\n    >\n      {content}\n\n      <SubmitIndicator\n        state={\n          showIndicator ? 'pending' : formState // will be enabled in a follow-up PR\n        }\n      />\n    </Button>\n  )\n}\n\nSubmitButton._supportsSpacingProps = true\nexport default SubmitButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,MAAM,MAAuB,sCAAsC;AAC1E,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,cAAc,MAAM,4BAA4B;AACvD,SAASC,IAAI,QAAQ,mBAAmB;AAaxC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,YAAY,GAAGJ,cAAc,CAAC,CAAC,CAACE,YAAY;EAElD,MAAM;MAAEG,OAAO;MAAEC,SAAS;MAAEC,aAAa;MAAEC,QAAQ;MAAEC;IAAc,CAAC,GAClEN,KAAK;IADuDO,IAAI,GAAAC,wBAAA,CAChER,KAAK,EAAAS,SAAA;EAEP,MAAMC,OAAO,GACXJ,IAAI,IACJD,QAAQ,KACPH,OAAO,KAAK,MAAM,GAAGD,YAAY,CAACU,QAAQ,GAAGV,YAAY,CAACK,IAAI,CAAC;EAElE,MAAM;IAAEM,SAAS;IAAEC,YAAY;IAAEC;EAAoB,CAAC,GACpDtB,UAAU,CAACE,WAAW,CAAC,IAAI,CAAC,CAAC;EAE/B,MAAMqB,cAAc,GAAGxB,WAAW,CAAC,MAAM;IACvC,IAAI,CAACuB,mBAAmB,EAAE;MACxBD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC;IAClB;EACF,CAAC,EAAE,CAACC,mBAAmB,EAAED,YAAY,CAAC,CAAC;EAEvC,OACEvB,KAAA,CAAA0B,aAAA,CAACrB,MAAM,EAAAsB,QAAA;IACLd,SAAS,EAAEV,UAAU,CAAC,yBAAyB,EAAEU,SAAS,CAAE;IAC5De,OAAO,EAAEH,cAAe;IACxBI,IAAI,EAAC,QAAQ;IACbC,IAAI,EAAElB,OAAO,KAAK,MAAM,GAAGJ,IAAI,GAAG;EAAK,GACnCS,IAAI,GAEPG,OAAO,EAERpB,KAAA,CAAA0B,aAAA,CAACpB,eAAe;IACdyB,KAAK,EACHjB,aAAa,GAAG,SAAS,GAAGQ;EAC7B,CACF,CACK,CAAC;AAEb;AAEAb,YAAY,CAACuB,qBAAqB,GAAG,IAAI;AACzC,eAAevB,YAAY"}

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

@@ -1,7 +1,15 @@
 import React, { AriaAttributes } from 'react';
 import { HeightAnimationProps } from '../../../../components/HeightAnimation';
+import { FilterData } from '../../DataContext/Context';
 import type { UseFieldProps } from '../../types';
 import type { DataAttributes } from '../../hooks/useFieldProps';
+type VisibleWhen = {
+    path: string;
+    hasValue: unknown;
+} | {
+    path: string;
+    withValue: (value: unknown) => boolean;
+};
 export type Props = {
     visible?: boolean;
     /** Given data context path must be defined to show children */
@@ -16,12 +24,14 @@ export type Props = {
     pathTrue?: string;
     /** Given data context path must be false to show children */
     pathFalse?: string;
-    /** Given data context path must match, as well as the "whenValue" value */
-    pathValue?: string;
-    /** Given data context value must match this value to show children */
-    whenValue?: unknown;
+    /** Provide a `path` and a `hasValue` property with the excepted value in order to show children. You can alternatively provide a `withValue` function that returns a boolean. The first parameter is the value of the path. */
+    visibleWhen?: VisibleWhen;
+    /** Same as `visibleWhen`, but with inverted logic. */
+    visibleWhenNot?: VisibleWhen;
     /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */
     inferData?: (data: unknown) => boolean;
+    /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */
+    filterData?: FilterData;
     /** Animate the visibility change */
     animate?: boolean;
     /** Keep the content in the DOM, even if it's not visible */
@@ -30,8 +40,12 @@ export type Props = {
     fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes;
     element?: HeightAnimationProps['element'];
     children: React.ReactNode;
+    /** @deprecated Use `visibleWhen` instead */
+    pathValue?: string;
+    /** @deprecated Use `visibleWhen` instead */
+    whenValue?: unknown;
 };
-declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, inferData, animate, keepInDOM, fieldPropsWhenHidden, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, visibleWhen, visibleWhenNot, inferData, filterData, animate, keepInDOM, fieldPropsWhenHidden, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Visibility {
     var _supportsSpacingProps: string;
 }