@mattilsynet/design 0.2.16 → 0.2.18

package/mtds/styles.json

@@ -1,33 +1,33 @@
 {
-  "validation": "_validation_cpy8b_1 _ds-validation-message_1w6ss_1",
-  "tag": "_tag_cpy8b_1 _ds-tag_1w6ss_1",
-  "tabs": "_tabs_cpy8b_1 _ds-tabs_1w6ss_1",
-  "table": "_table_cpy8b_1 _ds-table_1w6ss_1",
-  "scrollShadow": "_scrollShadow_cpy8b_1",
-  "skeleton": "_skeleton_cpy8b_1 _ds-skeleton_1w6ss_1",
-  "popover": "_popover_cpy8b_1",
-  "pagination": "_pagination_cpy8b_1 _ds-pagination_1w6ss_1",
-  "modal": "_modal_cpy8b_1 _ds-modal_1w6ss_1",
-  "logo": "_logo_cpy8b_1 _ds-focus_1w6ss_1",
-  "link": "_link_cpy8b_1",
-  "grid": "_grid_cpy8b_1",
-  "flex": "_flex_cpy8b_1",
-  "input": "_input_cpy8b_1 _ds-input_1w6ss_1",
-  "fieldset": "_fieldset_cpy8b_1 _ds-fieldset_1w6ss_1",
-  "field": "_field_cpy8b_1 _ds-field_1w6ss_1",
-  "affixes": "_affixes_cpy8b_1 _ds-field-affixes_1w6ss_1",
-  "count": "_count_cpy8b_1",
-  "errorsummary": "_errorsummary_cpy8b_1 _ds-error-summary_1w6ss_1",
-  "details": "_details_cpy8b_1 _ds-details_1w6ss_1",
-  "chip": "_chip_cpy8b_1 _ds-chip_1w6ss_1",
-  "card": "_card_cpy8b_1",
-  "info": "_info_cpy8b_1",
-  "button": "_button_cpy8b_1 _ds-button_1w6ss_1",
-  "breadcrumbs": "_breadcrumbs_cpy8b_1 _ds-breadcrumbs_1w6ss_1",
-  "badge": "_badge_cpy8b_1",
-  "avatar": "_avatar_cpy8b_1 _ds-avatar_1w6ss_1",
-  "alert": "_alert_cpy8b_1 _ds-alert_1w6ss_1",
-  "heading": "_heading_cpy8b_1 _ds-heading_1w6ss_1",
-  "body": "_body_cpy8b_113",
-  "tooltip": "_tooltip_cpy8b_128"
+  "validation": "_validation_14niv_1 _ds-validation-message_1w6ss_1",
+  "tag": "_tag_14niv_1 _ds-tag_1w6ss_1",
+  "tabs": "_tabs_14niv_1 _ds-tabs_1w6ss_1",
+  "table": "_table_14niv_1 _ds-table_1w6ss_1",
+  "scrollShadow": "_scrollShadow_14niv_1",
+  "skeleton": "_skeleton_14niv_1 _ds-skeleton_1w6ss_1",
+  "popover": "_popover_14niv_1",
+  "pagination": "_pagination_14niv_1 _ds-pagination_1w6ss_1",
+  "modal": "_modal_14niv_1 _ds-modal_1w6ss_1",
+  "logo": "_logo_14niv_1 _ds-focus_1w6ss_1",
+  "link": "_link_14niv_1",
+  "grid": "_grid_14niv_1",
+  "flex": "_flex_14niv_1",
+  "input": "_input_14niv_1 _ds-input_1w6ss_1",
+  "fieldset": "_fieldset_14niv_1 _ds-fieldset_1w6ss_1",
+  "field": "_field_14niv_1 _ds-field_1w6ss_1",
+  "affixes": "_affixes_14niv_1 _ds-field-affixes_1w6ss_1",
+  "count": "_count_14niv_1",
+  "errorsummary": "_errorsummary_14niv_1 _ds-error-summary_1w6ss_1",
+  "details": "_details_14niv_1 _ds-details_1w6ss_1",
+  "chip": "_chip_14niv_1 _ds-chip_1w6ss_1",
+  "card": "_card_14niv_1",
+  "info": "_info_14niv_1",
+  "button": "_button_14niv_1 _ds-button_1w6ss_1",
+  "breadcrumbs": "_breadcrumbs_14niv_1 _ds-breadcrumbs_1w6ss_1",
+  "badge": "_badge_14niv_1",
+  "avatar": "_avatar_14niv_1 _ds-avatar_1w6ss_1",
+  "alert": "_alert_14niv_1 _ds-alert_1w6ss_1",
+  "heading": "_heading_14niv_1 _ds-heading_1w6ss_1",
+  "body": "_body_14niv_114",
+  "tooltip": "_tooltip_14niv_129"
 }

package/mtds/styles.module.css.js

@@ -1,27 +1,27 @@
-const _ = "_validation_cpy8b_1 _ds-validation-message_1w6ss_1", s = "_tag_cpy8b_1 _ds-tag_1w6ss_1", t = "_tabs_cpy8b_1 _ds-tabs_1w6ss_1", o = "_table_cpy8b_1 _ds-table_1w6ss_1", c = "_scrollShadow_cpy8b_1", a = "_skeleton_cpy8b_1 _ds-skeleton_1w6ss_1", n = "_popover_cpy8b_1", d = "_pagination_cpy8b_1 _ds-pagination_1w6ss_1", e = "_modal_cpy8b_1 _ds-modal_1w6ss_1", b = "_logo_cpy8b_1 _ds-focus_1w6ss_1", i = "_link_cpy8b_1", l = "_grid_cpy8b_1", p = "_flex_cpy8b_1", r = "_input_cpy8b_1 _ds-input_1w6ss_1", y = "_fieldset_cpy8b_1 _ds-fieldset_1w6ss_1", f = "_field_cpy8b_1 _ds-field_1w6ss_1", w = "_affixes_cpy8b_1 _ds-field-affixes_1w6ss_1", g = "_count_cpy8b_1", u = "_errorsummary_cpy8b_1 _ds-error-summary_1w6ss_1", m = "_details_cpy8b_1 _ds-details_1w6ss_1", h = "_chip_cpy8b_1 _ds-chip_1w6ss_1", v = "_card_cpy8b_1", x = "_info_cpy8b_1", k = "_button_cpy8b_1 _ds-button_1w6ss_1", S = "_breadcrumbs_cpy8b_1 _ds-breadcrumbs_1w6ss_1", j = "_badge_cpy8b_1", q = "_avatar_cpy8b_1 _ds-avatar_1w6ss_1", z = "_alert_cpy8b_1 _ds-alert_1w6ss_1", A = "_heading_cpy8b_1 _ds-heading_1w6ss_1", B = "_body_cpy8b_113", C = "_tooltip_cpy8b_128", D = {
+const _ = "_validation_14niv_1 _ds-validation-message_1w6ss_1", s = "_tag_14niv_1 _ds-tag_1w6ss_1", n = "_tabs_14niv_1 _ds-tabs_1w6ss_1", t = "_table_14niv_1 _ds-table_1w6ss_1", o = "_scrollShadow_14niv_1", i = "_skeleton_14niv_1 _ds-skeleton_1w6ss_1", a = "_popover_14niv_1", d = "_pagination_14niv_1 _ds-pagination_1w6ss_1", e = "_modal_14niv_1 _ds-modal_1w6ss_1", l = "_logo_14niv_1 _ds-focus_1w6ss_1", c = "_link_14niv_1", r = "_grid_14niv_1", v = "_flex_14niv_1", b = "_input_14niv_1 _ds-input_1w6ss_1", f = "_fieldset_14niv_1 _ds-fieldset_1w6ss_1", w = "_field_14niv_1 _ds-field_1w6ss_1", g = "_affixes_14niv_1 _ds-field-affixes_1w6ss_1", p = "_count_14niv_1", u = "_errorsummary_14niv_1 _ds-error-summary_1w6ss_1", m = "_details_14niv_1 _ds-details_1w6ss_1", h = "_chip_14niv_1 _ds-chip_1w6ss_1", x = "_card_14niv_1", y = "_info_14niv_1", k = "_button_14niv_1 _ds-button_1w6ss_1", S = "_breadcrumbs_14niv_1 _ds-breadcrumbs_1w6ss_1", j = "_badge_14niv_1", q = "_avatar_14niv_1 _ds-avatar_1w6ss_1", z = "_alert_14niv_1 _ds-alert_1w6ss_1", A = "_heading_14niv_1 _ds-heading_1w6ss_1", B = "_body_14niv_114", C = "_tooltip_14niv_129", D = {
   validation: _,
   tag: s,
-  tabs: t,
-  table: o,
-  scrollShadow: c,
-  skeleton: a,
-  popover: n,
+  tabs: n,
+  table: t,
+  scrollShadow: o,
+  skeleton: i,
+  popover: a,
   pagination: d,
   modal: e,
-  logo: b,
-  link: i,
-  grid: l,
-  flex: p,
-  input: r,
-  fieldset: y,
-  field: f,
-  affixes: w,
-  count: g,
+  logo: l,
+  link: c,
+  grid: r,
+  flex: v,
+  input: b,
+  fieldset: f,
+  field: w,
+  affixes: g,
+  count: p,
   errorsummary: u,
   details: m,
   chip: h,
-  card: v,
-  info: x,
+  card: x,
+  info: y,
   button: k,
   breadcrumbs: S,
   badge: j,
@@ -32,35 +32,35 @@ const _ = "_validation_cpy8b_1 _ds-validation-message_1w6ss_1", s = "_tag_cpy8b_
   tooltip: C
 };
 export {
-  w as affixes,
+  g as affixes,
   z as alert,
   q as avatar,
   j as badge,
   B as body,
   S as breadcrumbs,
   k as button,
-  v as card,
+  x as card,
   h as chip,
-  g as count,
+  p as count,
   D as default,
   m as details,
   u as errorsummary,
-  f as field,
-  y as fieldset,
-  p as flex,
-  l as grid,
+  w as field,
+  f as fieldset,
+  v as flex,
+  r as grid,
   A as heading,
-  x as info,
-  r as input,
-  i as link,
-  b as logo,
+  y as info,
+  b as input,
+  c as link,
+  l as logo,
   e as modal,
   d as pagination,
-  n as popover,
-  c as scrollShadow,
-  a as skeleton,
-  o as table,
-  t as tabs,
+  a as popover,
+  o as scrollShadow,
+  i as skeleton,
+  t as table,
+  n as tabs,
   s as tag,
   C as tooltip,
   _ as validation

package/mtds/tooltip.js

@@ -1,14 +1,18 @@
-import d from "./styles.module.css.js";
-import { IS_BROWSER as u, attr as c, on as m, QUICK_EVENT as p, anchorPosition as t } from "./utils.js";
-let n = null, s = 0, o = null;
-u && (o = document.body.appendChild(document.createElement("div")), o.classList.add(...d.tooltip.split(" ")), c(o, "popover", "manual"), m(document, "mousemove", f, p));
-function f({ target: e }) {
-  clearTimeout(s), s = setTimeout(a, 20, e);
+import m from "./styles.module.css.js";
+import { IS_BROWSER as p, attr as r, on as u, QUICK_EVENT as d, useId as b, anchorPosition as f } from "./utils.js";
+let e = null, l = null, a = 0, T = Number.NEGATIVE_INFINITY;
+const c = 100;
+p && (e = document.body.appendChild(document.createElement("div")), e.classList.add(...m.tooltip.split(" ")), r(e, "popover", "manual"), u(document, "blur,focus,mouseout,mouseover", s, d), u(window, "blur", s, d));
+function s({ target: o }) {
+  const t = T + c - Date.now();
+  clearTimeout(a), a = setTimeout(E, Math.max(t, 0), o);
 }
-function a(e) {
-  var i;
-  if (!o || e === o) return;
-  const l = (i = e == null ? void 0 : e.closest) == null ? void 0 : i.call(e, "[data-tooltip]");
-  !l && n ? (t(o, !1), o == null || o.hidePopover(), n = null) : l && l !== n && (n = l, o.textContent = l.getAttribute("data-tooltip") || "", o.showPopover(), t(o, !1), t(o, l, "top"));
+function E(o) {
+  var n;
+  if (T = Date.now(), !e || o === e) return;
+  let t = ((n = o == null ? void 0 : o.closest) == null ? void 0 : n.call(o, "[data-tooltip],[data-expanded]")) || null;
+  if (t === l) return;
+  const i = (t == null ? void 0 : t.getAttribute("data-tooltip")) || (t == null ? void 0 : t.getAttribute("data-expanded")) || "";
+  (!i || i === "false" || i === "true") && (t = null), l == null || l.removeAttribute("aria-labelledby"), l = t, l == null || l.setAttribute("aria-labelledby", b(e)), e.togglePopover(!!t), f(e, t, (t == null ? void 0 : t.getAttribute("data-tooltip-position")) || "top"), t && (e.textContent = i);
 }
 //# sourceMappingURL=tooltip.js.map

package/mtds/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../designsystem/tooltip.ts"],"sourcesContent":["import styles from './styles.module.css';\nimport { IS_BROWSER, QUICK_EVENT, anchorPosition, attr, on } from \"./utils\";\n\nlet ANCHOR: Element | null = null;\nlet DEBOUNCE: number | ReturnType<typeof setTimeout> = 0;\nlet TOOLTIP: HTMLElement | null = null;\n\nif (IS_BROWSER) {\n  TOOLTIP = document.body.appendChild(document.createElement('div'));\n  TOOLTIP.classList.add(...styles.tooltip.split(' '));\n  attr(TOOLTIP, 'popover', 'manual');\n  on(document, 'mousemove', handleMove, QUICK_EVENT);\n}\n\nfunction handleMove({ target }: Event) {\n  clearTimeout(DEBOUNCE);\n  DEBOUNCE = setTimeout(handleMoveDebounced, 20, target);\n}\n\nfunction handleMoveDebounced(target: Element | null) {\n  if (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n  const anchor = target?.closest?.<HTMLElement>('[data-tooltip]');\n  \n  if (!anchor && ANCHOR) {\n    anchorPosition(TOOLTIP, false);\n    TOOLTIP?.hidePopover();\n    ANCHOR = null;\n  } else if (anchor && anchor !== ANCHOR) {\n    ANCHOR = anchor;\n    TOOLTIP.textContent = anchor.getAttribute('data-tooltip') || '';\n    TOOLTIP.showPopover();\n    anchorPosition(TOOLTIP, false); // Reset position\n    anchorPosition(TOOLTIP, anchor, 'top');\n  }\n}"],"names":["ANCHOR","DEBOUNCE","TOOLTIP","IS_BROWSER","styles","attr","on","handleMove","QUICK_EVENT","target","handleMoveDebounced","anchor","_a","anchorPosition"],"mappings":";;AAGA,IAAIA,IAAyB,MACzBC,IAAmD,GACnDC,IAA8B;AAE9BC,MACFD,IAAU,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC,GACjEA,EAAQ,UAAU,IAAI,GAAGE,EAAO,QAAQ,MAAM,GAAG,CAAC,GAC7CC,EAAAH,GAAS,WAAW,QAAQ,GAC9BI,EAAA,UAAU,aAAaC,GAAYC,CAAW;AAGnD,SAASD,EAAW,EAAE,QAAAE,KAAiB;AACrC,eAAaR,CAAQ,GACVA,IAAA,WAAWS,GAAqB,IAAID,CAAM;AACvD;AAEA,SAASC,EAAoBD,GAAwB;;AAC/C,MAAA,CAACP,KAAWO,MAAWP,EAAS;AAC9B,QAAAS,KAASC,IAAAH,KAAA,gBAAAA,EAAQ,YAAR,gBAAAG,EAAA,KAAAH,GAA+B;AAE1C,EAAA,CAACE,KAAUX,KACba,EAAeX,GAAS,EAAK,GAC7BA,KAAA,QAAAA,EAAS,eACAF,IAAA,QACAW,KAAUA,MAAWX,MACrBA,IAAAW,GACTT,EAAQ,cAAcS,EAAO,aAAa,cAAc,KAAK,IAC7DT,EAAQ,YAAY,GACpBW,EAAeX,GAAS,EAAK,GACdW,EAAAX,GAASS,GAAQ,KAAK;AAEzC;"}
+{"version":3,"file":"tooltip.js","sources":["../designsystem/tooltip.ts"],"sourcesContent":["import styles from './styles.module.css';\nimport { IS_BROWSER, QUICK_EVENT, anchorPosition, attr, on, useId } from \"./utils\";\n\nlet TOOLTIP: HTMLElement | null = null;\nlet ANCHOR: Element | null = null;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\nlet THROTTLE_LAST_CALL = Number.NEGATIVE_INFINITY;\nconst THROTTLE_DELAY = 100;\n\nif (IS_BROWSER) {\n  TOOLTIP = document.body.appendChild(document.createElement('div'));\n  TOOLTIP.classList.add(...styles.tooltip.split(' '));\n  attr(TOOLTIP, 'popover', 'manual');\n  on(document, 'blur,focus,mouseout,mouseover', handleMove, QUICK_EVENT);\n  on(window, 'blur', handleMove, QUICK_EVENT);\n}\n\nfunction handleMove({ target }: Event) {\n  const wait = THROTTLE_LAST_CALL + THROTTLE_DELAY - Date.now();\n  clearTimeout(THROTTLE);\n  THROTTLE = setTimeout(handleMoveThrottled, Math.max(wait, 0), target);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n  THROTTLE_LAST_CALL = Date.now();\n\n  if (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n  let anchor = target?.closest?.<HTMLElement>('[data-tooltip],[data-expanded]') || null;\n  \n  // No need to update\n  if (anchor === ANCHOR) return;\n\n  // Do not show tooltip if boolish value\n  const content = anchor?.getAttribute('data-tooltip') || anchor?.getAttribute('data-expanded') || '';\n  if (!content || content === 'false' || content === 'true') anchor = null;\n  \n  ANCHOR?.removeAttribute('aria-labelledby'); // Unbind previous anchor\n  ANCHOR = anchor; // Store new anchor - might be null if no new anchor\n\n  ANCHOR?.setAttribute('aria-labelledby', useId(TOOLTIP));\n  TOOLTIP.togglePopover(!!anchor);\n  // anchorPosition(TOOLTIP, false); // Reset anchor position\n  anchorPosition(TOOLTIP, anchor, anchor?.getAttribute('data-tooltip-position') || 'top');\n  if (anchor) TOOLTIP.textContent = content;\n}"],"names":["TOOLTIP","ANCHOR","THROTTLE","THROTTLE_LAST_CALL","THROTTLE_DELAY","IS_BROWSER","styles","attr","on","handleMove","QUICK_EVENT","target","wait","handleMoveThrottled","anchor","_a","content","useId","anchorPosition"],"mappings":";;AAGA,IAAIA,IAA8B,MAC9BC,IAAyB,MACzBC,IAAmD,GACnDC,IAAqB,OAAO;AAChC,MAAMC,IAAiB;AAEnBC,MACFL,IAAU,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC,GACjEA,EAAQ,UAAU,IAAI,GAAGM,EAAO,QAAQ,MAAM,GAAG,CAAC,GAC7CC,EAAAP,GAAS,WAAW,QAAQ,GAC9BQ,EAAA,UAAU,iCAAiCC,GAAYC,CAAW,GAClEF,EAAA,QAAQ,QAAQC,GAAYC,CAAW;AAG5C,SAASD,EAAW,EAAE,QAAAE,KAAiB;AACrC,QAAMC,IAAOT,IAAqBC,IAAiB,KAAK,IAAI;AAC5D,eAAaF,CAAQ,GACrBA,IAAW,WAAWW,GAAqB,KAAK,IAAID,GAAM,CAAC,GAAGD,CAAM;AACtE;AAGA,SAASE,EAAoBF,GAAwB;;AAG/C,MAFJR,IAAqB,KAAK,IAAI,GAE1B,CAACH,KAAWW,MAAWX,EAAS;AACpC,MAAIc,MAASC,IAAAJ,KAAA,gBAAAA,EAAQ,YAAR,gBAAAI,EAAA,KAAAJ,GAA+B,sCAAqC;AAGjF,MAAIG,MAAWb,EAAQ;AAGjB,QAAAe,KAAUF,KAAA,gBAAAA,EAAQ,aAAa,qBAAmBA,KAAA,gBAAAA,EAAQ,aAAa,qBAAoB;AACjG,GAAI,CAACE,KAAWA,MAAY,WAAWA,MAAY,YAAiBF,IAAA,OAEpEb,KAAA,QAAAA,EAAQ,gBAAgB,oBACfA,IAAAa,GAETb,KAAA,QAAAA,EAAQ,aAAa,mBAAmBgB,EAAMjB,CAAO,IAC7CA,EAAA,cAAc,CAAC,CAACc,CAAM,GAE9BI,EAAelB,GAASc,IAAQA,KAAA,gBAAAA,EAAQ,aAAa,6BAA4B,KAAK,GAClFA,QAAgB,cAAcE;AACpC;"}

package/mtds/utils.js

@@ -1,33 +1,33 @@
-const w = typeof window < "u" && typeof document < "u", W = { capture: !0, passive: !0 };
-function C(t, e, n) {
+const w = typeof window < "u" && typeof document < "u", U = { capture: !0, passive: !0 };
+function E(t, e, n) {
   return n === void 0 ? t.getAttribute(e) ?? null : (n === null ? t.removeAttribute(e) : t.getAttribute(e) !== n && t.setAttribute(e, n), null);
 }
-let U = 0;
-const E = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
-function F(t) {
-  return t.id || (t.id = `${E}${++U}`), t.id;
+let B = 0;
+const I = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+function R(t) {
+  return t.id || (t.id = `${I}${++B}`), t.id;
 }
 const b = (t, e, n) => {
   for (const i of n[0].split(","))
     n[0] = i, e[`${t}EventListener`](...n);
-}, B = (t, ...e) => b("add", t, e), P = (t, ...e) => b("remove", t, e), l = /* @__PURE__ */ new Map(), s = w ? document.createElement("div") : null;
-s && C(s, "style", "position:absolute;padding:1px;top:0;left:0px");
-w && B(window, "load,resize,scroll", () => {
+}, O = (t, ...e) => b("add", t, e), X = (t, ...e) => b("remove", t, e), l = /* @__PURE__ */ new Map(), s = w ? document.createElement("div") : null;
+s && E(s, "style", "position:absolute;padding:1px;top:0;left:0px");
+w && O(window, "load,resize,scroll", () => {
   for (const [t, e] of l) e();
-}, W);
+}, U);
 const c = { top: 0, right: 1, bottom: 2, left: 3, none: 4 };
-function I(t, e, n) {
-  var h;
-  if (e === !1 || !(e != null && e.isConnected) || !(t != null && t.isConnected)) return l.delete(t);
-  if (s != null && s.isConnected || document.body.append(s || ""), !l.has(t)) {
-    const S = c[n] ?? c.bottom;
-    return (h = l.set(t, () => I(t, e, S)).get(t)) == null ? void 0 : h();
+function _(t, e, n) {
+  var p;
+  if (!e || !e.isConnected || !t.isConnected) return l.delete(t);
+  if (s != null && s.isConnected || document.body.append(s || ""), !l.has(t) || c[n] === void 0) {
+    const C = c[n] ?? c.bottom;
+    return (p = l.set(t, () => _(t, e, C)).get(t)) == null ? void 0 : p();
   }
   if (n === c.none) return t.style.setProperty("left", "-100vw");
-  const { offsetWidth: i, offsetHeight: o } = t, { offsetWidth: r, offsetHeight: u } = e, { width: M, height: m, left: v, top: y } = e.getBoundingClientRect(), f = Math.round(v - (r - M) / 2), d = Math.round(y - (u - m) / 2), A = f - i > 0, T = r + r + i < window.innerWidth, H = d - o > 0, $ = d + u + o < window.innerHeight, g = n === c.bottom && T || !A, x = n === c.bottom && $ || !H, p = n === c.top || n === c.bottom;
-  t.style.left = `${Math.round(p ? Math.min(Math.max(10, f - (i - r) / 2), window.innerWidth - i - 10) : g ? f + r : f - i)}px`, t.style.top = `${Math.round(p ? x ? d + u : d - o : Math.min(Math.max(10, d - (o - u) / 2), window.innerHeight - o - 10))}px`, s == null || s.style.setProperty("translate", `${Math.round(window.scrollX + f + r + i + 30)} ${Math.round(window.scrollY + d + u + o + 30)}px`);
+  const { offsetWidth: i, offsetHeight: o } = t, { offsetWidth: r, offsetHeight: u } = e, { width: M, height: m, left: v, top: y } = e.getBoundingClientRect(), f = Math.round(v - (r - M) / 2), d = Math.round(y - (u - m) / 2), g = f - i > 0, A = r + r + i < window.innerWidth, T = d - o > 0, H = d + u + o < window.innerHeight, $ = n === c.bottom && A || !g, x = n === c.bottom && H || !T, S = Math.min(Math.max(10, f - (i - r) / 2), window.innerWidth - i - 10), W = Math.min(Math.max(10, d - (o - u) / 2), window.innerHeight - o - 10), h = n === c.top || n === c.bottom;
+  t.style.left = `${Math.round(h ? S : $ ? f + r : f - i)}px`, t.style.top = `${Math.round(h ? x ? d + u : d - o : W)}px`, s == null || s.style.setProperty("translate", `${Math.round(window.scrollX + f + r + i + 30)} ${Math.round(window.scrollY + d + u + o + 30)}px`);
 }
-function O(t) {
+function F(t) {
   let e = 0;
   const n = () => setTimeout(i, 200), i = () => {
     t([], o), e = 0;
@@ -36,27 +36,27 @@ function O(t) {
   });
   return o;
 }
-const a = /* @__PURE__ */ new WeakMap(), _ = (t) => {
+const a = /* @__PURE__ */ new WeakMap(), P = (t) => {
   var n;
   const e = a.get(t);
   if (!e || !t.isConnected)
     (n = e == null ? void 0 : e.observer) == null || n.disconnect(), a.delete(t);
   else for (const [, i] of e.collections) i();
-}, R = (t, e, n) => {
+}, Y = (t, e, n) => {
   const i = t.getElementsByClassName(e);
   let o = a.get(t);
-  o || (o = { collections: /* @__PURE__ */ new Map(), observer: O(() => _(t)) }, o.observer.observe(t, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["class"] }), a.set(t, o)), n ? o.collections.set(e, () => n(i)) : o.collections.delete(e);
+  o || (o = { collections: /* @__PURE__ */ new Map(), observer: F(() => P(t)) }, o.observer.observe(t, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["class"] }), a.set(t, o)), n ? o.collections.set(e, () => n(i)) : o.collections.delete(e);
 }, k = (t) => t instanceof HTMLElement && "validity" in t && !(t instanceof HTMLButtonElement);
 export {
   w as IS_BROWSER,
-  W as QUICK_EVENT,
-  I as anchorPosition,
-  C as attr,
-  O as createOptimizedMutationObserver,
+  U as QUICK_EVENT,
+  _ as anchorPosition,
+  E as attr,
+  F as createOptimizedMutationObserver,
   k as isInputLike,
-  P as off,
-  B as on,
-  R as onMutation,
-  F as useId
+  X as off,
+  O as on,
+  Y as onMutation,
+  R 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 * 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 * 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\nconst TARGETS = new Map<Element, () => void>(); // Store current open poppers and their update functions\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nif (SCROLLER) attr(SCROLLER, 'style', 'position:absolute;padding:1px;top:0;left:0px');\n\nif (IS_BROWSER){\n\ton(window, 'load,resize,scroll', () => {\n\t\tfor (const [_, update] of TARGETS) update();\n\t}, QUICK_EVENT);}\n\t\n/**\n * anchorPosition\n * @param target The Element to position\n * @param anchor The Element to use as anchor\n */\nconst ANCHOR = { top: 0, right: 1, bottom: 2, left: 3, none: 4 }; // Speed up by using a const map\n\nexport function anchorPosition (target: HTMLElement, anchor: HTMLElement | null | false, position?: string | number) {\n\tif (anchor === false || !anchor?.isConnected || !target?.isConnected) return TARGETS.delete(target); // Stop watchning if anchor is removed from DOM\n\tif (!SCROLLER?.isConnected) document.body.append(SCROLLER || ''); // Ensure we have t´he scroller\n\tif (!TARGETS.has(target)) {\n\t\tconst place = ANCHOR[position as keyof typeof ANCHOR] ?? ANCHOR.bottom; // Use CSS property to store position for more flexibility\n\t\treturn TARGETS.set(target, () => anchorPosition(target, anchor, place)).get(target)?.(); // Start watching if not already watching\n\t}\n\tif (position === ANCHOR.none) return target.style.setProperty('left', '-100vw'); // Hide target if anchor is set to none\n\n  const { offsetWidth: targetW, offsetHeight: targetH } = target;\n  const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n  const { width, height, left, top } = anchor.getBoundingClientRect();\n\tconst anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n  const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n\n\tconst hasSpaceLeft = anchorX - targetW > 0\n\tconst hasSpaceRight = anchorW + anchorW + targetW < window.innerWidth;\n\tconst hasSpaceOver = anchorY - targetH > 0\n\tconst hasSpaceUnder = anchorY + anchorH + targetH < window.innerHeight;\n\tconst positionRight = (position === ANCHOR.bottom && hasSpaceRight) || !hasSpaceLeft // Always position under when no hasSpaceOver, as no OS can scroll further up than 0\n\tconst positionUnder = (position === ANCHOR.bottom && hasSpaceUnder) || !hasSpaceOver // Always position under when no hasSpaceOver, as no OS can scroll further up than 0\n\tconst isVertical = position === ANCHOR.top || position === ANCHOR.bottom;\n\n\ttarget.style.left = `${Math.round(isVertical ? Math.min(Math.max(10, anchorX - (targetW - anchorW) / 2), window.innerWidth - targetW - 10) : (positionRight ? anchorX + anchorW : anchorX - targetW))}px`\n  target.style.top = `${Math.round(isVertical ? (positionUnder ? anchorY + anchorH : anchorY - targetH) : Math.min(Math.max(10, anchorY - (targetH - anchorH) / 2), window.innerHeight - targetH - 10))}px`\n  SCROLLER?.style.setProperty('translate', `${Math.round(window.scrollX + anchorX + anchorW + targetW + 30)} ${Math.round(window.scrollY + anchorY + anchorH + targetH + 30)}px`);\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  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\n/**\n * onMutation\n * @description Utility to quickly observe mutations on a specific class name\n * @param element The Element to use as EventTarget\n * @param className The class name to observe\n * @param callback The callback to run when mutations are detected or false to stop observing\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","attr","el","name","value","id","UUID","useId","events","action","element","rest","type","on","off","TARGETS","SCROLLER","_","update","ANCHOR","anchorPosition","target","anchor","position","_a","place","targetW","targetH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceLeft","hasSpaceRight","hasSpaceOver","hasSpaceUnder","positionRight","positionUnder","isVertical","createOptimizedMutationObserver","callback","queue","onFrame","onTimer","observer","MUTATORS","MUTATORS_CALLBACK","mutator","onMutation","className","collection","isInputLike"],"mappings":"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"}
+{"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 * 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 * 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\nconst TARGETS = new Map<Element, () => void>(); // Store current open poppers and their update functions\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nif (SCROLLER) attr(SCROLLER, 'style', 'position:absolute;padding:1px;top:0;left:0px');\n\nif (IS_BROWSER){\n\ton(window, 'load,resize,scroll', () => {\n\t\tfor (const [_, update] of TARGETS) update();\n\t}, QUICK_EVENT);}\n\t\n/**\n * anchorPosition\n * @param target The Element to position\n * @param anchor The Element to use as anchor\n */\ntype AnchorKeys = keyof typeof ANCHOR;\nconst ANCHOR = { top: 0, right: 1, bottom: 2, left: 3, none: 4 }; // Speed up by using a const map\n\nexport function anchorPosition (target: HTMLElement, anchor: HTMLElement | null | false, position?: string | number) {\n\tif (!anchor || !anchor.isConnected || !target.isConnected) return TARGETS.delete(target); // Stop watchning if anchor is removed from DOM\n\tif (!SCROLLER?.isConnected) document.body.append(SCROLLER || ''); // Ensure we have t´he scroller\n\tif (!TARGETS.has(target) || ANCHOR[position as AnchorKeys] === undefined) { // Setup new target or update position\n\t\tconst place = ANCHOR[position as keyof typeof ANCHOR] ?? ANCHOR.bottom; // Use CSS property to store position for more flexibility\n\t\treturn TARGETS.set(target, () => anchorPosition(target, anchor, place)).get(target)?.(); // Start watching if not already watching\n\t}\n\tif (position === ANCHOR.none) return target.style.setProperty('left', '-100vw'); // Hide target if anchor is set to none\n\n  const { offsetWidth: targetW, offsetHeight: targetH } = target;\n  const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n  const { width, height, left, top } = anchor.getBoundingClientRect();\n\tconst anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n  const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n\n\tconst hasSpaceLeft = anchorX - targetW > 0\n\tconst hasSpaceRight = anchorW + anchorW + targetW < window.innerWidth;\n\tconst hasSpaceOver = anchorY - targetH > 0\n\tconst hasSpaceUnder = anchorY + anchorH + targetH < window.innerHeight;\n\tconst positionRight = (position === ANCHOR.bottom && hasSpaceRight) || !hasSpaceLeft // Always position right when no hasSpaceLeft, as no OS scrolls further up than 0\n\tconst positionUnder = (position === ANCHOR.bottom && hasSpaceUnder) || !hasSpaceOver // Always position under when no hasSpaceOver, as no OS scrolls further up than 0\n\tconst centerX = Math.min(Math.max(10, anchorX - (targetW - anchorW) / 2), window.innerWidth - targetW - 10);\n\tconst centerY = Math.min(Math.max(10, anchorY - (targetH - anchorH) / 2), window.innerHeight - targetH - 10);\n\tconst isVertical = position === ANCHOR.top || position === ANCHOR.bottom;\n\n\ttarget.style.left = `${Math.round(isVertical ? centerX : (positionRight ? anchorX + anchorW : anchorX - targetW))}px`\n  target.style.top = `${Math.round(isVertical ? (positionUnder ? anchorY + anchorH : anchorY - targetH) : centerY)}px`\n  SCROLLER?.style.setProperty('translate', `${Math.round(window.scrollX + anchorX + anchorW + targetW + 30)} ${Math.round(window.scrollY + anchorY + anchorH + targetH + 30)}px`);\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  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\n/**\n * onMutation\n * @description Utility to quickly observe mutations on a specific class name\n * @param element The Element to use as EventTarget\n * @param className The class name to observe\n * @param callback The callback to run when mutations are detected or false to stop observing\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","attr","el","name","value","id","UUID","useId","events","action","element","rest","type","on","off","TARGETS","SCROLLER","_","update","ANCHOR","anchorPosition","target","anchor","position","_a","place","targetW","targetH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceLeft","hasSpaceRight","hasSpaceOver","hasSpaceUnder","positionRight","positionUnder","centerX","centerY","isVertical","createOptimizedMutationObserver","callback","queue","onFrame","onTimer","observer","MUTATORS","MUTATORS_CALLBACK","mutator","onMutation","className","collection","isInputLike"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "0.2.16",
+	"version": "0.2.18",
 	"type": "module",
 	"main": "./mtds/index.js",
 	"types": "./mtds/index.d.ts",
@@ -35,16 +35,16 @@
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
 		"@phosphor-icons/react": "^2.1.7",
-		"@storybook/addon-essentials": "^8.5.2",
-		"@storybook/addon-mdx-gfm": "^8.5.2",
-		"@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",
+		"@storybook/addon-essentials": "^8.5.3",
+		"@storybook/addon-mdx-gfm": "^8.5.3",
+		"@storybook/addon-storysource": "^8.5.3",
+		"@storybook/blocks": "^8.5.3",
+		"@storybook/manager-api": "^8.5.3",
+		"@storybook/react": "^8.5.3",
+		"@storybook/react-vite": "^8.5.3",
+		"@storybook/theming": "^8.5.3",
 		"@tanstack/react-table": "^8.20.6",
-		"@types/node": "^22.12.0",
+		"@types/node": "^22.13.0",
 		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
 		"@u-elements/u-datalist": "0.1.2",