@mattilsynet/design 2.3.1 → 2.3.2

package/mtds/table/table-observer.d.ts

@@ -1 +1 @@
-export {};
+export declare const handleClickDelegateFor: (event: MouseEvent) => void;

package/mtds/table/table-observer.js

@@ -1,25 +1,46 @@
-import r from "../styles.module.css.js";
-import { isBrowser as s, onLoaded as a, on as l, onMutation as i, attr as f } from "../utils.js";
-const m = r.table.split(" ")[0], d = 'a,button,label,input,select,textarea,[role="button"]', u = s() ? document.getElementsByClassName(m) : [];
-function b() {
-  for (const t of u) {
-    const e = Array.from(
+import d from "../styles.module.css.js";
+import { isBrowser as f, onLoaded as a, on as l, onMutation as u, attr as m } from "../utils.js";
+const g = d.table.split(" ")[0], T = 'a,button,label,input,select,textarea,[role="button"]', b = f() ? document.getElementsByClassName(g) : [];
+function E() {
+  for (const t of b) {
+    const o = Array.from(
       t.tHead?.rows[0]?.cells || [],
-      (o) => o.innerText.trim()
+      (c) => c.innerText.trim()
     );
-    for (const o of t.tBodies)
-      for (const c of o.rows)
-        for (const n of c.cells)
-          f(n, "data-th", e[n.cellIndex] || ":empty");
+    for (const c of t.tBodies)
+      for (const e of c.rows)
+        for (const s of e.cells)
+          m(s, "data-th", o[s.cellIndex] || ":empty");
   }
 }
-function w({ target: t }) {
+function p({ target: t }) {
   if (!(t instanceof Element)) return;
-  const o = t.closest("tr")?.querySelector('[data-command="row"]');
-  o && !t.closest(d) && o.click?.();
+  const c = t.closest("tr")?.querySelector('[data-command="row"]');
+  c && !t.closest(T) && c.click?.();
 }
 a(() => [
-  l(document, "click", w),
-  i(b, "data-mobile")
+  l(document, "click", p),
+  u(E, "data-mobile")
 ]);
+const r = "data-clickdelegatefor", k = `[${r}]`, L = 'a,button,label,input,select,textarea,dialog,[role="button"],[popover],[contenteditable]', w = (t) => {
+  const o = t.button === 1 || t.metaKey || t.ctrlKey, e = t.isTrusted && t.button < 2 && i(t);
+  e instanceof HTMLAnchorElement && o ? window.open(e.href, void 0, e.rel) : e instanceof HTMLElement && !e.contains(t.target) && (t.stopImmediatePropagation(), e.click());
+};
+let n;
+const C = (t) => {
+  const o = i(t);
+  n !== o && (n && n.classList.remove(":click-delegate-hover"), o && o.classList.add(":click-delegate-hover"), n = o);
+}, i = ({ target: t }) => {
+  const c = (t instanceof Element ? t.closest(k) : null)?.getAttribute(r), e = document.getElementById(c || ""), s = e && t.closest(L);
+  return (!s || s === e) && e || void 0;
+};
+a(() => [
+  l(window, "click,auxclick", w, !0),
+  // Use capture to ensure we run before other click listeners
+  l(document, "mouseover", C, { passive: !0 })
+  // Use passive for better performance
+]);
+export {
+  w as handleClickDelegateFor
+};
 //# sourceMappingURL=table-observer.js.map

package/mtds/table/table-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-observer.js","sources":["../../designsystem/table/table-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isBrowser, on, onLoaded, onMutation } from \"../utils\";\n\nconst CSS_TABLE = styles.table.split(\" \")[0];\nconst INTERACTIVE = 'a,button,label,input,select,textarea,[role=\"button\"]';\nconst TABLES = isBrowser() ? document.getElementsByClassName(CSS_TABLE) : [];\n\nfunction handleTableMutation() {\n\tfor (const table of TABLES as HTMLCollectionOf<HTMLTableElement>) {\n\t\tconst ths = Array.from(table.tHead?.rows[0]?.cells || [], (th) =>\n\t\t\tth.innerText.trim(),\n\t\t);\n\n\t\tfor (const tbody of table.tBodies)\n\t\t\tfor (const row of tbody.rows)\n\t\t\t\tfor (const cell of row.cells)\n\t\t\t\t\tattr(cell, \"data-th\", ths[cell.cellIndex] || \":empty\");\n\t}\n}\n\nfunction handleTableClick({ target: el }: Event) {\n\tif (!(el instanceof Element)) return;\n\tconst row = el.closest(\"tr\");\n\tconst action = row?.querySelector<HTMLInputElement>('[data-command=\"row\"]');\n\tif (action && !el.closest(INTERACTIVE)) action.click?.(); // Forward click to data-command=\"row\" element\n}\n\nonLoaded(() => [\n\ton(document, \"click\", handleTableClick),\n\tonMutation(handleTableMutation, \"data-mobile\"),\n]);\n"],"names":["CSS_TABLE","styles","INTERACTIVE","TABLES","isBrowser","handleTableMutation","table","ths","th","tbody","row","cell","attr","handleTableClick","el","action","onLoaded","on","onMutation"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAc,wDACdC,IAASC,EAAA,IAAc,SAAS,uBAAuBJ,CAAS,IAAI,CAAA;AAE1E,SAASK,IAAsB;AAC9B,aAAWC,KAASH,GAA8C;AACjE,UAAMI,IAAM,MAAM;AAAA,MAAKD,EAAM,OAAO,KAAK,CAAC,GAAG,SAAS,CAAA;AAAA,MAAI,CAACE,MAC1DA,EAAG,UAAU,KAAA;AAAA,IAAK;AAGnB,eAAWC,KAASH,EAAM;AACzB,iBAAWI,KAAOD,EAAM;AACvB,mBAAWE,KAAQD,EAAI;AACtB,UAAAE,EAAKD,GAAM,WAAWJ,EAAII,EAAK,SAAS,KAAK,QAAQ;AAAA,EACzD;AACD;AAEA,SAASE,EAAiB,EAAE,QAAQC,KAAa;AAChD,MAAI,EAAEA,aAAc,SAAU;AAE9B,QAAMC,IADMD,EAAG,QAAQ,IAAI,GACP,cAAgC,sBAAsB;AAC1E,EAAIC,KAAU,CAACD,EAAG,QAAQZ,CAAW,OAAU,QAAA;AAChD;AAEAc,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,SAASJ,CAAgB;AAAA,EACtCK,EAAWb,GAAqB,aAAa;AAC9C,CAAC;"}
+{"version":3,"file":"table-observer.js","sources":["../../designsystem/table/table-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isBrowser, on, onLoaded, onMutation } from \"../utils\";\n\nconst CSS_TABLE = styles.table.split(\" \")[0];\nconst INTERACTIVE = 'a,button,label,input,select,textarea,[role=\"button\"]';\nconst TABLES = isBrowser() ? document.getElementsByClassName(CSS_TABLE) : [];\n\nfunction handleTableMutation() {\n\tfor (const table of TABLES as HTMLCollectionOf<HTMLTableElement>) {\n\t\tconst ths = Array.from(table.tHead?.rows[0]?.cells || [], (th) =>\n\t\t\tth.innerText.trim(),\n\t\t);\n\n\t\tfor (const tbody of table.tBodies)\n\t\t\tfor (const row of tbody.rows)\n\t\t\t\tfor (const cell of row.cells)\n\t\t\t\t\tattr(cell, \"data-th\", ths[cell.cellIndex] || \":empty\");\n\t}\n}\n\nfunction handleTableClick({ target: el }: Event) {\n\tif (!(el instanceof Element)) return;\n\tconst row = el.closest(\"tr\");\n\tconst action = row?.querySelector<HTMLInputElement>('[data-command=\"row\"]');\n\tif (action && !el.closest(INTERACTIVE)) action.click?.(); // Forward click to data-command=\"row\" element\n}\n\nonLoaded(() => [\n\ton(document, \"click\", handleTableClick),\n\tonMutation(handleTableMutation, \"data-mobile\"),\n]);\n\n// Adding support for click deletagtion, following\n// https://open-ui.org/components/link-area-delegation-explainer/\n// and https://github.com/openui/open-ui/issues/1104#issuecomment-3151387080\nconst ATTR_CLICKDELEGATEFOR = \"data-clickdelegatefor\";\nconst CSS_CLICKDELEGATEFOR = `[${ATTR_CLICKDELEGATEFOR}]`;\nconst SKIP =\n\t'a,button,label,input,select,textarea,dialog,[role=\"button\"],[popover],[contenteditable]';\n\nexport const handleClickDelegateFor = (event: MouseEvent) => {\n\tconst isNewTab = event.button === 1 || event.metaKey || event.ctrlKey;\n\tconst isUserLeftOrMiddleClick = event.isTrusted && event.button < 2;\n\tconst delegateTarget = isUserLeftOrMiddleClick && getDelegateTarget(event);\n\n\tif (delegateTarget instanceof HTMLAnchorElement && isNewTab)\n\t\twindow.open(delegateTarget.href, undefined, delegateTarget.rel); // If middle click or cmd/ctrl click on link, open in new tab\n\telse if (\n\t\tdelegateTarget instanceof HTMLElement &&\n\t\t!delegateTarget.contains(event.target as Node) // Only proxy event if delegated target isn't the original target\n\t) {\n\t\tevent.stopImmediatePropagation(); // We'll trigger a new click event anyway, so prevent actions on this one\n\t\tdelegateTarget.click(); // Forward click to the clickable element\n\t}\n};\n\nlet HOVER: Element | undefined;\nconst handleDelegateMouseOver = (event: Event) => {\n\tconst delegateTarget = getDelegateTarget(event);\n\tif (HOVER === delegateTarget) return; // No change\n\tif (HOVER) HOVER.classList.remove(\":click-delegate-hover\");\n\tif (delegateTarget) delegateTarget.classList.add(\":click-delegate-hover\");\n\tHOVER = delegateTarget;\n};\n\nconst getDelegateTarget = ({ target: el }: Event) => {\n\tconst scope = el instanceof Element ? el.closest(CSS_CLICKDELEGATEFOR) : null;\n\tconst id = scope?.getAttribute(ATTR_CLICKDELEGATEFOR);\n\tconst target = document.getElementById(id || \"\");\n\tconst skip = target && (el as Element).closest(SKIP); // Ignore if interactive\n\n\treturn ((!skip || skip === target) && target) || undefined;\n};\n\nonLoaded(() => [\n\ton(window, \"click,auxclick\", handleClickDelegateFor as EventListener, true), // Use capture to ensure we run before other click listeners\n\ton(document, \"mouseover\", handleDelegateMouseOver, { passive: true }), // Use passive for better performance\n]);\n"],"names":["CSS_TABLE","styles","INTERACTIVE","TABLES","isBrowser","handleTableMutation","table","ths","th","tbody","row","cell","attr","handleTableClick","el","action","onLoaded","on","onMutation","ATTR_CLICKDELEGATEFOR","CSS_CLICKDELEGATEFOR","SKIP","handleClickDelegateFor","event","isNewTab","delegateTarget","getDelegateTarget","HOVER","handleDelegateMouseOver","id","target","skip"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAc,wDACdC,IAASC,EAAA,IAAc,SAAS,uBAAuBJ,CAAS,IAAI,CAAA;AAE1E,SAASK,IAAsB;AAC9B,aAAWC,KAASH,GAA8C;AACjE,UAAMI,IAAM,MAAM;AAAA,MAAKD,EAAM,OAAO,KAAK,CAAC,GAAG,SAAS,CAAA;AAAA,MAAI,CAACE,MAC1DA,EAAG,UAAU,KAAA;AAAA,IAAK;AAGnB,eAAWC,KAASH,EAAM;AACzB,iBAAWI,KAAOD,EAAM;AACvB,mBAAWE,KAAQD,EAAI;AACtB,UAAAE,EAAKD,GAAM,WAAWJ,EAAII,EAAK,SAAS,KAAK,QAAQ;AAAA,EACzD;AACD;AAEA,SAASE,EAAiB,EAAE,QAAQC,KAAa;AAChD,MAAI,EAAEA,aAAc,SAAU;AAE9B,QAAMC,IADMD,EAAG,QAAQ,IAAI,GACP,cAAgC,sBAAsB;AAC1E,EAAIC,KAAU,CAACD,EAAG,QAAQZ,CAAW,OAAU,QAAA;AAChD;AAEAc,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,SAASJ,CAAgB;AAAA,EACtCK,EAAWb,GAAqB,aAAa;AAC9C,CAAC;AAKD,MAAMc,IAAwB,yBACxBC,IAAuB,IAAID,CAAqB,KAChDE,IACL,2FAEYC,IAAyB,CAACC,MAAsB;AAC5D,QAAMC,IAAWD,EAAM,WAAW,KAAKA,EAAM,WAAWA,EAAM,SAExDE,IAD0BF,EAAM,aAAaA,EAAM,SAAS,KAChBG,EAAkBH,CAAK;AAEzE,EAAIE,aAA0B,qBAAqBD,IAClD,OAAO,KAAKC,EAAe,MAAM,QAAWA,EAAe,GAAG,IAE9DA,aAA0B,eAC1B,CAACA,EAAe,SAASF,EAAM,MAAc,MAE7CA,EAAM,yBAAA,GACNE,EAAe,MAAA;AAEjB;AAEA,IAAIE;AACJ,MAAMC,IAA0B,CAACL,MAAiB;AACjD,QAAME,IAAiBC,EAAkBH,CAAK;AAC9C,EAAII,MAAUF,MACVE,KAAOA,EAAM,UAAU,OAAO,uBAAuB,GACrDF,KAAgBA,EAAe,UAAU,IAAI,uBAAuB,GACxEE,IAAQF;AACT,GAEMC,IAAoB,CAAC,EAAE,QAAQZ,QAAgB;AAEpD,QAAMe,KADQf,aAAc,UAAUA,EAAG,QAAQM,CAAoB,IAAI,OACvD,aAAaD,CAAqB,GAC9CW,IAAS,SAAS,eAAeD,KAAM,EAAE,GACzCE,IAAOD,KAAWhB,EAAe,QAAQO,CAAI;AAEnD,UAAS,CAACU,KAAQA,MAASD,MAAWA,KAAW;AAClD;AAEAd,EAAS,MAAM;AAAA,EACdC,EAAG,QAAQ,kBAAkBK,GAAyC,EAAI;AAAA;AAAA,EAC1EL,EAAG,UAAU,aAAaW,GAAyB,EAAE,SAAS,IAAM;AAAA;AACrE,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "2.3.1",
+	"version": "2.3.2",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -68,8 +68,8 @@
 		"@turf/helpers": "^7.3.1",
 		"@types/leaflet": "^1.9.21",
 		"@types/leaflet.markercluster": "^1.5.6",
-		"@types/node": "^25.0.3",
-		"@types/react": "^19.2.7",
+		"@types/node": "^25.0.6",
+		"@types/react": "^19.2.8",
 		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^5.1.2",
 		"fast-glob": "^3.3.3",