@dnb/eufemia 10.7.0 → 10.9.0

package/es/elements/typography/H.js

@@ -4,22 +4,26 @@ const _excluded = ["as", "is", "level", "size", "className"];
 import React from 'react';
 import classnames from 'classnames';
 import E from '../Element';
-import { setNextLevel } from '../../components/heading/HeadingHelpers';
+import { setNextLevel, getHeadingSize } from '../../components/heading/HeadingHelpers';
+import { useTheme } from '../../shared';
 const H = _ref => {
   let {
       as = 'h1',
       is,
       level,
-      size = 'xx-large',
+      size,
       className
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const numSiz = parseFloat(String(as || is).substring(1));
   if (level === 'use') {
-    setNextLevel(parseFloat(String(as || is).substring(1)));
+    setNextLevel(numSiz);
   }
+  const theme = useTheme();
+  const targetSize = size === 'auto' && getHeadingSize(theme === null || theme === void 0 ? void 0 : theme.name)[numSiz] || size || 'xx-large';
   return React.createElement(E, _extends({
     as: as || is,
-    internalClass: classnames(className, size && `dnb-h--${size}`)
+    internalClass: classnames(className, targetSize && `dnb-h--${targetSize}`)
   }, props));
 };
 export default H;

package/es/elements/typography/H.js.map

@@ -1 +1 @@
-{"version":3,"file":"H.js","names":["React","classnames","E","setNextLevel","H","_ref","as","is","level","size","className","props","_objectWithoutProperties","_excluded","parseFloat","String","substring","createElement","_extends","internalClass"],"sources":["../../../../src/elements/typography/H.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { SpacingProps } from '../../components/space/types'\nimport E from '../Element'\nimport { setNextLevel } from '../../components/heading/HeadingHelpers'\n\nexport type HSize =\n  | 'xx-large'\n  | 'x-large'\n  | 'large'\n  | 'medium'\n  | 'basis'\n  | 'small'\n  | 'x-small'\n\ntype HProps = SpacingProps &\n  React.HTMLAttributes<HTMLHeadingElement> & {\n    /**\n     * Defines the Element Type, like \"h1\"\n     * Default: h1\n     */\n    as?: string\n    /**\n     * Makes the component use the elements heading level. e.g. h3 will make the component use level 3\n     */\n    level?: 'use'\n    /**\n     * Sets the font size based on headingSize_#{HEADING_SIZE} mixins found in typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/\n     * Default: xx-large\n     */\n    size?: HSize\n  }\n\nexport type SharedHProps = Omit<HProps, 'as'>\n\nconst H = ({\n  as = 'h1',\n  is,\n  level,\n  size = 'xx-large',\n  className,\n  ...props\n}: HProps) => {\n  if (level === 'use') {\n    setNextLevel(parseFloat(String(as || is).substring(1)))\n  }\n\n  return (\n    <E\n      as={as || is}\n      internalClass={classnames(size && `dnb-h--${size}`, className)}\n      {...props}\n    />\n  )\n}\n\nexport default H\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,CAAC,MAAM,YAAY;AAC1B,SAASC,YAAY,QAAQ,yCAAyC;AA+BtE,MAAMC,CAAC,GAAGC,IAAA,IAOI;EAAA,IAPH;MACTC,EAAE,GAAG,IAAI;MACTC,EAAE;MACFC,KAAK;MACLC,IAAI,GAAG,UAAU;MACjBC;IAEM,CAAC,GAAAL,IAAA;IADJM,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAER,IAAIL,KAAK,KAAK,KAAK,EAAE;IACnBL,YAAY,CAACW,UAAU,CAACC,MAAM,CAACT,EAAE,IAAIC,EAAE,CAAC,CAACS,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;EACzD;EAEA,OACEhB,KAAA,CAAAiB,aAAA,CAACf,CAAC,EAAAgB,QAAA;IACAZ,EAAE,EAAEA,EAAE,IAAIC,EAAG;IACbY,aAAa,EAAElB,UAAU,CAA2BS,SAAS,EAAnCD,IAAI,IAAK,UAASA,IAAK,EAAY;EAAE,GAC3DE,KAAK,CACV,CAAC;AAEN,CAAC;AAED,eAAeP,CAAC"}
+{"version":3,"file":"H.js","names":["React","classnames","E","setNextLevel","getHeadingSize","useTheme","H","_ref","as","is","level","size","className","props","_objectWithoutProperties","_excluded","numSiz","parseFloat","String","substring","theme","targetSize","name","createElement","_extends","internalClass"],"sources":["../../../../src/elements/typography/H.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { SpacingProps } from '../../components/space/types'\nimport E from '../Element'\nimport { HeadingSize } from '../../components/heading/Heading'\nimport {\n  setNextLevel,\n  getHeadingSize,\n} from '../../components/heading/HeadingHelpers'\nimport { useTheme } from '../../shared'\n\nexport type HSize = HeadingSize\n\ntype HProps = SpacingProps &\n  React.HTMLAttributes<HTMLHeadingElement> & {\n    /**\n     * Defines the Element Type, like \"h1\"\n     * Default: h1\n     */\n    as?: string\n    /**\n     * Makes the component use the elements heading level. e.g. h3 will make the component use level 3\n     */\n    level?: 'use'\n    /**\n     * Sets the font size based on headingSize_#{HEADING_SIZE} mixins found in typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/.\n     * Use value 'auto' to base size on heading level\n     * Default: xx-large\n     */\n    size?: HSize | 'auto'\n  }\n\nexport type SharedHProps = Omit<HProps, 'as'>\n\nconst H = ({\n  as = 'h1',\n  is,\n  level,\n  size,\n  className,\n  ...props\n}: HProps) => {\n  const numSiz = parseFloat(String(as || is).substring(1))\n\n  if (level === 'use') {\n    setNextLevel(numSiz)\n  }\n\n  const theme = useTheme()\n  const targetSize =\n    (size === 'auto' && getHeadingSize(theme?.name)[numSiz]) ||\n    size ||\n    'xx-large'\n\n  return (\n    <E\n      as={as || is}\n      internalClass={classnames(\n        targetSize && `dnb-h--${targetSize}`,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport default H\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,CAAC,MAAM,YAAY;AAE1B,SACEC,YAAY,EACZC,cAAc,QACT,yCAAyC;AAChD,SAASC,QAAQ,QAAQ,cAAc;AAyBvC,MAAMC,CAAC,GAAGC,IAAA,IAOI;EAAA,IAPH;MACTC,EAAE,GAAG,IAAI;MACTC,EAAE;MACFC,KAAK;MACLC,IAAI;MACJC;IAEM,CAAC,GAAAL,IAAA;IADJM,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAER,MAAMC,MAAM,GAAGC,UAAU,CAACC,MAAM,CAACV,EAAE,IAAIC,EAAE,CAAC,CAACU,SAAS,CAAC,CAAC,CAAC,CAAC;EAExD,IAAIT,KAAK,KAAK,KAAK,EAAE;IACnBP,YAAY,CAACa,MAAM,CAAC;EACtB;EAEA,MAAMI,KAAK,GAAGf,QAAQ,CAAC,CAAC;EACxB,MAAMgB,UAAU,GACbV,IAAI,KAAK,MAAM,IAAIP,cAAc,CAACgB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,IAAI,CAAC,CAACN,MAAM,CAAC,IACvDL,IAAI,IACJ,UAAU;EAEZ,OACEX,KAAA,CAAAuB,aAAA,CAACrB,CAAC,EAAAsB,QAAA;IACAhB,EAAE,EAAEA,EAAE,IAAIC,EAAG;IACbgB,aAAa,EAAExB,UAAU,CAEvBW,SAAS,EADTS,UAAU,IAAK,UAASA,UAAW,EAErC;EAAE,GACER,KAAK,CACV,CAAC;AAEN,CAAC;AAED,eAAeP,CAAC"}

package/es/elements/typography/H1.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H1 = _ref => {
   let {
-      size = 'xx-large'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h1",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H1;

package/es/elements/typography/H1.js.map

@@ -1 +1 @@
-{"version":3,"file":"H1.js","names":["React","H","H1","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H1.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport H from './H'\nimport type { SharedHProps } from './H'\n\nconst H1 = ({ size = 'xx-large', ...props }: SharedHProps) => (\n  <H as=\"h1\" size={size} {...props} />\n)\n\nexport default H1\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,CAAC,MAAM,KAAK;AAGnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAmC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACvCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H1.js","names":["React","H","H1","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H1.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H1 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h1\" size={size || 'auto'} {...props} />\n)\n\nexport default H1\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}

package/es/elements/typography/H2.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H2 = _ref => {
   let {
-      size = 'large'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h2",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H2;

package/es/elements/typography/H2.js.map

@@ -1 +1 @@
-{"version":3,"file":"H2.js","names":["React","H","H2","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H2.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H2 = ({ size = 'large', ...props }: SharedHProps) => (\n  <H as=\"h2\" size={size} {...props} />\n)\n\nexport default H2\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAgC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACpCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H2.js","names":["React","H","H2","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H2.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H2 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h2\" size={size || 'auto'} {...props} />\n)\n\nexport default H2\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}

package/es/elements/typography/H3.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H3 = _ref => {
   let {
-      size = 'medium'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h3",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H3;

package/es/elements/typography/H3.js.map

@@ -1 +1 @@
-{"version":3,"file":"H3.js","names":["React","H","H3","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H3.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H3 = ({ size = 'medium', ...props }: SharedHProps) => (\n  <H as=\"h3\" size={size} {...props} />\n)\n\nexport default H3\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAiC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACrCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H3.js","names":["React","H","H3","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H3.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H3 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h3\" size={size || 'auto'} {...props} />\n)\n\nexport default H3\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}

package/es/elements/typography/H4.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H4 = _ref => {
   let {
-      size = 'basis'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h4",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H4;

package/es/elements/typography/H4.js.map

@@ -1 +1 @@
-{"version":3,"file":"H4.js","names":["React","H","H4","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H4.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H4 = ({ size = 'basis', ...props }: SharedHProps) => (\n  <H as=\"h4\" size={size} {...props} />\n)\n\nexport default H4\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAgC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACpCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H4.js","names":["React","H","H4","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H4.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H4 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h4\" size={size || 'auto'} {...props} />\n)\n\nexport default H4\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}

package/es/elements/typography/H5.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H5 = _ref => {
   let {
-      size = 'small'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h5",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H5;

package/es/elements/typography/H5.js.map

@@ -1 +1 @@
-{"version":3,"file":"H5.js","names":["React","H","H5","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H5.tsx"],"sourcesContent":["/**\n/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H5 = ({ size = 'small', ...props }: SharedHProps) => (\n  <H as=\"h5\" size={size} {...props} />\n)\n\nexport default H5\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAgC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACpCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H5.js","names":["React","H","H5","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H5.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H5 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h5\" size={size || 'auto'} {...props} />\n)\n\nexport default H5\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}

package/es/elements/typography/H6.js

@@ -5,12 +5,12 @@ import React from 'react';
 import H from './H';
 const H6 = _ref => {
   let {
-      size = 'x-small'
+      size
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(H, _extends({
     as: "h6",
-    size: size
+    size: size || 'auto'
   }, props));
 };
 export default H6;

package/es/elements/typography/H6.js.map

@@ -1 +1 @@
-{"version":3,"file":"H6.js","names":["React","H","H6","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H6.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H6 = ({ size = 'x-small', ...props }: SharedHProps) => (\n  <H as=\"h6\" size={size} {...props} />\n)\n\nexport default H6\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI,GAAG;IAAkC,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OACtCP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA;EAAK,GAAKC,KAAK,CAAG,CAAC;AAAA,CACrC;AAED,eAAeH,EAAE"}
+{"version":3,"file":"H6.js","names":["React","H","H6","_ref","size","props","_objectWithoutProperties","_excluded","createElement","_extends","as"],"sources":["../../../../src/elements/typography/H6.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport type { SharedHProps } from './H'\nimport H from './H'\n\nconst H6 = ({ size, ...props }: SharedHProps) => (\n  <H as=\"h6\" size={size || 'auto'} {...props} />\n)\n\nexport default H6\n"],"mappings":";;;AAIA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,KAAK;AAEnB,MAAMC,EAAE,GAAGC,IAAA;EAAA,IAAC;MAAEC;IAA6B,CAAC,GAAAD,IAAA;IAArBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,OAC1BP,KAAA,CAAAQ,aAAA,CAACP,CAAC,EAAAQ,QAAA;IAACC,EAAE,EAAC,IAAI;IAACN,IAAI,EAAEA,IAAI,IAAI;EAAO,GAAKC,KAAK,CAAG,CAAC;AAAA,CAC/C;AAED,eAAeH,EAAE"}

package/es/elements/typography/style/dnb-typography.scss

@@ -51,6 +51,7 @@
   --typography-h-basis-small-font-size: var(--font-size-small);
   --typography-h-basis-small-line-height: var(--line-height-small);
   --typography-h-basis-weight: var(--font-weight-medium);
+  --typography-h-basis-font-family: var(--font-family-default);
 
   // Heading small
   --typography-h-small-font-size: var(--font-size-small);
@@ -58,11 +59,13 @@
   --typography-h-small-small-font-size: var(--font-size-x-small);
   --typography-h-small-small-line-height: var(--line-height-x-small);
   --typography-h-small-weight: var(--font-weight-medium);
+  --typography-h-small-font-family: var(--font-family-default);
 
   // Heading x-small
   --typography-h-x-small-font-size: var(--font-size-x-small);
   --typography-h-x-small-line-height: var(--line-height-x-small);
   --typography-h-x-small-weight: var(--font-weight-medium);
+  --typography-h-x-small-font-family: var(--font-family-default);
 }
 
 @include headingClasses() {

package/es/elements/typography/style/themes/dnb-typography-theme-sbanken.scss

@@ -1,4 +1,5 @@
 @use '../typography-mixins.scss' as typography;
+@use '../../../../style/core/utilities.scss' as utilities;
 
 // Paragraphs
 .dnb-p {
@@ -13,6 +14,7 @@
 // Headings
 @include typography.headingClasses() {
   color: var(--sb-color-text);
+  font-variant-ligatures: none;
 }
 
 @include typography.typographySelectors() {
@@ -22,6 +24,15 @@
   --typography-h-large-weight: var(--font-weight-regular);
   --typography-lead-weight: var(--font-weight-regular);
   --typography-h-medium-weight: var(--font-weight-regular);
-  --typography-h-basis-weight: var(--font-weight-regular);
-  --typography-h-small-weight: var(--font-weight-regular);
+
+  @include utilities.allBelow(small) {
+    --typography-h-xx-large-font-size: var(--font-size-x-large);
+    --typography-h-xx-large-line-height: var(--line-height-x-large);
+    --typography-h-x-large-font-size: var(--font-size-large);
+    --typography-h-x-large-line-height: var(--line-height-large);
+    --typography-h-large-font-size: var(--font-size-medium);
+    --typography-h-large-line-height: var(--line-height-medium);
+    --typography-h-medium-font-size: var(--font-size-lead);
+    --typography-h-medium-line-height: var(--line-height-lead);
+  }
 }

package/es/elements/typography/style/typography-mixins.scss

@@ -6,9 +6,11 @@
     $selectors: &;
     @at-root {
       @include headingTags() {
+        // prettier-ignore
         $selectors: #{$selectors}, &;
         @at-root {
           @include otherSelectos() {
+            // prettier-ignore
             $selectors: #{$selectors}, &;
 
             @at-root #{$selectors} {
@@ -191,6 +193,7 @@
     var(--typography-h-basis-small-line-height),
     var(--typography-h-basis-weight)
   ) {
+    font-family: var(--typography-h-basis-font-family);
     @content;
   }
 }
@@ -203,6 +206,7 @@
     var(--typography-h-small-small-line-height),
     var(--typography-h-small-weight)
   ) {
+    font-family: var(--typography-h-small-font-family);
     @content;
   }
 }
@@ -215,6 +219,7 @@
     null,
     var(--typography-h-x-small-weight)
   ) {
+    font-family: var(--typography-h-x-small-font-family);
     @content;
   }
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
+import type { ComponentProps } from '../types';
 export type Props = ComponentProps & {
     /** JSON Pointer for where in the source dataset to point at in sub components */
     path?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"At.js","names":["React","useContext","useMemo","pointer","Context","At","props","path","iterate","children","dataContext","data","contextData","handlePathChange","contextHandlePathChange","has","get","undefined","changePath","value","Array","isArray","createElement","Fragment","map","element","i","Provider","key","_objectSpread","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/DataContext/At.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport pointer from 'json-pointer'\nimport type { ComponentProps } from '../component-types'\nimport Context from './Context'\n\nexport type Props = ComponentProps & {\n  /** JSON Pointer for where in the source dataset to point at in sub components */\n  path?: string\n  iterate?: boolean\n  children?: React.ReactNode\n}\n\nfunction At(props: Props) {\n  const { path = '/', iterate, children } = props\n  const dataContext = useContext(Context)\n  const { data: contextData, handlePathChange: contextHandlePathChange } =\n    dataContext\n\n  const data =\n    contextData && pointer.has(contextData, path)\n      ? pointer.get(contextData, path)\n      : undefined\n\n  const handlePathChange = useMemo(\n    () =>\n      contextHandlePathChange\n        ? (changePath, value) => {\n            contextHandlePathChange(`${path}${changePath}`, value)\n          }\n        : undefined,\n    [contextHandlePathChange, path]\n  )\n\n  if (iterate) {\n    if (!Array.isArray(data)) {\n      return null\n    }\n    return (\n      <>\n        {data.map((element, i) => {\n          const handlePathChange = contextHandlePathChange\n            ? (changePath, value) => {\n                contextHandlePathChange(`${path}/${i}${changePath}`, value)\n              }\n            : undefined\n\n          return (\n            <Context.Provider\n              key={`element${i}`}\n              value={{\n                ...dataContext,\n                data: element,\n                handlePathChange,\n              }}\n            >\n              {children}\n            </Context.Provider>\n          )\n        })}\n      </>\n    )\n  }\n\n  return (\n    <Context.Provider\n      value={{\n        ...dataContext,\n        data,\n        handlePathChange,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n\nAt._supportsEufemiaSpacingProps = true\nexport default At\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,OAAO,MAAM,cAAc;AAElC,OAAOC,OAAO,MAAM,WAAW;AAS/B,SAASC,EAAEA,CAACC,KAAY,EAAE;EACxB,MAAM;IAAEC,IAAI,GAAG,GAAG;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAC/C,MAAMI,WAAW,GAAGT,UAAU,CAACG,OAAO,CAAC;EACvC,MAAM;IAAEO,IAAI,EAAEC,WAAW;IAAEC,gBAAgB,EAAEC;EAAwB,CAAC,GACpEJ,WAAW;EAEb,MAAMC,IAAI,GACRC,WAAW,IAAIT,OAAO,CAACY,GAAG,CAACH,WAAW,EAAEL,IAAI,CAAC,GACzCJ,OAAO,CAACa,GAAG,CAACJ,WAAW,EAAEL,IAAI,CAAC,GAC9BU,SAAS;EAEf,MAAMJ,gBAAgB,GAAGX,OAAO,CAC9B,MACEY,uBAAuB,GACnB,CAACI,UAAU,EAAEC,KAAK,KAAK;IACrBL,uBAAuB,CAAE,GAAEP,IAAK,GAAEW,UAAW,EAAC,EAAEC,KAAK,CAAC;EACxD,CAAC,GACDF,SAAS,EACf,CAACH,uBAAuB,EAAEP,IAAI,CAChC,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,IAAI,CAACY,KAAK,CAACC,OAAO,CAACV,IAAI,CAAC,EAAE;MACxB,OAAO,IAAI;IACb;IACA,OACEX,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QACGZ,IAAI,CAACa,GAAG,CAAC,CAACC,OAAO,EAAEC,CAAC,KAAK;MACxB,MAAMb,gBAAgB,GAAGC,uBAAuB,GAC5C,CAACI,UAAU,EAAEC,KAAK,KAAK;QACrBL,uBAAuB,CAAE,GAAEP,IAAK,IAAGmB,CAAE,GAAER,UAAW,EAAC,EAAEC,KAAK,CAAC;MAC7D,CAAC,GACDF,SAAS;MAEb,OACEjB,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;QACfC,GAAG,EAAG,UAASF,CAAE,EAAE;QACnBP,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;UACdC,IAAI,EAAEc,OAAO;UACbZ;QAAgB;MAChB,GAEDJ,QACe,CAAC;IAEvB,CAAC,CACD,CAAC;EAEP;EAEA,OACET,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;IACfR,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;MACdC,IAAI;MACJE;IAAgB;EAChB,GAEDJ,QACe,CAAC;AAEvB;AAEAJ,EAAE,CAACyB,4BAA4B,GAAG,IAAI;AACtC,eAAezB,EAAE"}
+{"version":3,"file":"At.js","names":["React","useContext","useMemo","pointer","Context","At","props","path","iterate","children","dataContext","data","contextData","handlePathChange","contextHandlePathChange","has","get","undefined","changePath","value","Array","isArray","createElement","Fragment","map","element","i","Provider","key","_objectSpread","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/DataContext/At.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport pointer from 'json-pointer'\nimport type { ComponentProps } from '../types'\nimport Context from './Context'\n\nexport type Props = ComponentProps & {\n  /** JSON Pointer for where in the source dataset to point at in sub components */\n  path?: string\n  iterate?: boolean\n  children?: React.ReactNode\n}\n\nfunction At(props: Props) {\n  const { path = '/', iterate, children } = props\n  const dataContext = useContext(Context)\n  const { data: contextData, handlePathChange: contextHandlePathChange } =\n    dataContext\n\n  const data =\n    contextData && pointer.has(contextData, path)\n      ? pointer.get(contextData, path)\n      : undefined\n\n  const handlePathChange = useMemo(\n    () =>\n      contextHandlePathChange\n        ? (changePath, value) => {\n            contextHandlePathChange(`${path}${changePath}`, value)\n          }\n        : undefined,\n    [contextHandlePathChange, path]\n  )\n\n  if (iterate) {\n    if (!Array.isArray(data)) {\n      return null\n    }\n    return (\n      <>\n        {data.map((element, i) => {\n          const handlePathChange = contextHandlePathChange\n            ? (changePath, value) => {\n                contextHandlePathChange(`${path}/${i}${changePath}`, value)\n              }\n            : undefined\n\n          return (\n            <Context.Provider\n              key={`element${i}`}\n              value={{\n                ...dataContext,\n                data: element,\n                handlePathChange,\n              }}\n            >\n              {children}\n            </Context.Provider>\n          )\n        })}\n      </>\n    )\n  }\n\n  return (\n    <Context.Provider\n      value={{\n        ...dataContext,\n        data,\n        handlePathChange,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n\nAt._supportsEufemiaSpacingProps = true\nexport default At\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,OAAO,MAAM,cAAc;AAElC,OAAOC,OAAO,MAAM,WAAW;AAS/B,SAASC,EAAEA,CAACC,KAAY,EAAE;EACxB,MAAM;IAAEC,IAAI,GAAG,GAAG;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAC/C,MAAMI,WAAW,GAAGT,UAAU,CAACG,OAAO,CAAC;EACvC,MAAM;IAAEO,IAAI,EAAEC,WAAW;IAAEC,gBAAgB,EAAEC;EAAwB,CAAC,GACpEJ,WAAW;EAEb,MAAMC,IAAI,GACRC,WAAW,IAAIT,OAAO,CAACY,GAAG,CAACH,WAAW,EAAEL,IAAI,CAAC,GACzCJ,OAAO,CAACa,GAAG,CAACJ,WAAW,EAAEL,IAAI,CAAC,GAC9BU,SAAS;EAEf,MAAMJ,gBAAgB,GAAGX,OAAO,CAC9B,MACEY,uBAAuB,GACnB,CAACI,UAAU,EAAEC,KAAK,KAAK;IACrBL,uBAAuB,CAAE,GAAEP,IAAK,GAAEW,UAAW,EAAC,EAAEC,KAAK,CAAC;EACxD,CAAC,GACDF,SAAS,EACf,CAACH,uBAAuB,EAAEP,IAAI,CAChC,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,IAAI,CAACY,KAAK,CAACC,OAAO,CAACV,IAAI,CAAC,EAAE;MACxB,OAAO,IAAI;IACb;IACA,OACEX,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QACGZ,IAAI,CAACa,GAAG,CAAC,CAACC,OAAO,EAAEC,CAAC,KAAK;MACxB,MAAMb,gBAAgB,GAAGC,uBAAuB,GAC5C,CAACI,UAAU,EAAEC,KAAK,KAAK;QACrBL,uBAAuB,CAAE,GAAEP,IAAK,IAAGmB,CAAE,GAAER,UAAW,EAAC,EAAEC,KAAK,CAAC;MAC7D,CAAC,GACDF,SAAS;MAEb,OACEjB,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;QACfC,GAAG,EAAG,UAASF,CAAE,EAAE;QACnBP,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;UACdC,IAAI,EAAEc,OAAO;UACbZ;QAAgB;MAChB,GAEDJ,QACe,CAAC;IAEvB,CAAC,CACD,CAAC;EAEP;EAEA,OACET,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;IACfR,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;MACdC,IAAI;MACJE;IAAgB;EAChB,GAEDJ,QACe,CAAC;AAEvB;AAEAJ,EAAE,CAACyB,4BAA4B,GAAG,IAAI;AACtC,eAAezB,EAAE"}

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

@@ -13,6 +13,7 @@ export interface ContextState {
     handleUnMountField: (path: string) => void;
     setPathWithError: (path: string, hasError: boolean) => void;
     hasErrors: () => boolean;
+    _isInsideFormElement?: boolean;
 }
 export declare const defaultContextState: ContextState;
 declare const Context: React.Context<ContextState>;

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

@@ -9,7 +9,8 @@ export const defaultContextState = {
   handleMountField: () => null,
   handleUnMountField: () => null,
   hasErrors: () => false,
-  setPathWithError: () => null
+  setPathWithError: () => null,
+  _isInsideFormElement: false
 };
 const Context = React.createContext(defaultContextState);
 export default Context;

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

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["React","defaultContextState","data","undefined","handlePathChange","handleSubmit","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","setPathWithError","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\n\nexport interface ContextState {\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  handlePathChange: (path: string, value: any) => void\n  handleSubmit: () => any\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: string) => void\n  handleUnMountField: (path: string) => void\n  setPathWithError: (path: string, hasError: boolean) => void\n  hasErrors: () => boolean\n}\n\nexport const defaultContextState: ContextState = {\n  data: undefined,\n  handlePathChange: () => null,\n  handleSubmit: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  setPathWithError: () => null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAoBzB,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,IAAI,EAAEC,SAAS;EACfC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,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,gBAAgB,EAAEA,CAAA,KAAM;AAC1B,CAAC;AAED,MAAMC,OAAO,GAAGb,KAAK,CAACc,aAAa,CAAeb,mBAAmB,CAAC;AAEtE,eAAeY,OAAO"}
+{"version":3,"file":"Context.js","names":["React","defaultContextState","data","undefined","handlePathChange","handleSubmit","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","setPathWithError","_isInsideFormElement","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\n\nexport interface ContextState {\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  handlePathChange: (path: string, value: any) => void\n  handleSubmit: () => any\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: string) => void\n  handleUnMountField: (path: string) => void\n  setPathWithError: (path: string, hasError: boolean) => void\n  hasErrors: () => boolean\n  _isInsideFormElement?: boolean\n}\n\nexport const defaultContextState: ContextState = {\n  data: undefined,\n  handlePathChange: () => null,\n  handleSubmit: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  setPathWithError: () => null,\n  _isInsideFormElement: false,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAqBzB,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,IAAI,EAAEC,SAAS;EACfC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,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,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,oBAAoB,EAAE;AACxB,CAAC;AAED,MAAMC,OAAO,GAAGd,KAAK,CAACe,aAAa,CAAed,mBAAmB,CAAC;AAEtE,eAAea,OAAO"}

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

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useMemo, useCallback, useState } from 'react'
 import pointer from 'json-pointer';
 import ajv, { ajvErrorsToFormErrors } from '../utils/ajv';
 import Context from './Context';
+import structuredClone from '@ungap/structured-clone';
 function addListPath(paths, path) {
   return paths.includes(path) ? paths : paths.concat(path);
 }
@@ -46,9 +47,12 @@ export default function Provider({
     pathsWithErrorRef.current = hasError ? addListPath(pathsWithErrorRef.current, path) : removeListPath(pathsWithErrorRef.current, path);
   }, []);
   const handlePathChange = useCallback((path, value) => {
+    if (!path) {
+      return;
+    }
     onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value);
-    const newData = structuredClone(internalData);
-    if (path) {
+    const newData = structuredClone(path === '/' ? value : internalData);
+    if (path !== '/') {
       pointer.set(newData, path, value);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(newData);
@@ -67,7 +71,7 @@ export default function Provider({
       onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(internalData);
       if (scrollTopOnSubmit) {
         var _window;
-        window && ((_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
+        typeof window !== 'undefined' && ((_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
           top: 0,
           behavior: 'smooth'
         }));

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

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","names":["React","useEffect","useRef","useMemo","useCallback","useState","pointer","ajv","ajvErrorsToFormErrors","Context","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","Provider","data","externalData","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","children","ajvSchemaValidator","compile","undefined","internalData","setInternalData","mountedFieldPathsRef","errorsRef","showAllErrors","setShowAllErrors","pathsWithErrorRef","hasErrors","Boolean","current","find","mountedFieldPath","validateBySchema","errors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","structuredClone","set","handleMountField","handleUnMountField","handleSubmit","_window","window","scrollTo","top","behavior","createElement","mountedFieldPaths"],"sources":["../../../../../src/extensions/forms/DataContext/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useState,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { JSONSchema7 } from 'json-schema'\nimport ajv, { ajvErrorsToFormErrors } from '../utils/ajv'\nimport { FormError } from '../types'\nimport Context from './Context'\n\nexport interface Props<Data extends JsonObject> {\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?: (data: Data) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\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\nexport default function Provider<Data extends JsonObject>({\n  data: externalData,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  children,\n}: Props<Data>) {\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const [internalData, setInternalData] =\n    useState<Partial<Data>>(externalData)\n  const mountedFieldPathsRef = useRef<string[]>([])\n\n  // Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError>>({})\n  const [showAllErrors, setShowAllErrors] = useState<boolean>(false)\n  // Errors reported by fields, based on their direct validation rules\n  const pathsWithErrorRef = useRef<string[]>([])\n\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current[mountedFieldPath] !== undefined ||\n            pathsWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  useEffect(() => {\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    setInternalData(externalData)\n  }, [externalData])\n\n  const validateBySchema = useCallback(\n    (data: Partial<Data>): Record<string, Error> | undefined => {\n      if (!ajvSchemaValidator) {\n        // No schema-based validator. Assume data is valid.\n        return\n      }\n\n      if (!ajvSchemaValidator(data)) {\n        // Errors found\n        const errors = ajvErrorsToFormErrors(ajvSchemaValidator.errors)\n        return errors\n      } else {\n        return\n      }\n    },\n    [ajvSchemaValidator]\n  )\n\n  const validateBySchemaAndUpdateState = useCallback(\n    (data: Partial<Data>) => {\n      errorsRef.current = validateBySchema(data) ?? {}\n    },\n    [validateBySchema]\n  )\n\n  const setPathWithError = useCallback(\n    (path: string, hasError: boolean) => {\n      pathsWithErrorRef.current = hasError\n        ? addListPath(pathsWithErrorRef.current, path)\n        : removeListPath(pathsWithErrorRef.current, path)\n    },\n    []\n  )\n\n  const handlePathChange = useCallback(\n    (path, value) => {\n      onPathChange?.(path, value)\n      // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n      const newData = structuredClone(internalData) as Data\n      if (path) {\n        pointer.set(newData, path, value)\n      }\n      onChange?.(newData)\n\n      validateBySchemaAndUpdateState(newData)\n\n      setInternalData(newData)\n\n      setShowAllErrors(false)\n    },\n    [internalData, onChange, onPathChange, validateBySchemaAndUpdateState]\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(() => {\n    if (!hasErrors()) {\n      onSubmit?.(internalData as Data)\n      if (scrollTopOnSubmit) {\n        window && window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      setShowAllErrors(true)\n      onSubmitRequest?.()\n    }\n    return internalData\n  }, [\n    internalData,\n    scrollTopOnSubmit,\n    hasErrors,\n    onSubmit,\n    onSubmitRequest,\n  ])\n\n  useEffect(() => {\n    // Mount procedure\n    if (externalData) {\n      // Validate the initial data to know if the user can submit, and to show errors if inputs are requested to with props\n      validateBySchemaAndUpdateState(externalData)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalData,\n        handlePathChange,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setPathWithError,\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","useState","pointer","ajv","ajvErrorsToFormErrors","Context","structuredClone","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","Provider","data","externalData","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","children","ajvSchemaValidator","compile","undefined","internalData","setInternalData","mountedFieldPathsRef","errorsRef","showAllErrors","setShowAllErrors","pathsWithErrorRef","hasErrors","Boolean","current","find","mountedFieldPath","validateBySchema","errors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","set","handleMountField","handleUnMountField","handleSubmit","_window","window","scrollTo","top","behavior","createElement","mountedFieldPaths"],"sources":["../../../../../src/extensions/forms/DataContext/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useState,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { JSONSchema7 } from 'json-schema'\nimport ajv, { ajvErrorsToFormErrors } from '../utils/ajv'\nimport { FormError } from '../types'\nimport Context from './Context'\n\n/**\n * Deprecated, as it is supported my all mihor 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  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?: (data: Data) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\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\nexport default function Provider<Data extends JsonObject>({\n  data: externalData,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  children,\n}: Props<Data>) {\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const [internalData, setInternalData] =\n    useState<Partial<Data>>(externalData)\n  const mountedFieldPathsRef = useRef<string[]>([])\n\n  // Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError>>({})\n  const [showAllErrors, setShowAllErrors] = useState<boolean>(false)\n  // Errors reported by fields, based on their direct validation rules\n  const pathsWithErrorRef = useRef<string[]>([])\n\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current[mountedFieldPath] !== undefined ||\n            pathsWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  useEffect(() => {\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    setInternalData(externalData)\n  }, [externalData])\n\n  const validateBySchema = useCallback(\n    (data: Partial<Data>): Record<string, Error> | undefined => {\n      if (!ajvSchemaValidator) {\n        // No schema-based validator. Assume data is valid.\n        return\n      }\n\n      if (!ajvSchemaValidator(data)) {\n        // Errors found\n        const errors = ajvErrorsToFormErrors(ajvSchemaValidator.errors)\n        return errors\n      } else {\n        return\n      }\n    },\n    [ajvSchemaValidator]\n  )\n\n  const validateBySchemaAndUpdateState = useCallback(\n    (data: Partial<Data>) => {\n      errorsRef.current = validateBySchema(data) ?? {}\n    },\n    [validateBySchema]\n  )\n\n  const setPathWithError = useCallback(\n    (path: string, hasError: boolean) => {\n      pathsWithErrorRef.current = hasError\n        ? addListPath(pathsWithErrorRef.current, path)\n        : removeListPath(pathsWithErrorRef.current, path)\n    },\n    []\n  )\n\n  const handlePathChange = useCallback(\n    (path, value) => {\n      if (!path) {\n        return\n      }\n      onPathChange?.(path, value)\n\n      // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n      const newData = structuredClone(path === '/' ? value : internalData)\n      if (path !== '/') {\n        pointer.set(newData as Data, path, value)\n      }\n\n      onChange?.(newData)\n\n      validateBySchemaAndUpdateState(newData)\n\n      setInternalData(newData)\n\n      setShowAllErrors(false)\n    },\n    [internalData, onChange, onPathChange, validateBySchemaAndUpdateState]\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(() => {\n    if (!hasErrors()) {\n      onSubmit?.(internalData as Data)\n      if (scrollTopOnSubmit) {\n        typeof window !== 'undefined' &&\n          window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      setShowAllErrors(true)\n      onSubmitRequest?.()\n    }\n    return internalData\n  }, [\n    internalData,\n    scrollTopOnSubmit,\n    hasErrors,\n    onSubmit,\n    onSubmitRequest,\n  ])\n\n  useEffect(() => {\n    // Mount procedure\n    if (externalData) {\n      // Validate the initial data to know if the user can submit, and to show errors if inputs are requested to with props\n      validateBySchemaAndUpdateState(externalData)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalData,\n        handlePathChange,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setPathWithError,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,SAAS,EACTC,MAAM,EACNC,OAAO,EACPC,WAAW,EACXC,QAAQ,QACH,OAAO;AACd,OAAOC,OAAO,MAAsB,cAAc;AAElD,OAAOC,GAAG,IAAIC,qBAAqB,QAAQ,cAAc;AAEzD,OAAOC,OAAO,MAAM,WAAW;AAM/B,OAAOC,eAAe,MAAM,yBAAyB;AAoBrD,SAASC,WAAWA,CAACC,KAAe,EAAEC,IAAY,EAAY;EAC5D,OAAOD,KAAK,CAACE,QAAQ,CAACD,IAAI,CAAC,GAAGD,KAAK,GAAGA,KAAK,CAACG,MAAM,CAACF,IAAI,CAAC;AAC1D;AAEA,SAASG,cAAcA,CAACJ,KAAe,EAAEC,IAAY,EAAY;EAC/D,OAAOD,KAAK,CAACK,MAAM,CAAEC,QAAQ,IAAKA,QAAQ,KAAKL,IAAI,CAAC;AACtD;AAEA,eAAe,SAASM,QAAQA,CAA0B;EACxDC,IAAI,EAAEC,YAAY;EAClBC,MAAM;EACNC,QAAQ;EACRC,YAAY;EACZC,QAAQ;EACRC,eAAe;EACfC,iBAAiB;EACjBC;AACW,CAAC,EAAE;EACd,MAAMC,kBAAkB,GAAG1B,OAAO,CAChC,MAAOmB,MAAM,GAAGf,GAAG,CAACuB,OAAO,CAACR,MAAM,CAAC,GAAGS,SAAU,EAChD,CAACT,MAAM,CACT,CAAC;EACD,MAAM,CAACU,YAAY,EAAEC,eAAe,CAAC,GACnC5B,QAAQ,CAAgBgB,YAAY,CAAC;EACvC,MAAMa,oBAAoB,GAAGhC,MAAM,CAAW,EAAE,CAAC;EAGjD,MAAMiC,SAAS,GAAGjC,MAAM,CAA4B,CAAC,CAAC,CAAC;EACvD,MAAM,CAACkC,aAAa,EAAEC,gBAAgB,CAAC,GAAGhC,QAAQ,CAAU,KAAK,CAAC;EAElE,MAAMiC,iBAAiB,GAAGpC,MAAM,CAAW,EAAE,CAAC;EAE9C,MAAMqC,SAAS,GAAGnC,WAAW,CAC3B,MACEoC,OAAO,CACLN,oBAAoB,CAACO,OAAO,CAACC,IAAI,CAC9BC,gBAAgB,IACfR,SAAS,CAACM,OAAO,CAACE,gBAAgB,CAAC,KAAKZ,SAAS,IACjDO,iBAAiB,CAACG,OAAO,CAAC3B,QAAQ,CAAC6B,gBAAgB,CACvD,CACF,CAAC,EACH,EACF,CAAC;EAED1C,SAAS,CAAC,MAAM;IAEdgC,eAAe,CAACZ,YAAY,CAAC;EAC/B,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMuB,gBAAgB,GAAGxC,WAAW,CACjCgB,IAAmB,IAAwC;IAC1D,IAAI,CAACS,kBAAkB,EAAE;MAEvB;IACF;IAEA,IAAI,CAACA,kBAAkB,CAACT,IAAI,CAAC,EAAE;MAE7B,MAAMyB,MAAM,GAAGrC,qBAAqB,CAACqB,kBAAkB,CAACgB,MAAM,CAAC;MAC/D,OAAOA,MAAM;IACf,CAAC,MAAM;MACL;IACF;EACF,CAAC,EACD,CAAChB,kBAAkB,CACrB,CAAC;EAED,MAAMiB,8BAA8B,GAAG1C,WAAW,CAC/CgB,IAAmB,IAAK;IACvBe,SAAS,CAACM,OAAO,GAAGG,gBAAgB,CAACxB,IAAI,CAAC,IAAI,CAAC,CAAC;EAClD,CAAC,EACD,CAACwB,gBAAgB,CACnB,CAAC;EAED,MAAMG,gBAAgB,GAAG3C,WAAW,CAClC,CAACS,IAAY,EAAEmC,QAAiB,KAAK;IACnCV,iBAAiB,CAACG,OAAO,GAAGO,QAAQ,GAChCrC,WAAW,CAAC2B,iBAAiB,CAACG,OAAO,EAAE5B,IAAI,CAAC,GAC5CG,cAAc,CAACsB,iBAAiB,CAACG,OAAO,EAAE5B,IAAI,CAAC;EACrD,CAAC,EACD,EACF,CAAC;EAED,MAAMoC,gBAAgB,GAAG7C,WAAW,CAClC,CAACS,IAAI,EAAEqC,KAAK,KAAK;IACf,IAAI,CAACrC,IAAI,EAAE;MACT;IACF;IACAW,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGX,IAAI,EAAEqC,KAAK,CAAC;IAG3B,MAAMC,OAAO,GAAGzC,eAAe,CAACG,IAAI,KAAK,GAAG,GAAGqC,KAAK,GAAGlB,YAAY,CAAC;IACpE,IAAInB,IAAI,KAAK,GAAG,EAAE;MAChBP,OAAO,CAAC8C,GAAG,CAACD,OAAO,EAAUtC,IAAI,EAAEqC,KAAK,CAAC;IAC3C;IAEA3B,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG4B,OAAO,CAAC;IAEnBL,8BAA8B,CAACK,OAAO,CAAC;IAEvClB,eAAe,CAACkB,OAAO,CAAC;IAExBd,gBAAgB,CAAC,KAAK,CAAC;EACzB,CAAC,EACD,CAACL,YAAY,EAAET,QAAQ,EAAEC,YAAY,EAAEsB,8BAA8B,CACvE,CAAC;EAGD,MAAMO,gBAAgB,GAAGjD,WAAW,CAAES,IAAY,IAAK;IACrDqB,oBAAoB,CAACO,OAAO,GAAG9B,WAAW,CACxCuB,oBAAoB,CAACO,OAAO,EAC5B5B,IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMyC,kBAAkB,GAAGlD,WAAW,CAAES,IAAY,IAAK;IACvDqB,oBAAoB,CAACO,OAAO,GAAGzB,cAAc,CAC3CkB,oBAAoB,CAACO,OAAO,EAC5B5B,IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAKN,MAAM0C,YAAY,GAAGnD,WAAW,CAAC,MAAM;IACrC,IAAI,CAACmC,SAAS,CAAC,CAAC,EAAE;MAChBd,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGO,YAAoB,CAAC;MAChC,IAAIL,iBAAiB,EAAE;QAAA,IAAA6B,OAAA;QACrB,OAAOC,MAAM,KAAK,WAAW,MAAAD,OAAA,GAC3BC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,QAAQ,CAAC;UAAEC,GAAG,EAAE,CAAC;UAAEC,QAAQ,EAAE;QAAS,CAAC,CAAC;MACpD;IACF,CAAC,MAAM;MACLvB,gBAAgB,CAAC,IAAI,CAAC;MACtBX,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAG,CAAC;IACrB;IACA,OAAOM,YAAY;EACrB,CAAC,EAAE,CACDA,YAAY,EACZL,iBAAiB,EACjBY,SAAS,EACTd,QAAQ,EACRC,eAAe,CAChB,CAAC;EAEFzB,SAAS,CAAC,MAAM;IAEd,IAAIoB,YAAY,EAAE;MAEhByB,8BAA8B,CAACzB,YAAY,CAAC;IAC9C;EAEF,CAAC,EAAE,EAAE,CAAC;EAEN,OACErB,KAAA,CAAA6D,aAAA,CAACpD,OAAO,CAACU,QAAQ;IACf+B,KAAK,EAAE;MACL9B,IAAI,EAAEY,YAAY;MAClBiB,gBAAgB;MAChBM,YAAY;MACZV,MAAM,EAAEV,SAAS,CAACM,OAAO;MACzBL,aAAa;MACbC,gBAAgB;MAChByB,iBAAiB,EAAE5B,oBAAoB,CAACO,OAAO;MAC/CY,gBAAgB;MAChBC,kBAAkB;MAClBf,SAAS;MACTQ;IACF;EAAE,GAEDnB,QACe,CAAC;AAEvB"}

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

@@ -1,12 +1,10 @@
 /// <reference types="react" />
 import { ContextState } from './Context';
 import Provider from './Provider';
-import SubmitButton from './SubmitButton';
 import At from './At';
 declare const DataContext: {
     Context: import("react").Context<ContextState>;
     Provider: typeof Provider;
-    SubmitButton: typeof SubmitButton;
     At: typeof At;
 };
 export type { ContextState };

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

@@ -1,11 +1,9 @@
 import Context from './Context';
 import Provider from './Provider';
-import SubmitButton from './SubmitButton';
 import At from './At';
 const DataContext = {
   Context,
   Provider,
-  SubmitButton,
   At
 };
 export default DataContext;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Context","Provider","SubmitButton","At","DataContext"],"sources":["../../../../../src/extensions/forms/DataContext/index.ts"],"sourcesContent":["import Context, { ContextState } from './Context'\nimport Provider from './Provider'\nimport SubmitButton from './SubmitButton'\nimport At from './At'\n\nconst DataContext = {\n  Context,\n  Provider,\n  SubmitButton,\n  At,\n}\n\nexport type { ContextState }\nexport default DataContext\n\n"],"mappings":"AAAA,OAAOA,OAAO,MAAwB,WAAW;AACjD,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,EAAE,MAAM,MAAM;AAErB,MAAMC,WAAW,GAAG;EAClBJ,OAAO;EACPC,QAAQ;EACRC,YAAY;EACZC;AACF,CAAC;AAGD,eAAeC,WAAW"}
+{"version":3,"file":"index.js","names":["Context","Provider","At","DataContext"],"sources":["../../../../../src/extensions/forms/DataContext/index.ts"],"sourcesContent":["import Context, { ContextState } from './Context'\nimport Provider from './Provider'\nimport At from './At'\n\nconst DataContext = {\n  Context,\n  Provider,\n  At,\n}\n\nexport type { ContextState }\nexport default DataContext\n"],"mappings":"AAAA,OAAOA,OAAO,MAAwB,WAAW;AACjD,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,EAAE,MAAM,MAAM;AAErB,MAAMC,WAAW,GAAG;EAClBH,OAAO;EACPC,QAAQ;EACRC;AACF,CAAC;AAGD,eAAeC,WAAW"}

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<Array<string | number>> & {
+import { FieldProps } from '../types';
+export type Props = FieldProps<Array<string | number>> & {
     children?: React.ReactNode;
-    variant?: 'checkbox';
+    variant?: 'checkbox' | 'button';
+    optionsLayout?: 'horizontal' | 'vertical';
 };
 declare function ArraySelection(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace ArraySelection {

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

@@ -1,17 +1,21 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-var _br;
-import React from 'react';
-import { Checkbox } from '../../../components';
+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 '../Layout/ButtonRow';
 import classnames from 'classnames';
-import { forwardSpaceProps } from '../utils';
 import Option from './Option';
 import FieldBlock from '../FieldBlock';
-import { useField } from './hooks';
+import { useDataValue } from '../hooks';
+import { pickSpacingProps } from '../types';
 function ArraySelection(props) {
   const {
+    id,
     className,
-    variant,
-    layout,
+    variant = 'checkbox',
+    layout = 'vertical',
+    optionsLayout = 'vertical',
     label,
     labelDescription,
     labelSecondary,
@@ -21,38 +25,50 @@ function ArraySelection(props) {
     warning,
     disabled,
     emptyValue,
-    onChange,
+    handleChange,
     children
-  } = useField(props);
-  const options = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option);
+  } = useDataValue(props);
+  const fieldBlockProps = _objectSpread({
+    forId: id,
+    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
+    contentClassName: 'dnb-forms-field-array-selection__options',
+    info,
+    warning,
+    error,
+    layout,
+    label,
+    labelDescription,
+    labelSecondary
+  }, pickSpacingProps(props));
+  const options = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map(option => ({
+    title: option.props.title ?? option.props.children,
+    value: option.props.value,
+    handleSelect: () => {
+      const selected = option.props.value;
+      const newValue = value !== null && value !== void 0 && value.includes(selected) ? value.filter(value => value !== selected) : [...(value ?? []), selected];
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(newValue.length === 0 ? emptyValue : newValue);
+    }
+  })), [children, value, emptyValue, handleChange]);
   switch (variant) {
-    default:
+    case 'button':
+      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ButtonRow, null, options.map((option, i) => React.createElement(Button, {
+        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
+      }))));
     case 'checkbox':
-      return React.createElement(FieldBlock, _extends({
-        className: classnames('dnb-forms-field-string', className),
-        layout: layout,
-        label: label,
-        labelDescription: labelDescription,
-        labelSecondary: labelSecondary,
-        info: info,
-        warning: warning,
-        error: error
-      }, forwardSpaceProps(props)), options.map((child, i) => React.createElement(React.Fragment, {
-        key: child.props.value ?? `option-${i}`
-      }, React.createElement(Checkbox, {
-        label: child.props.title ?? child.props.children,
-        checked: child.props.value && (value === null || value === void 0 ? void 0 : value.includes(child.props.value)),
-        top: i > 0 ? 'x-small' : undefined,
+      return React.createElement(FieldBlock, fieldBlockProps, options.map((option, i) => React.createElement(Checkbox, {
+        key: `option-${i}-${option.value}`,
+        className: "dnb-forms-field-array-selection__checkbox",
+        label: option.title,
+        checked: value === null || value === void 0 ? void 0 : value.includes(option.value),
         disabled: disabled,
-        onChange: () => {
-          const clickedValue = child.props.value;
-          if (clickedValue === undefined) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(emptyValue);
-          }
-          const newValue = value !== null && value !== void 0 && value.includes(clickedValue) ? value.filter(value => value !== clickedValue) : [...(value ?? []), clickedValue];
-          onChange === null || onChange === void 0 ? void 0 : onChange(newValue.length === 0 ? emptyValue : newValue);
-        }
-      }), _br || (_br = React.createElement("br", null)))));
+        on_change: option.handleSelect
+      })));
   }
 }
 ArraySelection._supportsEufemiaSpacingProps = true;