@navikt/ds-react 6.10.1 → 6.12.0

package/esm/toggle-group/parts/useToggleItem.js

@@ -64,7 +64,7 @@ export function useToggleItem({ value, disabled = false, onFocus: _onFocus, onCl
         ref: mergeRefs([register, ref]),
         isSelected,
         isFocused: focusedValue === value,
-        onClick: composeEventHandlers(onClick, () => setSelectedValue(value)),
+        onClick: composeEventHandlers(onClick, () => selectedValue !== value && setSelectedValue(value)),
         onFocus: disabled ? undefined : composeEventHandlers(_onFocus, onFocus),
         onKeyDown: composeEventHandlers(_onKeyDown, onKeyDown),
     };

package/esm/toggle-group/parts/useToggleItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/useToggleItem.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/useToggleItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EACL,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,wBAAwB,CAAC;AAchC,MAAM,UAAU,aAAa,CAC3B,EACE,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,EAAE,QAAQ,EACjB,OAAO,EACP,SAAS,EAAE,UAAU,GACnB,EACJ,GAA0C;IAE1C,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,aAAa,EAAE,YAAY,EAAE,GACtE,qBAAqB,EAAE,CAAC;IAE1B,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,wBAAwB,CAAC;QACzD,QAAQ;QACR,KAAK;KACN,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,KAAK,KAAK,aAAa,CAAC;IAE3C,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAE7C;;OAEG;IACH,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAA0B,EAAE,EAAE;QAC7B;;;WAGG;QACH,MAAM,GAAG,GAAG,WAAW;aACpB,MAAM,EAAE;aACR,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC;QAE9C,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YACjD,IAAI,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC7B,CAAC,CAAC;QACF,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YACjD,IAAI,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC7B,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,GAAG,EAAE;;YACpB,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,EAAE,CAAC;YACzC,KAAK,KAAI,MAAA,KAAK,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC/B,CAAC,CAAC;QACF,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,EAAE,CAAC;YACvC,IAAI,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC7B,CAAC,CAAC;QAEF,MAAM,MAAM,GAA+C;YACzD,SAAS,EAAE,OAAO;YAClB,UAAU,EAAE,OAAO;YACnB,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,OAAO;SACb,CAAC;QAEF,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,MAAM,EAAE,CAAC;YACX,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,CAAC,KAAK,CAAC,CAAC;QAChB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YAC/B;;;eAGG;YACH,aAAa,IAAI,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC;QACpE,CAAC;IACH,CAAC,EACD,CAAC,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,CAAC,CAC5D,CAAC;IAEF,OAAO;QACL,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAC/B,UAAU;QACV,SAAS,EAAE,YAAY,KAAK,KAAK;QACjC,OAAO,EAAE,oBAAoB,CAC3B,OAAO,EACP,GAAG,EAAE,CAAC,aAAa,KAAK,KAAK,IAAI,gBAAgB,CAAC,KAAK,CAAC,CACzD;QACD,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC;QACvE,SAAS,EAAE,oBAAoB,CAAC,UAAU,EAAE,SAAS,CAAC;KACvD,CAAC;AACJ,CAAC"}

package/esm/util/hooks/descendants/useDescendant.js

@@ -38,7 +38,7 @@ export function createDescendantContext() {
             if (!ref.current)
                 return;
             const dataIndex = Number(ref.current.dataset["index"]);
-            if (index != dataIndex && !Number.isNaN(dataIndex)) {
+            if (index !== dataIndex && !Number.isNaN(dataIndex)) {
                 setIndex(dataIndex);
             }
         });

package/esm/util/hooks/descendants/useDescendant.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDescendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/useDescendant.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAqB,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,uBAAuB;IAIrC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,GAAG,aAAa,CAEvE;QACA,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EACV,+DAA+D;KAClE,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,IAAI,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,0BAA0B,oBAAK,KAAK,CAAC,KAAK,GACxC,KAAK,CAAC,QAAQ,CACY,CAC9B,CACF,CAAC;IAEF;;;;;;OAMG;IACH,SAAS,cAAc,CAAC,OAA8B;QACpD,MAAM,WAAW,GAAG,qBAAqB,EAAE,CAAC;QAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;QAE5B,qBAAqB,CAAC,GAAG,EAAE;YACzB,OAAO,GAAG,EAAE;gBACV,IAAI,CAAC,GAAG,CAAC,OAAO;oBAAE,OAAO;gBACzB,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,GAAG,CAAC,OAAO;gBAAE,OAAO;YACzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,IAAI,KAAK,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;gBACnD,QAAQ,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,OAAO;YACzB,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC3D,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,CAAC;QAErD,OAAO;YACL,WAAW;YACX,KAAK;YACL,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;YACrD,QAAQ,EAAE,SAAS,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;SACxC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,SAAS,eAAe;QACtB,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,EAAQ,CAAC,CAAC,OAAO,CAAC;QAEnE,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,OAAO;QACL,mBAAmB;QACnB,eAAe;QACf,+CAA+C;QAC/C,qBAAqB;QACrB,8EAA8E;QAC9E,eAAe;QACf,+BAA+B;QAC/B,cAAc;KACN,CAAC;AACb,CAAC"}
+{"version":3,"file":"useDescendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/useDescendant.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAqB,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,uBAAuB;IAIrC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,GAAG,aAAa,CAEvE;QACA,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EACV,+DAA+D;KAClE,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,IAAI,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,0BAA0B,oBAAK,KAAK,CAAC,KAAK,GACxC,KAAK,CAAC,QAAQ,CACY,CAC9B,CACF,CAAC;IAEF;;;;;;OAMG;IACH,SAAS,cAAc,CAAC,OAA8B;QACpD,MAAM,WAAW,GAAG,qBAAqB,EAAE,CAAC;QAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;QAE5B,qBAAqB,CAAC,GAAG,EAAE;YACzB,OAAO,GAAG,EAAE;gBACV,IAAI,CAAC,GAAG,CAAC,OAAO;oBAAE,OAAO;gBACzB,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,GAAG,CAAC,OAAO;gBAAE,OAAO;YACzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;gBACpD,QAAQ,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,OAAO;YACzB,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC3D,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,CAAC;QAErD,OAAO;YACL,WAAW;YACX,KAAK;YACL,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;YACrD,QAAQ,EAAE,SAAS,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;SACxC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,SAAS,eAAe;QACtB,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,EAAQ,CAAC,CAAC,OAAO,CAAC;QAEnE,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,OAAO;QACL,mBAAmB;QACnB,eAAe;QACf,+CAA+C;QAC/C,qBAAqB;QACrB,8EAA8E;QAC9E,eAAe;QACf,+BAA+B;QAC/B,cAAc;KACN,CAAC;AACb,CAAC"}

package/esm/util/hooks/descendants/utils.js

@@ -25,7 +25,7 @@ export function sortNodes(nodes) {
         return 0;
     });
 }
-export const isElement = (el) => typeof el == "object" &&
+export const isElement = (el) => typeof el === "object" &&
     "nodeType" in el &&
     el.nodeType === Node.ELEMENT_NODE;
 export function getNextIndex(current, max, loop) {

package/esm/util/hooks/descendants/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,KAAa;IACrC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;QAE7C,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,8BAA8B,EAC7C,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,0BAA0B,EACzC,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC;QACX,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,8BAA8B;YAC7C,OAAO,GAAG,IAAI,CAAC,yCAAyC,EACxD,CAAC;YACD,MAAM,KAAK,CAAC,8BAA8B,CAAC,CAAC;QAC9C,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAO,EAAqB,EAAE,CACtD,OAAO,EAAE,IAAI,QAAQ;IACrB,UAAU,IAAI,EAAE;IAChB,EAAE,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;AAEpC,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;QAAE,IAAI,GAAG,CAAC,CAAC;IAClC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;QAAE,IAAI,GAAG,GAAG,CAAC;IACjC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAI,KAAU,EAAE,EAAE,CAAC,KAAU,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,KAAa;IACrC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;QAE7C,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,8BAA8B,EAC7C,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,0BAA0B,EACzC,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC;QACX,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,8BAA8B;YAC7C,OAAO,GAAG,IAAI,CAAC,yCAAyC,EACxD,CAAC;YACD,MAAM,KAAK,CAAC,8BAA8B,CAAC,CAAC;QAC9C,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAO,EAAqB,EAAE,CACtD,OAAO,EAAE,KAAK,QAAQ;IACtB,UAAU,IAAI,EAAE;IAChB,EAAE,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;AAEpC,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;QAAE,IAAI,GAAG,CAAC,CAAC;IAClC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;QAAE,IAAI,GAAG,GAAG,CAAC;IACjC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAI,KAAU,EAAE,EAAE,CAAC,KAAU,CAAC"}

package/esm/util/i18n/get.js

@@ -24,10 +24,11 @@ export function get(keypath, ...objs) {
 }
 function getKeypath(str) {
     const path = [];
-    let result;
-    while ((result = OBJECT_NOTATION_MATCHER.exec(str))) {
+    let result = OBJECT_NOTATION_MATCHER.exec(str);
+    while (result) {
         const [, first, second] = result;
         path.push(first || second);
+        result = OBJECT_NOTATION_MATCHER.exec(str);
     }
     return path;
 }

package/esm/util/i18n/get.js.map

@@ -1 +1 @@
-{"version":3,"file":"get.js","sourceRoot":"","sources":["../../../src/util/i18n/get.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,uBAAuB,GAAG,QAAQ,CAAC;AAEzC,MAAM,UAAU,GAAG,CACjB,OAA0B,EAC1B,GAAG,IAAuC;IAE1C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAEpE,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,SAAS;QACX,CAAC;QAED,IAAI,GAAG,GAA+B,GAAG,CAAC;QAE1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtB,SAAS;YACX,CAAC;YACD,GAAG,GAAG,GAAG,CAAC;QACZ,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,OAAO,GAAG,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM,IAAI,KAAK,CACb,kEAAkE,CACnE,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,MAAM,IAAI,GAAa,EAAE,CAAC;IAC1B,IAAI,MAA8B,CAAC;IACnC,OAAO,CAAC,MAAM,GAAG,uBAAuB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;QACpD,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC;IAC7B,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"get.js","sourceRoot":"","sources":["../../../src/util/i18n/get.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,uBAAuB,GAAG,QAAQ,CAAC;AAEzC,MAAM,UAAU,GAAG,CACjB,OAA0B,EAC1B,GAAG,IAAuC;IAE1C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAEpE,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,SAAS;QACX,CAAC;QAED,IAAI,GAAG,GAA+B,GAAG,CAAC;QAE1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtB,SAAS;YACX,CAAC;YACD,GAAG,GAAG,GAAG,CAAC;QACZ,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,OAAO,GAAG,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM,IAAI,KAAK,CACb,kEAAkE,CACnE,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,MAAM,IAAI,GAAa,EAAE,CAAC;IAC1B,IAAI,MAAM,GAAG,uBAAuB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE/C,OAAO,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC;QAC3B,MAAM,GAAG,uBAAuB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/esm/util/types/AsChildProps.d.ts

@@ -16,6 +16,7 @@ export type AsChildProps = {
      * ```
      */
     asChild: true;
+    as?: never;
 } | {
     children: React.ReactNode;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.10.1",
+  "version": "6.12.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -594,8 +594,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^6.10.1",
-    "@navikt/ds-tokens": "^6.10.1",
+    "@navikt/aksel-icons": "^6.12.0",
+    "@navikt/ds-tokens": "^6.12.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

package/src/alert/Alert.tsx

@@ -29,6 +29,11 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    */
   fullWidth?: boolean;
+  /**
+   * Sets max-width on the content to 43.5rem.
+   * @default true
+   */
+  contentMaxWidth?: boolean;
   /**
    * Removes background from Alert.
    * @default false
@@ -85,6 +90,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       variant,
       size = "medium",
       fullWidth = false,
+      contentMaxWidth = true,
       inline = false,
       closeButton = false,
       onClose,
@@ -109,7 +115,14 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         )}
       >
         <Icon variant={variant} className="navds-alert__icon" />
-        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+        <BodyLong
+          as="div"
+          size={size}
+          className={cl(
+            "navds-alert__wrapper",
+            contentMaxWidth && "navds-alert__wrapper--maxwidth",
+          )}
+        >
           {children}
         </BodyLong>
         {closeButton && !inline && (
@@ -120,7 +133,15 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
               variant="tertiary-neutral"
               onClick={onClose}
               type="button"
-              icon={<XMarkIcon title="Lukk Alert" />}
+              icon={
+                <XMarkIcon
+                  title={
+                    ["error", "warning"].includes(variant)
+                      ? "Lukk varsel"
+                      : "Lukk melding"
+                  }
+                />
+              }
             />
           </div>
         )}

package/src/collapsible/parts/Collapsible.Content.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { useCollapsibleContext } from "../Collapsible.context";
 
 export interface CollapsibleContentProps

package/src/collapsible/parts/Collapsible.Trigger.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useCollapsibleContext } from "../Collapsible.context";
 

package/src/date/datepicker/types.ts

@@ -69,7 +69,7 @@ export interface DatePickerDefaultProps
   dropdownCaption?: boolean;
   /**
    * Apply the disabled modifier to the matching days.
-   * https://react-day-picker.js.org/api/types/Matcher
+   * https://react-day-picker.js.org/api/type-aliases/Matcher
    */
   disabled?: Matcher[];
   /**

package/src/date/monthpicker/types.ts

@@ -33,7 +33,7 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   dropdownCaption?: boolean;
   /**
-   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
+   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/type-aliases/Matcher
    */
   disabled?: Matcher[];
   /**

package/src/form/file-upload/parts/Trigger.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../../util/Slot";
+import { Slot } from "../../../slot/Slot";
 import { FileUploadBaseProps } from "../FileUpload.types";
 import { useFileUpload } from "../useFileUpload";
 

package/src/form/file-upload/parts/item/Item.tsx

@@ -44,6 +44,11 @@ export interface FileUploadItemProps
    * @default "idle"
    */
   status?: "downloading" | "uploading" | "idle";
+  /**
+   * File description. Replaces file size when status is "idle".
+   * This is useful for displaying upload date. Should not act as a replacement for error messages.
+   */
+  description?: string;
   /**
    * Props for the action button.
    */
@@ -71,6 +76,7 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         onFileClick,
         button,
         translations,
+        description,
         ...rest
       }: FileUploadItemProps,
       ref,
@@ -91,7 +97,7 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         if (status === "downloading") {
           return translate("item.downloading");
         }
-        return formatFileSize(file);
+        return description ?? formatFileSize(file);
       }
 
       return (

package/src/layout/base/BasePrimitive.tsx

@@ -0,0 +1,314 @@
+import cl from "clsx";
+import React from "react";
+import { Slot } from "../../slot/Slot";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
+
+export type PrimitiveProps = {
+  className?: string;
+  /**
+   * Padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * padding='4'
+   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  padding?: ResponsiveProp<SpacingScale>;
+  /**
+   * Horizontal padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingInline='4'
+   * paddingInline='4 5'
+   * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  paddingInline?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /**
+   * Vertical padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingBlock='4'
+   * paddingBlock='4 5'
+   * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  paddingBlock?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /**
+   * Margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * margin='4'
+   * margin={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  margin?: ResponsiveProp<SpacingScale>;
+  /**
+   * Horizontal margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * marginInline='4'
+   * marginInline='4 5'
+   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  marginInline?: ResponsiveProp<
+    | SpacingScale
+    | `${SpacingScale} ${SpacingScale}`
+    | "auto"
+    | `auto ${SpacingScale}`
+    | `${SpacingScale} auto`
+  >;
+  /**
+   * Vertical margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * marginBlock='4'
+   * marginBlock='4 5'
+   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  marginBlock?: ResponsiveProp<
+    | SpacingScale
+    | `${SpacingScale} ${SpacingScale}`
+    | "auto"
+    | `auto ${SpacingScale}`
+    | `${SpacingScale} auto`
+  >;
+  /**
+   * CSS `width`
+   */
+  width?: ResponsiveProp<string>;
+  /**
+   * CSS `min-width`
+   */
+  minWidth?: ResponsiveProp<string>;
+  /**
+   * CSS `max-width`
+   */
+  maxWidth?: ResponsiveProp<string>;
+  /**
+   * CSS `height`
+   */
+  height?: ResponsiveProp<string>;
+  /**
+   * CSS `min-height`
+   */
+  minHeight?: ResponsiveProp<string>;
+  /**
+   * CSS `max-height`
+   */
+  maxHeight?: ResponsiveProp<string>;
+  /**
+   * CSS `position`
+   */
+  position?: ResponsiveProp<
+    "static" | "relative" | "absolute" | "fixed" | "sticky"
+  >;
+  /**
+   * CSS `inset`.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * inset='4'
+   * inset='4 5'
+   * inset={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  inset?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+  /**
+   * CSS `top`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * top='4'
+   * top={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  top?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `right`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * right='4'
+   * right={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  right?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `bottom`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * bottom='4'
+   * bottom={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  bottom?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `left`
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * left='4'
+   * left={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  left?: ResponsiveProp<SpacingScale>;
+  /**
+   * CSS `overflow`
+   */
+  overflow?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+  /**
+   * CSS `overflow-x`
+   */
+  overflowX?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+  /**
+   * CSS `overflow-y`
+   */
+  overflowY?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+  /**
+   * CSS `flex-basis`
+   */
+  flexBasis?: ResponsiveProp<string>;
+  /**
+   * CSS `flex-shrink`
+   */
+  flexShrink?: ResponsiveProp<string>;
+  /**
+   * CSS `flex-grow`
+   */
+  flexGrow?: ResponsiveProp<string>;
+};
+
+export const PRIMITIVE_PROPS: (keyof PrimitiveProps)[] = [
+  "className",
+  "padding",
+  "paddingInline",
+  "paddingBlock",
+  "margin",
+  "marginInline",
+  "marginBlock",
+  "width",
+  "minWidth",
+  "maxWidth",
+  "height",
+  "minHeight",
+  "maxHeight",
+  "position",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "flexBasis",
+  "flexGrow",
+  "flexShrink",
+];
+
+interface BasePrimitiveProps extends PrimitiveProps {
+  children: React.ReactElement;
+}
+
+export const BasePrimitive = ({
+  children,
+  className,
+  padding,
+  paddingInline,
+  paddingBlock,
+  margin,
+  marginInline,
+  marginBlock,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  position,
+  inset,
+  top,
+  right,
+  left,
+  bottom,
+  overflow,
+  overflowX,
+  overflowY,
+  flexBasis,
+  flexGrow,
+  flexShrink,
+}: BasePrimitiveProps) => {
+  const style: React.CSSProperties = {
+    /* Padding */
+    ...getResponsiveProps("r", "p", "spacing", padding),
+    ...getResponsiveProps("r", "pi", "spacing", paddingInline),
+    ...getResponsiveProps("r", "pb", "spacing", paddingBlock),
+    /* Margin */
+    ...getResponsiveProps("r", "m", "spacing", margin),
+    ...getResponsiveProps("r", "mi", "spacing", marginInline),
+    ...getResponsiveProps("r", "mb", "spacing", marginBlock),
+    /* Width & height */
+    ...getResponsiveValue("r", "w", width),
+    ...getResponsiveValue("r", "minw", minWidth),
+    ...getResponsiveValue("r", "maxw", maxWidth),
+    ...getResponsiveValue("r", "h", height),
+    ...getResponsiveValue("r", "minh", minHeight),
+    ...getResponsiveValue("r", "maxh", maxHeight),
+    /* Positon & inset */
+    ...getResponsiveValue("r", "position", position),
+    ...getResponsiveProps("r", "inset", "spacing", inset),
+    ...getResponsiveProps("r", "top", "spacing", top),
+    ...getResponsiveProps("r", "right", "spacing", right),
+    ...getResponsiveProps("r", "bottom", "spacing", bottom),
+    ...getResponsiveProps("r", "left", "spacing", left),
+    /* Overflow */
+    ...getResponsiveValue("r", "overflow", overflow),
+    ...getResponsiveValue("r", "overflowx", overflowX),
+    ...getResponsiveValue("r", "overflowy", overflowY),
+    /* Flex */
+    ...getResponsiveValue("r", "flex-basis", flexBasis),
+    ...getResponsiveValue("r", "flex-grow", flexGrow),
+    ...getResponsiveValue("r", "flex-shrink", flexShrink),
+  };
+
+  return (
+    <Slot
+      className={cl({
+        className,
+        "navds-r-p": padding,
+        "navds-r-pi": paddingInline,
+        "navds-r-pb": paddingBlock,
+        "navds-r-m": margin,
+        "navds-r-mi": marginInline,
+        "navds-r-mb": marginBlock,
+        "navds-r-w": width,
+        "navds-r-minw": minWidth,
+        "navds-r-maxw": maxWidth,
+        "navds-r-h": height,
+        "navds-r-minh": minHeight,
+        "navds-r-maxh": maxHeight,
+        "navds-r-position": position,
+        "navds-r-inset": inset,
+        "navds-r-top": top,
+        "navds-r-right": right,
+        "navds-r-bottom": bottom,
+        "navds-r-left": left,
+        "navds-r-overflow": overflow,
+        "navds-r-overflowx": overflowX,
+        "navds-r-overflowy": overflowY,
+        "navds-r-flex-basis": flexBasis,
+        "navds-r-flex-grow": flexGrow,
+        "navds-r-flex-shrink": flexShrink,
+      })}
+      style={style}
+    >
+      {children}
+    </Slot>
+  );
+};
+
+export default BasePrimitive;

package/src/layout/base/PrimitiveAsChildProps.ts

@@ -0,0 +1,42 @@
+export type PrimitiveAsChildProps =
+  | {
+      children: React.ReactElement | false | null;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <div data-prop data-child />
+       * ```
+       */
+      asChild: true;
+      /**
+       * Implements [OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent)
+       *
+       * When using asChild, the prop is not allowed as it would have no effect.
+       */
+      as?: never;
+    }
+  | {
+      children?: React.ReactNode;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <div data-prop data-child />
+       * ```
+       */
+      asChild?: false;
+    };

package/src/layout/bleed/Bleed.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { getResponsiveProps } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";