@dnb/eufemia 10.19.0 → 10.20.0

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

@@ -1,12 +1,19 @@
+/*
+ * Utilities
+ */
 :root {
   --forms-field-width--small: 5rem;
   --forms-field-width--medium: 11rem;
   --forms-field-width--large: 21rem;
 }
 
-/*
- * Utilities
- */
+@media screen and (max-width: 15em) {
+  .dnb-forms-field-string .dnb-input__shell,
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
+
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
@@ -24,6 +31,9 @@ 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;
 }
@@ -47,7 +57,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block--width-small {
     width: var(--forms-field-width--small);
   }
@@ -71,13 +81,17 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block__status {
   grid-area: status;
 }
+.dnb-forms-field-block__status .dnb-form-status__shell {
+  margin-top: 0.5rem;
+}
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block__contents--width-small {
     width: var(--forms-field-width--small);
   }

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

@@ -1 +1 @@
-:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.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:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@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__grid{flex-wrap:wrap}.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}.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)}}

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

@@ -1,11 +1,31 @@
-@import '../../Field/style/field-sizes.scss';
+@use 'sass:map';
 @import '../../../../style/core/utilities.scss';
+@import '../../Field/style/field-sizes.scss';
+
+$breakpoints: map.merge(
+  $breakpoints,
+  (
+    'xx-small': 15em,
+  )
+);
+
+// Ensure inputs to not overflow on xx-small (defined above), but exclude e.g. Autocomplete
+.dnb-forms-field-string,
+.dnb-forms-field-number {
+  @include allBelow(xx-small) {
+    .dnb-input__shell {
+      width: 90%;
+    }
+  }
+}
 
 fieldset.dnb-forms-field-block {
   @include fieldsetReset(true);
 }
 
 .dnb-forms-field-block {
+  width: 100%;
+
   &__grid {
     display: grid;
 
@@ -60,10 +80,14 @@ fieldset.dnb-forms-field-block {
 
   &__status {
     grid-area: status;
+    .dnb-form-status__shell {
+      margin-top: 0.5rem; // set margin-top on shell, so we can animate the height
+    }
   }
 
   &__contents {
     grid-area: contents;
+    width: 100%;
 
     &--width {
       &-stretch {

package/extensions/forms/Form/Handler/Handler.d.ts

@@ -7,4 +7,4 @@ export type Props = Omit<ElementAllProps, 'data' | 'as' | 'autoComplete'> & {
      */
     autoComplete?: boolean;
 };
-export default function FormHandler<Data extends JsonObject>({ children, defaultData, data, schema, onChange, onPathChange, onSubmit, onSubmitRequest, scrollTopOnSubmit, sessionStorageId, autoComplete, ...rest }: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>): import("react/jsx-runtime").JSX.Element;
+export default function FormHandler<Data extends JsonObject>({ children, defaultData, data, schema, ajvInstance, errorMessages, filterData, onChange, onPathChange, onSubmit, onSubmitRequest, scrollTopOnSubmit, sessionStorageId, autoComplete, ...rest }: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>): import("react/jsx-runtime").JSX.Element;

package/extensions/forms/Form/Handler/Handler.js

@@ -1,7 +1,7 @@
 "use client";
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId", "autoComplete"];
+const _excluded = ["children", "defaultData", "data", "schema", "ajvInstance", "errorMessages", "filterData", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId", "autoComplete"];
 import React from 'react';
 import Provider from '../../DataContext/Provider';
 import FormElement from '../Element';
@@ -11,6 +11,9 @@ export default function FormHandler(_ref) {
       defaultData,
       data,
       schema,
+      ajvInstance,
+      errorMessages,
+      filterData,
       onChange,
       onPathChange,
       onSubmit,
@@ -25,6 +28,9 @@ export default function FormHandler(_ref) {
     defaultData,
     data,
     schema,
+    ajvInstance,
+    errorMessages,
+    filterData,
     onChange,
     onPathChange,
     onSubmit: function () {

package/extensions/forms/Form/Handler/Handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handler.js","names":["React","Provider","FormElement","FormHandler","_ref","children","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","id","arguments","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React from 'react'\nimport { JsonObject } from 'json-pointer'\nimport Provider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    id: rest.id,\n    defaultData,\n    data,\n    schema,\n    onChange,\n    onPathChange,\n    onSubmit: (...args) => {\n      if (typeof onSubmit === 'function') {\n        onSubmit(...args)\n      }\n    },\n    onSubmitRequest,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n  } as Omit<ProviderProps<Data>, 'children'>\n\n  return (\n    <Provider {...providerProps}>\n      <FormElement {...rest}>{children}</FormElement>\n    </Provider>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,MAER,4BAA4B;AACnC,OAAOC,WAAW,MAAM,YAAY;AAapC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAa8B;EAAA,IAbJ;MAC3DC,QAAQ;MACRC,WAAW;MACXC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,YAAY;MACZC,QAAQ;MACRC,eAAe;MACfC,iBAAiB;MACjBC,gBAAgB;MAChBC;IAE4D,CAAC,GAAAX,IAAA;IAD1DY,IAAI,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAEP,MAAMC,aAAa,GAAG;IACpBC,EAAE,EAAEJ,IAAI,CAACI,EAAE;IACXd,WAAW;IACXC,IAAI;IACJC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE,SAAAA,CAAA,EAAa;MACrB,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAAC,GAAAU,SAAO,CAAC;MACnB;IACF,CAAC;IACDT,eAAe;IACfC,iBAAiB;IACjBC,gBAAgB;IAChBC;EACF,CAA0C;EAE1C,OACEf,KAAA,CAAAsB,aAAA,CAACrB,QAAQ,EAAKkB,aAAa,EACzBnB,KAAA,CAAAsB,aAAA,CAACpB,WAAW,EAAKc,IAAI,EAAGX,QAAsB,CACtC,CAAC;AAEf"}
+{"version":3,"file":"Handler.js","names":["React","Provider","FormElement","FormHandler","_ref","children","defaultData","data","schema","ajvInstance","errorMessages","filterData","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","id","arguments","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React from 'react'\nimport { JsonObject } from 'json-pointer'\nimport Provider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  ajvInstance,\n  errorMessages,\n  filterData,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    id: rest.id,\n    defaultData,\n    data,\n    schema,\n    ajvInstance,\n    errorMessages,\n    filterData,\n    onChange,\n    onPathChange,\n    onSubmit: (...args) => {\n      if (typeof onSubmit === 'function') {\n        onSubmit(...args)\n      }\n    },\n    onSubmitRequest,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n  } as Omit<ProviderProps<Data>, 'children'>\n\n  return (\n    <Provider {...providerProps}>\n      <FormElement {...rest}>{children}</FormElement>\n    </Provider>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,MAER,4BAA4B;AACnC,OAAOC,WAAW,MAAM,YAAY;AAapC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAgB8B;EAAA,IAhBJ;MAC3DC,QAAQ;MACRC,WAAW;MACXC,IAAI;MACJC,MAAM;MACNC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,QAAQ;MACRC,YAAY;MACZC,QAAQ;MACRC,eAAe;MACfC,iBAAiB;MACjBC,gBAAgB;MAChBC;IAE4D,CAAC,GAAAd,IAAA;IAD1De,IAAI,GAAAC,wBAAA,CAAAhB,IAAA,EAAAiB,SAAA;EAEP,MAAMC,aAAa,GAAG;IACpBC,EAAE,EAAEJ,IAAI,CAACI,EAAE;IACXjB,WAAW;IACXC,IAAI;IACJC,MAAM;IACNC,WAAW;IACXC,aAAa;IACbC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE,SAAAA,CAAA,EAAa;MACrB,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAAC,GAAAU,SAAO,CAAC;MACnB;IACF,CAAC;IACDT,eAAe;IACfC,iBAAiB;IACjBC,gBAAgB;IAChBC;EACF,CAA0C;EAE1C,OACElB,KAAA,CAAAyB,aAAA,CAACxB,QAAQ,EAAKqB,aAAa,EACzBtB,KAAA,CAAAyB,aAAA,CAACvB,WAAW,EAAKiB,IAAI,EAAGd,QAAsB,CACtC,CAAC;AAEf"}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { HeightAnimationProps } from '../../../../components/HeightAnimation';
 export type Props = {
     visible?: boolean;
     /** Given data context path must be defined to show children */
@@ -15,12 +16,16 @@ export type Props = {
     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;
     /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */
     inferData?: (data: unknown) => boolean;
+    /** Animate the visibility change */
+    animate?: boolean;
+    element?: HeightAnimationProps['element'];
     children: React.ReactNode;
 };
-declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, inferData, children, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, inferData, animate, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Visibility {
     var _supportsSpacingProps: string;
 }

package/extensions/forms/Form/Visibility/Visibility.js

@@ -1,51 +1,65 @@
 "use client";
 
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["visible", "pathDefined", "pathUndefined", "pathTruthy", "pathFalsy", "pathTrue", "pathFalse", "pathValue", "whenValue", "inferData", "animate", "children"];
 import React, { useContext } from 'react';
 import pointer from 'json-pointer';
 import * as DataContext from '../../DataContext';
+import HeightAnimation from '../../../../components/HeightAnimation';
 function Visibility(_ref) {
   let {
-    visible,
-    pathDefined,
-    pathUndefined,
-    pathTruthy,
-    pathFalsy,
-    pathTrue,
-    pathFalse,
-    pathValue,
-    whenValue,
-    inferData,
-    children
-  } = _ref;
+      visible,
+      pathDefined,
+      pathUndefined,
+      pathTruthy,
+      pathFalsy,
+      pathTrue,
+      pathFalse,
+      pathValue,
+      whenValue,
+      inferData,
+      animate,
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const dataContext = useContext(DataContext.Context);
-  if (visible === false) {
-    return null;
+  const check = () => {
+    if (visible === false) {
+      return;
+    }
+    if (pathDefined && !pointer.has(dataContext.data, pathDefined)) {
+      return;
+    }
+    if (pathUndefined && pointer.has(dataContext.data, pathUndefined)) {
+      return;
+    }
+    if (pathTruthy && (!pointer.has(dataContext.data, pathTruthy) || !pointer.get(dataContext.data, pathTruthy))) {
+      return;
+    }
+    if (pathFalsy && pointer.has(dataContext.data, pathFalsy) && Boolean(pointer.get(dataContext.data, pathFalsy))) {
+      return;
+    }
+    if (pathTrue && (!pointer.has(dataContext.data, pathTrue) || pointer.get(dataContext.data, pathTrue) !== true)) {
+      return;
+    }
+    if (pathFalse && (!pointer.has(dataContext.data, pathFalse) || pointer.get(dataContext.data, pathFalse) !== false)) {
+      return;
+    }
+    if (pathValue && !(pointer.has(dataContext.data, pathValue) && pointer.get(dataContext.data, pathValue) === whenValue)) {
+      return;
+    }
+    if (inferData && !inferData(dataContext.data)) {
+      return;
+    }
+    return true;
+  };
+  if (animate) {
+    return React.createElement(HeightAnimation, _extends({
+      open: Boolean(check())
+    }, rest), children);
   }
-  if (pathDefined && !pointer.has(dataContext.data, pathDefined)) {
-    return null;
-  }
-  if (pathUndefined && pointer.has(dataContext.data, pathUndefined)) {
-    return null;
-  }
-  if (pathTruthy && (!pointer.has(dataContext.data, pathTruthy) || !pointer.get(dataContext.data, pathTruthy))) {
-    return null;
-  }
-  if (pathFalsy && pointer.has(dataContext.data, pathFalsy) && Boolean(pointer.get(dataContext.data, pathFalsy))) {
-    return null;
-  }
-  if (pathTrue && (!pointer.has(dataContext.data, pathTrue) || pointer.get(dataContext.data, pathTrue) !== true)) {
-    return null;
-  }
-  if (pathFalse && (!pointer.has(dataContext.data, pathFalse) || pointer.get(dataContext.data, pathFalse) !== false)) {
-    return null;
-  }
-  if (pathValue && !(pointer.has(dataContext.data, pathValue) && pointer.get(dataContext.data, pathValue) === whenValue)) {
-    return null;
-  }
-  if (inferData && !inferData(dataContext.data)) {
-    return null;
-  }
-  return React.createElement(React.Fragment, null, children);
+  return check() ? React.createElement(React.Fragment, null, children) : null;
 }
 Visibility._supportsSpacingProps = 'children';
 export default Visibility;

package/extensions/forms/Form/Visibility/Visibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"Visibility.js","names":["React","useContext","pointer","DataContext","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","inferData","children","dataContext","Context","has","data","get","Boolean","createElement","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport pointer from 'json-pointer'\nimport * as DataContext from '../../DataContext'\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: string\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: string\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: string\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: string\n  /** Given data context path must be true to show children */\n  pathTrue?: string\n  /** Given data context path must be false to show children */\n  pathFalse?: string\n  /** Given data context path must match, as well as the \"whenValue\" value */\n  pathValue?: string\n  whenValue?: unknown\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  children: React.ReactNode\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  inferData,\n  children,\n}: Props) {\n  const dataContext = useContext(DataContext.Context)\n\n  if (visible === false) {\n    return null\n  }\n\n  if (pathDefined && !pointer.has(dataContext.data, pathDefined)) {\n    return null\n  }\n  if (pathUndefined && pointer.has(dataContext.data, pathUndefined)) {\n    return null\n  }\n\n  if (\n    pathTruthy &&\n    (!pointer.has(dataContext.data, pathTruthy) ||\n      !pointer.get(dataContext.data, pathTruthy))\n  ) {\n    return null\n  }\n  if (\n    pathFalsy &&\n    pointer.has(dataContext.data, pathFalsy) &&\n    Boolean(pointer.get(dataContext.data, pathFalsy))\n  ) {\n    return null\n  }\n\n  if (\n    pathTrue &&\n    (!pointer.has(dataContext.data, pathTrue) ||\n      pointer.get(dataContext.data, pathTrue) !== true)\n  ) {\n    return null\n  }\n  if (\n    pathFalse &&\n    (!pointer.has(dataContext.data, pathFalse) ||\n      pointer.get(dataContext.data, pathFalse) !== false)\n  ) {\n    return null\n  }\n\n  if (\n    pathValue &&\n    !(\n      pointer.has(dataContext.data, pathValue) &&\n      pointer.get(dataContext.data, pathValue) === whenValue\n    )\n  ) {\n    return null\n  }\n\n  if (inferData && !inferData(dataContext.data)) {\n    return null\n  }\n\n  return <>{children}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,OAAO,MAAM,cAAc;AAClC,OAAO,KAAKC,WAAW,MAAM,mBAAmB;AAwBhD,SAASC,UAAUA,CAAAC,IAAA,EAYT;EAAA,IAZU;IAClBC,OAAO;IACPC,WAAW;IACXC,aAAa;IACbC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC;EACK,CAAC,GAAAX,IAAA;EACN,MAAMY,WAAW,GAAGhB,UAAU,CAACE,WAAW,CAACe,OAAO,CAAC;EAEnD,IAAIZ,OAAO,KAAK,KAAK,EAAE;IACrB,OAAO,IAAI;EACb;EAEA,IAAIC,WAAW,IAAI,CAACL,OAAO,CAACiB,GAAG,CAACF,WAAW,CAACG,IAAI,EAAEb,WAAW,CAAC,EAAE;IAC9D,OAAO,IAAI;EACb;EACA,IAAIC,aAAa,IAAIN,OAAO,CAACiB,GAAG,CAACF,WAAW,CAACG,IAAI,EAAEZ,aAAa,CAAC,EAAE;IACjE,OAAO,IAAI;EACb;EAEA,IACEC,UAAU,KACT,CAACP,OAAO,CAACiB,GAAG,CAACF,WAAW,CAACG,IAAI,EAAEX,UAAU,CAAC,IACzC,CAACP,OAAO,CAACmB,GAAG,CAACJ,WAAW,CAACG,IAAI,EAAEX,UAAU,CAAC,CAAC,EAC7C;IACA,OAAO,IAAI;EACb;EACA,IACEC,SAAS,IACTR,OAAO,CAACiB,GAAG,CAACF,WAAW,CAACG,IAAI,EAAEV,SAAS,CAAC,IACxCY,OAAO,CAACpB,OAAO,CAACmB,GAAG,CAACJ,WAAW,CAACG,IAAI,EAAEV,SAAS,CAAC,CAAC,EACjD;IACA,OAAO,IAAI;EACb;EAEA,IACEC,QAAQ,KACP,CAACT,OAAO,CAACiB,GAAG,CAACF,WAAW,CAACG,IAAI,EAAET,QAAQ,CAAC,IACvCT,OAAO,CAACmB,GAAG,CAACJ,WAAW,CAACG,IAAI,EAAET,QAAQ,CAAC,KAAK,IAAI,CAAC,EACnD;IACA,OAAO,IAAI;EACb;EACA,IACEC,SAAS,KACR,CAACV,OAAO,CAACiB,GAAG,CAACF,WAAW,CAACG,IAAI,EAAER,SAAS,CAAC,IACxCV,OAAO,CAACmB,GAAG,CAACJ,WAAW,CAACG,IAAI,EAAER,SAAS,CAAC,KAAK,KAAK,CAAC,EACrD;IACA,OAAO,IAAI;EACb;EAEA,IACEC,SAAS,IACT,EACEX,OAAO,CAACiB,GAAG,CAACF,WAAW,CAACG,IAAI,EAAEP,SAAS,CAAC,IACxCX,OAAO,CAACmB,GAAG,CAACJ,WAAW,CAACG,IAAI,EAAEP,SAAS,CAAC,KAAKC,SAAS,CACvD,EACD;IACA,OAAO,IAAI;EACb;EAEA,IAAIC,SAAS,IAAI,CAACA,SAAS,CAACE,WAAW,CAACG,IAAI,CAAC,EAAE;IAC7C,OAAO,IAAI;EACb;EAEA,OAAOpB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QAAGR,QAAW,CAAC;AACxB;AAEAZ,UAAU,CAACqB,qBAAqB,GAAG,UAAU;AAC7C,eAAerB,UAAU"}
+{"version":3,"file":"Visibility.js","names":["React","useContext","pointer","DataContext","HeightAnimation","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","inferData","animate","children","rest","_objectWithoutProperties","_excluded","dataContext","Context","check","has","data","get","Boolean","createElement","_extends","open","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport pointer from 'json-pointer'\nimport * as DataContext from '../../DataContext'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: string\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: string\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: string\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: string\n  /** Given data context path must be true to show children */\n  pathTrue?: string\n  /** Given data context path must be false to show children */\n  pathFalse?: string\n  /** Given data context path must match, as well as the \"whenValue\" value */\n  pathValue?: string\n  /** Given data context value must match this value to show children */\n  whenValue?: unknown\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Animate the visibility change */\n  animate?: boolean\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  inferData,\n  animate,\n  children,\n  ...rest\n}: Props) {\n  const dataContext = useContext(DataContext.Context)\n\n  const check = () => {\n    if (visible === false) {\n      return\n    }\n\n    if (pathDefined && !pointer.has(dataContext.data, pathDefined)) {\n      return\n    }\n    if (pathUndefined && pointer.has(dataContext.data, pathUndefined)) {\n      return\n    }\n\n    if (\n      pathTruthy &&\n      (!pointer.has(dataContext.data, pathTruthy) ||\n        !pointer.get(dataContext.data, pathTruthy))\n    ) {\n      return\n    }\n    if (\n      pathFalsy &&\n      pointer.has(dataContext.data, pathFalsy) &&\n      Boolean(pointer.get(dataContext.data, pathFalsy))\n    ) {\n      return\n    }\n\n    if (\n      pathTrue &&\n      (!pointer.has(dataContext.data, pathTrue) ||\n        pointer.get(dataContext.data, pathTrue) !== true)\n    ) {\n      return\n    }\n    if (\n      pathFalse &&\n      (!pointer.has(dataContext.data, pathFalse) ||\n        pointer.get(dataContext.data, pathFalse) !== false)\n    ) {\n      return\n    }\n\n    if (\n      pathValue &&\n      !(\n        pointer.has(dataContext.data, pathValue) &&\n        pointer.get(dataContext.data, pathValue) === whenValue\n      )\n    ) {\n      return\n    }\n\n    if (inferData && !inferData(dataContext.data)) {\n      return\n    }\n\n    return true\n  }\n\n  if (animate) {\n    return (\n      <HeightAnimation open={Boolean(check())} {...rest}>\n        {children}\n      </HeightAnimation>\n    )\n  }\n\n  return check() ? <>{children}</> : null\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,OAAO,MAAM,cAAc;AAClC,OAAO,KAAKC,WAAW,MAAM,mBAAmB;AAChD,OAAOC,eAAe,MAEf,wCAAwC;AA4B/C,SAASC,UAAUA,CAAAC,IAAA,EAcT;EAAA,IAdU;MAClBC,OAAO;MACPC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,OAAO;MACPC;IAEK,CAAC,GAAAZ,IAAA;IADHa,IAAI,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA;EAEP,MAAMC,WAAW,GAAGrB,UAAU,CAACE,WAAW,CAACoB,OAAO,CAAC;EAEnD,MAAMC,KAAK,GAAGA,CAAA,KAAM;IAClB,IAAIjB,OAAO,KAAK,KAAK,EAAE;MACrB;IACF;IAEA,IAAIC,WAAW,IAAI,CAACN,OAAO,CAACuB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAElB,WAAW,CAAC,EAAE;MAC9D;IACF;IACA,IAAIC,aAAa,IAAIP,OAAO,CAACuB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEjB,aAAa,CAAC,EAAE;MACjE;IACF;IAEA,IACEC,UAAU,KACT,CAACR,OAAO,CAACuB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEhB,UAAU,CAAC,IACzC,CAACR,OAAO,CAACyB,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEhB,UAAU,CAAC,CAAC,EAC7C;MACA;IACF;IACA,IACEC,SAAS,IACTT,OAAO,CAACuB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEf,SAAS,CAAC,IACxCiB,OAAO,CAAC1B,OAAO,CAACyB,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEf,SAAS,CAAC,CAAC,EACjD;MACA;IACF;IAEA,IACEC,QAAQ,KACP,CAACV,OAAO,CAACuB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEd,QAAQ,CAAC,IACvCV,OAAO,CAACyB,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEd,QAAQ,CAAC,KAAK,IAAI,CAAC,EACnD;MACA;IACF;IACA,IACEC,SAAS,KACR,CAACX,OAAO,CAACuB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEb,SAAS,CAAC,IACxCX,OAAO,CAACyB,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEb,SAAS,CAAC,KAAK,KAAK,CAAC,EACrD;MACA;IACF;IAEA,IACEC,SAAS,IACT,EACEZ,OAAO,CAACuB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEZ,SAAS,CAAC,IACxCZ,OAAO,CAACyB,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEZ,SAAS,CAAC,KAAKC,SAAS,CACvD,EACD;MACA;IACF;IAEA,IAAIC,SAAS,IAAI,CAACA,SAAS,CAACM,WAAW,CAACI,IAAI,CAAC,EAAE;MAC7C;IACF;IAEA,OAAO,IAAI;EACb,CAAC;EAED,IAAIT,OAAO,EAAE;IACX,OACEjB,KAAA,CAAA6B,aAAA,CAACzB,eAAe,EAAA0B,QAAA;MAACC,IAAI,EAAEH,OAAO,CAACJ,KAAK,CAAC,CAAC;IAAE,GAAKL,IAAI,GAC9CD,QACc,CAAC;EAEtB;EAEA,OAAOM,KAAK,CAAC,CAAC,GAAGxB,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAAgC,QAAA,QAAGd,QAAW,CAAC,GAAG,IAAI;AACzC;AAEAb,UAAU,CAAC4B,qBAAqB,GAAG,UAAU;AAC7C,eAAe5B,UAAU"}

package/extensions/forms/Form/data-context/getData.d.ts

@@ -0,0 +1,8 @@
+import { SharedStateId } from '../../../../shared/helpers/useSharedState';
+import type { FilterData } from '../../DataContext/Provider';
+type SetDataReturn<Data> = {
+    data: Data;
+    filterData: (filterDataHandler: FilterData) => Partial<Data>;
+};
+export default function getData<Data>(id: SharedStateId): SetDataReturn<Data>;
+export {};

package/extensions/forms/Form/data-context/getData.js

@@ -0,0 +1,15 @@
+import { createSharedState } from '../../../../shared/helpers/useSharedState';
+export default function getData(id) {
+  const sharedState = createSharedState(id);
+  const sharedAttachments = createSharedState(id + '-attachments');
+  const data = sharedState.get();
+  const filterData = filter => {
+    var _sharedAttachments$da, _sharedAttachments$da2;
+    return (_sharedAttachments$da = sharedAttachments.data) === null || _sharedAttachments$da === void 0 ? void 0 : (_sharedAttachments$da2 = _sharedAttachments$da.filterDataHandler) === null || _sharedAttachments$da2 === void 0 ? void 0 : _sharedAttachments$da2.call(_sharedAttachments$da, data, filter);
+  };
+  return {
+    data,
+    filterData
+  };
+}
+//# sourceMappingURL=getData.js.map

package/extensions/forms/Form/data-context/getData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getData.js","names":["createSharedState","getData","id","sharedState","sharedAttachments","data","get","filterData","filter","_sharedAttachments$da","_sharedAttachments$da2","filterDataHandler","call"],"sources":["../../../../../../src/extensions/forms/Form/data-context/getData.tsx"],"sourcesContent":["import {\n  SharedStateId,\n  createSharedState,\n} from '../../../../shared/helpers/useSharedState'\nimport type {\n  FilterData,\n  FilterDataHandler,\n} from '../../DataContext/Provider'\n\ntype SharedAttachment<Data> = {\n  filterDataHandler: FilterDataHandler<Data>\n}\n\ntype SetDataReturn<Data> = {\n  data: Data\n  filterData: (filterDataHandler: FilterData) => Partial<Data>\n}\n\nexport default function getData<Data>(\n  id: SharedStateId\n): SetDataReturn<Data> {\n  const sharedState = createSharedState(id)\n  const sharedAttachments = createSharedState<SharedAttachment<Data>>(\n    id + '-attachments'\n  )\n\n  const data = sharedState.get() as Data\n  const filterData: SetDataReturn<Data>['filterData'] = (filter) =>\n    sharedAttachments.data?.filterDataHandler?.(data, filter)\n\n  return {\n    data,\n    filterData,\n  }\n}\n"],"mappings":"AAAA,SAEEA,iBAAiB,QACZ,2CAA2C;AAelD,eAAe,SAASC,OAAOA,CAC7BC,EAAiB,EACI;EACrB,MAAMC,WAAW,GAAGH,iBAAiB,CAACE,EAAE,CAAC;EACzC,MAAME,iBAAiB,GAAGJ,iBAAiB,CACzCE,EAAE,GAAG,cACP,CAAC;EAED,MAAMG,IAAI,GAAGF,WAAW,CAACG,GAAG,CAAC,CAAS;EACtC,MAAMC,UAA6C,GAAIC,MAAM;IAAA,IAAAC,qBAAA,EAAAC,sBAAA;IAAA,QAAAD,qBAAA,GAC3DL,iBAAiB,CAACC,IAAI,cAAAI,qBAAA,wBAAAC,sBAAA,GAAtBD,qBAAA,CAAwBE,iBAAiB,cAAAD,sBAAA,uBAAzCA,sBAAA,CAAAE,IAAA,CAAAH,qBAAA,EAA4CJ,IAAI,EAAEG,MAAM,CAAC;EAAA;EAE3D,OAAO;IACLH,IAAI;IACJE;EACF,CAAC;AACH"}

package/extensions/forms/Form/data-context/setData.d.ts

@@ -0,0 +1,2 @@
+import { SharedStateId } from '../../../../shared/helpers/useSharedState';
+export default function setData<Data>(id: SharedStateId, data: Data): void;

package/extensions/forms/Form/data-context/setData.js

@@ -0,0 +1,6 @@
+import { createSharedState } from '../../../../shared/helpers/useSharedState';
+export default function setData(id, data) {
+  const sharedState = createSharedState(id);
+  sharedState.extend(data);
+}
+//# sourceMappingURL=setData.js.map

package/extensions/forms/Form/data-context/setData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setData.js","names":["createSharedState","setData","id","data","sharedState","extend"],"sources":["../../../../../../src/extensions/forms/Form/data-context/setData.tsx"],"sourcesContent":["import {\n  SharedStateId,\n  createSharedState,\n} from '../../../../shared/helpers/useSharedState'\n\nexport default function setData<Data>(id: SharedStateId, data: Data) {\n  const sharedState = createSharedState(id)\n  sharedState.extend(data)\n}\n"],"mappings":"AAAA,SAEEA,iBAAiB,QACZ,2CAA2C;AAElD,eAAe,SAASC,OAAOA,CAAOC,EAAiB,EAAEC,IAAU,EAAE;EACnE,MAAMC,WAAW,GAAGJ,iBAAiB,CAACE,EAAE,CAAC;EACzCE,WAAW,CAACC,MAAM,CAACF,IAAI,CAAC;AAC1B"}

package/extensions/forms/Form/data-context/useData.d.ts

@@ -0,0 +1,22 @@
+import { SharedStateId } from '../../../../shared/helpers/useSharedState';
+import type { Path } from '../../DataContext/Context';
+import type { FilterData } from '../../DataContext/Provider';
+type PathImpl<T, P extends string> = P extends `${infer Key}/${infer Rest}` ? Key extends keyof T ? Rest extends '' ? T[Key] : PathImpl<T[Key], Rest> : never : T[P & keyof T];
+type PathType<T, P extends string> = P extends `/${infer Rest}` ? PathImpl<T, Rest> : never;
+type UseDataReturnUpdate<Data> = <P extends Path>(path: P, fn: (value: PathType<Data, P>) => unknown) => void;
+type UseDataReturn<Data> = {
+    data: Data;
+    update: UseDataReturnUpdate<Data>;
+    set: (newData: Data) => void;
+    filterData: (filterDataHandler: FilterData) => Partial<Data>;
+};
+/**
+ * Custom hook that provides form data management functionality.
+ *
+ * @template Data - The type of data being managed.
+ * @param {SharedStateId} id - The identifier for the data.
+ * @param {Data} initialData - The initial data value (optional).
+ * @returns {UseDataReturn<Data>} An object containing the data and data management functions.
+ */
+export default function useData<Data>(id: SharedStateId, initialData?: Data): UseDataReturn<Data>;
+export {};

package/extensions/forms/Form/data-context/useData.js

@@ -0,0 +1,59 @@
+"use client";
+
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import pointer from 'json-pointer';
+import { useSharedState } from '../../../../shared/helpers/useSharedState';
+import { useMountEffect } from '../../hooks';
+export default function useData(id) {
+  let initialData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+  const sharedDataRef = useRef(null);
+  const sharedAttachmentsRef = useRef(null);
+  const hasMounted = useRef(false);
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  useEffect(() => {
+    hasMounted.current = true;
+    return () => {
+      hasMounted.current = false;
+    };
+  }, []);
+  const rerenderUseDataHook = useCallback(() => {
+    if (hasMounted.current) {
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(forceUpdate);
+      }
+    } else {
+      forceUpdate();
+    }
+  }, []);
+  sharedDataRef.current = useSharedState(id, initialData, forceUpdate);
+  sharedAttachmentsRef.current = useSharedState(id + '-attachments', {
+    rerenderUseDataHook
+  });
+  const setHandler = useCallback(newData => {
+    sharedDataRef.current.update(newData);
+  }, []);
+  const updateHandler = useCallback((path, fn) => {
+    const existingData = sharedDataRef.current.data || {};
+    const existingValue = pointer.has(existingData, path) ? pointer.get(existingData, path) : undefined;
+    const newValue = fn(existingValue);
+    pointer.set(existingData, path, newValue);
+    sharedDataRef.current.update(existingData);
+  }, []);
+  const filterData = useCallback(filter => {
+    var _sharedAttachmentsRef, _sharedAttachmentsRef2;
+    const data = sharedDataRef.current.data;
+    return (_sharedAttachmentsRef = sharedAttachmentsRef.current.data) === null || _sharedAttachmentsRef === void 0 ? void 0 : (_sharedAttachmentsRef2 = _sharedAttachmentsRef.filterDataHandler) === null || _sharedAttachmentsRef2 === void 0 ? void 0 : _sharedAttachmentsRef2.call(_sharedAttachmentsRef, data, filter);
+  }, []);
+  useMountEffect(() => {
+    if (id && !sharedDataRef.current.hadInitialData && initialData) {
+      sharedDataRef.current.update(initialData);
+    }
+  });
+  return {
+    data: sharedDataRef.current.data,
+    update: updateHandler,
+    set: setHandler,
+    filterData
+  };
+}
+//# sourceMappingURL=useData.js.map

package/extensions/forms/Form/data-context/useData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useData.js","names":["useCallback","useEffect","useReducer","useRef","pointer","useSharedState","useMountEffect","useData","id","initialData","arguments","length","undefined","sharedDataRef","sharedAttachmentsRef","hasMounted","forceUpdate","current","rerenderUseDataHook","window","requestAnimationFrame","setHandler","newData","update","updateHandler","path","fn","existingData","data","existingValue","has","get","newValue","set","filterData","filter","_sharedAttachmentsRef","_sharedAttachmentsRef2","filterDataHandler","call","hadInitialData"],"sources":["../../../../../../src/extensions/forms/Form/data-context/useData.tsx"],"sourcesContent":["import { useCallback, useEffect, useReducer, useRef } from 'react'\nimport pointer from 'json-pointer'\nimport {\n  SharedStateId,\n  useSharedState,\n} from '../../../../shared/helpers/useSharedState'\nimport type { Path } from '../../DataContext/Context'\nimport type {\n  FilterData,\n  FilterDataHandler,\n} from '../../DataContext/Provider'\nimport { useMountEffect } from '../../hooks'\n\ntype PathImpl<T, P extends string> = P extends `${infer Key}/${infer Rest}`\n  ? Key extends keyof T\n    ? Rest extends ''\n      ? T[Key]\n      : PathImpl<T[Key], Rest>\n    : never\n  : T[P & keyof T]\n\ntype PathType<T, P extends string> = P extends `/${infer Rest}`\n  ? PathImpl<T, Rest>\n  : never\n\ntype UseDataReturnUpdate<Data> = <P extends Path>(\n  path: P,\n  fn: (value: PathType<Data, P>) => unknown\n) => void\n\ntype UseDataReturn<Data> = {\n  data: Data\n  update: UseDataReturnUpdate<Data>\n  set: (newData: Data) => void\n  filterData: (filterDataHandler: FilterData) => Partial<Data>\n}\n\ntype SharedAttachment<Data> = {\n  rerenderUseDataHook: () => void\n  filterDataHandler?: FilterDataHandler<Data>\n}\n\n/**\n * Custom hook that provides form data management functionality.\n *\n * @template Data - The type of data being managed.\n * @param {SharedStateId} id - The identifier for the data.\n * @param {Data} initialData - The initial data value (optional).\n * @returns {UseDataReturn<Data>} An object containing the data and data management functions.\n */\nexport default function useData<Data>(\n  id: SharedStateId,\n  initialData: Data = undefined\n): UseDataReturn<Data> {\n  const sharedDataRef =\n    useRef<ReturnType<typeof useSharedState<Data>>>(null)\n  const sharedAttachmentsRef =\n    useRef<ReturnType<typeof useSharedState<SharedAttachment<Data>>>>(null)\n  const hasMounted = useRef(false)\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  useEffect(() => {\n    hasMounted.current = true\n    return () => {\n      hasMounted.current = false\n    }\n  }, [])\n\n  const rerenderUseDataHook = useCallback(() => {\n    if (hasMounted.current) {\n      if (typeof window !== 'undefined') {\n        // Because we need to wait for the updated props of the fields to be in latest state\n        window.requestAnimationFrame(forceUpdate)\n      }\n    } else {\n      forceUpdate()\n    }\n  }, [])\n\n  sharedDataRef.current = useSharedState<Data>(\n    id,\n    initialData,\n    forceUpdate\n  )\n\n  sharedAttachmentsRef.current = useSharedState<SharedAttachment<Data>>(\n    id + '-attachments',\n    { rerenderUseDataHook }\n  )\n\n  const setHandler = useCallback((newData: Data) => {\n    sharedDataRef.current.update(newData)\n  }, [])\n\n  const updateHandler = useCallback<UseDataReturnUpdate<Data>>(\n    (path, fn) => {\n      const existingData = sharedDataRef.current.data || ({} as Data)\n      const existingValue = pointer.has(existingData, path)\n        ? pointer.get(existingData, path)\n        : undefined\n\n      // get new value\n      const newValue = fn(existingValue)\n\n      // update existing data\n      pointer.set(existingData, path, newValue)\n\n      // update provider\n      sharedDataRef.current.update(existingData)\n    },\n    []\n  )\n\n  const filterData = useCallback<UseDataReturn<Data>['filterData']>(\n    (filter) => {\n      const data = sharedDataRef.current.data\n      return sharedAttachmentsRef.current.data?.filterDataHandler?.(\n        data,\n        filter\n      )\n    },\n    []\n  )\n\n  useMountEffect(() => {\n    if (id && !sharedDataRef.current.hadInitialData && initialData) {\n      sharedDataRef.current.update(initialData)\n    }\n  })\n\n  return {\n    data: sharedDataRef.current.data,\n    update: updateHandler,\n    set: setHandler,\n    filterData,\n  }\n}\n"],"mappings":"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"}

package/extensions/forms/Form/data-context/useError.d.ts

@@ -0,0 +1,5 @@
+type UseDataReturn = {
+    hasErrors: () => boolean;
+};
+export default function useError(id: string): UseDataReturn;
+export {};

package/extensions/forms/Form/data-context/useError.js

@@ -0,0 +1,13 @@
+"use client";
+
+import { useRef } from 'react';
+import { useSharedState } from '../../../../shared/helpers/useSharedState';
+export default function useError(id) {
+  var _sharedAttachmentsRef, _sharedAttachmentsRef2;
+  const sharedAttachmentsRef = useRef(null);
+  sharedAttachmentsRef.current = useSharedState(id + '-attachments');
+  return {
+    hasErrors: ((_sharedAttachmentsRef = sharedAttachmentsRef.current) === null || _sharedAttachmentsRef === void 0 ? void 0 : (_sharedAttachmentsRef2 = _sharedAttachmentsRef.data) === null || _sharedAttachmentsRef2 === void 0 ? void 0 : _sharedAttachmentsRef2.hasErrors) || (() => false)
+  };
+}
+//# sourceMappingURL=useError.js.map

package/extensions/forms/Form/data-context/useError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useError.js","names":["useRef","useSharedState","useError","id","_sharedAttachmentsRef","_sharedAttachmentsRef2","sharedAttachmentsRef","current","hasErrors","data"],"sources":["../../../../../../src/extensions/forms/Form/data-context/useError.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { useSharedState } from '../../../../shared/helpers/useSharedState'\n\ntype UseDataReturn = {\n  hasErrors: () => boolean\n}\n\nexport default function useError(id: string): UseDataReturn {\n  const sharedAttachmentsRef = useRef(null)\n\n  sharedAttachmentsRef.current = useSharedState<{\n    hasErrors?: UseDataReturn['hasErrors']\n  }>(id + '-attachments')\n\n  return {\n    hasErrors:\n      sharedAttachmentsRef.current?.data?.hasErrors || (() => false),\n  }\n}\n"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,OAAO;AAC9B,SAASC,cAAc,QAAQ,2CAA2C;AAM1E,eAAe,SAASC,QAAQA,CAACC,EAAU,EAAiB;EAAA,IAAAC,qBAAA,EAAAC,sBAAA;EAC1D,MAAMC,oBAAoB,GAAGN,MAAM,CAAC,IAAI,CAAC;EAEzCM,oBAAoB,CAACC,OAAO,GAAGN,cAAc,CAE1CE,EAAE,GAAG,cAAc,CAAC;EAEvB,OAAO;IACLK,SAAS,EACP,EAAAJ,qBAAA,GAAAE,oBAAoB,CAACC,OAAO,cAAAH,qBAAA,wBAAAC,sBAAA,GAA5BD,qBAAA,CAA8BK,IAAI,cAAAJ,sBAAA,uBAAlCA,sBAAA,CAAoCG,SAAS,MAAK,MAAM,KAAK;EACjE,CAAC;AACH"}

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

@@ -5,4 +5,7 @@ export { default as ButtonRow } from './ButtonRow';
 export { default as MainHeading } from './MainHeading';
 export { default as SubHeading } from './SubHeading';
 export { default as Visibility } from './Visibility';
-export { default as useData } from './hooks/useData';
+export { default as useData } from './data-context/useData';
+export { default as setData } from './data-context/setData';
+export { default as getData } from './data-context/getData';
+export { default as useError } from './data-context/useError';

package/extensions/forms/Form/index.js

@@ -5,5 +5,8 @@ export { default as ButtonRow } from './ButtonRow';
 export { default as MainHeading } from './MainHeading';
 export { default as SubHeading } from './SubHeading';
 export { default as Visibility } from './Visibility';
-export { default as useData } from './hooks/useData';
+export { default as useData } from './data-context/useData';
+export { default as setData } from './data-context/setData';
+export { default as getData } from './data-context/getData';
+export { default as useError } from './data-context/useError';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Handler","Element","SubmitButton","ButtonRow","MainHeading","SubHeading","Visibility","useData"],"sources":["../../../../../src/extensions/forms/Form/index.ts"],"sourcesContent":["export { default as Handler } from './Handler'\nexport { default as Element } from './Element'\nexport { default as SubmitButton } from './SubmitButton'\nexport { default as ButtonRow } from './ButtonRow'\nexport { default as MainHeading } from './MainHeading'\nexport { default as SubHeading } from './SubHeading'\nexport { default as Visibility } from './Visibility'\nexport { default as useData } from './hooks/useData'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAAO,QAAQ,WAAW;AAC9C,SAASD,OAAO,IAAIE,OAAO,QAAQ,WAAW;AAC9C,SAASF,OAAO,IAAIG,YAAY,QAAQ,gBAAgB;AACxD,SAASH,OAAO,IAAII,SAAS,QAAQ,aAAa;AAClD,SAASJ,OAAO,IAAIK,WAAW,QAAQ,eAAe;AACtD,SAASL,OAAO,IAAIM,UAAU,QAAQ,cAAc;AACpD,SAASN,OAAO,IAAIO,UAAU,QAAQ,cAAc;AACpD,SAASP,OAAO,IAAIQ,OAAO,QAAQ,iBAAiB"}
+{"version":3,"file":"index.js","names":["default","Handler","Element","SubmitButton","ButtonRow","MainHeading","SubHeading","Visibility","useData","setData","getData","useError"],"sources":["../../../../../src/extensions/forms/Form/index.ts"],"sourcesContent":["export { default as Handler } from './Handler'\nexport { default as Element } from './Element'\nexport { default as SubmitButton } from './SubmitButton'\nexport { default as ButtonRow } from './ButtonRow'\nexport { default as MainHeading } from './MainHeading'\nexport { default as SubHeading } from './SubHeading'\nexport { default as Visibility } from './Visibility'\nexport { default as useData } from './data-context/useData'\nexport { default as setData } from './data-context/setData'\nexport { default as getData } from './data-context/getData'\nexport { default as useError } from './data-context/useError'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAAO,QAAQ,WAAW;AAC9C,SAASD,OAAO,IAAIE,OAAO,QAAQ,WAAW;AAC9C,SAASF,OAAO,IAAIG,YAAY,QAAQ,gBAAgB;AACxD,SAASH,OAAO,IAAII,SAAS,QAAQ,aAAa;AAClD,SAASJ,OAAO,IAAIK,WAAW,QAAQ,eAAe;AACtD,SAASL,OAAO,IAAIM,UAAU,QAAQ,cAAc;AACpD,SAASN,OAAO,IAAIO,UAAU,QAAQ,cAAc;AACpD,SAASP,OAAO,IAAIQ,OAAO,QAAQ,wBAAwB;AAC3D,SAASR,OAAO,IAAIS,OAAO,QAAQ,wBAAwB;AAC3D,SAAST,OAAO,IAAIU,OAAO,QAAQ,wBAAwB;AAC3D,SAASV,OAAO,IAAIW,QAAQ,QAAQ,yBAAyB"}

package/extensions/forms/Iterate/Array/Array.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Props as FieldBlockProps } from '../../FieldBlock';
-import { FieldProps, FieldHelpProps } from '../../types';
+import { FieldProps, FieldHelpProps, CustomErrorMessages } from '../../types';
 import { BasicProps as FlexContainerProps } from '../../../../components/flex/Container';
-interface ErrorMessages {
+interface ErrorMessages extends CustomErrorMessages {
     required?: string;
     schema?: string;
 }

package/extensions/forms/Iterate/Array/Array.js.map

@@ -1 +1 @@
-{"version":3,"file":"Array.js","names":["React","useMemo","useCallback","classnames","pointer","IterateElementContext","FieldBlock","useDataValue","pickSpacingProps","pickFlexContainerProps","Flex","ArrayComponent","props","className","layout","placeholder","label","labelDescription","path","value","arrayValue","info","warning","error","emptyValue","width","handleChange","children","elementData","map","elementValue","elementIndex","handleElementChange","newArrayValue","structuredClone","set","handleRemoveElement","splice","handlePush","element","createElement","_extends","contentWidth","undefined","Container","spacing","_ref","Provider","key","index","handleRemove","Array","isArray","childElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport pointer from 'json-pointer'\nimport IterateElementContext from '../IterateElementContext'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport {\n  BasicProps as FlexContainerProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport Flex from '../../../../components/flex/Flex'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<unknown[], undefined, ErrorMessages> &\n  Omit<FieldBlockProps, 'children'> &\n  Omit<FlexContainerProps, 'children' | 'width'> & {\n    children:\n      | React.ReactNode\n      | ((value: any, index: number) => React.ReactNode)\n      | Array<\n          | React.ReactNode\n          | ((value: any, index: number) => React.ReactNode)\n        >\n  }\n\nfunction ArrayComponent(props: Props) {\n  const {\n    className,\n    layout = 'vertical',\n    placeholder,\n    label,\n    labelDescription,\n    path,\n    value: arrayValue,\n    info,\n    warning,\n    error,\n    emptyValue,\n    width,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const elementData: {\n    elementValue: unknown\n    handleElementChange: (path: string, value: unknown) => void\n    handleRemoveElement: () => void\n  }[] = useMemo(() => {\n    return (arrayValue ?? []).map((elementValue, elementIndex) => ({\n      elementValue,\n      handleElementChange: (path, value) => {\n        const newArrayValue = structuredClone(arrayValue)\n        pointer.set(newArrayValue, path, value)\n        handleChange?.(newArrayValue)\n      },\n      handleRemoveElement: () => {\n        const newArrayValue = structuredClone(arrayValue)\n        newArrayValue.splice(elementIndex, 1)\n        handleChange?.(newArrayValue)\n      },\n    }))\n  }, [arrayValue, handleChange])\n\n  const handlePush = useCallback(\n    (element: unknown) => {\n      handleChange([...(arrayValue ?? []), element])\n    },\n    [arrayValue, handleChange]\n  )\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      error={error}\n      width={width}\n      contentWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Container\n        {...pickFlexContainerProps(props as FlexContainerProps, {\n          spacing: 'small',\n        })}\n      >\n        {arrayValue === emptyValue ? (\n          <em>{placeholder}</em>\n        ) : (\n          elementData.map(\n            (\n              { elementValue, handleElementChange, handleRemoveElement },\n              elementIndex\n            ) => {\n              return (\n                <IterateElementContext.Provider\n                  key={`element-${elementIndex}`}\n                  value={{\n                    index: elementIndex,\n                    value: elementValue,\n                    path,\n                    handleChange: handleElementChange,\n                    handleRemove: handleRemoveElement,\n                    handlePush,\n                  }}\n                >\n                  {Array.isArray(children)\n                    ? children.map((childElement) =>\n                        typeof childElement === 'function'\n                          ? childElement(elementValue, elementIndex)\n                          : childElement\n                      )\n                    : typeof children === 'function'\n                    ? children(elementValue, elementIndex)\n                    : children}\n                </IterateElementContext.Provider>\n              )\n            }\n          )\n        )}\n      </Flex.Container>\n    </FieldBlock>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":"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"}
+{"version":3,"file":"Array.js","names":["React","useMemo","useCallback","classnames","pointer","IterateElementContext","FieldBlock","useDataValue","pickSpacingProps","pickFlexContainerProps","Flex","ArrayComponent","props","className","layout","placeholder","label","labelDescription","path","value","arrayValue","info","warning","error","emptyValue","width","handleChange","children","elementData","map","elementValue","elementIndex","handleElementChange","newArrayValue","structuredClone","set","handleRemoveElement","splice","handlePush","element","createElement","_extends","contentWidth","undefined","Container","spacing","_ref","Provider","key","index","handleRemove","Array","isArray","childElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport pointer from 'json-pointer'\nimport IterateElementContext from '../IterateElementContext'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  CustomErrorMessages,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport {\n  BasicProps as FlexContainerProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport Flex from '../../../../components/flex/Flex'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<unknown[], undefined, ErrorMessages> &\n  Omit<FieldBlockProps, 'children'> &\n  Omit<FlexContainerProps, 'children' | 'width'> & {\n    children:\n      | React.ReactNode\n      | ((value: any, index: number) => React.ReactNode)\n      | Array<\n          | React.ReactNode\n          | ((value: any, index: number) => React.ReactNode)\n        >\n  }\n\nfunction ArrayComponent(props: Props) {\n  const {\n    className,\n    layout = 'vertical',\n    placeholder,\n    label,\n    labelDescription,\n    path,\n    value: arrayValue,\n    info,\n    warning,\n    error,\n    emptyValue,\n    width,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const elementData: {\n    elementValue: unknown\n    handleElementChange: (path: string, value: unknown) => void\n    handleRemoveElement: () => void\n  }[] = useMemo(() => {\n    return (arrayValue ?? []).map((elementValue, elementIndex) => ({\n      elementValue,\n      handleElementChange: (path, value) => {\n        const newArrayValue = structuredClone(arrayValue)\n        pointer.set(newArrayValue, path, value)\n        handleChange?.(newArrayValue)\n      },\n      handleRemoveElement: () => {\n        const newArrayValue = structuredClone(arrayValue)\n        newArrayValue.splice(elementIndex, 1)\n        handleChange?.(newArrayValue)\n      },\n    }))\n  }, [arrayValue, handleChange])\n\n  const handlePush = useCallback(\n    (element: unknown) => {\n      handleChange([...(arrayValue ?? []), element])\n    },\n    [arrayValue, handleChange]\n  )\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      error={error}\n      width={width}\n      contentWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Container\n        {...pickFlexContainerProps(props as FlexContainerProps, {\n          spacing: 'small',\n        })}\n      >\n        {arrayValue === emptyValue ? (\n          <em>{placeholder}</em>\n        ) : (\n          elementData.map(\n            (\n              { elementValue, handleElementChange, handleRemoveElement },\n              elementIndex\n            ) => {\n              return (\n                <IterateElementContext.Provider\n                  key={`element-${elementIndex}`}\n                  value={{\n                    index: elementIndex,\n                    value: elementValue,\n                    path,\n                    handleChange: handleElementChange,\n                    handleRemove: handleRemoveElement,\n                    handlePush,\n                  }}\n                >\n                  {Array.isArray(children)\n                    ? children.map((childElement) =>\n                        typeof childElement === 'function'\n                          ? childElement(elementValue, elementIndex)\n                          : childElement\n                      )\n                    : typeof children === 'function'\n                    ? children(elementValue, elementIndex)\n                    : children}\n                </IterateElementContext.Provider>\n              )\n            }\n          )\n        )}\n      </Flex.Container>\n    </FieldBlock>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":"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"}

package/extensions/forms/StepsLayout/StepsLayout.d.ts

@@ -7,6 +7,9 @@ export type Props = ComponentProps & {
     initialActiveIndex?: number;
     onStepChange?: (index: number) => void;
     children: React.ReactNode;
+    variant?: 'sidebar' | 'drawer';
+    noAnimation?: boolean;
+    sidebarId?: string;
 };
 declare function StepsLayout(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace StepsLayout {