@dnb/eufemia 10.20.0 → 10.22.0

package/cjs/components/textarea/Textarea.d.ts

@@ -60,7 +60,7 @@ export interface TextareaProps
   status_props?: FormStatusProps;
   status_no_animation?: boolean;
   /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
    */
   globalStatus?: GlobalStatusConfigObject;
   /**
@@ -68,7 +68,7 @@ export interface TextareaProps
    */
   suffix?: TextareaSuffix;
   /**
-   * The placeholder which shows up once the Textarea value is empty
+   * The placeholder which shows up once the Textarea value is empty.
    */
   placeholder?: string;
   /**
@@ -89,7 +89,7 @@ export interface TextareaProps
    */
   autoresize?: boolean;
   /**
-   * Use a number to define the displayed max length. You can also use an object defining the <a href="uilib/components/fragments/text-counter/">TextCounter</a> `variant` or properties. Please avoid using `maxLength` for accessibility reasons.
+   * Use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons.
    */
   characterCounter?: Omit<TextCounterProps, 'text'> | number;
   /**
@@ -97,19 +97,13 @@ export interface TextareaProps
    */
   autoresize_max_rows?: TextareaAutoresizeMaxRows;
   class?: string;
-  /**
-   * In case we have to set a custom Textarea class.
-   */
   textarea_class?: string;
-  /**
-   * Provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:&#39;2&#39;}}` or a JSON Object `textarea_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as a Textarea element attribute.
-   */
   textarea_attributes?: TextareaTextareaAttributes;
   readOnly?: boolean;
   rows?: TextareaRows;
   cols?: TextareaCols;
   /**
-   * By providing a React.ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: React.Ref;
   className?: string;

package/cjs/components/textarea/TextareaDocs.d.ts

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

package/cjs/components/textarea/TextareaDocs.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textareaProperties = void 0;
+const textareaProperties = {
+  value: {
+    doc: 'The content value of the Textarea.',
+    type: 'string',
+    status: 'optional'
+  },
+  align: {
+    doc: 'Defines the `text-align` of the Textarea. Defaults to `left`.',
+    type: 'string',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'If set to `true`, then the Textarea field will be 100% in `width`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  placeholder: {
+    doc: 'The placeholder which shows up once the Textarea value is empty.',
+    type: 'string',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',
+    type: 'string',
+    status: 'optional'
+  },
+  label_direction: {
+    doc: 'Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.',
+    type: 'string',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the Textarea more than the label. You can also send in a React component, so it gets wrapped inside the Textarea component.',
+    type: 'string',
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  autoresize: {
+    doc: 'Use `true` to make the Textarea grow and shrink depending on how many lines the user has filled.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  autoresize_max_rows: {
+    doc: 'Set a number to define how many rows the Textarea can auto grow.',
+    type: 'number',
+    status: 'optional'
+  },
+  characterCounter: {
+    doc: 'Use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons.',
+    type: ['number', 'object'],
+    status: 'optional'
+  },
+  status: {
+    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: ['string', 'boolean'],
+    status: 'optional'
+  },
+  status_state: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'object',
+    status: 'optional'
+  },
+  textarea_state: {
+    doc: 'To control the visual focus state as a prop, like `focus` or `blur`.',
+    type: 'string',
+    status: 'optional'
+  },
+  inner_ref: {
+    doc: 'By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+exports.textareaProperties = textareaProperties;
+//# sourceMappingURL=TextareaDocs.js.map

package/cjs/components/textarea/TextareaDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaDocs.js","names":["textareaProperties","value","doc","type","status","align","stretch","placeholder","label","label_direction","suffix","label_sr_only","autoresize","autoresize_max_rows","characterCounter","status_state","status_props","globalStatus","textarea_state","inner_ref","skeleton","exports"],"sources":["../../../../src/components/textarea/TextareaDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const textareaProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The content value of the Textarea.',\n    type: 'string',\n    status: 'optional',\n  },\n  align: {\n    doc: 'Defines the `text-align` of the Textarea. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the Textarea field will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'The placeholder which shows up once the Textarea value is empty.',\n    type: 'string',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'string',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Textarea more than the label. You can also send in a React component, so it gets wrapped inside the Textarea component.',\n    type: 'string',\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  autoresize: {\n    doc: 'Use `true` to make the Textarea grow and shrink depending on how many lines the user has filled.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  autoresize_max_rows: {\n    doc: 'Set a number to define how many rows the Textarea can auto grow.',\n    type: 'number',\n    status: 'optional',\n  },\n  characterCounter: {\n    doc: 'Use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons.',\n    type: ['number', 'object'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['string', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  textarea_state: {\n    doc: 'To control the visual focus state as a prop, like `focus` or `blur`.',\n    type: 'string',\n    status: 'optional',\n  },\n  inner_ref: {\n    doc: 'By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,kBAAwC,GAAG;EACtDC,KAAK,EAAE;IACLC,GAAG,EAAE,oCAAoC;IACzCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,eAAe,EAAE;IACfP,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,MAAM,EAAE;IACNR,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,aAAa,EAAE;IACbT,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDS,mBAAmB,EAAE;IACnBX,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,gBAAgB,EAAE;IAChBZ,GAAG,EAAE,qOAAqO;IAC1OC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDA,MAAM,EAAE;IACNF,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC3BC,MAAM,EAAE;EACV,CAAC;EACDW,YAAY,EAAE;IACZb,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDY,YAAY,EAAE;IACZd,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,YAAY,EAAE;IACZf,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDc,cAAc,EAAE;IACdhB,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDe,SAAS,EAAE;IACTjB,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDgB,QAAQ,EAAE;IACRlB,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAAAiB,OAAA,CAAArB,kBAAA,GAAAA,kBAAA"}

package/cjs/components/textarea/style/dnb-textarea.css

@@ -50,6 +50,7 @@
 .dnb-textarea__textarea {
   position: relative;
   z-index: 2;
+  width: 100%;
   cursor: auto;
   border: none;
   margin: 0;

package/cjs/components/textarea/style/dnb-textarea.min.css

@@ -1 +1 @@
-.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:0 var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);background-color:var(--color-white);border-color:transparent;border-radius:.25rem;bottom:-.5rem;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex;margin:var(--textarea-padding-width) 0}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea .dnb-text-counter{margin-left:-.5rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:.5rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}
+.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:0 var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);background-color:var(--color-white);border-color:transparent;border-radius:.25rem;bottom:-.5rem;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex;margin:var(--textarea-padding-width) 0}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea .dnb-text-counter{margin-left:-.5rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;width:100%;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:.5rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}

package/cjs/components/textarea/style/dnb-textarea.scss

@@ -78,6 +78,9 @@
     position: relative;
     z-index: 2;
 
+    // To prevent textarea element from going outside of boundaries on smaller screens
+    width: 100%;
+
     @include textareaStyleCommon();
 
     @include scrollY(auto);

package/cjs/components/upload/UploadInfo.js

@@ -35,7 +35,7 @@ const UploadInfo = () => {
   }, text), _react.default.createElement(_Dl.default, {
     top: "small",
     bottom: 0,
-    direction: "horizontal",
+    layout: "horizontal",
     className: "dnb-upload__condition-list"
   }, prettyfiedAcceptedFileFormats && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileTypeDescription), _react.default.createElement(_Dd.default, null, prettyfiedAcceptedFileFormats)), _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileSizeDescription), _react.default.createElement(_Dd.default, null, String(fileSizeContent).replace('%size', (0, _NumberUtils.format)(fileMaxSize).toString()))), filesAmountLimit < _UploadContext.defaultProps.filesAmountLimit && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileAmountDescription), _react.default.createElement(_Dd.default, null, filesAmountLimit))));
 };

package/cjs/components/upload/UploadInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInfo.js","names":["_react","_interopRequireDefault","require","_UploadContext","_Lead","_P","_Dl","_Dt","_Dd","_NumberUtils","obj","__esModule","default","UploadInfo","context","React","useContext","UploadContext","title","text","acceptedFileTypes","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","filesAmountLimit","fileMaxSize","prettyfiedAcceptedFileFormats","join","toUpperCase","createElement","Fragment","space","top","className","bottom","direction","Item","String","replace","format","toString","defaultProps","_default","exports"],"sources":["../../../../src/components/upload/UploadInfo.tsx"],"sourcesContent":["import React from 'react'\nimport { defaultProps, UploadContext } from './UploadContext'\nimport Lead from '../../elements/Lead'\nimport P from '../../elements/P'\nimport Dl from '../../elements/Dl'\nimport Dt from '../../elements/Dt'\nimport Dd from '../../elements/Dd'\nimport { format } from '../number-format/NumberUtils'\n\nconst UploadInfo = () => {\n  const context = React.useContext(UploadContext)\n\n  const {\n    title,\n    text,\n    acceptedFileTypes,\n    fileTypeDescription,\n    fileSizeDescription,\n    fileAmountDescription,\n    fileSizeContent,\n    filesAmountLimit,\n    fileMaxSize,\n  } = context\n\n  const prettyfiedAcceptedFileFormats = acceptedFileTypes\n    .join(', ')\n    .toUpperCase()\n\n  return (\n    <>\n      <Lead space=\"0\">{title}</Lead>\n\n      <P top=\"xx-small\" className=\"dnb-upload__text\">\n        {text}\n      </P>\n\n      <Dl\n        top=\"small\"\n        bottom={0}\n        direction=\"horizontal\"\n        className=\"dnb-upload__condition-list\"\n      >\n        {prettyfiedAcceptedFileFormats && (\n          <Dl.Item>\n            <Dt>{fileTypeDescription}</Dt>\n            <Dd>{prettyfiedAcceptedFileFormats}</Dd>\n          </Dl.Item>\n        )}\n\n        <Dl.Item>\n          <Dt>{fileSizeDescription}</Dt>\n          <Dd>\n            {String(fileSizeContent).replace(\n              '%size',\n              format(fileMaxSize).toString()\n            )}\n          </Dd>\n        </Dl.Item>\n\n        {filesAmountLimit < defaultProps.filesAmountLimit && (\n          <Dl.Item>\n            <Dt>{fileAmountDescription}</Dt>\n            <Dd>{filesAmountLimit}</Dd>\n          </Dl.Item>\n        )}\n      </Dl>\n    </>\n  )\n}\n\nexport default UploadInfo\n"],"mappings":"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"}
+{"version":3,"file":"UploadInfo.js","names":["_react","_interopRequireDefault","require","_UploadContext","_Lead","_P","_Dl","_Dt","_Dd","_NumberUtils","obj","__esModule","default","UploadInfo","context","React","useContext","UploadContext","title","text","acceptedFileTypes","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","filesAmountLimit","fileMaxSize","prettyfiedAcceptedFileFormats","join","toUpperCase","createElement","Fragment","space","top","className","bottom","layout","Item","String","replace","format","toString","defaultProps","_default","exports"],"sources":["../../../../src/components/upload/UploadInfo.tsx"],"sourcesContent":["import React from 'react'\nimport { defaultProps, UploadContext } from './UploadContext'\nimport Lead from '../../elements/Lead'\nimport P from '../../elements/P'\nimport Dl from '../../elements/Dl'\nimport Dt from '../../elements/Dt'\nimport Dd from '../../elements/Dd'\nimport { format } from '../number-format/NumberUtils'\n\nconst UploadInfo = () => {\n  const context = React.useContext(UploadContext)\n\n  const {\n    title,\n    text,\n    acceptedFileTypes,\n    fileTypeDescription,\n    fileSizeDescription,\n    fileAmountDescription,\n    fileSizeContent,\n    filesAmountLimit,\n    fileMaxSize,\n  } = context\n\n  const prettyfiedAcceptedFileFormats = acceptedFileTypes\n    .join(', ')\n    .toUpperCase()\n\n  return (\n    <>\n      <Lead space=\"0\">{title}</Lead>\n\n      <P top=\"xx-small\" className=\"dnb-upload__text\">\n        {text}\n      </P>\n\n      <Dl\n        top=\"small\"\n        bottom={0}\n        layout=\"horizontal\"\n        className=\"dnb-upload__condition-list\"\n      >\n        {prettyfiedAcceptedFileFormats && (\n          <Dl.Item>\n            <Dt>{fileTypeDescription}</Dt>\n            <Dd>{prettyfiedAcceptedFileFormats}</Dd>\n          </Dl.Item>\n        )}\n\n        <Dl.Item>\n          <Dt>{fileSizeDescription}</Dt>\n          <Dd>\n            {String(fileSizeContent).replace(\n              '%size',\n              format(fileMaxSize).toString()\n            )}\n          </Dd>\n        </Dl.Item>\n\n        {filesAmountLimit < defaultProps.filesAmountLimit && (\n          <Dl.Item>\n            <Dt>{fileAmountDescription}</Dt>\n            <Dd>{filesAmountLimit}</Dd>\n          </Dl.Item>\n        )}\n      </Dl>\n    </>\n  )\n}\n\nexport default UploadInfo\n"],"mappings":"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"}

package/cjs/core/jest/jestSetupScreenshots.css

@@ -34,3 +34,10 @@ html {
 
   background: #fff;
 }
+
+/**
+* Hide "Preparing requested page" popup
+*/
+gatsby-qod {
+  opacity: 0;
+}

package/cjs/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss

@@ -2,6 +2,7 @@
 
 .dnb-blockquote {
   --blockquote-padding-top: 1.5rem;
+  --blockquote-padding-bottom: 2rem;
   --blockquote-quote-padding: 5.5rem;
   --blockquote-cite-style: normal;
 

package/cjs/elements/lib.d.ts

@@ -57,7 +57,7 @@ export declare const getElements: () => {
         innerSpace?: import("../shared/types").SpaceTypeAll | import("../shared/types").SpaceTypeMedia;
     } & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<unknown>>;
     Dl: {
-        ({ direction, ...props }: import("./Dl").DlAllProps): import("react/jsx-runtime").JSX.Element;
+        ({ direction, layout, ...props }: import("./Dl").DlAllProps): import("react/jsx-runtime").JSX.Element;
         Item({ className, children, ...props }: import("react").AllHTMLAttributes<HTMLSpanElement> & import("../shared/types").SpacingElementProps & {
             space?: import("../shared/types").SpaceTypeAll;
             innerSpace?: import("../shared/types").SpaceTypeAll | import("../shared/types").SpaceTypeMedia;

package/cjs/elements/lists/Dl.d.ts

@@ -9,11 +9,15 @@ export type DlProps = {
     /**
      * Use "true" to horizontally align both the term and the description
      */
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    /**
+     * @deprecated Use layout instead
+     */
     direction?: 'vertical' | 'horizontal';
 };
 export type DlAllProps = DlProps & React.AllHTMLAttributes<HTMLDListElement> & ElementProps;
 declare const Dl: {
-    ({ direction, ...props }: DlAllProps): import("react/jsx-runtime").JSX.Element;
+    ({ direction, layout, ...props }: DlAllProps): import("react/jsx-runtime").JSX.Element;
     Item({ className, children, ...props }: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps): import("react/jsx-runtime").JSX.Element;
     _supportsSpacingProps: boolean;
 };

package/cjs/elements/lists/Dl.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Element = _interopRequireDefault(require("../Element"));
-const _excluded = ["direction"],
+const _excluded = ["direction", "layout"],
   _excluded2 = ["className", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -15,11 +15,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const Dl = _ref => {
   let {
-      direction
+      direction,
+      layout
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  if (direction) {
-    props.className = (0, _classnames.default)(props.className, `dnb-dl__direction--${direction}`);
+  if (layout || direction) {
+    props.className = (0, _classnames.default)(props.className, `dnb-dl__layout--${layout || direction}`);
   }
   return _react.default.createElement(_Element.default, _extends({
     as: "dl"

package/cjs/elements/lists/Dl.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dl.js","names":["_react","_interopRequireDefault","require","_classnames","_Element","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Dl","_ref","direction","props","className","classnames","createElement","as","skeleton","Item","_ref2","children","Fragment","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/elements/lists/Dl.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type DlProps = {\n  /**\n   * Use \"true\" to horizontally align both the term and the description\n   */\n  direction?: 'vertical' | 'horizontal'\n}\n\nexport type DlAllProps = DlProps &\n  React.AllHTMLAttributes<HTMLDListElement> &\n  ElementProps\n\nconst Dl = ({ direction, ...props }: DlAllProps) => {\n  if (direction) {\n    props.className = classnames(\n      props.className,\n      `dnb-dl__direction--${direction}`\n    )\n  }\n  return <E as=\"dl\" {...props} skeleton={false} />\n}\n\nDl.Item = ({\n  className,\n  children,\n  ...props\n}: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps) => {\n  return (\n    <>\n      {children}\n      <E\n        as=\"dd\"\n        aria-hidden\n        className={classnames(className, 'dnb-dl__item')}\n        {...props}\n      />\n    </>\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nDl._supportsSpacingProps = true\n\nexport default Dl\n"],"mappings":"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"}
+{"version":3,"file":"Dl.js","names":["_react","_interopRequireDefault","require","_classnames","_Element","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Dl","_ref","direction","layout","props","className","classnames","createElement","as","skeleton","Item","_ref2","children","Fragment","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/elements/lists/Dl.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type DlProps = {\n  /**\n   * Use \"true\" to horizontally align both the term and the description\n   */\n  layout?: 'vertical' | 'horizontal' | 'grid'\n\n  /**\n   * @deprecated Use layout instead\n   */\n  direction?: 'vertical' | 'horizontal'\n}\n\nexport type DlAllProps = DlProps &\n  React.AllHTMLAttributes<HTMLDListElement> &\n  ElementProps\n\nconst Dl = ({ direction, layout, ...props }: DlAllProps) => {\n  if (layout || direction) {\n    props.className = classnames(\n      props.className,\n      `dnb-dl__layout--${layout || direction}`\n    )\n  }\n  return <E as=\"dl\" {...props} skeleton={false} />\n}\n\nDl.Item = ({\n  className,\n  children,\n  ...props\n}: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps) => {\n  return (\n    <>\n      {children}\n      <E\n        as=\"dd\"\n        aria-hidden\n        className={classnames(className, 'dnb-dl__item')}\n        {...props}\n      />\n    </>\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nDl._supportsSpacingProps = true\n\nexport default Dl\n"],"mappings":"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"}

package/cjs/elements/lists/style/lists-mixins.scss

@@ -144,7 +144,7 @@
 
   // Inline
   @include allAbove(small) {
-    &__direction--horizontal {
+    &__layout--horizontal {
       // We can not use gap: 0.5rem because of our wrapper "__item"
       display: flex;
       flex-wrap: wrap;
@@ -170,10 +170,33 @@
     }
 
     dd#{&}__item {
+      display: none;
       flex-basis: 100%; // ensures we always break to a new line, no matter what the available space is
       height: 0;
       margin: 0;
     }
+
+    &__layout--grid {
+      display: grid;
+      grid-template-columns: 1fr 2fr;
+      column-gap: 2rem;
+      row-gap: 1rem;
+
+      /* stylelint-disable */
+      & dt {
+        max-width: 15ch;
+      }
+      & dd {
+        max-width: 30ch;
+        align-self: end;
+      }
+      & dt,
+      & dd,
+      & dd ~ dt {
+        margin: 0;
+      }
+      /* stylelint-enable */
+    }
   }
 }
 

package/cjs/extensions/forms/DataContext/Context.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Ajv } from '../utils/ajv';
-import { AllJSONSchemaVersions, CustomErrorMessagesWithPaths } from '../types';
-export type Path = string;
+import { AllJSONSchemaVersions, CustomErrorMessagesWithPaths, Path } from '../types';
 type HandleSubmitProps = {
     formElement?: HTMLFormElement;
 };

package/cjs/extensions/forms/DataContext/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["_react","_interopRequireDefault","require","_ajv","obj","__esModule","default","defaultContextState","hasContext","data","undefined","schema","handlePathChange","updateDataValue","validateData","handleSubmit","scrollToTop","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldError","setValueWithError","setProps","ajvInstance","makeAjvInstance","contextErrorMessages","_isInsideFormElement","exports","Context","React","createContext","_default"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, makeAjvInstance } from '../utils/ajv'\nimport {\n  AllJSONSchemaVersions,\n  CustomErrorMessagesWithPaths,\n} from '../types'\n\nexport type Path = string\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport interface ContextState {\n  hasContext: boolean\n  /** The dataset for the form / form steps */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (path: Path, value: any) => void\n  updateDataValue: (\n    path: Path,\n    value: any,\n    props: { disabled: boolean }\n  ) => void\n  validateData: () => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  scrollToTop: () => void\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: Path) => void\n  handleUnMountField: (path: Path) => void\n  setValueWithError: (path: Path, hasError: boolean) => void\n  setProps: (path: Path, props: any) => void\n  hasErrors: () => boolean\n  hasFieldError: (path: Path) => boolean\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  _isInsideFormElement?: boolean\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  handlePathChange: () => null,\n  updateDataValue: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  hasFieldError: () => false,\n  setValueWithError: () => null,\n  setProps: () => null,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  _isInsideFormElement: false,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAmD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AA8C5C,MAAMG,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,iBAAiB,EAAEA,CAAA,KAAM,IAAI;EAC7BC,QAAQ,EAAEA,CAAA,KAAM,IAAI;EACpBC,WAAW,EAAE,IAAAC,oBAAe,EAAC,CAAC;EAC9BC,oBAAoB,EAAElB,SAAS;EAC/BmB,oBAAoB,EAAE;AACxB,CAAC;AAAAC,OAAA,CAAAvB,mBAAA,GAAAA,mBAAA;AAED,MAAMwB,OAAO,GAAGC,cAAK,CAACC,aAAa,CAAe1B,mBAAmB,CAAC;AAAA,IAAA2B,QAAA,GAEvDH,OAAO;AAAAD,OAAA,CAAAxB,OAAA,GAAA4B,QAAA"}
+{"version":3,"file":"Context.js","names":["_react","_interopRequireDefault","require","_ajv","obj","__esModule","default","defaultContextState","hasContext","data","undefined","schema","handlePathChange","updateDataValue","validateData","handleSubmit","scrollToTop","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldError","setValueWithError","setProps","ajvInstance","makeAjvInstance","contextErrorMessages","_isInsideFormElement","exports","Context","React","createContext","_default"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, makeAjvInstance } from '../utils/ajv'\nimport {\n  AllJSONSchemaVersions,\n  CustomErrorMessagesWithPaths,\n  Path,\n} from '../types'\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport interface ContextState {\n  hasContext: boolean\n  /** The dataset for the form / form steps */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (path: Path, value: any) => void\n  updateDataValue: (\n    path: Path,\n    value: any,\n    props: { disabled: boolean }\n  ) => void\n  validateData: () => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  scrollToTop: () => void\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: Path) => void\n  handleUnMountField: (path: Path) => void\n  setValueWithError: (path: Path, hasError: boolean) => void\n  setProps: (path: Path, props: any) => void\n  hasErrors: () => boolean\n  hasFieldError: (path: Path) => boolean\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  _isInsideFormElement?: boolean\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  handlePathChange: () => null,\n  updateDataValue: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  hasFieldError: () => false,\n  setValueWithError: () => null,\n  setProps: () => null,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  _isInsideFormElement: false,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAmD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AA6C5C,MAAMG,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,iBAAiB,EAAEA,CAAA,KAAM,IAAI;EAC7BC,QAAQ,EAAEA,CAAA,KAAM,IAAI;EACpBC,WAAW,EAAE,IAAAC,oBAAe,EAAC,CAAC;EAC9BC,oBAAoB,EAAElB,SAAS;EAC/BmB,oBAAoB,EAAE;AACxB,CAAC;AAAAC,OAAA,CAAAvB,mBAAA,GAAAA,mBAAA;AAED,MAAMwB,OAAO,GAAGC,cAAK,CAACC,aAAa,CAAe1B,mBAAmB,CAAC;AAAA,IAAA2B,QAAA,GAEvDH,OAAO;AAAAD,OAAA,CAAAxB,OAAA,GAAA4B,QAAA"}

package/cjs/extensions/forms/DataContext/Provider/Provider.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { JsonObject } from 'json-pointer';
 import { Ajv } from '../../utils/ajv';
-import { CustomErrorMessagesWithPaths, AllJSONSchemaVersions, FieldProps } from '../../types';
-import { Path } from '../Context';
+import { CustomErrorMessagesWithPaths, AllJSONSchemaVersions, FieldProps, Path } from '../../types';
 export type UpdateDataValue = (path: Path, data: unknown) => void;
 export type FilterDataHandler<Data> = (data: Data, filter: FilterData) => Partial<Data>;
 export type FilterData = (path: Path, value: any, props: FieldProps) => boolean | undefined;

package/cjs/extensions/forms/DataContext/Provider/Provider.js

@@ -25,15 +25,9 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const useLayoutEffect = typeof window === 'undefined' ? _react.default.useEffect : _react.default.useLayoutEffect;
-function addListPath(paths, path) {
-  return paths.includes(path) ? paths : paths.concat(path);
-}
-function removeListPath(paths, path) {
-  return paths.filter(thisPath => thisPath !== path);
-}
 const isArrayJsonPointer = /^\/\d+(\/|$)/;
 function Provider(_ref) {
-  var _sharedAtachments$dat;
+  var _sharedAttachments$da;
   let {
       id,
       defaultData,
@@ -75,12 +69,8 @@ function Provider(_ref) {
     return data !== null && data !== void 0 ? data : defaultData;
   }, []);
   const internalDataRef = (0, _react.useRef)(initialData);
-  const cacheRef = (0, _react.useRef)({
-    data,
-    schema
-  });
   const ajvValidatorRef = (0, _react.useRef)();
-  const validateData = (0, _react.useCallback)(() => {
+  const validateDataNow = (0, _react.useCallback)(() => {
     var _ajvValidatorRef$curr;
     if (!ajvValidatorRef.current) {
       return;
@@ -90,13 +80,21 @@ function Provider(_ref) {
     } else {
       errorsRef.current = undefined;
     }
-    forceUpdate();
   }, []);
+  const validateData = (0, _react.useCallback)(() => {
+    if (!ajvValidatorRef.current) {
+      return;
+    }
+    validateDataNow();
+    forceUpdate();
+  }, [validateDataNow]);
   const hasFieldError = (0, _react.useCallback)(path => {
     var _errorsRef$current;
     return Boolean(((_errorsRef$current = errorsRef.current) === null || _errorsRef$current === void 0 ? void 0 : _errorsRef$current[path]) !== undefined || valuesWithErrorRef.current.includes(path));
   }, []);
-  const hasErrors = (0, _react.useCallback)(() => Boolean(mountedFieldPathsRef.current.find(mountedFieldPath => hasFieldError(mountedFieldPath))), [hasFieldError]);
+  const hasErrors = (0, _react.useCallback)(() => {
+    return Boolean(mountedFieldPathsRef.current.find(path => hasFieldError(path)));
+  }, [hasFieldError]);
   const setValueWithError = (0, _react.useCallback)((path, withError) => {
     if (withError !== valuesWithErrorRef.current.includes(path)) {
       valuesWithErrorRef.current = withError ? addListPath(valuesWithErrorRef.current, path) : removeListPath(valuesWithErrorRef.current, path);
@@ -124,29 +122,48 @@ function Provider(_ref) {
     fieldPropsRef.current[path] = props;
   }, []);
   const sharedData = (0, _useSharedState.useSharedState)(id);
-  const sharedAtachments = (0, _useSharedState.useSharedState)(id + '-attachments');
+  const sharedAttachments = (0, _useSharedState.useSharedState)(id + '-attachments');
   const updateSharedData = sharedData.update;
   const extendSharedData = sharedData.extend;
-  const extendAtachment = sharedAtachments.extend;
-  const rerenderUseDataHook = (_sharedAtachments$dat = sharedAtachments.data) === null || _sharedAtachments$dat === void 0 ? void 0 : _sharedAtachments$dat.rerenderUseDataHook;
-  (0, _react.useMemo)(() => {
-    if (id && sharedData.data && !initialData) {
-      internalDataRef.current = sharedData.data;
+  const extendAttachment = sharedAttachments.extend;
+  const rerenderUseDataHook = (_sharedAttachments$da = sharedAttachments.data) === null || _sharedAttachments$da === void 0 ? void 0 : _sharedAttachments$da.rerenderUseDataHook;
+  const cacheRef = (0, _react.useRef)({
+    data,
+    schema,
+    shared: sharedData.data,
+    hasUsedInitialData: false
+  });
+  internalDataRef.current = (0, _react.useMemo)(() => {
+    if (id && initialData && !sharedData.data) {
+      sharedData.update(initialData);
+    }
+    if (id && initialData && sharedData.data && cacheRef.current.shared === sharedData.data && internalDataRef.current === initialData) {
+      return _objectSpread(_objectSpread({}, internalDataRef.current), sharedData.data);
     }
-  }, [id, initialData, sharedData.data]);
+    if (id && !initialData && !internalDataRef.current && sharedData.data && cacheRef.current.shared === sharedData.data) {
+      return sharedData.data;
+    }
+    if (id && sharedData.data && cacheRef.current.shared !== sharedData.data && sharedData.data !== internalDataRef.current) {
+      cacheRef.current.shared = sharedData.data;
+      return _objectSpread(_objectSpread({}, internalDataRef.current), sharedData.data);
+    }
+    if (data !== cacheRef.current.data) {
+      cacheRef.current.data = data;
+      return data;
+    }
+    return internalDataRef.current;
+  }, [data, id, initialData, sharedData]);
   useLayoutEffect(() => {
-    if (id && !sharedData.data && initialData) {
+    if (id && initialData && !sharedData.data) {
       extendSharedData === null || extendSharedData === void 0 ? void 0 : extendSharedData(initialData);
     }
   }, [id, initialData, extendSharedData, sharedData.data]);
-  useLayoutEffect(() => {
-    if (id && sharedData.data && sharedData.data !== internalDataRef.current) {
-      internalDataRef.current = sharedData.data;
-    }
-  }, [id, sharedData.data]);
+  (0, _react.useMemo)(() => {
+    validateDataNow();
+  }, [internalDataRef.current]);
   useLayoutEffect(() => {
     if (id) {
-      extendAtachment === null || extendAtachment === void 0 ? void 0 : extendAtachment({
+      extendAttachment === null || extendAttachment === void 0 ? void 0 : extendAttachment({
         filterDataHandler,
         hasErrors
       });
@@ -154,7 +171,7 @@ function Provider(_ref) {
         rerenderUseDataHook === null || rerenderUseDataHook === void 0 ? void 0 : rerenderUseDataHook();
       }
     }
-  }, [filterData, filterDataHandler, rerenderUseDataHook, hasErrors, id, extendAtachment]);
+  }, [filterData, filterDataHandler, rerenderUseDataHook, hasErrors, id, extendAttachment]);
   const updateDataValue = (0, _react.useCallback)((path, value) => {
     var _internalDataRef$curr;
     if (!path) {
@@ -253,23 +270,14 @@ function Provider(_ref) {
     validateData();
   });
   (0, _useUpdateEffect.default)(() => {
-    let hadChanges = false;
-    if (data !== cacheRef.current.data) {
-      internalDataRef.current = data;
-      hadChanges = true;
-      cacheRef.current.data = data;
-    }
     if (schema && schema !== cacheRef.current.schema) {
       var _ajvRef$current2;
-      ajvValidatorRef.current = (_ajvRef$current2 = ajvRef.current) === null || _ajvRef$current2 === void 0 ? void 0 : _ajvRef$current2.compile(schema);
-      hadChanges = true;
       cacheRef.current.schema = schema;
-    }
-    if (hadChanges) {
+      ajvValidatorRef.current = (_ajvRef$current2 = ajvRef.current) === null || _ajvRef$current2 === void 0 ? void 0 : _ajvRef$current2.compile(schema);
       validateData();
       forceUpdate();
     }
-  }, [data, schema, validateData, forceUpdate]);
+  }, [schema, validateData, forceUpdate]);
   return _react.default.createElement(_Context.default.Provider, {
     value: _objectSpread(_objectSpread({
       hasContext: true,
@@ -296,4 +304,10 @@ function Provider(_ref) {
     })
   }, children);
 }
+function addListPath(paths, path) {
+  return paths.includes(path) ? paths : paths.concat(path);
+}
+function removeListPath(paths, path) {
+  return paths.filter(thisPath => thisPath !== path);
+}
 //# sourceMappingURL=Provider.js.map