@dnb/eufemia 10.20.0 → 10.22.0

package/es/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/es/components/textarea/TextareaDocs.d.ts

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

package/es/components/textarea/TextareaDocs.js

@@ -0,0 +1,98 @@
+export 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'
+  }
+};
+//# sourceMappingURL=TextareaDocs.js.map

package/es/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"],"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":"AAEA,OAAO,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"}

package/es/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/es/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/es/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/es/components/upload/UploadInfo.js

@@ -28,7 +28,7 @@ const UploadInfo = () => {
   }, text), React.createElement(Dl, {
     top: "small",
     bottom: 0,
-    direction: "horizontal",
+    layout: "horizontal",
     className: "dnb-upload__condition-list"
   }, prettyfiedAcceptedFileFormats && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettyfiedAcceptedFileFormats)), React.createElement(Dl.Item, null, React.createElement(Dt, null, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), filesAmountLimit < defaultProps.filesAmountLimit && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"UploadInfo.js","names":["React","defaultProps","UploadContext","Lead","P","Dl","Dt","Dd","format","UploadInfo","context","useContext","title","text","acceptedFileTypes","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","filesAmountLimit","fileMaxSize","prettyfiedAcceptedFileFormats","join","toUpperCase","createElement","Fragment","space","top","className","bottom","direction","Item","String","replace","toString"],"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":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,QAAQ,iBAAiB;AAC7D,OAAOC,IAAI,MAAM,qBAAqB;AACtC,OAAOC,CAAC,MAAM,kBAAkB;AAChC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,SAASC,MAAM,QAAQ,8BAA8B;AAErD,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACvB,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,aAAa,CAAC;EAE/C,MAAM;IACJU,KAAK;IACLC,IAAI;IACJC,iBAAiB;IACjBC,mBAAmB;IACnBC,mBAAmB;IACnBC,qBAAqB;IACrBC,eAAe;IACfC,gBAAgB;IAChBC;EACF,CAAC,GAAGV,OAAO;EAEX,MAAMW,6BAA6B,GAAGP,iBAAiB,CACpDQ,IAAI,CAAC,IAAI,CAAC,CACVC,WAAW,CAAC,CAAC;EAEhB,OACEvB,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACEzB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACuB,KAAK,EAAC;EAAG,GAAEd,KAAY,CAAC,EAE9BZ,KAAA,CAAAwB,aAAA,CAACpB,CAAC;IAACuB,GAAG,EAAC,UAAU;IAACC,SAAS,EAAC;EAAkB,GAC3Cf,IACA,CAAC,EAEJb,KAAA,CAAAwB,aAAA,CAACnB,EAAE;IACDsB,GAAG,EAAC,OAAO;IACXE,MAAM,EAAE,CAAE;IACVC,SAAS,EAAC,YAAY;IACtBF,SAAS,EAAC;EAA4B,GAErCP,6BAA6B,IAC5BrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAES,mBAAwB,CAAC,EAC9Bf,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QAAEc,6BAAkC,CAChC,CACV,EAEDrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEU,mBAAwB,CAAC,EAC9BhB,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QACAyB,MAAM,CAACd,eAAe,CAAC,CAACe,OAAO,CAC9B,OAAO,EACPzB,MAAM,CAACY,WAAW,CAAC,CAACc,QAAQ,CAAC,CAC/B,CACE,CACG,CAAC,EAETf,gBAAgB,GAAGlB,YAAY,CAACkB,gBAAgB,IAC/CnB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEW,qBAA0B,CAAC,EAChCjB,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QAAEY,gBAAqB,CACnB,CAET,CACJ,CAAC;AAEP,CAAC;AAED,eAAeV,UAAU"}
+{"version":3,"file":"UploadInfo.js","names":["React","defaultProps","UploadContext","Lead","P","Dl","Dt","Dd","format","UploadInfo","context","useContext","title","text","acceptedFileTypes","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","filesAmountLimit","fileMaxSize","prettyfiedAcceptedFileFormats","join","toUpperCase","createElement","Fragment","space","top","className","bottom","layout","Item","String","replace","toString"],"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":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,QAAQ,iBAAiB;AAC7D,OAAOC,IAAI,MAAM,qBAAqB;AACtC,OAAOC,CAAC,MAAM,kBAAkB;AAChC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,SAASC,MAAM,QAAQ,8BAA8B;AAErD,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACvB,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,aAAa,CAAC;EAE/C,MAAM;IACJU,KAAK;IACLC,IAAI;IACJC,iBAAiB;IACjBC,mBAAmB;IACnBC,mBAAmB;IACnBC,qBAAqB;IACrBC,eAAe;IACfC,gBAAgB;IAChBC;EACF,CAAC,GAAGV,OAAO;EAEX,MAAMW,6BAA6B,GAAGP,iBAAiB,CACpDQ,IAAI,CAAC,IAAI,CAAC,CACVC,WAAW,CAAC,CAAC;EAEhB,OACEvB,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACEzB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACuB,KAAK,EAAC;EAAG,GAAEd,KAAY,CAAC,EAE9BZ,KAAA,CAAAwB,aAAA,CAACpB,CAAC;IAACuB,GAAG,EAAC,UAAU;IAACC,SAAS,EAAC;EAAkB,GAC3Cf,IACA,CAAC,EAEJb,KAAA,CAAAwB,aAAA,CAACnB,EAAE;IACDsB,GAAG,EAAC,OAAO;IACXE,MAAM,EAAE,CAAE;IACVC,MAAM,EAAC,YAAY;IACnBF,SAAS,EAAC;EAA4B,GAErCP,6BAA6B,IAC5BrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAES,mBAAwB,CAAC,EAC9Bf,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QAAEc,6BAAkC,CAChC,CACV,EAEDrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEU,mBAAwB,CAAC,EAC9BhB,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QACAyB,MAAM,CAACd,eAAe,CAAC,CAACe,OAAO,CAC9B,OAAO,EACPzB,MAAM,CAACY,WAAW,CAAC,CAACc,QAAQ,CAAC,CAC/B,CACE,CACG,CAAC,EAETf,gBAAgB,GAAGlB,YAAY,CAACkB,gBAAgB,IAC/CnB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEW,qBAA0B,CAAC,EAChCjB,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QAAEY,gBAAqB,CACnB,CAET,CACJ,CAAC;AAEP,CAAC;AAED,eAAeV,UAAU"}

package/es/core/jest/jestSetupScreenshots.css

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

package/es/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/es/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/es/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/es/elements/lists/Dl.js

@@ -1,17 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["direction"],
+const _excluded = ["direction", "layout"],
   _excluded2 = ["className", "children"];
 import React from 'react';
 import classnames from 'classnames';
 import E from '../Element';
 const Dl = _ref => {
   let {
-      direction
+      direction,
+      layout
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  if (direction) {
-    props.className = classnames(props.className, `dnb-dl__direction--${direction}`);
+  if (layout || direction) {
+    props.className = classnames(props.className, `dnb-dl__layout--${layout || direction}`);
   }
   return React.createElement(E, _extends({
     as: "dl"

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

@@ -1 +1 @@
-{"version":3,"file":"Dl.js","names":["React","classnames","E","Dl","_ref","direction","props","_objectWithoutProperties","_excluded","className","createElement","_extends","as","skeleton","Item","_ref2","children","_excluded2","Fragment","_supportsSpacingProps"],"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":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAc5C,MAAMC,EAAE,GAAGC,IAAA,IAAyC;EAAA,IAAxC;MAAEC;IAAgC,CAAC,GAAAD,IAAA;IAAnBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAC/B,IAAIH,SAAS,EAAE;IACbC,KAAK,CAACG,SAAS,GAAGR,UAAU,CAC1BK,KAAK,CAACG,SAAS,EACd,sBAAqBJ,SAAU,EAClC,CAAC;EACH;EACA,OAAOL,KAAA,CAAAU,aAAA,CAACR,CAAC,EAAAS,QAAA;IAACC,EAAE,EAAC;EAAI,GAAKN,KAAK;IAAEO,QAAQ,EAAE;EAAM,EAAE,CAAC;AAClD,CAAC;AAEDV,EAAE,CAACW,IAAI,GAAGC,KAAA,IAIqD;EAAA,IAJpD;MACTN,SAAS;MACTO;IAEuD,CAAC,GAAAD,KAAA;IADrDT,KAAK,GAAAC,wBAAA,CAAAQ,KAAA,EAAAE,UAAA;EAER,OACEjB,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAkB,QAAA,QACGF,QAAQ,EACThB,KAAA,CAAAU,aAAA,CAACR,CAAC,EAAAS,QAAA;IACAC,EAAE,EAAC,IAAI;IACP,mBAAW;IACXH,SAAS,EAAER,UAAU,CAACQ,SAAS,EAAE,cAAc;EAAE,GAC7CH,KAAK,CACV,CACD,CAAC;AAEP,CAAC;AAIDH,EAAE,CAACgB,qBAAqB,GAAG,IAAI;AAE/B,eAAehB,EAAE"}
+{"version":3,"file":"Dl.js","names":["React","classnames","E","Dl","_ref","direction","layout","props","_objectWithoutProperties","_excluded","className","createElement","_extends","as","skeleton","Item","_ref2","children","_excluded2","Fragment","_supportsSpacingProps"],"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":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAmB5C,MAAMC,EAAE,GAAGC,IAAA,IAAiD;EAAA,IAAhD;MAAEC,SAAS;MAAEC;IAA6B,CAAC,GAAAF,IAAA;IAAnBG,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACvC,IAAIH,MAAM,IAAID,SAAS,EAAE;IACvBE,KAAK,CAACG,SAAS,GAAGT,UAAU,CAC1BM,KAAK,CAACG,SAAS,EACd,mBAAkBJ,MAAM,IAAID,SAAU,EACzC,CAAC;EACH;EACA,OAAOL,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IAACC,EAAE,EAAC;EAAI,GAAKN,KAAK;IAAEO,QAAQ,EAAE;EAAM,EAAE,CAAC;AAClD,CAAC;AAEDX,EAAE,CAACY,IAAI,GAAGC,KAAA,IAIqD;EAAA,IAJpD;MACTN,SAAS;MACTO;IAEuD,CAAC,GAAAD,KAAA;IADrDT,KAAK,GAAAC,wBAAA,CAAAQ,KAAA,EAAAE,UAAA;EAER,OACElB,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAmB,QAAA,QACGF,QAAQ,EACTjB,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IACAC,EAAE,EAAC,IAAI;IACP,mBAAW;IACXH,SAAS,EAAET,UAAU,CAACS,SAAS,EAAE,cAAc;EAAE,GAC7CH,KAAK,CACV,CACD,CAAC;AAEP,CAAC;AAIDJ,EAAE,CAACiB,qBAAqB,GAAG,IAAI;AAE/B,eAAejB,EAAE"}

package/es/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/es/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/es/extensions/forms/DataContext/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["React","makeAjvInstance","defaultContextState","hasContext","data","undefined","schema","handlePathChange","updateDataValue","validateData","handleSubmit","scrollToTop","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldError","setValueWithError","setProps","ajvInstance","contextErrorMessages","_isInsideFormElement","Context","createContext"],"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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAcC,eAAe,QAAQ,cAAc;AA8CnD,OAAO,MAAMC,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,EAAEpB,eAAe,CAAC,CAAC;EAC9BqB,oBAAoB,EAAEjB,SAAS;EAC/BkB,oBAAoB,EAAE;AACxB,CAAC;AAED,MAAMC,OAAO,GAAGxB,KAAK,CAACyB,aAAa,CAAevB,mBAAmB,CAAC;AAEtE,eAAesB,OAAO"}
+{"version":3,"file":"Context.js","names":["React","makeAjvInstance","defaultContextState","hasContext","data","undefined","schema","handlePathChange","updateDataValue","validateData","handleSubmit","scrollToTop","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldError","setValueWithError","setProps","ajvInstance","contextErrorMessages","_isInsideFormElement","Context","createContext"],"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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAcC,eAAe,QAAQ,cAAc;AA6CnD,OAAO,MAAMC,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,EAAEpB,eAAe,CAAC,CAAC;EAC9BqB,oBAAoB,EAAEjB,SAAS;EAC/BkB,oBAAoB,EAAE;AACxB,CAAC;AAED,MAAMC,OAAO,GAAGxB,KAAK,CAACyB,aAAa,CAAevB,mBAAmB,CAAC;AAEtE,eAAesB,OAAO"}

package/es/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/es/extensions/forms/DataContext/Provider/Provider.js

@@ -14,15 +14,9 @@ import { useSharedState } from '../../../../shared/helpers/useSharedState';
 import Context from '../Context';
 import structuredClone from '@ungap/structured-clone';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.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+(\/|$)/;
 export default function Provider(_ref) {
-  var _sharedAtachments$dat;
+  var _sharedAttachments$da;
   let {
       id,
       defaultData,
@@ -64,12 +58,8 @@ export default function Provider(_ref) {
     return data !== null && data !== void 0 ? data : defaultData;
   }, []);
   const internalDataRef = useRef(initialData);
-  const cacheRef = useRef({
-    data,
-    schema
-  });
   const ajvValidatorRef = useRef();
-  const validateData = useCallback(() => {
+  const validateDataNow = useCallback(() => {
     var _ajvValidatorRef$curr;
     if (!ajvValidatorRef.current) {
       return;
@@ -79,13 +69,21 @@ export default function Provider(_ref) {
     } else {
       errorsRef.current = undefined;
     }
-    forceUpdate();
   }, []);
+  const validateData = useCallback(() => {
+    if (!ajvValidatorRef.current) {
+      return;
+    }
+    validateDataNow();
+    forceUpdate();
+  }, [validateDataNow]);
   const hasFieldError = 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 = useCallback(() => Boolean(mountedFieldPathsRef.current.find(mountedFieldPath => hasFieldError(mountedFieldPath))), [hasFieldError]);
+  const hasErrors = useCallback(() => {
+    return Boolean(mountedFieldPathsRef.current.find(path => hasFieldError(path)));
+  }, [hasFieldError]);
   const setValueWithError = useCallback((path, withError) => {
     if (withError !== valuesWithErrorRef.current.includes(path)) {
       valuesWithErrorRef.current = withError ? addListPath(valuesWithErrorRef.current, path) : removeListPath(valuesWithErrorRef.current, path);
@@ -111,29 +109,48 @@ export default function Provider(_ref) {
     fieldPropsRef.current[path] = props;
   }, []);
   const sharedData = useSharedState(id);
-  const sharedAtachments = useSharedState(id + '-attachments');
+  const sharedAttachments = 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;
-  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 = useRef({
+    data,
+    schema,
+    shared: sharedData.data,
+    hasUsedInitialData: false
+  });
+  internalDataRef.current = 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]);
+  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
       });
@@ -141,7 +158,7 @@ export default 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 = useCallback((path, value) => {
     var _internalDataRef$curr;
     if (!path) {
@@ -239,23 +256,14 @@ export default function Provider(_ref) {
     validateData();
   });
   useUpdateEffect(() => {
-    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.createElement(Context.Provider, {
     value: _objectSpread(_objectSpread({
       hasContext: true,
@@ -282,4 +290,10 @@ export default 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