@mattilsynet/design 0.2.13 → 0.2.14

package/mtds/styles.json

@@ -4,7 +4,6 @@
   "tabs": "_tabs_1p8e7_1",
   "table": "_table_1p8e7_1 _ds-table_1yo2l_1",
   "scrollShadow": "_scrollShadow_1p8e7_1",
-  "tableChildAdded": "_tableChildAdded_1p8e7_1",
   "skeleton": "_skeleton_1p8e7_1 _ds-skeleton_1yo2l_1",
   "popover": "_popover_1p8e7_1",
   "pagination": "_pagination_1p8e7_1 _ds-pagination_1yo2l_1",
@@ -16,9 +15,7 @@
   "box": "_box_1p8e7_1",
   "input": "_input_1p8e7_1 _ds-input_1yo2l_1",
   "fieldset": "_fieldset_1p8e7_1 _ds-fieldset_1yo2l_1",
-  "fieldsetValidationAdded": "_fieldsetValidationAdded_1p8e7_1",
   "field": "_field_1p8e7_1 _ds-field_1yo2l_1",
-  "fieldChildAdded": "_fieldChildAdded_1p8e7_1",
   "affixes": "_affixes_1p8e7_1 _ds-field-affixes_1yo2l_1",
   "count": "_count_1p8e7_1",
   "errorsummary": "_errorsummary_1p8e7_1 _ds-error-summary_1yo2l_1",

package/mtds/styles.module.css.js

@@ -1,74 +1,68 @@
-const _ = "_validation_1p8e7_1 _ds-validation-message_1yo2l_1", e = "_tag_1p8e7_1 _ds-tag_1yo2l_1", o = "_tabs_1p8e7_1", d = "_table_1p8e7_1 _ds-table_1yo2l_1", t = "_scrollShadow_1p8e7_1", s = "_tableChildAdded_1p8e7_1", a = "_skeleton_1p8e7_1 _ds-skeleton_1yo2l_1", l = "_popover_1p8e7_1", n = "_pagination_1p8e7_1 _ds-pagination_1yo2l_1", i = "_modal_1p8e7_1 _ds-modal_1yo2l_1", c = "_logo_1p8e7_1 _ds-focus_1yo2l_1", p = "_link_1p8e7_1", r = "_grid_1p8e7_1", b = "_flex_1p8e7_1", f = "_box_1p8e7_1", y = "_input_1p8e7_1 _ds-input_1yo2l_1", g = "_fieldset_1p8e7_1 _ds-fieldset_1yo2l_1", u = "_fieldsetValidationAdded_1p8e7_1", h = "_field_1p8e7_1 _ds-field_1yo2l_1", m = "_fieldChildAdded_1p8e7_1", v = "_affixes_1p8e7_1 _ds-field-affixes_1yo2l_1", x = "_count_1p8e7_1", A = "_errorsummary_1p8e7_1 _ds-error-summary_1yo2l_1", k = "_details_1p8e7_1 _ds-details_1yo2l_1", C = "_chip_1p8e7_1 _ds-chip_1yo2l_1", w = "_card_1p8e7_1", S = "_info_1p8e7_1", V = "_button_1p8e7_1 _ds-button_1yo2l_1", j = "_breadcrumbs_1p8e7_1 _ds-breadcrumbs_1yo2l_1", q = "_badge_1p8e7_1", z = "_avatar_1p8e7_1 _ds-avatar_1yo2l_1", B = "_alert_1p8e7_1 _ds-alert_1yo2l_1", D = "_heading_1p8e7_1 _ds-heading_1yo2l_1", E = "_body_1p8e7_104", F = {
+const _ = "_validation_1p8e7_1 _ds-validation-message_1yo2l_1", o = "_tag_1p8e7_1 _ds-tag_1yo2l_1", e = "_tabs_1p8e7_1", t = "_table_1p8e7_1 _ds-table_1yo2l_1", s = "_scrollShadow_1p8e7_1", a = "_skeleton_1p8e7_1 _ds-skeleton_1yo2l_1", l = "_popover_1p8e7_1", n = "_pagination_1p8e7_1 _ds-pagination_1yo2l_1", d = "_modal_1p8e7_1 _ds-modal_1yo2l_1", i = "_logo_1p8e7_1 _ds-focus_1yo2l_1", c = "_link_1p8e7_1", p = "_grid_1p8e7_1", r = "_flex_1p8e7_1", b = "_box_1p8e7_1", y = "_input_1p8e7_1 _ds-input_1yo2l_1", f = "_fieldset_1p8e7_1 _ds-fieldset_1yo2l_1", g = "_field_1p8e7_1 _ds-field_1yo2l_1", u = "_affixes_1p8e7_1 _ds-field-affixes_1yo2l_1", m = "_count_1p8e7_1", h = "_errorsummary_1p8e7_1 _ds-error-summary_1yo2l_1", v = "_details_1p8e7_1 _ds-details_1yo2l_1", x = "_chip_1p8e7_1 _ds-chip_1yo2l_1", k = "_card_1p8e7_1", w = "_info_1p8e7_1", S = "_button_1p8e7_1 _ds-button_1yo2l_1", j = "_breadcrumbs_1p8e7_1 _ds-breadcrumbs_1yo2l_1", q = "_badge_1p8e7_1", z = "_avatar_1p8e7_1 _ds-avatar_1yo2l_1", A = "_alert_1p8e7_1 _ds-alert_1yo2l_1", B = "_heading_1p8e7_1 _ds-heading_1yo2l_1", C = "_body_1p8e7_104", D = {
   validation: _,
-  tag: e,
-  tabs: o,
-  table: d,
-  scrollShadow: t,
-  tableChildAdded: s,
+  tag: o,
+  tabs: e,
+  table: t,
+  scrollShadow: s,
   skeleton: a,
   popover: l,
   pagination: n,
-  modal: i,
-  logo: c,
-  link: p,
-  grid: r,
-  flex: b,
-  box: f,
+  modal: d,
+  logo: i,
+  link: c,
+  grid: p,
+  flex: r,
+  box: b,
   input: y,
-  fieldset: g,
-  fieldsetValidationAdded: u,
-  field: h,
-  fieldChildAdded: m,
-  affixes: v,
-  count: x,
-  errorsummary: A,
-  details: k,
-  chip: C,
-  card: w,
-  info: S,
-  button: V,
+  fieldset: f,
+  field: g,
+  affixes: u,
+  count: m,
+  errorsummary: h,
+  details: v,
+  chip: x,
+  card: k,
+  info: w,
+  button: S,
   breadcrumbs: j,
   badge: q,
   avatar: z,
-  alert: B,
-  heading: D,
-  body: E
+  alert: A,
+  heading: B,
+  body: C
 };
 export {
-  v as affixes,
-  B as alert,
+  u as affixes,
+  A as alert,
   z as avatar,
   q as badge,
-  E as body,
-  f as box,
+  C as body,
+  b as box,
   j as breadcrumbs,
-  V as button,
-  w as card,
-  C as chip,
-  x as count,
-  F as default,
-  k as details,
-  A as errorsummary,
-  h as field,
-  m as fieldChildAdded,
-  g as fieldset,
-  u as fieldsetValidationAdded,
-  b as flex,
-  r as grid,
-  D as heading,
-  S as info,
+  S as button,
+  k as card,
+  x as chip,
+  m as count,
+  D as default,
+  v as details,
+  h as errorsummary,
+  g as field,
+  f as fieldset,
+  r as flex,
+  p as grid,
+  B as heading,
+  w as info,
   y as input,
-  p as link,
-  c as logo,
-  i as modal,
+  c as link,
+  i as logo,
+  d as modal,
   n as pagination,
   l as popover,
-  t as scrollShadow,
+  s as scrollShadow,
   a as skeleton,
-  d as table,
-  s as tableChildAdded,
-  o as tabs,
-  e as tag,
+  t as table,
+  e as tabs,
+  o as tag,
   _ as validation
 };
 //# sourceMappingURL=styles.module.css.js.map

package/mtds/styles.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/mtds/table/table.d.ts

@@ -1,2 +1,2 @@
-export declare function observe(el: Element | Document): void;
-export declare function unobserve(el: Element | Document): void;
+export declare const observe: (el: Element) => void;
+export declare const unobserve: (el: Element) => void;

package/mtds/table/table.js

@@ -1,29 +1,22 @@
-import f from "../styles.module.css.js";
-import { onAdd as d } from "../utils.js";
-const i = f.table.split(" ")[0], l = /* @__PURE__ */ new WeakMap();
-function b(t) {
-  var o, e;
-  for (const n of t) if (n instanceof HTMLTableElement) {
-    const a = Array.from(((e = (o = n.tHead) == null ? void 0 : o.rows[0]) == null ? void 0 : e.cells) || [], (r) => {
-      var s;
-      return (s = r.innerText) == null ? void 0 : s.trim();
+import a from "../styles.module.css.js";
+import { onMutation as f } from "../utils.js";
+const l = a.table.split(" ")[0];
+function m(o) {
+  var r, n;
+  for (const e of o) if (e instanceof HTMLTableElement) {
+    const i = Array.from(((n = (r = e.tHead) == null ? void 0 : r.rows[0]) == null ? void 0 : n.cells) || [], (s) => {
+      var t;
+      return (t = s.innerText) == null ? void 0 : t.trim();
     });
-    for (const r of n.tBodies)
-      for (const s of r.rows)
-        for (const c of s.cells)
-          c.setAttribute("data-th", a[c.cellIndex] || ":empty");
+    for (const s of e.tBodies)
+      for (const t of s.rows)
+        for (const c of t.cells)
+          c.setAttribute("data-th", i[c.cellIndex] || ":empty");
   }
 }
-function u(t) {
-  const o = t.getElementsByClassName(i), e = d(f.tableChildAdded, () => b(o));
-  l.set(t, e), e.observe(t);
-}
-function y(t) {
-  var o;
-  (o = l.get(t)) == null || o.disconnect(t);
-}
+const d = (o) => f(o, l, m), u = (o) => f(o, l, !1);
 export {
-  u as observe,
-  y as unobserve
+  d as observe,
+  u as unobserve
 };
 //# sourceMappingURL=table.js.map

package/mtds/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../designsystem/table/table.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { onAdd } from '../utils';\nconst CSS_TABLE = styles.table.split(' ')[0];\nconst BOUND = new WeakMap<Element | Document, ReturnType<typeof onAdd>>();\n\nfunction process(tables: HTMLCollectionOf<Element>) {\n  for(const table of tables) if (table instanceof HTMLTableElement) {\n    const ths = Array.from(table.tHead?.rows[0]?.cells || [], (el) => el.innerText?.trim()); // Using innerText to only include visible text\n    for (const tbody of table.tBodies) {\n      for (const row of tbody.rows) {\n        for (const cell of row.cells) {\n          cell.setAttribute('data-th', ths[cell.cellIndex] || ':empty'); // Using U+200B to prevent empty string from collapsing\n        }\n      }\n    }\n  }\n}\n\nexport function observe (el: Element | Document) {\n  const tables = el.getElementsByClassName(CSS_TABLE);\n  const add = onAdd(styles.tableChildAdded, () => process(tables));\n  BOUND.set(el, add);\n  add.observe(el);\n}\n\nexport function unobserve (el: Element | Document) {\n  BOUND.get(el)?.disconnect(el);\n}\n"],"names":["CSS_TABLE","styles","BOUND","process","tables","table","ths","_b","_a","el","tbody","row","cell","observe","add","onAdd","unobserve"],"mappings":";;AAEA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,wBAAY,QAAsD;AAExE,SAASC,EAAQC,GAAmC;;AAClD,aAAUC,KAASD,EAAY,KAAAC,aAAiB,kBAAkB;AAChE,UAAMC,IAAM,MAAM,OAAKC,KAAAC,IAAAH,EAAM,UAAN,gBAAAG,EAAa,KAAK,OAAlB,gBAAAD,EAAsB,UAAS,IAAI,CAACE,MAAO;;AAAA,cAAAD,IAAAC,EAAG,cAAH,gBAAAD,EAAc;AAAA,KAAM;AAC3E,eAAAE,KAASL,EAAM;AACb,iBAAAM,KAAOD,EAAM;AACX,mBAAAE,KAAQD,EAAI;AACrB,UAAAC,EAAK,aAAa,WAAWN,EAAIM,EAAK,SAAS,KAAK,QAAQ;AAAA,EAGlE;AAEJ;AAEO,SAASC,EAASJ,GAAwB;AACzC,QAAAL,IAASK,EAAG,uBAAuBT,CAAS,GAC5Cc,IAAMC,EAAMd,EAAO,iBAAiB,MAAME,EAAQC,CAAM,CAAC;AACzD,EAAAF,EAAA,IAAIO,GAAIK,CAAG,GACjBA,EAAI,QAAQL,CAAE;AAChB;AAEO,SAASO,EAAWP,GAAwB;;AACjD,GAAAD,IAAAN,EAAM,IAAIO,CAAE,MAAZ,QAAAD,EAAe,WAAWC;AAC5B;"}
+{"version":3,"file":"table.js","sources":["../../designsystem/table/table.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { onMutation } from '../utils';\nconst CSS_TABLE = styles.table.split(' ')[0];\n\nfunction process(tables: HTMLCollectionOf<Element>) {\n  for(const table of tables) if (table instanceof HTMLTableElement) {\n    const ths = Array.from(table.tHead?.rows[0]?.cells || [], (el) => el.innerText?.trim()); // Using innerText to only include visible text\n    for (const tbody of table.tBodies) {\n      for (const row of tbody.rows) {\n        for (const cell of row.cells) {\n          cell.setAttribute('data-th', ths[cell.cellIndex] || ':empty'); // Using U+200B to prevent empty string from collapsing\n        }\n      }\n    }\n  }\n}\n\nexport const observe = (el: Element) => onMutation(el, CSS_TABLE, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_TABLE, false);\n"],"names":["CSS_TABLE","styles","process","tables","table","ths","_b","_a","el","tbody","row","cell","observe","onMutation","unobserve"],"mappings":";;AAEA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC;AAE3C,SAASC,EAAQC,GAAmC;;AAClD,aAAUC,KAASD,EAAY,KAAAC,aAAiB,kBAAkB;AAChE,UAAMC,IAAM,MAAM,OAAKC,KAAAC,IAAAH,EAAM,UAAN,gBAAAG,EAAa,KAAK,OAAlB,gBAAAD,EAAsB,UAAS,IAAI,CAACE,MAAO;;AAAA,cAAAD,IAAAC,EAAG,cAAH,gBAAAD,EAAc;AAAA,KAAM;AAC3E,eAAAE,KAASL,EAAM;AACb,iBAAAM,KAAOD,EAAM;AACX,mBAAAE,KAAQD,EAAI;AACrB,UAAAC,EAAK,aAAa,WAAWN,EAAIM,EAAK,SAAS,KAAK,QAAQ;AAAA,EAGlE;AAEJ;AAEO,MAAMC,IAAU,CAACJ,MAAgBK,EAAWL,GAAIR,GAAWE,CAAO,GAC5DY,IAAY,CAACN,MAAgBK,EAAWL,GAAIR,GAAW,EAAK;"}

package/mtds/utils.d.ts

@@ -4,11 +4,6 @@ export declare const QUICK_EVENT: {
     passive: boolean;
 };
 export declare function useId(el: Element): string;
-/**
- * Speed up MutationObserver by debouncing and only running when page is visible
- * @return new MutaionObserver
- */
-export declare function createOptimizedMutationObserver(callback: MutationCallback): MutationObserver;
 /**
  * on
  * @param element The Element to use as EventTarget
@@ -24,13 +19,11 @@ export declare const on: (element: Node | Window, type: string, listener: EventL
  */
 export declare const off: (element: Node | Window, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined) => void;
 /**
- * Child added event inspired by:
- * https://davidwalsh.name/detect-node-insertion
+ * Speed up MutationObserver by debouncing and only running when page is visible
+ * @return new MutaionObserver
  */
-export declare const onAdd: (animationName: string, callback: () => void) => {
-    observe: (el: Element | Document) => void;
-    disconnect: (el: Element | Document) => void;
-};
+export declare function createOptimizedMutationObserver(callback: MutationCallback): MutationObserver;
+export declare const onMutation: (element: Element, className: string, callback: ((collection: HTMLCollection) => void) | false) => void;
 export declare const isInputLike: (el: unknown) => el is HTMLInputElement;
 type Popover = "" | "auto" | "manual" | undefined;
 declare global {

package/mtds/utils.js

@@ -1,29 +1,41 @@
-const f = typeof window < "u" && typeof document < "u", a = { capture: !0, passive: !0 };
-let c = 0;
-const d = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
-function u(n) {
-  return n.id || (n.id = `${d}${++c}`), n.id;
+const f = typeof window < "u" && typeof document < "u", l = { capture: !0, passive: !0 };
+let r = 0;
+const u = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+function v(t) {
+  return t.id || (t.id = `${u}${++r}`), t.id;
 }
-const s = (n, t, e) => {
-  for (const i of e[0].split(","))
-    e[0] = i, t[`${n}EventListener`](...e);
-}, r = (n, ...t) => s("add", n, t), m = (n, ...t) => s("remove", n, t), p = (n, t) => {
+const c = (t, e, o) => {
+  for (const i of o[0].split(","))
+    o[0] = i, e[`${t}EventListener`](...o);
+}, p = (t, ...e) => c("add", t, e), b = (t, ...e) => c("remove", t, e);
+function d(t) {
   let e = 0;
-  const i = (o) => {
-    o.animationName === n && (cancelAnimationFrame(e), e = requestAnimationFrame(t));
-  };
-  return {
-    observe: (o) => r(o, "animationend", i, a),
-    disconnect: (o) => m(o, "animationstart", i, a)
-  };
-}, v = (n) => n instanceof HTMLElement && "validity" in n && !(n instanceof HTMLButtonElement);
+  const o = () => setTimeout(i, 200), i = () => {
+    t([], n), e = 0;
+  }, n = new MutationObserver(() => {
+    e || (e = requestAnimationFrame(o));
+  });
+  return n;
+}
+const s = /* @__PURE__ */ new WeakMap(), a = (t) => {
+  var o;
+  const e = s.get(t);
+  if (!e || !t.isConnected)
+    (o = e == null ? void 0 : e.observer) == null || o.disconnect(), s.delete(t);
+  else for (const [, i] of e.collections) i();
+}, M = (t, e, o) => {
+  const i = t.getElementsByClassName(e);
+  let n = s.get(t);
+  n || (n = { collections: /* @__PURE__ */ new Map(), observer: d(() => a(t)) }, n.observer.observe(t, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["class"] }), s.set(t, n)), o ? n.collections.set(e, () => o(i)) : n.collections.delete(e);
+}, T = (t) => t instanceof HTMLElement && "validity" in t && !(t instanceof HTMLButtonElement);
 export {
   f as IS_BROWSER,
-  a as QUICK_EVENT,
-  v as isInputLike,
-  m as off,
-  r as on,
-  p as onAdd,
-  u as useId
+  l as QUICK_EVENT,
+  d as createOptimizedMutationObserver,
+  T as isInputLike,
+  b as off,
+  p as on,
+  M as onMutation,
+  v as useId
 };
 //# sourceMappingURL=utils.js.map

package/mtds/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\nexport const QUICK_EVENT = { capture: true, passive: true };\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n  if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function createOptimizedMutationObserver(callback: MutationCallback) {\n  const queue: MutationRecord[] = [];\n  const observer = new MutationObserver((mutations) => {\n    if (!queue[0]) requestAnimationFrame(process);\n    queue.push(...mutations);\n  });\n\n  const process = () => {\n    callback(queue, observer);\n    queue.length = 0; // Reset queue\n  };\n\n  return observer;\n}\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n/**\n * Child added event inspired by:\n * https://davidwalsh.name/detect-node-insertion\n */\nexport const onAdd = (animationName: string, callback: () => void) => {\n  let timer: ReturnType<typeof requestAnimationFrame> | number = 0;\n  const onAnimation = (event: Event & { animationName?: string }) => {\n    if (event.animationName === animationName) {\n      cancelAnimationFrame(timer);\n      timer = requestAnimationFrame(callback);\n    }\n  };\n\n\treturn {\n\t\tobserve: (el: Element | Document, ) => on(el, 'animationend', onAnimation, QUICK_EVENT),\n\t\tdisconnect: (el: Element | Document, ) => off(el, 'animationstart', onAnimation, QUICK_EVENT)\n\t};\n}\n\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement && 'validity' in el && !(el instanceof HTMLButtonElement);\n\n// Make React support popover=\"\"target attribute\n// https://github.com/facebook/react/issues/27479\ntype Popover = \"\" | \"auto\" | \"manual\" | undefined;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicAttributes {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n\tnamespace React {\n\t\tinterface HTMLAttributes<T> {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n}"],"names":["IS_BROWSER","QUICK_EVENT","id","UUID","useId","el","events","action","element","rest","type","on","off","onAdd","animationName","callback","timer","onAnimation","event","isInputLike"],"mappings":"AAAO,MAAMA,IAAa,OAAO,SAAW,OAAe,OAAO,WAAa,KAClEC,IAAc,EAAE,SAAS,IAAM,SAAS,GAAK;AAM1D,IAAIC,IAAK;AACT,MAAMC,IAAO,GAAG,KAAK,IAAM,EAAA,SAAS,EAAE,CAAC,GAAG,KAAK,SAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AACzE,SAASC,EAAOC,GAAa;AAC9B,SAACA,EAAG,OAAIA,EAAG,KAAK,GAAGF,CAAI,GAAG,EAAED,CAAE,KAC5BG,EAAG;AACX;AAsBA,MAAMC,IAAS,CACdC,GACAC,GACAC,MACU;AACV,aAAWC,KAAQD,EAAK,CAAC,EAAE,MAAM,GAAG;AACnC,IAAAA,EAAK,CAAC,IAAIC,GACVF,EAAQ,GAAGD,CAAM,eAAe,EAAE,GAAGE,CAAI;AAE3C,GAQaE,IAAK,CACjBH,MACGC,MACOH,EAAO,OAAOE,GAASC,CAAI,GAQzBG,IAAM,CAClBJ,MACGC,MACOH,EAAO,UAAUE,GAASC,CAAI,GAM5BI,IAAQ,CAACC,GAAuBC,MAAyB;AACpE,MAAIC,IAA2D;AACzD,QAAAC,IAAc,CAACC,MAA8C;AAC7D,IAAAA,EAAM,kBAAkBJ,MAC1B,qBAAqBE,CAAK,GAC1BA,IAAQ,sBAAsBD,CAAQ;AAAA,EAE1C;AAEM,SAAA;AAAA,IACN,SAAS,CAACV,MAA6BM,EAAGN,GAAI,gBAAgBY,GAAahB,CAAW;AAAA,IACtF,YAAY,CAACI,MAA6BO,EAAIP,GAAI,kBAAkBY,GAAahB,CAAW;AAAA,EAC7F;AACD,GAEakB,IAAc,CAACd,MAC3BA,aAAc,eAAe,cAAcA,KAAM,EAAEA,aAAc;"}
+{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\nexport const QUICK_EVENT = { capture: true, passive: true };\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n  if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function createOptimizedMutationObserver(callback: MutationCallback) {\n  let queue = 0;\n\n\tconst onFrame = () => setTimeout(onTimer, 200); // Use both requestAnimationFrame and setTimeout to debounce and only run when visible\n\tconst onTimer = () => {\n\t\tcallback([], observer);\n\t\tqueue = 0;\n\t};\n  const observer = new MutationObserver(() => {\n    if (!queue) queue = requestAnimationFrame(onFrame);\n  });\n\n  return observer;\n}\n\ntype Mutator = { observer: MutationObserver, collections: Map<string, () => void> };\nconst MUTATORS = new WeakMap<Element, Mutator>();\nconst MUTATORS_CALLBACK = (element: Element) => {\n\tconst mutator = MUTATORS.get(element);\n\n\tif (!mutator || !element.isConnected) {\n\t\tmutator?.observer?.disconnect();\n\t\tMUTATORS.delete(element);\n\t} else for(const [, callback] of mutator.collections) callback();\n};\n\nexport const onMutation = (\n\telement: Element,\n\tclassName: string,\n\tcallback: ((collection: HTMLCollection) => void) | false\n) => {\n\tconst collection = element.getElementsByClassName(className);\n\tlet mutator = MUTATORS.get(element);\n\n\tif (!mutator) {\n\t\tmutator = { collections: new Map(), observer: createOptimizedMutationObserver(() => MUTATORS_CALLBACK(element)) };\n\t\tmutator.observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });\n\t\tMUTATORS.set(element, mutator);\n\t}\n\tif (callback) mutator.collections.set(className, () => callback(collection));\n\telse mutator.collections.delete(className);\n}\n\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement && 'validity' in el && !(el instanceof HTMLButtonElement);\n\n// Make React support popover=\"\"target attribute\n// https://github.com/facebook/react/issues/27479\ntype Popover = \"\" | \"auto\" | \"manual\" | undefined;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicAttributes {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n\tnamespace React {\n\t\tinterface HTMLAttributes<T> {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n}"],"names":["IS_BROWSER","QUICK_EVENT","id","UUID","useId","el","events","action","element","rest","type","on","off","createOptimizedMutationObserver","callback","queue","onFrame","onTimer","observer","MUTATORS","MUTATORS_CALLBACK","_a","mutator","onMutation","className","collection","isInputLike"],"mappings":"AAAO,MAAMA,IAAa,OAAO,SAAW,OAAe,OAAO,WAAa,KAClEC,IAAc,EAAE,SAAS,IAAM,SAAS,GAAK;AAM1D,IAAIC,IAAK;AACT,MAAMC,IAAO,GAAG,KAAK,IAAM,EAAA,SAAS,EAAE,CAAC,GAAG,KAAK,SAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AACzE,SAASC,EAAOC,GAAa;AAC9B,SAACA,EAAG,OAAIA,EAAG,KAAK,GAAGF,CAAI,GAAG,EAAED,CAAE,KAC5BG,EAAG;AACX;AAGA,MAAMC,IAAS,CACdC,GACAC,GACAC,MACU;AACV,aAAWC,KAAQD,EAAK,CAAC,EAAE,MAAM,GAAG;AACnC,IAAAA,EAAK,CAAC,IAAIC,GACVF,EAAQ,GAAGD,CAAM,eAAe,EAAE,GAAGE,CAAI;AAE3C,GAQaE,IAAK,CACjBH,MACGC,MACOH,EAAO,OAAOE,GAASC,CAAI,GAQzBG,IAAM,CAClBJ,MACGC,MACOH,EAAO,UAAUE,GAASC,CAAI;AAMlC,SAASI,EAAgCC,GAA4B;AAC1E,MAAIC,IAAQ;AAEb,QAAMC,IAAU,MAAM,WAAWC,GAAS,GAAG,GACvCA,IAAU,MAAM;AACZ,IAAAH,EAAA,IAAII,CAAQ,GACbH,IAAA;AAAA,EACT,GACOG,IAAW,IAAI,iBAAiB,MAAM;AAC1C,IAAKH,MAAeA,IAAA,sBAAsBC,CAAO;AAAA,EAAA,CAClD;AAEM,SAAAE;AACT;AAGA,MAAMC,wBAAe,QAA0B,GACzCC,IAAoB,CAACZ,MAAqB;AArEzC,MAAAa;AAsEA,QAAAC,IAAUH,EAAS,IAAIX,CAAO;AAEpC,MAAI,CAACc,KAAW,CAACd,EAAQ;AACxB,KAAAa,IAAAC,KAAA,gBAAAA,EAAS,aAAT,QAAAD,EAAmB,cACnBF,EAAS,OAAOX,CAAO;AAAA,kBACP,CAAA,EAAGM,CAAQ,KAAKQ,EAAQ,YAAsB,CAAAR,EAAA;AAChE,GAEaS,IAAa,CACzBf,GACAgB,GACAV,MACI;AACE,QAAAW,IAAajB,EAAQ,uBAAuBgB,CAAS;AACvD,MAAAF,IAAUH,EAAS,IAAIX,CAAO;AAElC,EAAKc,MACMA,IAAA,EAAE,aAAa,oBAAI,IAAI,GAAG,UAAUT,EAAgC,MAAMO,EAAkBZ,CAAO,CAAC,EAAE,GAChHc,EAAQ,SAAS,QAAQd,GAAS,EAAE,WAAW,IAAM,SAAS,IAAM,YAAY,IAAM,iBAAiB,CAAC,OAAO,GAAG,GACzGW,EAAA,IAAIX,GAASc,CAAO,IAE1BR,MAAkB,YAAY,IAAIU,GAAW,MAAMV,EAASW,CAAU,CAAC,IACtEH,EAAQ,YAAY,OAAOE,CAAS;AAC1C,GAEaE,IAAc,CAACrB,MAC3BA,aAAc,eAAe,cAAcA,KAAM,EAAEA,aAAc;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "0.2.13",
+	"version": "0.2.14",
 	"type": "module",
 	"main": "./mtds/index.js",
 	"types": "./mtds/index.d.ts",
@@ -35,19 +35,19 @@
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
 		"@phosphor-icons/react": "^2.1.7",
-		"@storybook/addon-essentials": "^8.5.0",
+		"@storybook/addon-essentials": "^8.5.2",
 		"@storybook/addon-mdx-gfm": "^8.5.2",
-		"@storybook/addon-storysource": "^8.5.0",
-		"@storybook/blocks": "^8.5.0",
-		"@storybook/manager-api": "^8.5.0",
-		"@storybook/react": "^8.5.0",
-		"@storybook/react-vite": "^8.5.0",
-		"@storybook/theming": "^8.5.0",
+		"@storybook/addon-storysource": "^8.5.2",
+		"@storybook/blocks": "^8.5.2",
+		"@storybook/manager-api": "^8.5.2",
+		"@storybook/react": "^8.5.2",
+		"@storybook/react-vite": "^8.5.2",
+		"@storybook/theming": "^8.5.2",
 		"@tanstack/react-table": "^8.20.6",
-		"@types/node": "^22.10.7",
-		"@types/react": "^19.0.7",
+		"@types/node": "^22.12.0",
+		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
-		"@u-elements/u-datalist": "0.1.0",
+		"@u-elements/u-datalist": "0.1.2",
 		"@u-elements/u-details": "^0.1.0",
 		"@u-elements/u-tabs": "^0.0.8",
 		"@vitejs/plugin-react": "^4.3.4",