@mattilsynet/design 3.0.1 → 3.0.3

package/mtds/togglegroup/togglegroup.js

@@ -1,40 +1,40 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import i from "clsx";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import c from "clsx";
 import { forwardRef as p } from "react";
-import c from "../styles.module.css.js";
+import l from "../styles.module.css.js";
 const f = p(
-  function({ "data-toggle-group": o, className: g, ...r }, t) {
+  function({ "data-toggle-group": o, className: t, ...g }, r) {
     return /* @__PURE__ */ e(
       "fieldset",
       {
-        className: i(c.togglegroup, g),
+        className: c(l.togglegroup, t),
         "data-toggle-group": o || "Valgknapper",
-        ref: t,
-        ...r
+        ref: r,
+        ...g
       }
     );
   }
 ), d = p(
-  function({ children: o, checked: g, defaultChecked: r, value: t, name: s, onChange: m, ...n }, u) {
-    return /* @__PURE__ */ a("label", { ref: u, ...n, children: [
+  function({ children: o, checked: t, defaultChecked: g, value: r, name: a, onChange: m, ...n }, u) {
+    return /* @__PURE__ */ i("label", { ref: u, ...n, className: l.button, children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "radio",
-          checked: g,
-          defaultChecked: r,
-          value: t,
-          name: s,
+          checked: t,
+          defaultChecked: g,
+          value: r,
+          name: a,
           onChange: m
         }
       ),
       o
     ] });
   }
-), b = Object.assign(f, {
+), I = Object.assign(f, {
   Item: d
 });
 export {
-  b as Togglegroup
+  I as Togglegroup
 };
 //# sourceMappingURL=togglegroup.js.map

package/mtds/togglegroup/togglegroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"togglegroup.js","sources":["../../designsystem/togglegroup/togglegroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { InputProps } from \"../react\";\nimport styles from \"../styles.module.css\";\n\nexport type TogglegroupProps = React.ComponentPropsWithoutRef<\"fieldset\"> & {\n\t\"data-toggle-group\"?: string;\n};\nexport type TogglegroupItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"label\">,\n\t\"onChange\"\n> &\n\tPick<InputProps, \"defaultChecked\" | \"checked\" | \"onChange\" | \"value\"> &\n\tRequired<Pick<InputProps, \"name\">>; // Make name required\n\nconst TogglegroupComp = forwardRef<HTMLFieldSetElement, TogglegroupProps>(\n\tfunction Togglegroup(\n\t\t{ \"data-toggle-group\": label, className, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tclassName={clsx(styles.togglegroup, className)}\n\t\t\t\tdata-toggle-group={label || \"Valgknapper\"}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\nconst TogglegroupItem = forwardRef<HTMLLabelElement, TogglegroupItemProps>(\n\tfunction TogglegroupItem(\n\t\t{ children, checked, defaultChecked, value, name, onChange, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<label ref={ref} {...rest}>\n\t\t\t\t<input\n\t\t\t\t\t{...{ type: \"radio\", checked, defaultChecked, value, name, onChange }}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</label>\n\t\t);\n\t},\n);\n\nexport const Togglegroup = Object.assign(TogglegroupComp, {\n\tItem: TogglegroupItem,\n});\n"],"names":["TogglegroupComp","forwardRef","label","className","rest","ref","jsx","clsx","styles","TogglegroupItem","children","checked","defaultChecked","value","name","onChange","jsxs","Togglegroup"],"mappings":";;;;AAeA,MAAMA,IAAkBC;AAAA,EACvB,SACC,EAAE,qBAAqBC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAC5CC,GACC;AACD,WACC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,aAAaL,CAAS;AAAA,QAC7C,qBAAmBD,KAAS;AAAA,QAC5B,KAAAG;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD,GACMK,IAAkBR;AAAA,EACvB,SACC,EAAE,UAAAS,GAAU,SAAAC,GAAS,gBAAAC,GAAgB,OAAAC,GAAO,MAAAC,GAAM,UAAAC,GAAU,GAAGX,EAAA,GAC/DC,GACC;AACD,WACC,gBAAAW,EAAC,SAAA,EAAM,KAAAX,GAAW,GAAGD,GACpB,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACM,MAAM;AAAA,UAAS,SAAAK;AAAA,UAAS,gBAAAC;AAAA,UAAgB,OAAAC;AAAA,UAAO,MAAAC;AAAA,UAAM,UAAAC;AAAA,QAAS;AAAA,MAAA;AAAA,MAEpEL;AAAA,IAAA,GACF;AAAA,EAEF;AACD,GAEaO,IAAc,OAAO,OAAOjB,GAAiB;AAAA,EACzD,MAAMS;AACP,CAAC;"}
+{"version":3,"file":"togglegroup.js","sources":["../../designsystem/togglegroup/togglegroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { InputProps } from \"../react\";\nimport styles from \"../styles.module.css\";\n\nexport type TogglegroupProps = React.ComponentPropsWithoutRef<\"fieldset\"> & {\n\t\"data-toggle-group\"?: string;\n};\nexport type TogglegroupItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"label\">,\n\t\"onChange\"\n> &\n\tPick<InputProps, \"defaultChecked\" | \"checked\" | \"onChange\" | \"value\"> &\n\tRequired<Pick<InputProps, \"name\">>; // Make name required\n\nconst TogglegroupComp = forwardRef<HTMLFieldSetElement, TogglegroupProps>(\n\tfunction Togglegroup(\n\t\t{ \"data-toggle-group\": label, className, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tclassName={clsx(styles.togglegroup, className)}\n\t\t\t\tdata-toggle-group={label || \"Valgknapper\"}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\nconst TogglegroupItem = forwardRef<HTMLLabelElement, TogglegroupItemProps>(\n\tfunction TogglegroupItem(\n\t\t{ children, checked, defaultChecked, value, name, onChange, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<label ref={ref} {...rest} className={styles.button}>\n\t\t\t\t<input\n\t\t\t\t\t{...{ type: \"radio\", checked, defaultChecked, value, name, onChange }}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</label>\n\t\t);\n\t},\n);\n\nexport const Togglegroup = Object.assign(TogglegroupComp, {\n\tItem: TogglegroupItem,\n});\n"],"names":["TogglegroupComp","forwardRef","label","className","rest","ref","jsx","clsx","styles","TogglegroupItem","children","checked","defaultChecked","value","name","onChange","Togglegroup"],"mappings":";;;;AAeA,MAAMA,IAAkBC;AAAA,EACvB,SACC,EAAE,qBAAqBC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAC5CC,GACC;AACD,WACC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,aAAaL,CAAS;AAAA,QAC7C,qBAAmBD,KAAS;AAAA,QAC5B,KAAAG;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD,GACMK,IAAkBR;AAAA,EACvB,SACC,EAAE,UAAAS,GAAU,SAAAC,GAAS,gBAAAC,GAAgB,OAAAC,GAAO,MAAAC,GAAM,UAAAC,GAAU,GAAGX,EAAA,GAC/DC,GACC;AACD,6BACE,SAAA,EAAM,KAAAA,GAAW,GAAGD,GAAM,WAAWI,EAAO,QAC5C,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACM,MAAM;AAAA,UAAS,SAAAK;AAAA,UAAS,gBAAAC;AAAA,UAAgB,OAAAC;AAAA,UAAO,MAAAC;AAAA,UAAM,UAAAC;AAAA,QAAS;AAAA,MAAA;AAAA,MAEpEL;AAAA,IAAA,GACF;AAAA,EAEF;AACD,GAEaM,IAAc,OAAO,OAAOhB,GAAiB;AAAA,EACzD,MAAMS;AACP,CAAC;"}

package/mtds/utils.d.ts

@@ -8,11 +8,11 @@ export declare function debounce<T extends unknown[]>(callback: (...args: T) =>
 /**
  * attr
  * @description Utility to quickly get, set and remove attributes
- * @param el The Element to use as EventTarget
+ * @param el The Element to read/write attributes from
  * @param name The attribute name to get, set or remove, or a object to set multiple attributes
  * @param value A valid attribute value or null to remove attribute
  */
-export declare function attr(el: Element, name: string, value?: string | null): string | null;
+export declare const attr: (el: Element, name: string, value?: string | null) => string | null;
 /**
  * on
  * @param el The Element to use as EventTarget

package/mtds/utils.js

@@ -1,42 +1,39 @@
 import u from "clsx";
 import l from "./styles.module.css.js";
-const E = { capture: !0, passive: !0 }, c = () => typeof window < "u" && typeof document < "u", y = (e) => c() ? document.getElementsByClassName(l[e].split(" ")[0]) : [];
-function b(e, t) {
+const E = { capture: !0, passive: !0 }, d = () => typeof window < "u" && typeof document < "u", y = (e) => d() ? document.getElementsByClassName(l[e].split(" ")[0]) : [];
+function C(e, t) {
   let n;
   return function(...o) {
     clearTimeout(n), n = setTimeout(() => e.apply(this, o), t);
   };
 }
-function a(e, t, n) {
-  return n === void 0 ? e.getAttribute(t) ?? null : (n === null ? e.removeAttribute(t) : e.getAttribute(t) !== n && e.setAttribute(t, n), null);
-}
-const f = (e, ...t) => {
+const a = (e, t, n) => n === void 0 ? e.getAttribute(t) ?? null : (n === null ? e.removeAttribute(t) : e.getAttribute(t) !== n && e.setAttribute(t, n), null), m = (e, ...t) => {
   const [n, ...o] = t;
   for (const s of n.split(" ")) e.addEventListener(s, ...o);
-  return () => m(e, ...t);
-}, m = (e, ...t) => {
+  return () => f(e, ...t);
+}, f = (e, ...t) => {
   const [n, ...o] = t;
   for (const s of n.split(" ")) e.removeEventListener(s, ...o);
-}, C = (e, t) => {
-  if (!c()) return;
+}, b = (e, t) => {
+  if (!d()) return;
   window._mtdsHotReloadCleanup || (window._mtdsHotReloadCleanup = /* @__PURE__ */ new Map());
   const n = () => {
     window._mtdsHotReloadCleanup?.get(e)?.map((o) => o()), window._mtdsHotReloadCleanup?.set(e, t());
   };
-  document.readyState !== "complete" ? f(window, "load", n) : document.fonts?.ready?.then(n) || setTimeout(n, 0);
+  document.readyState !== "complete" ? m(window, "load", n) : document.fonts?.ready?.then(n) || setTimeout(n, 0);
 }, g = (e, t, n) => {
   let o = 0;
   const s = () => {
-    if (!c()) return i();
+    if (!e.isConnected) return i();
     t(r), r.takeRecords(), o = 0;
   }, i = () => r?.disconnect?.(), r = new MutationObserver(() => {
     o || (o = requestAnimationFrame(s));
   });
   return r.observe(e, n), s(), i;
-}, d = "aria-selected", v = (e, t) => Object.assign({}, e, {
+}, c = "aria-selected", v = (e, t) => Object.assign({}, e, {
   suppressHydrationWarning: !0,
   // Make Next.js happy
-  [d]: e[d] === void 0 ? void 0 : `${(e[d] || "false") !== "false"}`,
+  [c]: e[c] === void 0 ? void 0 : `${(e[c] || "false") !== "false"}`,
   // Ensure aria-selected boolean is string
   class: u(t, e.className),
   // Use class instead of className
@@ -49,18 +46,18 @@ const f = (e, ...t) => {
   if (n && (o.textContent = n), t) for (const [s, i] of Object.entries(t)) a(o, s, i);
   return o;
 }, T = typeof HTMLElement > "u" ? class {
-} : HTMLElement, M = (e, t) => !c() || window.customElements.get(e) || window.customElements.define(e, t);
+} : HTMLElement, M = (e, t) => !d() || window.customElements.get(e) || window.customElements.define(e, t);
 export {
   T as MTDSElement,
   E as QUICK_EVENT,
   a as attr,
-  b as debounce,
+  C as debounce,
   M as defineElement,
   y as getByCSSModule,
-  c as isBrowser,
-  m as off,
-  f as on,
-  C as onHotReload,
+  d as isBrowser,
+  f as off,
+  m as on,
+  b as onHotReload,
   g as onMutation,
   H as tag,
   v as toCustomElementProps

package/mtds/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["import clsx from \"clsx\";\nimport styles from \"./styles.module.css\";\n\nexport const QUICK_EVENT = { capture: true, passive: true };\nexport const isBrowser = () =>\n\ttypeof window !== \"undefined\" && typeof document !== \"undefined\"; // Using function to play nice with Vitest where DOM can come and go\n\nexport const getByCSSModule = (key: string) =>\n\tisBrowser() ? document.getElementsByClassName(styles[key].split(\" \")[0]) : [];\n\nexport function debounce<T extends unknown[]>(\n\tcallback: (...args: T) => void,\n\tdelay: number,\n) {\n\tlet timer: ReturnType<typeof setTimeout>;\n\n\treturn function (this: unknown, ...args: T) {\n\t\tclearTimeout(timer);\n\t\ttimer = setTimeout(() => callback.apply(this, args), delay);\n\t};\n}\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to use as EventTarget\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport function attr(\n\tel: Element,\n\tname: string,\n\tvalue?: string | null,\n): string | null {\n\tif (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n\tif (value === null) el.removeAttribute(name);\n\telse if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n\treturn null;\n}\n\n/**\n * on\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\tel: Node | Window | ShadowRoot,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): (() => void) => {\n\tconst [types, ...options] = rest;\n\tfor (const type of types.split(\" \")) el.addEventListener(type, ...options);\n\treturn () => off(el, ...rest);\n};\n\n/**\n * off\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\tel: Node | Window | ShadowRoot,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => {\n\tconst [types, ...options] = rest;\n\tfor (const type of types.split(\" \")) el.removeEventListener(type, ...options);\n};\n\ndeclare global {\n\tinterface Window {\n\t\t_mtdsHotReloadCleanup?: Map<string, Array<() => void>>;\n\t}\n}\n\n/**\n * onHotReload\n * @description Runs a callback when window is loaded in browser, and ensures cleanup when hot-reloading\n * @param key The key to identify setup and corresponding cleanup\n * @param callback The callback to run when the page is ready\n */\nexport const onHotReload = (key: string, setup: () => Array<() => void>) => {\n\tif (!isBrowser()) return; // Skip if not in modern browser environment, but on each call as Vitest might have unloaded jsdom between tests\n\tif (!window._mtdsHotReloadCleanup) window._mtdsHotReloadCleanup = new Map(); // Hot reload cleanup support supporting all build tools\n\n\tconst run = () => {\n\t\twindow._mtdsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup()); // Run previous cleanup\n\t\twindow._mtdsHotReloadCleanup?.set(key, setup()); // Store new cleanup\n\t};\n\n\tif (document.readyState !== \"complete\") on(window, \"load\", run);\n\telse document.fonts?.ready?.then(run) || setTimeout(run, 0); // Prefer fonts ready promise if available, but fallback to setTimeout\n};\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport const onMutation = (\n\tel: Node,\n\tcallback: (observer: MutationObserver) => void,\n\toptions: MutationObserverInit,\n) => {\n\tlet queue = 0;\n\tconst onFrame = () => {\n\t\tif (!isBrowser()) return cleanup(); // If using JSDOM, the document might have been removed\n\t\tcallback(observer);\n\t\tobserver.takeRecords(); // Clear records to avoid multiple triggers\n\t\tqueue = 0;\n\t};\n\tconst cleanup = () => observer?.disconnect?.();\n\tconst observer = new MutationObserver(() => {\n\t\tif (!queue) queue = requestAnimationFrame(onFrame); // requestAnimationFrame only runs when page is not visible\n\t});\n\n\tobserver.observe(el, options);\n\tonFrame(); // Initial run\n\treturn cleanup;\n};\n\n/**\n * toCustomElementProps\n * @description Utility to quickly convert props to custom element attributes\n * @param props The props to convert\n * @returns The converted props\n */\nconst SELECTED = \"aria-selected\";\nexport const toCustomElementProps = <T extends Record<string, unknown>>(\n\trest: T,\n\tklass?: string,\n) =>\n\tObject.assign({}, rest, {\n\t\tsuppressHydrationWarning: true, // Make Next.js happy\n\t\t[SELECTED]:\n\t\t\trest[SELECTED] === undefined\n\t\t\t\t? undefined\n\t\t\t\t: (`${(rest[SELECTED] || \"false\") !== \"false\"}` as unknown as boolean), // Ensure aria-selected boolean is string\n\t\tclass: clsx(klass, rest.className as string), // Use class instead of className\n\t\thidden: !!rest.hidden, // Ensure boolean prop behaviour\n\t\topen: !!rest.open, // Ensure boolean prop behaviour\n\t});\n\n/**\n * tag\n * @description creates element and assigns properties\n * @param tagName The tagname of element to create\n * @param attrs Optional attributes to add to the element\n * @param text Optional text content to add to the element\n * @return HTMLElement with props\n */\nexport const tag = <TagName extends keyof HTMLElementTagNameMap>(\n\ttagName: TagName,\n\tattrs?: Record<string, string | null> | null,\n\ttext?: string | null,\n): HTMLElementTagNameMap[TagName] => {\n\tconst el = document.createElement(tagName);\n\tif (text) el.textContent = text;\n\tif (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n\treturn el;\n};\n\n// Make sure we have a HTMLElement to extend (for server side rendering)\nexport const MTDSElement =\n\ttypeof HTMLElement === \"undefined\"\n\t\t? (class {} as typeof HTMLElement)\n\t\t: HTMLElement;\n\n/**\n * defineElement\n * @description Defines a customElement if running in browser and if not already registered\n */\nexport const defineElement = (\n\tname: string,\n\tinstance: CustomElementConstructor,\n) =>\n\t!isBrowser() ||\n\twindow.customElements.get(name) ||\n\twindow.customElements.define(name, instance);\n"],"names":["QUICK_EVENT","isBrowser","getByCSSModule","key","styles","debounce","callback","delay","timer","args","attr","el","name","value","on","rest","types","options","type","off","onHotReload","setup","run","cleanup","onMutation","queue","onFrame","observer","SELECTED","toCustomElementProps","klass","clsx","tag","tagName","attrs","text","val","MTDSElement","defineElement","instance"],"mappings":";;AAGO,MAAMA,IAAc,EAAE,SAAS,IAAM,SAAS,GAAA,GACxCC,IAAY,MACxB,OAAO,SAAW,OAAe,OAAO,WAAa,KAEzCC,IAAiB,CAACC,MAC9BF,EAAA,IAAc,SAAS,uBAAuBG,EAAOD,CAAG,EAAE,MAAM,GAAG,EAAE,CAAC,CAAC,IAAI,CAAA;AAErE,SAASE,EACfC,GACAC,GACC;AACD,MAAIC;AAEJ,SAAO,YAA4BC,GAAS;AAC3C,iBAAaD,CAAK,GAClBA,IAAQ,WAAW,MAAMF,EAAS,MAAM,MAAMG,CAAI,GAAGF,CAAK;AAAA,EAC3D;AACD;AASO,SAASG,EACfC,GACAC,GACAC,GACgB;AAChB,SAAIA,MAAU,SAAkBF,EAAG,aAAaC,CAAI,KAAK,QACrDC,MAAU,OAAMF,EAAG,gBAAgBC,CAAI,IAClCD,EAAG,aAAaC,CAAI,MAAMC,KAAOF,EAAG,aAAaC,GAAMC,CAAK,GAC9D;AACR;AAQO,MAAMC,IAAK,CACjBH,MACGI,MACe;AAClB,QAAM,CAACC,GAAO,GAAGC,CAAO,IAAIF;AAC5B,aAAWG,KAAQF,EAAM,MAAM,GAAG,EAAG,CAAAL,EAAG,iBAAiBO,GAAM,GAAGD,CAAO;AACzE,SAAO,MAAME,EAAIR,GAAI,GAAGI,CAAI;AAC7B,GAQaI,IAAM,CAClBR,MACGI,MACO;AACV,QAAM,CAACC,GAAO,GAAGC,CAAO,IAAIF;AAC5B,aAAWG,KAAQF,EAAM,MAAM,GAAG,EAAG,CAAAL,EAAG,oBAAoBO,GAAM,GAAGD,CAAO;AAC7E,GAcaG,IAAc,CAACjB,GAAakB,MAAmC;AAC3E,MAAI,CAACpB,IAAa;AAClB,EAAK,OAAO,0BAAuB,OAAO,4CAA4B,IAAA;AAEtE,QAAMqB,IAAM,MAAM;AACjB,WAAO,uBAAuB,IAAInB,CAAG,GAAG,IAAI,CAACoB,MAAYA,GAAS,GAClE,OAAO,uBAAuB,IAAIpB,GAAKkB,EAAA,CAAO;AAAA,EAC/C;AAEA,EAAI,SAAS,eAAe,aAAYP,EAAG,QAAQ,QAAQQ,CAAG,IACzD,SAAS,OAAO,OAAO,KAAKA,CAAG,KAAK,WAAWA,GAAK,CAAC;AAC3D,GAMaE,IAAa,CACzBb,GACAL,GACAW,MACI;AACJ,MAAIQ,IAAQ;AACZ,QAAMC,IAAU,MAAM;AACrB,QAAI,CAACzB,IAAa,QAAOsB,EAAA;AACzB,IAAAjB,EAASqB,CAAQ,GACjBA,EAAS,YAAA,GACTF,IAAQ;AAAA,EACT,GACMF,IAAU,MAAMI,GAAU,aAAA,GAC1BA,IAAW,IAAI,iBAAiB,MAAM;AAC3C,IAAKF,MAAOA,IAAQ,sBAAsBC,CAAO;AAAA,EAClD,CAAC;AAED,SAAAC,EAAS,QAAQhB,GAAIM,CAAO,GAC5BS,EAAA,GACOH;AACR,GAQMK,IAAW,iBACJC,IAAuB,CACnCd,GACAe,MAEA,OAAO,OAAO,CAAA,GAAIf,GAAM;AAAA,EACvB,0BAA0B;AAAA;AAAA,EAC1B,CAACa,CAAQ,GACRb,EAAKa,CAAQ,MAAM,SAChB,SACC,IAAIb,EAAKa,CAAQ,KAAK,aAAa,OAAO;AAAA;AAAA,EAC/C,OAAOG,EAAKD,GAAOf,EAAK,SAAmB;AAAA;AAAA,EAC3C,QAAQ,CAAC,CAACA,EAAK;AAAA;AAAA,EACf,MAAM,CAAC,CAACA,EAAK;AAAA;AACd,CAAC,GAUWiB,IAAM,CAClBC,GACAC,GACAC,MACoC;AACpC,QAAMxB,IAAK,SAAS,cAAcsB,CAAO;AAEzC,MADIE,QAAS,cAAcA,IACvBD,EAAO,YAAW,CAAC/B,GAAKiC,CAAG,KAAK,OAAO,QAAQF,CAAK,EAAG,CAAAxB,EAAKC,GAAIR,GAAKiC,CAAG;AAC5E,SAAOzB;AACR,GAGa0B,IACZ,OAAO,cAAgB,MACnB,MAAM;AAAC,IACR,aAMSC,IAAgB,CAC5B1B,GACA2B,MAEA,CAACtC,OACD,OAAO,eAAe,IAAIW,CAAI,KAC9B,OAAO,eAAe,OAAOA,GAAM2B,CAAQ;"}
+{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["import clsx from \"clsx\";\nimport styles from \"./styles.module.css\";\n\nexport const QUICK_EVENT = { capture: true, passive: true };\nexport const isBrowser = () =>\n\ttypeof window !== \"undefined\" && typeof document !== \"undefined\"; // Using function to play nice with Vitest where DOM can come and go\n\nexport const getByCSSModule = (key: string) =>\n\tisBrowser() ? document.getElementsByClassName(styles[key].split(\" \")[0]) : [];\n\nexport function debounce<T extends unknown[]>(\n\tcallback: (...args: T) => void,\n\tdelay: number,\n) {\n\tlet timer: ReturnType<typeof setTimeout>;\n\n\treturn function (this: unknown, ...args: T) {\n\t\tclearTimeout(timer);\n\t\ttimer = setTimeout(() => callback.apply(this, args), delay);\n\t};\n}\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to read/write attributes from\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport const attr = (\n\tel: Element,\n\tname: string,\n\tvalue?: string | null,\n): string | null => {\n\tif (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n\tif (value === null) el.removeAttribute(name);\n\telse if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n\treturn null;\n};\n\n/**\n * on\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\tel: Node | Window | ShadowRoot,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): (() => void) => {\n\tconst [types, ...options] = rest;\n\tfor (const type of types.split(\" \")) el.addEventListener(type, ...options);\n\treturn () => off(el, ...rest);\n};\n\n/**\n * off\n * @param el The Element to use as EventTarget\n * @param types A space separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\tel: Node | Window | ShadowRoot,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => {\n\tconst [types, ...options] = rest;\n\tfor (const type of types.split(\" \")) el.removeEventListener(type, ...options);\n};\n\ndeclare global {\n\tinterface Window {\n\t\t_mtdsHotReloadCleanup?: Map<string, Array<() => void>>;\n\t}\n}\n\n/**\n * onHotReload\n * @description Runs a callback when window is loaded in browser, and ensures cleanup when hot-reloading\n * @param key The key to identify setup and corresponding cleanup\n * @param callback The callback to run when the page is ready\n */\nexport const onHotReload = (key: string, setup: () => Array<() => void>) => {\n\tif (!isBrowser()) return; // Skip if not in modern browser environment, but on each call as Vitest might have unloaded jsdom between tests\n\tif (!window._mtdsHotReloadCleanup) window._mtdsHotReloadCleanup = new Map(); // Hot reload cleanup support supporting all build tools\n\n\tconst run = () => {\n\t\twindow._mtdsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup()); // Run previous cleanup\n\t\twindow._mtdsHotReloadCleanup?.set(key, setup()); // Store new cleanup\n\t};\n\n\tif (document.readyState !== \"complete\") on(window, \"load\", run);\n\telse document.fonts?.ready?.then(run) || setTimeout(run, 0); // Prefer fonts ready promise if available, but fallback to setTimeout\n};\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport const onMutation = (\n\tel: Node,\n\tcallback: (observer: MutationObserver) => void,\n\toptions: MutationObserverInit,\n) => {\n\tlet queue = 0;\n\tconst onFrame = () => {\n\t\tif (!el.isConnected) return cleanup(); // Disconnect if element is removed from DOM\n\t\tcallback(observer);\n\t\tobserver.takeRecords(); // Clear records to avoid multiple triggers\n\t\tqueue = 0;\n\t};\n\tconst cleanup = () => observer?.disconnect?.();\n\tconst observer = new MutationObserver(() => {\n\t\tif (!queue) queue = requestAnimationFrame(onFrame); // requestAnimationFrame only runs when page is visible\n\t});\n\n\tobserver.observe(el, options);\n\tonFrame(); // Initial run\n\treturn cleanup;\n};\n\n/**\n * toCustomElementProps\n * @description Utility to quickly convert props to custom element attributes\n * @param props The props to convert\n * @returns The converted props\n */\nconst SELECTED = \"aria-selected\";\nexport const toCustomElementProps = <T extends Record<string, unknown>>(\n\trest: T,\n\tklass?: string,\n) =>\n\tObject.assign({}, rest, {\n\t\tsuppressHydrationWarning: true, // Make Next.js happy\n\t\t[SELECTED]:\n\t\t\trest[SELECTED] === undefined\n\t\t\t\t? undefined\n\t\t\t\t: (`${(rest[SELECTED] || \"false\") !== \"false\"}` as unknown as boolean), // Ensure aria-selected boolean is string\n\t\tclass: clsx(klass, rest.className as string), // Use class instead of className\n\t\thidden: !!rest.hidden, // Ensure boolean prop behaviour\n\t\topen: !!rest.open, // Ensure boolean prop behaviour\n\t});\n\n/**\n * tag\n * @description creates element and assigns properties\n * @param tagName The tagname of element to create\n * @param attrs Optional attributes to add to the element\n * @param text Optional text content to add to the element\n * @return HTMLElement with props\n */\nexport const tag = <TagName extends keyof HTMLElementTagNameMap>(\n\ttagName: TagName,\n\tattrs?: Record<string, string | null> | null,\n\ttext?: string | null,\n): HTMLElementTagNameMap[TagName] => {\n\tconst el = document.createElement(tagName);\n\tif (text) el.textContent = text;\n\tif (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n\treturn el;\n};\n\n// Make sure we have a HTMLElement to extend (for server side rendering)\nexport const MTDSElement =\n\ttypeof HTMLElement === \"undefined\"\n\t\t? (class {} as typeof HTMLElement)\n\t\t: HTMLElement;\n\n/**\n * defineElement\n * @description Defines a customElement if running in browser and if not already registered\n */\nexport const defineElement = (\n\tname: string,\n\tinstance: CustomElementConstructor,\n) =>\n\t!isBrowser() ||\n\twindow.customElements.get(name) ||\n\twindow.customElements.define(name, instance);\n"],"names":["QUICK_EVENT","isBrowser","getByCSSModule","key","styles","debounce","callback","delay","timer","args","attr","el","name","value","on","rest","types","options","type","off","onHotReload","setup","run","cleanup","onMutation","queue","onFrame","observer","SELECTED","toCustomElementProps","klass","clsx","tag","tagName","attrs","text","val","MTDSElement","defineElement","instance"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "3.0.1",
+	"version": "3.0.3",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -54,24 +54,24 @@
 		"storybook:build": "npm run build && storybook build"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.3.13",
+		"@biomejs/biome": "2.3.14",
 		"@digdir/designsystemet-css": "^0.0.0-fix-designsystemet-web-20260128130007",
 		"@digdir/designsystemet-types": "^0.0.0-fix-designsystemet-web-20260128130007",
 		"@handsontable/react-wrapper": "^16.2.0",
 		"@phosphor-icons/core": "^2.1.1",
 		"@phosphor-icons/react": "^2.1.10",
-		"@storybook/addon-docs": "^10.2.2",
-		"@storybook/addon-themes": "^10.2.2",
-		"@storybook/react-vite": "^10.2.2",
+		"@storybook/addon-docs": "^10.2.5",
+		"@storybook/addon-themes": "^10.2.5",
+		"@storybook/react-vite": "^10.2.5",
 		"@tanstack/react-table": "^8.21.3",
 		"@turf/boolean-point-in-polygon": "^7.3.3",
 		"@turf/helpers": "^7.3.3",
 		"@types/leaflet": "^1.9.21",
 		"@types/leaflet.markercluster": "^1.5.6",
-		"@types/node": "^25.1.0",
-		"@types/react": "^19.2.10",
+		"@types/node": "^25.2.0",
+		"@types/react": "^19.2.11",
 		"@types/react-dom": "^19.2.3",
-		"@vitejs/plugin-react": "^5.1.2",
+		"@vitejs/plugin-react": "^5.1.3",
 		"fast-glob": "^3.3.3",
 		"handsontable": "^16.2.0",
 		"leaflet": "^2.0.0-alpha.1",
@@ -80,7 +80,7 @@
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"react-moveable": "^0.56.0",
-		"storybook": "^10.2.2",
+		"storybook": "^10.2.5",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1",
 		"vite-plugin-dts": "^4.5.4"