@mattilsynet/design 2.2.1 → 2.2.2

package/mtds/map/map.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/mtds/package.json.js

@@ -1,4 +1,4 @@
-const o = "2.2.1";
+const o = "2.2.2";
 export {
   o as version
 };

package/mtds/popover/popover-observer.js

@@ -1,16 +1,16 @@
-import { flip as g, shift as m, size as f } from "../external/@floating-ui/dom/dist/floating-ui.dom.js";
+import { flip as g, shift as f, size as m } from "../external/@floating-ui/dom/dist/floating-ui.dom.js";
 import v from "../styles.module.css.js";
-import { onLoaded as u, on as c, QUICK_EVENT as r, attr as s, anchorPosition as d } from "../utils.js";
+import { onLoaded as u, on as c, QUICK_EVENT as r, attr as a, anchorPosition as d } from "../utils.js";
 const p = v.popover.split(" ")[0], l = "_mtds-popover-auto";
 function h({ target: o, newState: t }) {
   if (o instanceof HTMLElement && o.classList.contains(p)) {
-    const a = t === "closed", n = s(o, "data-overscroll") === "contain", e = o.getRootNode()?.querySelector(
+    const s = t === "closed", n = a(o, "data-overscroll") === "contain", e = o.getRootNode()?.querySelector(
       `[popovertarget="${o.id}"]`
     );
-    a ? d(o, !1) : e && d(o, e, {
-      placement: s(o, "data-position") || "bottom",
-      middleware: [g(), m({ padding: 10 })].concat(
-        n ? f({
+    s ? d(o, !1) : e && d(o, e, {
+      placement: a(o, "data-position") || "bottom",
+      middleware: [g(), f({ padding: 10 })].concat(
+        n ? m({
           padding: 10,
           apply({ availableHeight: i }) {
             o.style.maxHeight = `${Math.max(50, i)}px`;
@@ -21,14 +21,17 @@ function h({ target: o, newState: t }) {
   }
 }
 function P({ target: o, newState: t }) {
-  t === "open" && o instanceof HTMLElement && o.classList.contains(p) && s(o, "popover") !== "manual" && (o.classList.add(l), s(o, "popover", "manual"));
+  t === "open" && o instanceof HTMLElement && o.classList.contains(p) && a(o, "popover") !== "manual" && (o.classList.add(l), a(o, "popover", "manual"));
 }
-function C({ target: o }) {
-  const t = o?.closest?.("a,[popovertargetaction]"), a = t && s(t, "popovertarget"), n = a ? document.getElementById(a) : t?.closest(`.${p}`);
+function C(o) {
+  const t = o.target?.closest?.(
+    "a,button,[popovertargetaction]"
+  ), s = t && a(t, "popovertarget"), n = s ? document.getElementById(s) : t?.closest(`.${p}`);
   for (const e of document.getElementsByClassName(l))
-    e.contains(o) || e.hidePopover();
+    !e.contains(o.target) && n !== e && e.hidePopover();
   if (n && t) {
-    const e = s(t, "popovertargetaction") || "toggle", i = e === "show" || (e === "hide" ? !1 : void 0);
+    o.preventDefault();
+    const e = a(t, "popovertargetaction") || "toggle", i = e === "show" || (e === "hide" ? !1 : void 0);
     n instanceof HTMLElement && n.isConnected && n.togglePopover && n.togglePopover(i);
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"popover-observer.js","sources":["../../designsystem/popover/popover-observer.ts"],"sourcesContent":["import { flip, type Placement, shift, size } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport { anchorPosition, attr, on, onLoaded, QUICK_EVENT } from \"../utils\";\n\nconst CSS_POPOVER = styles.popover.split(\" \")[0];\nconst CSS_AUTO = `_mtds-popover-auto`;\n\ntype EventToggle = Event & Partial<ToggleEvent>;\n\nfunction handlePopoverToggle({ target: el, newState }: EventToggle) {\n\tif (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n\t\tconst isClosing = newState === \"closed\";\n\t\tconst isContain = attr(el, \"data-overscroll\") === \"contain\";\n\t\tconst anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (isClosing) anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tplacement: (attr(el, \"data-position\") || \"bottom\") as Placement,\n\t\t\t\tmiddleware: [flip(), shift({ padding: 10 })].concat(\n\t\t\t\t\tisContain\n\t\t\t\t\t\t? size({\n\t\t\t\t\t\t\t\tpadding: 10,\n\t\t\t\t\t\t\t\tapply({ availableHeight }) {\n\t\t\t\t\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t: [],\n\t\t\t\t),\n\t\t\t});\n\t}\n}\n\nfunction handlePopoverBeforetoggle({ target: el, newState }: EventToggle) {\n\tif (\n\t\tnewState === \"open\" &&\n\t\tel instanceof HTMLElement &&\n\t\tel.classList.contains(CSS_POPOVER) &&\n\t\tattr(el, \"popover\") !== \"manual\"\n\t) {\n\t\tel.classList.add(CSS_AUTO);\n\t\tattr(el, \"popover\", \"manual\"); // Make manual to prevent closing when clicking scrollbar\n\t}\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handlePopoverLinkClick({ target }: Event) {\n\tconst el = (target as Element)?.closest?.(\"a,[popovertargetaction]\");\n\tconst id = el && attr(el, \"popovertarget\");\n\tconst pop = id ? document.getElementById(id) : el?.closest(`.${CSS_POPOVER}`);\n\n\t// Manually close popovers where click was outside\n\tfor (const el of document.getElementsByClassName(CSS_AUTO))\n\t\tel.contains(target as Node) || (el as HTMLElement).hidePopover();\n\n\tif (pop && el) {\n\t\tconst action = attr(el, \"popovertargetaction\") || \"toggle\";\n\t\tconst open = action === \"show\" || (action === \"hide\" ? false : undefined);\n\n\t\t// Popover can be disconneted by click handler deeper down in the DOM three before reaching document\n\t\tif (pop instanceof HTMLElement && pop.isConnected && pop.togglePopover)\n\t\t\tpop.togglePopover(open);\n\t}\n}\n\nonLoaded(() => {\n\ton(document, \"click\", handlePopoverLinkClick); // Allow `<a>` to use `popovertarget` as well\n\ton(document, \"toggle\", handlePopoverToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n\ton(document, \"beforetoggle\", handlePopoverBeforetoggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_POPOVER","styles","CSS_AUTO","handlePopoverToggle","el","newState","isClosing","isContain","attr","anchor","anchorPosition","flip","shift","size","availableHeight","handlePopoverBeforetoggle","handlePopoverLinkClick","target","id","pop","action","open","onLoaded","on","QUICK_EVENT"],"mappings":";;;AAIA,MAAMA,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC,GACzCC,IAAW;AAIjB,SAASC,EAAoB,EAAE,QAAQC,GAAI,UAAAC,KAAyB;AACnE,MAAID,aAAc,eAAeA,EAAG,UAAU,SAASJ,CAAW,GAAG;AACpE,UAAMM,IAAYD,MAAa,UACzBE,IAAYC,EAAKJ,GAAI,iBAAiB,MAAM,WAC5CK,IAAUL,EAAG,YAAA,GAA8B;AAAA,MAChD,mBAAmBA,EAAG,EAAE;AAAA,IAAA;AAGzB,IAAIE,IAAWI,EAAeN,GAAI,EAAK,IAC9BK,KACRC,EAAeN,GAAIK,GAAQ;AAAA,MAC1B,WAAYD,EAAKJ,GAAI,eAAe,KAAK;AAAA,MACzC,YAAY,CAACO,EAAA,GAAQC,EAAM,EAAE,SAAS,GAAA,CAAI,CAAC,EAAE;AAAA,QAC5CL,IACGM,EAAK;AAAA,UACL,SAAS;AAAA,UACT,MAAM,EAAE,iBAAAC,KAAmB;AAC1B,YAAAV,EAAG,MAAM,YAAY,GAAG,KAAK,IAAI,IAAIU,CAAe,CAAC;AAAA,UACtD;AAAA,QAAA,CACA,IACA,CAAA;AAAA,MAAC;AAAA,IACL,CACA;AAAA,EACH;AACD;AAEA,SAASC,EAA0B,EAAE,QAAQX,GAAI,UAAAC,KAAyB;AACzE,EACCA,MAAa,UACbD,aAAc,eACdA,EAAG,UAAU,SAASJ,CAAW,KACjCQ,EAAKJ,GAAI,SAAS,MAAM,aAExBA,EAAG,UAAU,IAAIF,CAAQ,GACzBM,EAAKJ,GAAI,WAAW,QAAQ;AAE9B;AAKA,SAASY,EAAuB,EAAE,QAAAC,KAAiB;AAClD,QAAMb,IAAMa,GAAoB,UAAU,yBAAyB,GAC7DC,IAAKd,KAAMI,EAAKJ,GAAI,eAAe,GACnCe,IAAMD,IAAK,SAAS,eAAeA,CAAE,IAAId,GAAI,QAAQ,IAAIJ,CAAW,EAAE;AAG5E,aAAWI,KAAM,SAAS,uBAAuBF,CAAQ;AACxDE,IAAAA,EAAG,SAASa,CAAc,KAAMb,EAAmB,YAAA;AAEpD,MAAIe,KAAOf,GAAI;AACd,UAAMgB,IAASZ,EAAKJ,GAAI,qBAAqB,KAAK,UAC5CiB,IAAOD,MAAW,WAAWA,MAAW,SAAS,KAAQ;AAG/D,IAAID,aAAe,eAAeA,EAAI,eAAeA,EAAI,iBACxDA,EAAI,cAAcE,CAAI;AAAA,EACxB;AACD;AAEAC,EAAS,MAAM;AACd,EAAAC,EAAG,UAAU,SAASP,CAAsB,GAC5CO,EAAG,UAAU,UAAUpB,GAAqBqB,CAAW,GACvDD,EAAG,UAAU,gBAAgBR,GAA2BS,CAAW;AACpE,CAAC;"}
+{"version":3,"file":"popover-observer.js","sources":["../../designsystem/popover/popover-observer.ts"],"sourcesContent":["import { flip, type Placement, shift, size } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport { anchorPosition, attr, on, onLoaded, QUICK_EVENT } from \"../utils\";\n\nconst CSS_POPOVER = styles.popover.split(\" \")[0];\nconst CSS_AUTO = `_mtds-popover-auto`;\n\ntype EventToggle = Event & Partial<ToggleEvent>;\n\nfunction handlePopoverToggle({ target: el, newState }: EventToggle) {\n\tif (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n\t\tconst isClosing = newState === \"closed\";\n\t\tconst isContain = attr(el, \"data-overscroll\") === \"contain\";\n\t\tconst anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (isClosing) anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tplacement: (attr(el, \"data-position\") || \"bottom\") as Placement,\n\t\t\t\tmiddleware: [flip(), shift({ padding: 10 })].concat(\n\t\t\t\t\tisContain\n\t\t\t\t\t\t? size({\n\t\t\t\t\t\t\t\tpadding: 10,\n\t\t\t\t\t\t\t\tapply({ availableHeight }) {\n\t\t\t\t\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t: [],\n\t\t\t\t),\n\t\t\t});\n\t}\n}\n\nfunction handlePopoverBeforetoggle({ target: el, newState }: EventToggle) {\n\tif (\n\t\tnewState === \"open\" &&\n\t\tel instanceof HTMLElement &&\n\t\tel.classList.contains(CSS_POPOVER) &&\n\t\tattr(el, \"popover\") !== \"manual\"\n\t) {\n\t\tel.classList.add(CSS_AUTO);\n\t\tattr(el, \"popover\", \"manual\"); // Make manual to prevent closing when clicking scrollbar\n\t}\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handlePopoverLinkClick(event: Event) {\n\tconst el = (event.target as Element)?.closest?.(\n\t\t\"a,button,[popovertargetaction]\",\n\t);\n\tconst id = el && attr(el, \"popovertarget\");\n\tconst pop = id ? document.getElementById(id) : el?.closest(`.${CSS_POPOVER}`);\n\n\t// Manually close popovers where click was outside\n\tfor (const open of document.getElementsByClassName(CSS_AUTO))\n\t\tif (!open.contains(event.target as Node) && pop !== open)\n\t\t\t(open as HTMLElement).hidePopover();\n\n\tif (pop && el) {\n\t\tevent.preventDefault(); // Prevent browser popover API\n\t\tconst action = attr(el, \"popovertargetaction\") || \"toggle\";\n\t\tconst open = action === \"show\" || (action === \"hide\" ? false : undefined);\n\n\t\t// Popover can be disconneted by click handler deeper down in the DOM three before reaching document\n\t\tif (pop instanceof HTMLElement && pop.isConnected && pop.togglePopover)\n\t\t\tpop.togglePopover(open);\n\t}\n}\n\nonLoaded(() => {\n\ton(document, \"click\", handlePopoverLinkClick); // Allow `<a>` to use `popovertarget` as well\n\ton(document, \"toggle\", handlePopoverToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n\ton(document, \"beforetoggle\", handlePopoverBeforetoggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_POPOVER","styles","CSS_AUTO","handlePopoverToggle","el","newState","isClosing","isContain","attr","anchor","anchorPosition","flip","shift","size","availableHeight","handlePopoverBeforetoggle","handlePopoverLinkClick","event","id","pop","open","action","onLoaded","on","QUICK_EVENT"],"mappings":";;;AAIA,MAAMA,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC,GACzCC,IAAW;AAIjB,SAASC,EAAoB,EAAE,QAAQC,GAAI,UAAAC,KAAyB;AACnE,MAAID,aAAc,eAAeA,EAAG,UAAU,SAASJ,CAAW,GAAG;AACpE,UAAMM,IAAYD,MAAa,UACzBE,IAAYC,EAAKJ,GAAI,iBAAiB,MAAM,WAC5CK,IAAUL,EAAG,YAAA,GAA8B;AAAA,MAChD,mBAAmBA,EAAG,EAAE;AAAA,IAAA;AAGzB,IAAIE,IAAWI,EAAeN,GAAI,EAAK,IAC9BK,KACRC,EAAeN,GAAIK,GAAQ;AAAA,MAC1B,WAAYD,EAAKJ,GAAI,eAAe,KAAK;AAAA,MACzC,YAAY,CAACO,EAAA,GAAQC,EAAM,EAAE,SAAS,GAAA,CAAI,CAAC,EAAE;AAAA,QAC5CL,IACGM,EAAK;AAAA,UACL,SAAS;AAAA,UACT,MAAM,EAAE,iBAAAC,KAAmB;AAC1B,YAAAV,EAAG,MAAM,YAAY,GAAG,KAAK,IAAI,IAAIU,CAAe,CAAC;AAAA,UACtD;AAAA,QAAA,CACA,IACA,CAAA;AAAA,MAAC;AAAA,IACL,CACA;AAAA,EACH;AACD;AAEA,SAASC,EAA0B,EAAE,QAAQX,GAAI,UAAAC,KAAyB;AACzE,EACCA,MAAa,UACbD,aAAc,eACdA,EAAG,UAAU,SAASJ,CAAW,KACjCQ,EAAKJ,GAAI,SAAS,MAAM,aAExBA,EAAG,UAAU,IAAIF,CAAQ,GACzBM,EAAKJ,GAAI,WAAW,QAAQ;AAE9B;AAKA,SAASY,EAAuBC,GAAc;AAC7C,QAAMb,IAAMa,EAAM,QAAoB;AAAA,IACrC;AAAA,EAAA,GAEKC,IAAKd,KAAMI,EAAKJ,GAAI,eAAe,GACnCe,IAAMD,IAAK,SAAS,eAAeA,CAAE,IAAId,GAAI,QAAQ,IAAIJ,CAAW,EAAE;AAG5E,aAAWoB,KAAQ,SAAS,uBAAuBlB,CAAQ;AAC1D,IAAI,CAACkB,EAAK,SAASH,EAAM,MAAc,KAAKE,MAAQC,KAClDA,EAAqB,YAAA;AAExB,MAAID,KAAOf,GAAI;AACd,IAAAa,EAAM,eAAA;AACN,UAAMI,IAASb,EAAKJ,GAAI,qBAAqB,KAAK,UAC5CgB,IAAOC,MAAW,WAAWA,MAAW,SAAS,KAAQ;AAG/D,IAAIF,aAAe,eAAeA,EAAI,eAAeA,EAAI,iBACxDA,EAAI,cAAcC,CAAI;AAAA,EACxB;AACD;AAEAE,EAAS,MAAM;AACd,EAAAC,EAAG,UAAU,SAASP,CAAsB,GAC5CO,EAAG,UAAU,UAAUpB,GAAqBqB,CAAW,GACvDD,EAAG,UAAU,gBAAgBR,GAA2BS,CAAW;AACpE,CAAC;"}