@dnb/eufemia 10.16.0 → 10.18.0

package/es/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.min.css

@@ -1 +1 @@
-.dnb-toggle-button .dnb-checkbox__gfx path{stroke-width:.125rem}.dnb-toggle-button .dnb-radio__input:not([disabled])~.dnb-radio__button{box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon{color:inherit}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button{background-color:transparent;border-color:var(--color-mint-green);box-shadow:0 0 0 .0318rem var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot{background-color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button{--border-color:var(--color-emerald-green);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot{background-color:var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button{background-color:var(--color-mint-green);border-color:var(--color-emerald-green);box-shadow:0 0 0 .0318rem var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx{color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button{background-color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx{color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button{box-shadow:none}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green);outline:none}html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot{background-color:var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx{color:var(--color-sea-green)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__focus{box-shadow:none}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__dot{background-color:transparent}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input~.dnb-checkbox__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover)~.dnb-checkbox__button .dnb-checkbox__focus{box-shadow:none}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-fire-red);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-white);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover)~.dnb-radio__dot{background-color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--color-fire-red)}.dnb-toggle-button>.dnb-form-status{transform:translateY(.1875rem)}
+.dnb-toggle-button .dnb-checkbox__gfx path{stroke-width:.125rem}.dnb-toggle-button .dnb-radio__input:not([disabled])~.dnb-radio__button{box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button[disabled]{background-color:var(--color-mint-green);color:var(--color-white)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon{color:inherit}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button{background-color:transparent;border-color:var(--color-mint-green);box-shadow:0 0 0 .0318rem var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot{background-color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button{--border-color:var(--color-emerald-green);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot{background-color:var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button{background-color:var(--color-mint-green);border-color:var(--color-emerald-green);box-shadow:0 0 0 .0318rem var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx{color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button{background-color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx{color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button{box-shadow:none}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green);outline:none}html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot{background-color:var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx{color:var(--color-sea-green)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__focus{box-shadow:none}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__dot{background-color:transparent}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input~.dnb-checkbox__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover)~.dnb-checkbox__button .dnb-checkbox__focus{box-shadow:none}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-fire-red);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-white);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover)~.dnb-radio__dot{background-color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--color-fire-red)}.dnb-toggle-button>.dnb-form-status{transform:translateY(.1875rem)}

package/es/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss

@@ -25,6 +25,11 @@
   &--checked &__button,
   &--checked &__button:focus,
   &--checked &__button:hover {
+    &[disabled] {
+      background-color: var(--color-mint-green);
+      color: var(--color-white);
+    }
+
     &:not([disabled]):not(:active) {
       background-color: var(--color-emerald-green);
       color: var(--color-mint-green);

package/es/components/visually-hidden/VisuallyHidden.js

@@ -27,6 +27,6 @@ const VisuallyHidden = localProps => {
     className: visuallyHiddenClassNames
   }, props), children);
 };
-VisuallyHidden._supportsSpacingProps = true;
+VisuallyHidden._supportsSpacingProps = false;
 export default VisuallyHidden;
 //# sourceMappingURL=VisuallyHidden.js.map

package/es/components/visually-hidden/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","names":["React","classnames","Context","extendPropsWithContext","defaultProps","focusable","element","VisuallyHidden","localProps","context","useContext","_extendPropsWithConte","children","className","props","_objectWithoutProperties","_excluded","visuallyHiddenClassNames","Element","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../src/components/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport Context from '../../shared/Context'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport type { DynamicElement } from '../../shared/types'\n\nexport interface VisuallyHiddenProps {\n  /**\n   * Hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user)\n   * Default: false\n   */\n  focusable?: boolean\n\n  /**\n   * Root element of the component\n   * Default: span\n   */\n  element?: DynamicElement\n}\n\nexport type VisuallyHiddenAllProps = VisuallyHiddenProps &\n  React.HTMLProps<HTMLSpanElement>\n\nexport const defaultProps = {\n  focusable: false,\n  element: 'span',\n}\n\nconst VisuallyHidden = (localProps: VisuallyHiddenAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const { element, children, className, focusable, ...props } =\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      context?.VisuallyHidden\n    )\n\n  const visuallyHiddenClassNames = classnames(\n    'dnb-visually-hidden',\n    focusable ? 'dnb-visually-hidden--focusable' : 'dnb-sr-only',\n    className\n  )\n  const Element = element || 'span'\n\n  return (\n    <Element\n      className={visuallyHiddenClassNames}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n    </Element>\n  )\n}\n\nVisuallyHidden._supportsSpacingProps = true\n\nexport default VisuallyHidden\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SAASC,sBAAsB,QAAQ,+BAA+B;AAoBtE,OAAO,MAAMC,YAAY,GAAG;EAC1BC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,cAAc,GAAIC,UAAkC,IAAK;EAE7D,MAAMC,OAAO,GAAGT,KAAK,CAACU,UAAU,CAACR,OAAO,CAAC;EAGzC,MAAAS,qBAAA,GACER,sBAAsB,CACpBK,UAAU,EACVJ,YAAY,EACZK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IALG;MAAED,OAAO;MAAEM,QAAQ;MAAEC,SAAS;MAAER;IAAoB,CAAC,GAAAM,qBAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,qBAAA,EAAAK,SAAA;EAOzD,MAAMC,wBAAwB,GAAGhB,UAAU,CACzC,qBAAqB,EACrBI,SAAS,GAAG,gCAAgC,GAAG,aAAa,EAC5DQ,SACF,CAAC;EACD,MAAMK,OAAO,GAAGZ,OAAO,IAAI,MAAM;EAEjC,OACEN,KAAA,CAAAmB,aAAA,CAACD,OAAO,EAAAE,QAAA;IACNP,SAAS,EAAEI;EAAyB,GAC/BH,KAAK,GAETF,QACM,CAAC;AAEd,CAAC;AAEDL,cAAc,CAACc,qBAAqB,GAAG,IAAI;AAE3C,eAAed,cAAc"}
+{"version":3,"file":"VisuallyHidden.js","names":["React","classnames","Context","extendPropsWithContext","defaultProps","focusable","element","VisuallyHidden","localProps","context","useContext","_extendPropsWithConte","children","className","props","_objectWithoutProperties","_excluded","visuallyHiddenClassNames","Element","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../src/components/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport Context from '../../shared/Context'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport type { DynamicElement } from '../../shared/types'\n\nexport interface VisuallyHiddenProps {\n  /**\n   * Hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user)\n   * Default: false\n   */\n  focusable?: boolean\n\n  /**\n   * Root element of the component\n   * Default: span\n   */\n  element?: DynamicElement\n}\n\nexport type VisuallyHiddenAllProps = VisuallyHiddenProps &\n  React.HTMLProps<HTMLSpanElement>\n\nexport const defaultProps = {\n  focusable: false,\n  element: 'span',\n}\n\nconst VisuallyHidden = (localProps: VisuallyHiddenAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const { element, children, className, focusable, ...props } =\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      context?.VisuallyHidden\n    )\n\n  const visuallyHiddenClassNames = classnames(\n    'dnb-visually-hidden',\n    focusable ? 'dnb-visually-hidden--focusable' : 'dnb-sr-only',\n    className\n  )\n  const Element = element || 'span'\n\n  return (\n    <Element\n      className={visuallyHiddenClassNames}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n    </Element>\n  )\n}\n\nVisuallyHidden._supportsSpacingProps = false\n\nexport default VisuallyHidden\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SAASC,sBAAsB,QAAQ,+BAA+B;AAoBtE,OAAO,MAAMC,YAAY,GAAG;EAC1BC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,cAAc,GAAIC,UAAkC,IAAK;EAE7D,MAAMC,OAAO,GAAGT,KAAK,CAACU,UAAU,CAACR,OAAO,CAAC;EAGzC,MAAAS,qBAAA,GACER,sBAAsB,CACpBK,UAAU,EACVJ,YAAY,EACZK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IALG;MAAED,OAAO;MAAEM,QAAQ;MAAEC,SAAS;MAAER;IAAoB,CAAC,GAAAM,qBAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,qBAAA,EAAAK,SAAA;EAOzD,MAAMC,wBAAwB,GAAGhB,UAAU,CACzC,qBAAqB,EACrBI,SAAS,GAAG,gCAAgC,GAAG,aAAa,EAC5DQ,SACF,CAAC;EACD,MAAMK,OAAO,GAAGZ,OAAO,IAAI,MAAM;EAEjC,OACEN,KAAA,CAAAmB,aAAA,CAACD,OAAO,EAAAE,QAAA;IACNP,SAAS,EAAEI;EAAyB,GAC/BH,KAAK,GAETF,QACM,CAAC;AAEd,CAAC;AAEDL,cAAc,CAACc,qBAAqB,GAAG,KAAK;AAE5C,eAAed,cAAc"}

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

@@ -1,17 +1,21 @@
 import React from 'react';
 import { JsonObject } from 'json-pointer';
-import { JSONSchema7 } from 'json-schema';
+import { JSONSchema } from '../../types';
+export type Path = string;
+export type UpdateDataValue = (path: Path, data: unknown) => void;
 export interface Props<Data extends JsonObject> {
+    /** Unique ID to communicate with the hook Form.useData */
+    id?: string;
     /** Default source data, only used if no other source is available, and not leading to updates if changed after mount */
     defaultData?: Partial<Data>;
     /** Dynamic source data used as both initial data, and updates internal data if changed after mount */
     data?: Partial<Data>;
     /** JSON Schema for validating the data, like during input or after attempting submit */
-    schema?: JSONSchema7;
+    schema?: JSONSchema;
     /** Change handler for the whole data set */
     onChange?: (data: Data) => void;
     /** Change handler for each value  */
-    onPathChange?: (path: string, value: any) => void;
+    onPathChange?: (path: Path, value: any) => void;
     /** Submit called, data was valid (if validation available) */
     onSubmit?: (data: Data, { resetForm, clearData, }: {
         /** Will remove browser-side stored autocomplete data  */
@@ -26,4 +30,4 @@ export interface Props<Data extends JsonObject> {
     sessionStorageId?: string;
     children: React.ReactNode;
 }
-export default function Provider<Data extends JsonObject>({ defaultData, data, schema, onChange, onPathChange, onSubmit, onSubmitRequest, scrollTopOnSubmit, sessionStorageId, children, ...rest }: Props<Data>): import("react/jsx-runtime").JSX.Element;
+export default function Provider<Data extends JsonObject>({ id, defaultData, data, schema, onChange, onPathChange, onSubmit, onSubmitRequest, scrollTopOnSubmit, sessionStorageId, children, ...rest }: Props<Data>): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId", "children"];
+const _excluded = ["id", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useEffect, useRef, useMemo, useCallback, useReducer } from 'react';
@@ -10,6 +10,7 @@ import pointer from 'json-pointer';
 import ajv, { ajvErrorsToFormErrors } from '../../utils/ajv';
 import useMountEffect from '../../hooks/useMountEffect';
 import useUpdateEffect from '../../hooks/useUpdateEffect';
+import { useSharedState } from '../../../../shared/helpers/useSharedState';
 import Context from '../Context';
 import structuredClone from '@ungap/structured-clone';
 function addListPath(paths, path) {
@@ -21,6 +22,7 @@ function removeListPath(paths, path) {
 const isArrayJsonPointer = /^\/\d+(\/|$)/;
 export default function Provider(_ref) {
   let {
+      id,
       defaultData,
       data,
       schema,
@@ -57,6 +59,12 @@ export default function Provider(_ref) {
   const internalDataRef = useRef(initialData);
   const dataCacheRef = useRef(data);
   const ajvSchemaValidatorRef = useRef();
+  const sharedState = useSharedState(id, initialData);
+  useMemo(() => {
+    if (sharedState !== null && sharedState !== void 0 && sharedState.data && !initialData) {
+      internalDataRef.current = sharedState.data;
+    }
+  }, [initialData, sharedState.data]);
   const validateData = useCallback(() => {
     if (!ajvSchemaValidatorRef.current) {
       return;
@@ -91,18 +99,28 @@ export default function Provider(_ref) {
     if (!path) {
       return;
     }
-    const newData = structuredClone(path === '/' ? value : (_internalDataRef$curr = internalDataRef.current) !== null && _internalDataRef$curr !== void 0 ? _internalDataRef$curr : path.match(isArrayJsonPointer) ? [] : {});
+    const givenData = path === '/' ? value : (_internalDataRef$curr = internalDataRef.current) !== null && _internalDataRef$curr !== void 0 ? _internalDataRef$curr : path.match(isArrayJsonPointer) ? [] : {};
+    let newData = null;
+    try {
+      newData = structuredClone(givenData);
+    } catch (e) {
+      newData = givenData;
+    }
     if (path !== '/') {
       pointer.set(newData, path, value);
     }
+    if (id) {
+      var _sharedState$update;
+      (_sharedState$update = sharedState.update) === null || _sharedState$update === void 0 ? void 0 : _sharedState$update.call(sharedState, newData);
+    }
+    internalDataRef.current = newData;
     if (sessionStorageId && typeof window !== 'undefined') {
       var _window$sessionStorag2;
       (_window$sessionStorag2 = window.sessionStorage) === null || _window$sessionStorag2 === void 0 ? void 0 : _window$sessionStorag2.setItem(sessionStorageId, JSON.stringify(newData));
     }
-    internalDataRef.current = newData;
     forceUpdate();
     return newData;
-  }, [sessionStorageId]);
+  }, [id, sessionStorageId, sharedState]);
   const handlePathChange = useCallback((path, value) => {
     if (!path) {
       return;

package/es/extensions/forms/DataContext/Provider/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","names":["React","useEffect","useRef","useMemo","useCallback","useReducer","pointer","ajv","ajvErrorsToFormErrors","useMountEffect","useUpdateEffect","Context","structuredClone","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","isArrayJsonPointer","Provider","_ref","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","children","rest","_objectWithoutProperties","_excluded","forceUpdate","undefined","console","error","mountedFieldPathsRef","errorsRef","showAllErrorsRef","setShowAllErrors","showAllErrors","current","valuesWithErrorRef","initialData","window","_window$sessionStorag","sessionDataJSON","sessionStorage","getItem","JSON","parse","internalDataRef","dataCacheRef","ajvSchemaValidatorRef","validateData","errors","compile","hasErrors","Boolean","find","mountedFieldPath","_errorsRef$current","setValueWithError","identifier","withError","updateDataValue","value","_internalDataRef$curr","newData","match","set","_window$sessionStorag2","setItem","stringify","handlePathChange","handleMountField","handleUnMountField","handleSubmit","formElement","resetForm","_formElement$reset","reset","call","removeItem","clearData","_window","scrollTo","top","behavior","createElement","_objectSpread","mountedFieldPaths"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useReducer,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { JSONSchema7 } from 'json-schema'\nimport { ValidateFunction } from 'ajv'\nimport ajv, { ajvErrorsToFormErrors } from '../../utils/ajv'\nimport { FormError } from '../../types'\nimport useMountEffect from '../../hooks/useMountEffect'\nimport useUpdateEffect from '../../hooks/useUpdateEffect'\nimport Context, { ContextState } from '../Context'\n\n/**\n * Deprecated, as it is supported by all major browsers and Node.js >=v18\n * So its a question of time, when we will remove this polyfill\n */\nimport structuredClone from '@ungap/structured-clone'\n\nexport interface Props<Data extends JsonObject> {\n  /** Default source data, only used if no other source is available, and not leading to updates if changed after mount */\n  defaultData?: Partial<Data>\n  /** Dynamic source data used as both initial data, and updates internal data if changed after mount */\n  data?: Partial<Data>\n  /** JSON Schema for validating the data, like during input or after attempting submit */\n  schema?: JSONSchema7\n  /** Change handler for the whole data set */\n  onChange?: (data: Data) => void\n  /** Change handler for each value  */\n  onPathChange?: (path: string, value: any) => void\n  /** Submit called, data was valid (if validation available) */\n  onSubmit?: (\n    data: Data,\n    {\n      resetForm,\n      clearData,\n    }: {\n      /** Will remove browser-side stored autocomplete data  */\n      resetForm: () => void\n      /** Will empty the whole internal data set of the form  */\n      clearData: () => void\n    }\n  ) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\n  /** Key for caching the data in session storage */\n  sessionStorageId?: string\n  children: React.ReactNode\n}\n\ntype PathList = string[]\n\nfunction addListPath(paths: PathList, path: string): PathList {\n  return paths.includes(path) ? paths : paths.concat(path)\n}\n\nfunction removeListPath(paths: PathList, path: string): PathList {\n  return paths.filter((thisPath) => thisPath !== path)\n}\n\nconst isArrayJsonPointer = /^\\/\\d+(\\/|$)/\n\nexport default function Provider<Data extends JsonObject>({\n  defaultData,\n  data,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  children,\n  ...rest\n}: Props<Data>) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  // Prop error handling\n  if (data !== undefined && sessionStorageId !== undefined) {\n    console.error(\n      'Providing both data and sessionStorageId could lead to competing data sources. To provide default data to use only before anything is changed in the interface, use defaultData.'\n    )\n  }\n\n  // State\n  const mountedFieldPathsRef = useRef<string[]>([])\n  // - Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError> | undefined>()\n  const showAllErrorsRef = useRef<boolean>(false)\n  const setShowAllErrors = useCallback((showAllErrors: boolean) => {\n    showAllErrorsRef.current = showAllErrors\n  }, [])\n  // - Errors reported by fields, based on their direct validation rules\n  const valuesWithErrorRef = useRef<string[]>([])\n  // - Data\n  const initialData = useMemo(() => {\n    if (sessionStorageId && typeof window !== 'undefined') {\n      const sessionDataJSON =\n        window.sessionStorage?.getItem(sessionStorageId)\n      if (sessionDataJSON) {\n        return JSON.parse(sessionDataJSON)\n      }\n    }\n    return data ?? defaultData\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Avoid triggering code that should only run initially\n  }, [])\n  const internalDataRef = useRef<Partial<Data>>(initialData)\n  const dataCacheRef = useRef<Partial<Data>>(data)\n  // - Validator\n  const ajvSchemaValidatorRef = useRef<ValidateFunction>()\n\n  const validateData = useCallback(() => {\n    if (!ajvSchemaValidatorRef.current) {\n      // No schema-based validator. Assume data is valid.\n      return\n    }\n\n    if (!ajvSchemaValidatorRef.current(internalDataRef.current)) {\n      // Errors found\n      const errors = ajvErrorsToFormErrors(\n        ajvSchemaValidatorRef.current.errors\n      )\n      errorsRef.current = errors\n    } else {\n      errorsRef.current = undefined\n    }\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    if (!schema) {\n      return\n    }\n    ajvSchemaValidatorRef.current = ajv.compile(schema)\n    validateData()\n  }, [schema, validateData])\n\n  // Error handling\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current?.[mountedFieldPath] !== undefined ||\n            valuesWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  const setValueWithError = useCallback(\n    (identifier: string, withError: boolean) => {\n      if (withError !== valuesWithErrorRef.current.includes(identifier)) {\n        // The boolean error state for the target value was changed\n        valuesWithErrorRef.current = withError\n          ? addListPath(valuesWithErrorRef.current, identifier)\n          : removeListPath(valuesWithErrorRef.current, identifier)\n        forceUpdate()\n      }\n    },\n    []\n  )\n\n  const updateDataValue = useCallback(\n    (path, value) => {\n      if (!path) {\n        return\n      }\n\n      // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n      const newData = structuredClone(\n        path === '/'\n          ? // When setting the root of the data, the whole data set should be the new value\n            value\n          : // For sub paths, use the the existing data set (or empty array/object), but modify it below (since pointer.set is not immutable)\n            internalDataRef.current ??\n              (path.match(isArrayJsonPointer) ? [] : {})\n      )\n\n      if (path !== '/') {\n        pointer.set(newData as Data, path, value)\n      }\n\n      if (sessionStorageId && typeof window !== 'undefined') {\n        window.sessionStorage?.setItem(\n          sessionStorageId,\n          JSON.stringify(newData)\n        )\n      }\n\n      internalDataRef.current = newData\n\n      forceUpdate()\n\n      return newData\n    },\n    [sessionStorageId]\n  )\n\n  const handlePathChange = useCallback(\n    (path, value) => {\n      if (!path) {\n        return\n      }\n\n      onPathChange?.(path, value)\n\n      const newData = updateDataValue(path, value)\n\n      onChange?.(newData as Data)\n\n      showAllErrorsRef.current = false\n\n      validateData()\n    },\n    [onPathChange, updateDataValue, onChange, validateData]\n  )\n\n  // Mounted fields\n  const handleMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = addListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  const handleUnMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = removeListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  /**\n   * Request to submit the whole form\n   */\n  const handleSubmit = useCallback<ContextState['handleSubmit']>(\n    ({ formElement = null } = {}) => {\n      if (!hasErrors()) {\n        const resetForm = () => {\n          formElement?.reset?.()\n\n          if (typeof window !== 'undefined') {\n            if (sessionStorageId) {\n              window.sessionStorage.removeItem(sessionStorageId)\n            }\n          }\n\n          forceUpdate() // in order to fill \"empty fields\" again with their internal states\n        }\n        const clearData = () => {\n          internalDataRef.current = {}\n          forceUpdate()\n        }\n\n        onSubmit?.(internalDataRef.current as Data, {\n          resetForm,\n          clearData,\n        })\n\n        if (typeof window !== 'undefined') {\n          if (scrollTopOnSubmit) {\n            window?.scrollTo({ top: 0, behavior: 'smooth' })\n          }\n        }\n      } else {\n        showAllErrorsRef.current = true\n        onSubmitRequest?.()\n        forceUpdate()\n      }\n      return internalDataRef.current\n    },\n    [\n      scrollTopOnSubmit,\n      hasErrors,\n      onSubmit,\n      onSubmitRequest,\n      sessionStorageId,\n    ]\n  )\n\n  useMountEffect(() => {\n    // Validate the initial data\n    validateData()\n  })\n\n  useUpdateEffect(() => {\n    // Update and validate changes to the external data set,\n    // And avoid \"resetting\" the data with the originally given data (React.StrictMode)\n    if (data !== dataCacheRef.current) {\n      dataCacheRef.current = data\n      internalDataRef.current = data\n    }\n    validateData()\n    forceUpdate()\n  }, [data, validateData, forceUpdate])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalDataRef.current,\n        ...rest,\n        handlePathChange,\n        updateDataValue,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors: showAllErrorsRef.current,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setValueWithError,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Provider.js","names":["React","useEffect","useRef","useMemo","useCallback","useReducer","pointer","ajv","ajvErrorsToFormErrors","useMountEffect","useUpdateEffect","useSharedState","Context","structuredClone","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","isArrayJsonPointer","Provider","_ref","id","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","children","rest","_objectWithoutProperties","_excluded","forceUpdate","undefined","console","error","mountedFieldPathsRef","errorsRef","showAllErrorsRef","setShowAllErrors","showAllErrors","current","valuesWithErrorRef","initialData","window","_window$sessionStorag","sessionDataJSON","sessionStorage","getItem","JSON","parse","internalDataRef","dataCacheRef","ajvSchemaValidatorRef","sharedState","validateData","errors","compile","hasErrors","Boolean","find","mountedFieldPath","_errorsRef$current","setValueWithError","identifier","withError","updateDataValue","value","_internalDataRef$curr","givenData","match","newData","e","set","_sharedState$update","update","call","_window$sessionStorag2","setItem","stringify","handlePathChange","handleMountField","handleUnMountField","handleSubmit","formElement","resetForm","_formElement$reset","reset","removeItem","clearData","_window","scrollTo","top","behavior","createElement","_objectSpread","mountedFieldPaths"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useReducer,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { ValidateFunction } from 'ajv'\nimport ajv, { ajvErrorsToFormErrors } from '../../utils/ajv'\nimport { FormError, JSONSchema } from '../../types'\nimport useMountEffect from '../../hooks/useMountEffect'\nimport useUpdateEffect from '../../hooks/useUpdateEffect'\nimport { useSharedState } from '../../../../shared/helpers/useSharedState'\nimport Context, { ContextState } from '../Context'\n\n/**\n * Deprecated, as it is supported by all major browsers and Node.js >=v18\n * So its a question of time, when we will remove this polyfill\n */\nimport structuredClone from '@ungap/structured-clone'\n\nexport type Path = string\nexport type UpdateDataValue = (path: Path, data: unknown) => void\n\nexport interface Props<Data extends JsonObject> {\n  /** Unique ID to communicate with the hook Form.useData */\n  id?: string\n  /** Default source data, only used if no other source is available, and not leading to updates if changed after mount */\n  defaultData?: Partial<Data>\n  /** Dynamic source data used as both initial data, and updates internal data if changed after mount */\n  data?: Partial<Data>\n  /** JSON Schema for validating the data, like during input or after attempting submit */\n  schema?: JSONSchema\n  /** Change handler for the whole data set */\n  onChange?: (data: Data) => void\n  /** Change handler for each value  */\n  onPathChange?: (path: Path, value: any) => void\n  /** Submit called, data was valid (if validation available) */\n  onSubmit?: (\n    data: Data,\n    {\n      resetForm,\n      clearData,\n    }: {\n      /** Will remove browser-side stored autocomplete data  */\n      resetForm: () => void\n      /** Will empty the whole internal data set of the form  */\n      clearData: () => void\n    }\n  ) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\n  /** Key for caching the data in session storage */\n  sessionStorageId?: string\n  children: React.ReactNode\n}\n\ntype PathList = string[]\n\nfunction addListPath(paths: PathList, path: Path): PathList {\n  return paths.includes(path) ? paths : paths.concat(path)\n}\n\nfunction removeListPath(paths: PathList, path: Path): PathList {\n  return paths.filter((thisPath) => thisPath !== path)\n}\n\nconst isArrayJsonPointer = /^\\/\\d+(\\/|$)/\n\nexport default function Provider<Data extends JsonObject>({\n  id,\n  defaultData,\n  data,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  children,\n  ...rest\n}: Props<Data>) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  // Prop error handling\n  if (data !== undefined && sessionStorageId !== undefined) {\n    console.error(\n      'Providing both data and sessionStorageId could lead to competing data sources. To provide default data to use only before anything is changed in the interface, use defaultData.'\n    )\n  }\n\n  // State\n  const mountedFieldPathsRef = useRef<string[]>([])\n  // - Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError> | undefined>()\n  const showAllErrorsRef = useRef<boolean>(false)\n  const setShowAllErrors = useCallback((showAllErrors: boolean) => {\n    showAllErrorsRef.current = showAllErrors\n  }, [])\n  // - Errors reported by fields, based on their direct validation rules\n  const valuesWithErrorRef = useRef<string[]>([])\n  // - Data\n  const initialData = useMemo(() => {\n    if (sessionStorageId && typeof window !== 'undefined') {\n      const sessionDataJSON =\n        window.sessionStorage?.getItem(sessionStorageId)\n      if (sessionDataJSON) {\n        return JSON.parse(sessionDataJSON)\n      }\n    }\n    return data ?? defaultData\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Avoid triggering code that should only run initially\n  }, [])\n  const internalDataRef = useRef<Partial<Data>>(initialData)\n  const dataCacheRef = useRef<Partial<Data>>(data)\n  // - Validator\n  const ajvSchemaValidatorRef = useRef<ValidateFunction>()\n  // - Shared state\n  const sharedState = useSharedState(id, initialData)\n  useMemo(() => {\n    if (sharedState?.data && !initialData) {\n      internalDataRef.current = sharedState.data\n    }\n  }, [initialData, sharedState.data])\n\n  const validateData = useCallback(() => {\n    if (!ajvSchemaValidatorRef.current) {\n      // No schema-based validator. Assume data is valid.\n      return\n    }\n\n    if (!ajvSchemaValidatorRef.current(internalDataRef.current)) {\n      // Errors found\n      const errors = ajvErrorsToFormErrors(\n        ajvSchemaValidatorRef.current.errors\n      )\n      errorsRef.current = errors\n    } else {\n      errorsRef.current = undefined\n    }\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    if (!schema) {\n      return\n    }\n    ajvSchemaValidatorRef.current = ajv.compile(schema)\n    validateData()\n  }, [schema, validateData])\n\n  // Error handling\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current?.[mountedFieldPath] !== undefined ||\n            valuesWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  const setValueWithError = useCallback(\n    (identifier: string, withError: boolean) => {\n      if (withError !== valuesWithErrorRef.current.includes(identifier)) {\n        // The boolean error state for the target value was changed\n        valuesWithErrorRef.current = withError\n          ? addListPath(valuesWithErrorRef.current, identifier)\n          : removeListPath(valuesWithErrorRef.current, identifier)\n        forceUpdate()\n      }\n    },\n    []\n  )\n\n  const updateDataValue: UpdateDataValue = useCallback(\n    (path, value) => {\n      if (!path) {\n        return\n      }\n\n      const givenData =\n        path === '/'\n          ? // When setting the root of the data, the whole data set should be the new value\n            value\n          : // For sub paths, use the the existing data set (or empty array/object), but modify it below (since pointer.set is not immutable)\n            internalDataRef.current ??\n            (path.match(isArrayJsonPointer) ? [] : {})\n\n      let newData = null\n      try {\n        // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n        newData = structuredClone(givenData)\n      } catch (e) {\n        newData = givenData\n      }\n\n      if (path !== '/') {\n        pointer.set(newData as Data, path, value)\n      }\n\n      if (id) {\n        sharedState.update?.(newData)\n      }\n\n      internalDataRef.current = newData\n\n      if (sessionStorageId && typeof window !== 'undefined') {\n        window.sessionStorage?.setItem(\n          sessionStorageId,\n          JSON.stringify(newData)\n        )\n      }\n\n      forceUpdate()\n\n      return newData\n    },\n    [id, sessionStorageId, sharedState]\n  )\n\n  const handlePathChange: UpdateDataValue = useCallback(\n    (path, value) => {\n      if (!path) {\n        return\n      }\n\n      onPathChange?.(path, value)\n\n      const newData = updateDataValue(path, value)\n\n      onChange?.(newData as Data)\n\n      showAllErrorsRef.current = false\n\n      validateData()\n    },\n    [onPathChange, updateDataValue, onChange, validateData]\n  )\n\n  // Mounted fields\n  const handleMountField = useCallback((path: Path) => {\n    mountedFieldPathsRef.current = addListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  const handleUnMountField = useCallback((path: Path) => {\n    mountedFieldPathsRef.current = removeListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  /**\n   * Request to submit the whole form\n   */\n  const handleSubmit = useCallback<ContextState['handleSubmit']>(\n    ({ formElement = null } = {}) => {\n      if (!hasErrors()) {\n        const resetForm = () => {\n          formElement?.reset?.()\n\n          if (typeof window !== 'undefined') {\n            if (sessionStorageId) {\n              window.sessionStorage.removeItem(sessionStorageId)\n            }\n          }\n\n          forceUpdate() // in order to fill \"empty fields\" again with their internal states\n        }\n        const clearData = () => {\n          internalDataRef.current = {}\n          forceUpdate()\n        }\n\n        onSubmit?.(internalDataRef.current as Data, {\n          resetForm,\n          clearData,\n        })\n\n        if (typeof window !== 'undefined') {\n          if (scrollTopOnSubmit) {\n            window?.scrollTo({ top: 0, behavior: 'smooth' })\n          }\n        }\n      } else {\n        showAllErrorsRef.current = true\n        onSubmitRequest?.()\n        forceUpdate()\n      }\n      return internalDataRef.current\n    },\n    [\n      scrollTopOnSubmit,\n      hasErrors,\n      onSubmit,\n      onSubmitRequest,\n      sessionStorageId,\n    ]\n  )\n\n  useMountEffect(() => {\n    // Validate the initial data\n    validateData()\n  })\n\n  useUpdateEffect(() => {\n    // Update and validate changes to the external data set,\n    // And avoid \"resetting\" the data with the originally given data (React.StrictMode)\n    if (data !== dataCacheRef.current) {\n      dataCacheRef.current = data\n      internalDataRef.current = data\n    }\n    validateData()\n    forceUpdate()\n  }, [data, validateData, forceUpdate])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalDataRef.current,\n        ...rest,\n        handlePathChange,\n        updateDataValue,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors: showAllErrorsRef.current,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setValueWithError,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"mappings":"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"}

package/es/extensions/forms/Field/ArraySelection/ArraySelection.js

@@ -2,13 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useMemo } from 'react';
-import { Checkbox, Button } from '../../../../components';
-import ButtonRow from '../../Form/ButtonRow';
+import { Checkbox, ToggleButton } from '../../../../components';
 import classnames from 'classnames';
 import Option from '../Option';
 import FieldBlock from '../../FieldBlock';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
+import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext';
 function ArraySelection(props) {
   const {
     id,
@@ -17,10 +17,9 @@ function ArraySelection(props) {
     layout = 'vertical',
     optionsLayout = 'vertical',
     label,
-    labelDescription,
-    labelSecondary,
     value,
     error,
+    hasError,
     info,
     warning,
     disabled,
@@ -30,15 +29,13 @@ function ArraySelection(props) {
   } = useDataValue(props);
   const fieldBlockProps = _objectSpread({
     forId: id,
-    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
+    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--layout-${optionsLayout}`, className),
     contentClassName: 'dnb-forms-field-array-selection__options',
     info,
     warning,
     error,
     layout,
-    label,
-    labelDescription,
-    labelSecondary
+    label
   }, pickSpacingProps(props));
   const options = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map(option => {
     var _option$props$title;
@@ -54,14 +51,16 @@ function ArraySelection(props) {
   }), [children, value, emptyValue, handleChange]);
   switch (variant) {
     case 'button':
-      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ButtonRow, null, options.map((option, i) => React.createElement(Button, {
+      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButtonGroupContext.Provider, {
+        value: {
+          status: hasError ? 'error' : undefined,
+          disabled
+        }
+      }, options.map((option, i) => React.createElement(ToggleButton, {
         key: `option-${i}-${option.value}`,
-        id: id,
         text: option.title,
-        on_click: option.handleSelect,
-        variant: value !== null && value !== void 0 && value.includes(option.value) ? undefined : 'secondary',
-        status: error ? 'error' : undefined,
-        disabled: disabled
+        checked: value === null || value === void 0 ? void 0 : value.includes(option.value),
+        on_change: option.handleSelect
       }))));
     case 'checkbox':
       return React.createElement(FieldBlock, fieldBlockProps, options.map((option, i) => React.createElement(Checkbox, {
@@ -70,7 +69,8 @@ function ArraySelection(props) {
         label: option.title,
         checked: value === null || value === void 0 ? void 0 : value.includes(option.value),
         disabled: disabled,
-        on_change: option.handleSelect
+        on_change: option.handleSelect,
+        status: hasError ? 'error' : undefined
       })));
   }
 }

package/es/extensions/forms/Field/ArraySelection/ArraySelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","Button","ButtonRow","classnames","Option","FieldBlock","useDataValue","pickSpacingProps","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","labelSecondary","value","error","info","warning","disabled","emptyValue","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props$title","title","handleSelect","selected","newValue","includes","length","createElement","i","key","text","on_click","undefined","status","checked","on_change","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, Button } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport classnames from 'classnames'\nimport Option from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldProps<Array<string | number>> & {\n  children?: React.ReactNode\n  variant?: 'checkbox' | 'button'\n  optionsLayout?: 'horizontal' | 'vertical'\n}\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    error,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n    ...pickSpacingProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            {options.map((option, i) => (\n              <Button\n                key={`option-${i}-${option.value}`}\n                id={id}\n                text={option.title}\n                on_click={option.handleSelect}\n                variant={\n                  value?.includes(option.value) ? undefined : 'secondary'\n                }\n                status={error ? 'error' : undefined}\n                disabled={disabled}\n              />\n            ))}\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}
+{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","ToggleButton","classnames","Option","FieldBlock","useDataValue","pickSpacingProps","ToggleButtonGroupContext","ArraySelection","props","id","className","variant","layout","optionsLayout","label","value","error","hasError","info","warning","disabled","emptyValue","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props$title","title","handleSelect","selected","newValue","includes","length","createElement","Provider","status","undefined","i","key","text","checked","on_change","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport Option from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldProps<Array<string | number>> & {\n  children?: React.ReactNode\n  variant?: 'checkbox' | 'button'\n  optionsLayout?: 'horizontal' | 'vertical'\n}\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    value,\n    error,\n    hasError,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    ...pickSpacingProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options.map((option, i) => (\n              <ToggleButton\n                key={`option-${i}-${option.value}`}\n                text={option.title}\n                checked={value?.includes(option.value)}\n                on_change={option.handleSelect}\n              />\n            ))}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n              status={hasError ? 'error' : undefined}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.css

@@ -1,11 +1,21 @@
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
+}
+@media screen and (min-width: 40em) {
+  .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+    line-height: 2.5rem;
+    margin-bottom: 0;
+  }
 }

package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css

@@ -1 +1 @@
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}

package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss

@@ -1,13 +1,23 @@
+@import '../../../../../style/core/utilities.scss';
+
 .dnb-forms-field-array-selection {
-  &--options-layout-vertical &__options {
+  &--layout-vertical &__options {
     display: flex;
     flex-flow: column;
     row-gap: var(--spacing-x-small);
   }
 
-  &--options-layout-horizontal &__options {
+  &--layout-horizontal &__options {
     display: flex;
     flex-flow: row wrap;
     column-gap: var(--spacing-small);
+    row-gap: var(--spacing-x-small); // for when wrapped
+  }
+
+  @include allAbove(small) {
+    .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+      line-height: 2.5rem;
+      margin-bottom: 0;
+    }
   }
 }

package/es/extensions/forms/Field/Currency/Currency.d.ts

@@ -1,9 +1,5 @@
 import { Props as NumberProps } from '../Number';
-import type { FieldProps, FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & FieldProps<number, undefined> & {
-    currency?: NumberProps['currency'];
-    rightAligned?: NumberProps['rightAligned'];
-};
+export type Props = NumberProps;
 declare function Currency(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Currency {
     var _supportsSpacingProps: boolean;

package/es/extensions/forms/Field/Currency/Currency.js.map

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","names":["React","classnames","Context","getCurrencySymbol","CURRENCY","NumberComponent","Currency","props","_props$currency","_props$placeholder","context","useContext","preparedProps","_objectSpread","currency","placeholder","locale","createElement","_extends","className","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Context } from '../../../../shared'\nimport { getCurrencySymbol } from '../../../../components/number-format/NumberUtils'\nimport { CURRENCY } from '../../../../shared/defaults'\nimport NumberComponent, { Props as NumberProps } from '../Number'\nimport type { FieldProps, FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined> & {\n    currency?: NumberProps['currency']\n    rightAligned?: NumberProps['rightAligned']\n  }\n\nfunction Currency(props: Props) {\n  const context = React.useContext(Context)\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? CURRENCY,\n    placeholder:\n      props.placeholder ??\n      getCurrencySymbol(context?.locale, props.currency),\n  }\n\n  return (\n    <NumberComponent\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,iBAAiB,QAAQ,kDAAkD;AACpF,SAASC,QAAQ,QAAQ,6BAA6B;AACtD,OAAOC,eAAe,MAAgC,WAAW;AASjE,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,eAAA,EAAAC,kBAAA;EAC9B,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,OAAO,CAAC;EACzC,MAAMU,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdN,KAAK;IACRO,QAAQ,GAAAN,eAAA,GAAED,KAAK,CAACO,QAAQ,cAAAN,eAAA,cAAAA,eAAA,GAAIJ,QAAQ;IACpCW,WAAW,GAAAN,kBAAA,GACTF,KAAK,CAACQ,WAAW,cAAAN,kBAAA,cAAAA,kBAAA,GACjBN,iBAAiB,CAACO,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,MAAM,EAAET,KAAK,CAACO,QAAQ;EAAC,EACrD;EAED,OACEd,KAAA,CAAAiB,aAAA,CAACZ,eAAe,EAAAa,QAAA,KACVN,aAAa;IACjBO,SAAS,EAAElB,UAAU,CAAC,0BAA0B,EAAEM,KAAK,CAACY,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAb,QAAQ,CAACc,qBAAqB,GAAG,IAAI;AACrC,eAAed,QAAQ"}
+{"version":3,"file":"Currency.js","names":["React","classnames","Context","getCurrencySymbol","CURRENCY","NumberComponent","Currency","props","_props$currency","_props$placeholder","context","useContext","preparedProps","_objectSpread","currency","placeholder","locale","createElement","_extends","className","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Context } from '../../../../shared'\nimport { getCurrencySymbol } from '../../../../components/number-format/NumberUtils'\nimport { CURRENCY } from '../../../../shared/defaults'\nimport NumberComponent, { Props as NumberProps } from '../Number'\n\nexport type Props = NumberProps\n\nfunction Currency(props: Props) {\n  const context = React.useContext(Context)\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? CURRENCY,\n    placeholder:\n      props.placeholder ??\n      getCurrencySymbol(context?.locale, props.currency),\n  }\n\n  return (\n    <NumberComponent\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,iBAAiB,QAAQ,kDAAkD;AACpF,SAASC,QAAQ,QAAQ,6BAA6B;AACtD,OAAOC,eAAe,MAAgC,WAAW;AAIjE,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,eAAA,EAAAC,kBAAA;EAC9B,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,OAAO,CAAC;EACzC,MAAMU,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdN,KAAK;IACRO,QAAQ,GAAAN,eAAA,GAAED,KAAK,CAACO,QAAQ,cAAAN,eAAA,cAAAA,eAAA,GAAIJ,QAAQ;IACpCW,WAAW,GAAAN,kBAAA,GACTF,KAAK,CAACQ,WAAW,cAAAN,kBAAA,cAAAA,kBAAA,GACjBN,iBAAiB,CAACO,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,MAAM,EAAET,KAAK,CAACO,QAAQ;EAAC,EACrD;EAED,OACEd,KAAA,CAAAiB,aAAA,CAACZ,eAAe,EAAAa,QAAA,KACVN,aAAa;IACjBO,SAAS,EAAElB,UAAU,CAAC,0BAA0B,EAAEM,KAAK,CAACY,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAb,QAAQ,CAACc,qBAAqB,GAAG,IAAI;AACrC,eAAed,QAAQ"}

package/es/extensions/forms/Field/Date/Date.d.ts

@@ -1,5 +1,7 @@
 import { FieldProps, FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & FieldProps<string>;
+export type Props = FieldHelpProps & FieldProps<string> & {
+    pattern?: string;
+};
 declare function DateComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace DateComponent {
     var _supportsSpacingProps: boolean;

package/es/extensions/forms/Field/Date/Date.js

@@ -4,50 +4,86 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { DatePicker, HelpButton } from '../../../../components';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
+import classnames from 'classnames';
+import FieldBlock from '../../FieldBlock';
+import { parseISO, isValid } from 'date-fns';
 function DateComponent(props) {
   const sharedContext = useContext(SharedContext);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const errorMessages = useMemo(() => _objectSpread({
+    required: tr.dateErrorRequired,
+    pattern: tr.inputErrorPattern
+  }, props.errorMessages), [tr, props.errorMessages]);
+  const schema = useMemo(() => {
+    var _props$schema;
+    return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
+      type: 'string',
+      pattern: props.pattern
+    };
+  }, [props.schema, props.pattern]);
+  const validateRequired = useCallback((value, {
+    required,
+    error
+  }) => {
+    if (required && (!value || !isValid(parseISO(value)))) {
+      return error;
+    }
+    return undefined;
+  }, []);
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    errorMessages,
+    schema,
     fromInput: ({
       date
     }) => {
       return date;
     },
-    emptyValue: null
+    validateRequired
   });
   const {
+    id,
     className,
     label,
     value,
     help,
+    info,
+    warning,
     error,
+    hasError,
     disabled,
     handleFocus,
     handleBlur,
     handleChange
   } = useDataValue(preparedProps);
-  return React.createElement(DatePicker, _extends({
-    className: className,
+  return React.createElement(FieldBlock, _extends({
+    className: classnames('dnb-forms-field-string', className),
+    forId: id,
     label: label !== null && label !== void 0 ? label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.dateLabel,
-    label_direction: "vertical",
+    info: info,
+    warning: warning,
+    disabled: disabled,
+    error: error
+  }, pickSpacingProps(props)), React.createElement(DatePicker, _extends({
+    id: id,
     date: value,
-    status: error === null || error === void 0 ? void 0 : error.message,
     disabled: disabled,
     show_input: true,
     show_cancel_button: true,
     show_reset_button: true,
+    status: hasError ? 'error' : undefined,
     suffix: help ? React.createElement(HelpButton, {
       title: help.title
     }, help.contents) : undefined,
     on_change: handleChange,
     on_reset: handleChange,
-    on_show: handleFocus,
-    on_hide: handleBlur
-  }, pickSpacingProps(props)));
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }, pickSpacingProps(props))));
 }
 DateComponent._supportsSpacingProps = true;
 export default DateComponent;