@mattilsynet/design 2.2.5 → 2.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (97) hide show
  1. package/mtds/alert/alert.js +1 -1
  2. package/mtds/app/app.d.ts +1 -1
  3. package/mtds/app/app.js +10 -41
  4. package/mtds/app/app.js.map +1 -1
  5. package/mtds/avatar/avatar.js +1 -1
  6. package/mtds/badge/badge.js +1 -1
  7. package/mtds/breadcrumbs/breadcrumbs.js +1 -1
  8. package/mtds/button/button.js +1 -1
  9. package/mtds/card/card.js +1 -1
  10. package/mtds/chart/chart-element.d.ts +1 -1
  11. package/mtds/chart/chart-element.js +5 -5
  12. package/mtds/chart/chart-element.js.map +1 -1
  13. package/mtds/chart/chart-lines.d.ts +1 -1
  14. package/mtds/chart/chart-lines.js +30 -30
  15. package/mtds/chart/chart-lines.js.map +1 -1
  16. package/mtds/chart/chart.css.js +10 -4
  17. package/mtds/chart/chart.css.js.map +1 -1
  18. package/mtds/chart/chart.d.ts +2 -2
  19. package/mtds/chart/chart.js.map +1 -1
  20. package/mtds/chart/chart.stories.d.ts +1 -1
  21. package/mtds/chip/chip.js +1 -1
  22. package/mtds/details/details.d.ts +2 -0
  23. package/mtds/details/details.js.map +1 -1
  24. package/mtds/dialog/dialog.js +1 -1
  25. package/mtds/divider/divider.js +1 -1
  26. package/mtds/errorsummary/errorsummary.js +1 -1
  27. package/mtds/field/field-observer.js +3 -3
  28. package/mtds/field/field.d.ts +3 -5
  29. package/mtds/field/field.js +69 -99
  30. package/mtds/field/field.js.map +1 -1
  31. package/mtds/fieldset/fieldset.js +1 -1
  32. package/mtds/helptext/helptext.js +1 -1
  33. package/mtds/index.d.ts +1 -0
  34. package/mtds/index.iife.js +19 -14
  35. package/mtds/index.js +5 -5
  36. package/mtds/input/input.js +1 -1
  37. package/mtds/layout/layout.js +1 -1
  38. package/mtds/link/link.js +1 -1
  39. package/mtds/logo/logo.js +1 -1
  40. package/mtds/map/map-element.d.ts +43 -0
  41. package/mtds/map/map-element.js +66 -0
  42. package/mtds/map/map-element.js.map +1 -0
  43. package/mtds/map/map.css.js +22 -0
  44. package/mtds/map/map.css.js.map +1 -0
  45. package/mtds/map.d.ts +1 -0
  46. package/mtds/map.iife.js +683 -0
  47. package/mtds/map.js +6 -0
  48. package/mtds/map.js.map +1 -0
  49. package/mtds/package.json.js +1 -1
  50. package/mtds/pagination/pagination.d.ts +1 -1
  51. package/mtds/pagination/pagination.js +20 -51
  52. package/mtds/pagination/pagination.js.map +1 -1
  53. package/mtds/popover/popover-observer.js +2 -3
  54. package/mtds/popover/popover-observer.js.map +1 -1
  55. package/mtds/popover/popover.d.ts +2 -2
  56. package/mtds/popover/popover.js +1 -1
  57. package/mtds/popover/popover.js.map +1 -1
  58. package/mtds/react-types.d.ts +2 -3
  59. package/mtds/skeleton/skeleton.js +1 -1
  60. package/mtds/spinner/spinner.js +1 -1
  61. package/mtds/steps/steps.js +1 -1
  62. package/mtds/styles.css +1 -1
  63. package/mtds/styles.json +42 -41
  64. package/mtds/styles.module.css.js +102 -100
  65. package/mtds/styles.module.css.js.map +1 -1
  66. package/mtds/table/table.js +1 -1
  67. package/mtds/tag/tag.js +1 -1
  68. package/mtds/tailwind.css +5 -0
  69. package/mtds/toast/toast-helper.js +1 -1
  70. package/mtds/toast/toast.js +1 -1
  71. package/mtds/togglegroup/togglegroup.js +1 -1
  72. package/mtds/tooltip/tooltip-observer.js +1 -1
  73. package/mtds/typography/typography.js +1 -1
  74. package/mtds/utils.js +2 -2
  75. package/mtds/validation/validation.js +1 -1
  76. package/package.json +15 -9
  77. package/mtds/external/@floating-ui/core/dist/floating-ui.core.js +0 -342
  78. package/mtds/external/@floating-ui/core/dist/floating-ui.core.js.map +0 -1
  79. package/mtds/external/@floating-ui/dom/dist/floating-ui.dom.js +0 -399
  80. package/mtds/external/@floating-ui/dom/dist/floating-ui.dom.js.map +0 -1
  81. package/mtds/external/@floating-ui/utils/dist/floating-ui.utils.dom.js +0 -137
  82. package/mtds/external/@floating-ui/utils/dist/floating-ui.utils.dom.js.map +0 -1
  83. package/mtds/external/@floating-ui/utils/dist/floating-ui.utils.js +0 -130
  84. package/mtds/external/@floating-ui/utils/dist/floating-ui.utils.js.map +0 -1
  85. package/mtds/external/@u-elements/u-combobox/dist/u-combobox.js +0 -266
  86. package/mtds/external/@u-elements/u-combobox/dist/u-combobox.js.map +0 -1
  87. package/mtds/external/@u-elements/u-datalist/dist/u-datalist.js +0 -231
  88. package/mtds/external/@u-elements/u-datalist/dist/u-datalist.js.map +0 -1
  89. package/mtds/external/@u-elements/u-details/dist/u-details.js +0 -89
  90. package/mtds/external/@u-elements/u-details/dist/u-details.js.map +0 -1
  91. package/mtds/external/@u-elements/u-progress/dist/u-progress.js +0 -94
  92. package/mtds/external/@u-elements/u-progress/dist/u-progress.js.map +0 -1
  93. package/mtds/external/@u-elements/u-tabs/dist/u-tabs.js +0 -186
  94. package/mtds/external/@u-elements/u-tabs/dist/u-tabs.js.map +0 -1
  95. package/mtds/external/clsx/dist/clsx.js +0 -18
  96. package/mtds/external/clsx/dist/clsx.js.map +0 -1
  97. package/mtds/map/map.d.ts +0 -4
package/mtds/map.js ADDED
@@ -0,0 +1,6 @@
1
+ import { MTDSMapElement as t, getPunktFraAdresse as a } from "./map/map-element.js";
2
+ export {
3
+ t as MTDSMapElement,
4
+ a as getPunktFraAdresse
5
+ };
6
+ //# sourceMappingURL=map.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"map.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,4 +1,4 @@
1
- const o = "2.2.5";
1
+ const o = "2.2.7";
2
2
  export {
3
3
  o as version
4
4
  };
@@ -1,4 +1,4 @@
1
- import { Button } from '../react';
1
+ import { Button } from '../button/button';
2
2
  export type PaginationProps = Omit<React.ComponentPropsWithoutRef<"nav">, "children"> & ({
3
3
  children?: never;
4
4
  current: number;
@@ -1,71 +1,40 @@
1
1
  import { jsx as i, jsxs as u } from "react/jsx-runtime";
2
- import { clsx as x } from "../external/clsx/dist/clsx.js";
2
+ import x from "clsx";
3
3
  import { forwardRef as b } from "react";
4
- import "../alert/alert.js";
5
- import "../app/app.js";
6
- import "../avatar/avatar.js";
7
- import "../badge/badge.js";
8
- import "../breadcrumbs/breadcrumbs.js";
9
- import { Button as o } from "../button/button.js";
10
- import "../card/card.js";
11
- import "../chart/chart.js";
12
- import "../chip/chip.js";
13
- import "../details/details.js";
14
- import "../dialog/dialog.js";
15
- import "../divider/divider.js";
16
- import "../errorsummary/errorsummary.js";
17
- import "../field/field.js";
18
- import "../fieldset/fieldset.js";
19
- import "../helptext/helptext.js";
20
- import "../input/input.js";
21
- import "../layout/layout.js";
22
- import "../link/link.js";
23
- import "../logo/logo.js";
24
- import "../popover/popover.js";
25
- import "../progress/progress.js";
26
- import "../skeleton/skeleton.js";
27
- import "../spinner/spinner.js";
28
- import "../steps/steps.js";
29
- import "../table/table.js";
30
- import "../tabs/tabs.js";
31
- import "../tag/tag.js";
32
- import "../toast/toast.js";
33
- import "../togglegroup/togglegroup.js";
34
- import "../typography/typography.js";
35
- import "../validation/validation.js";
4
+ import { Button as n } from "../button/button.js";
36
5
  import y from "../styles.module.css.js";
37
6
  import { pagination as v } from "./pagination-helper.js";
38
- const pi = b(
39
- function({ children: n, className: e, current: l, total: c, show: d = 7, props: r, ...m }, s) {
40
- const { pages: f, next: p, prev: a } = v({ current: l, total: c, show: d });
7
+ const q = b(
8
+ function({ children: l, className: m, current: c, total: p, show: d = 7, props: a, ...e }, s) {
9
+ const { pages: f, next: t, prev: o } = v({ current: c, total: p, show: d });
41
10
  return /* @__PURE__ */ i(
42
11
  "nav",
43
12
  {
44
- "aria-label": m["aria-label"] || "Pagination",
45
- className: x(y.pagination, e),
13
+ "aria-label": e["aria-label"] || "Pagination",
14
+ className: x(y.pagination, m),
46
15
  ref: s,
47
- ...m,
48
- children: n || /* @__PURE__ */ u("ul", { children: [
16
+ ...e,
17
+ children: l || /* @__PURE__ */ u("ul", { children: [
49
18
  /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
50
- o,
19
+ n,
51
20
  {
52
- "aria-disabled": !a,
53
- ...r?.({ page: a, type: "prev" })
21
+ "aria-disabled": !o,
22
+ ...a?.({ page: o, type: "prev" })
54
23
  }
55
24
  ) }),
56
- f.map(({ key: g, page: t, current: h }) => /* @__PURE__ */ i("li", { children: !!t && /* @__PURE__ */ i(
57
- o,
25
+ f.map(({ key: g, page: r, current: h }) => /* @__PURE__ */ i("li", { children: !!r && /* @__PURE__ */ i(
26
+ n,
58
27
  {
59
28
  "aria-current": h,
60
- children: t,
61
- ...r?.({ page: t, type: "page" })
29
+ children: r,
30
+ ...a?.({ page: r, type: "page" })
62
31
  }
63
32
  ) }, g)),
64
33
  /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
65
- o,
34
+ n,
66
35
  {
67
- "aria-disabled": !p,
68
- ...r?.({ page: p, type: "next" })
36
+ "aria-disabled": !t,
37
+ ...a?.({ page: t, type: "next" })
69
38
  }
70
39
  ) })
71
40
  ] })
@@ -74,6 +43,6 @@ const pi = b(
74
43
  }
75
44
  );
76
45
  export {
77
- pi as Pagination
46
+ q as Pagination
78
47
  };
79
48
  //# sourceMappingURL=pagination.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pagination.js","sources":["../../designsystem/pagination/pagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button } from \"../react\";\nimport styles from \"../styles.module.css\";\nimport { pagination } from \"./pagination-helper\";\n\nexport type PaginationProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"nav\">,\n\t\"children\"\n> &\n\t(\n\t\t| {\n\t\t\t\tchildren?: never;\n\t\t\t\tcurrent: number;\n\t\t\t\tshow?: number;\n\t\t\t\ttotal: number;\n\t\t\t\tprops: (props: {\n\t\t\t\t\tpage: number;\n\t\t\t\t\ttype: \"prev\" | \"next\" | \"page\";\n\t\t\t\t}) => Parameters<typeof Button>[0];\n\t\t }\n\t\t| {\n\t\t\t\tchildren: React.ReactNode;\n\t\t\t\tcurrent?: never;\n\t\t\t\tshow?: never;\n\t\t\t\ttotal?: never;\n\t\t\t\tprops?: never;\n\t\t }\n\t);\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n\tfunction Pagination(\n\t\t{ children, className, current, total, show = 7, props, ...rest },\n\t\tref,\n\t) {\n\t\tconst { pages, next, prev } = pagination({ current, total, show });\n\n\t\treturn (\n\t\t\t<nav\n\t\t\t\taria-label={rest[\"aria-label\"] || \"Pagination\"}\n\t\t\t\tclassName={clsx(styles.pagination, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children || (\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\taria-disabled={!prev}\n\t\t\t\t\t\t\t\t{...props?.({ page: prev, type: \"prev\" })}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t{pages.map(({ key, page, current }) => (\n\t\t\t\t\t\t\t<li key={key}>\n\t\t\t\t\t\t\t\t{!!page && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\taria-current={current}\n\t\t\t\t\t\t\t\t\t\t{...{ children: page }}\n\t\t\t\t\t\t\t\t\t\t{...props?.({ page, type: \"page\" })}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\taria-disabled={!next}\n\t\t\t\t\t\t\t\t{...props?.({ page: next, type: \"next\" })}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\t\t\t</nav>\n\t\t);\n\t},\n);\n"],"names":["Pagination","forwardRef","children","className","current","total","show","props","rest","ref","pages","next","prev","pagination","jsx","clsx","styles","Button","key","page"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAMA,KAAaC;AAAA,EACzB,SACC,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,OAAAC,GAAO,MAAAC,IAAO,GAAG,OAAAC,GAAO,GAAGC,EAAA,GAC3DC,GACC;AACD,UAAM,EAAE,OAAAC,GAAO,MAAAC,GAAM,MAAAC,EAAA,IAASC,EAAW,EAAE,SAAAT,GAAS,OAAAC,GAAO,MAAAC,GAAM;AAEjE,WACC,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,cAAYN,EAAK,YAAY,KAAK;AAAA,QAClC,WAAWO,EAAKC,EAAO,YAAYb,CAAS;AAAA,QAC5C,KAAAM;AAAA,QACC,GAAGD;AAAA,QAEH,UAAAN,uBACC,MAAA,EACA,UAAA;AAAA,UAAA,gBAAAY,EAAC,MAAA,EACA,UAAA,gBAAAA;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,iBAAe,CAACL;AAAA,cACf,GAAGL,IAAQ,EAAE,MAAMK,GAAM,MAAM,QAAQ;AAAA,YAAA;AAAA,UAAA,GAE1C;AAAA,UACCF,EAAM,IAAI,CAAC,EAAE,KAAAQ,GAAK,MAAAC,GAAM,SAAAf,QACxB,gBAAAU,EAAC,MAAA,EACC,UAAA,CAAC,CAACK,KACF,gBAAAL;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,gBAAcb;AAAAA,cACR,UAAUe;AAAA,cACf,GAAGZ,IAAQ,EAAE,MAAAY,GAAM,MAAM,QAAQ;AAAA,YAAA;AAAA,UAAA,EACnC,GANOD,CAQT,CACA;AAAA,4BACA,MAAA,EACA,UAAA,gBAAAJ;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,iBAAe,CAACN;AAAA,cACf,GAAGJ,IAAQ,EAAE,MAAMI,GAAM,MAAM,QAAQ;AAAA,YAAA;AAAA,UAAA,EACzC,CACD;AAAA,QAAA,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAIJ;AACD;"}
1
+ {"version":3,"file":"pagination.js","sources":["../../designsystem/pagination/pagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button } from \"../button/button\";\nimport styles from \"../styles.module.css\";\nimport { pagination } from \"./pagination-helper\";\n\nexport type PaginationProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"nav\">,\n\t\"children\"\n> &\n\t(\n\t\t| {\n\t\t\t\tchildren?: never;\n\t\t\t\tcurrent: number;\n\t\t\t\tshow?: number;\n\t\t\t\ttotal: number;\n\t\t\t\tprops: (props: {\n\t\t\t\t\tpage: number;\n\t\t\t\t\ttype: \"prev\" | \"next\" | \"page\";\n\t\t\t\t}) => Parameters<typeof Button>[0];\n\t\t }\n\t\t| {\n\t\t\t\tchildren: React.ReactNode;\n\t\t\t\tcurrent?: never;\n\t\t\t\tshow?: never;\n\t\t\t\ttotal?: never;\n\t\t\t\tprops?: never;\n\t\t }\n\t);\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n\tfunction Pagination(\n\t\t{ children, className, current, total, show = 7, props, ...rest },\n\t\tref,\n\t) {\n\t\tconst { pages, next, prev } = pagination({ current, total, show });\n\n\t\treturn (\n\t\t\t<nav\n\t\t\t\taria-label={rest[\"aria-label\"] || \"Pagination\"}\n\t\t\t\tclassName={clsx(styles.pagination, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children || (\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\taria-disabled={!prev}\n\t\t\t\t\t\t\t\t{...props?.({ page: prev, type: \"prev\" })}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t{pages.map(({ key, page, current }) => (\n\t\t\t\t\t\t\t<li key={key}>\n\t\t\t\t\t\t\t\t{!!page && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\taria-current={current}\n\t\t\t\t\t\t\t\t\t\t{...{ children: page }}\n\t\t\t\t\t\t\t\t\t\t{...props?.({ page, type: \"page\" })}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\taria-disabled={!next}\n\t\t\t\t\t\t\t\t{...props?.({ page: next, type: \"next\" })}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\t\t\t</nav>\n\t\t);\n\t},\n);\n"],"names":["Pagination","forwardRef","children","className","current","total","show","props","rest","ref","pages","next","prev","pagination","jsx","clsx","styles","Button","key","page"],"mappings":";;;;;;AA8BO,MAAMA,IAAaC;AAAA,EACzB,SACC,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,OAAAC,GAAO,MAAAC,IAAO,GAAG,OAAAC,GAAO,GAAGC,EAAA,GAC3DC,GACC;AACD,UAAM,EAAE,OAAAC,GAAO,MAAAC,GAAM,MAAAC,EAAA,IAASC,EAAW,EAAE,SAAAT,GAAS,OAAAC,GAAO,MAAAC,GAAM;AAEjE,WACC,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,cAAYN,EAAK,YAAY,KAAK;AAAA,QAClC,WAAWO,EAAKC,EAAO,YAAYb,CAAS;AAAA,QAC5C,KAAAM;AAAA,QACC,GAAGD;AAAA,QAEH,UAAAN,uBACC,MAAA,EACA,UAAA;AAAA,UAAA,gBAAAY,EAAC,MAAA,EACA,UAAA,gBAAAA;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,iBAAe,CAACL;AAAA,cACf,GAAGL,IAAQ,EAAE,MAAMK,GAAM,MAAM,QAAQ;AAAA,YAAA;AAAA,UAAA,GAE1C;AAAA,UACCF,EAAM,IAAI,CAAC,EAAE,KAAAQ,GAAK,MAAAC,GAAM,SAAAf,QACxB,gBAAAU,EAAC,MAAA,EACC,UAAA,CAAC,CAACK,KACF,gBAAAL;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,gBAAcb;AAAAA,cACR,UAAUe;AAAA,cACf,GAAGZ,IAAQ,EAAE,MAAAY,GAAM,MAAM,QAAQ;AAAA,YAAA;AAAA,UAAA,EACnC,GANOD,CAQT,CACA;AAAA,4BACA,MAAA,EACA,UAAA,gBAAAJ;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,iBAAe,CAACN;AAAA,cACf,GAAGJ,IAAQ,EAAE,MAAMI,GAAM,MAAM,QAAQ;AAAA,YAAA;AAAA,UAAA,EACzC,CACD;AAAA,QAAA,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAIJ;AACD;"}
@@ -1,4 +1,4 @@
1
- import { flip as f, shift as g, size as m } from "../external/@floating-ui/dom/dist/floating-ui.dom.js";
1
+ import { flip as f, shift as g, size as m } from "@floating-ui/dom";
2
2
  import u from "../styles.module.css.js";
3
3
  import { onLoaded as v, on as c, QUICK_EVENT as p, attr as a, anchorPosition as d } from "../utils.js";
4
4
  const r = u.popover.split(" ")[0], l = "_mtds-popover-auto";
@@ -28,10 +28,9 @@ function L(o) {
28
28
  for (const e of document.getElementsByClassName(l))
29
29
  !e.contains(o.target) && n !== e && e.hidePopover();
30
30
  if (n && t) {
31
- o.preventDefault();
32
31
  const e = a(t, "popovertargetaction"), i = e === "show" || (e === "hide" ? !1 : void 0);
33
32
  if (t instanceof HTMLButtonElement && !e && n.contains(t)) return;
34
- n instanceof HTMLElement && n.isConnected && n.togglePopover && n.togglePopover(i);
33
+ n instanceof HTMLElement && n.isConnected && n.togglePopover && (o.preventDefault(), n.togglePopover(i));
35
34
  }
36
35
  }
37
36
  v(() => {
@@ -1 +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(event: Event) {\n\tconst el = (event.target as Element)?.closest?.(\"a,button\");\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\");\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 (el instanceof HTMLButtonElement && !action && pop.contains(el)) return; // Require \"popovertargetaction\" attribute to make buttons inside popover toggle\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,UAAU,UAAU,GACpDC,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,GACvCgB,IAAOC,MAAW,WAAWA,MAAW,SAAS,KAAQ;AAG/D,QAAIjB,aAAc,qBAAqB,CAACiB,KAAUF,EAAI,SAASf,CAAE,EAAG;AACpE,IAAIe,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;"}
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(event: Event) {\n\tconst el = (event.target as Element)?.closest?.(\"a,button\");\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\tconst action = attr(el, \"popovertargetaction\");\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 (el instanceof HTMLButtonElement && !action && pop.contains(el)) return; // Require \"popovertargetaction\" attribute to make buttons inside popover toggle\n\t\tif (pop instanceof HTMLElement && pop.isConnected && pop.togglePopover) {\n\t\t\tevent.preventDefault(); // Prevent browser popover API since we are doing it ourselves\n\t\t\tpop.togglePopover(open);\n\t\t}\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,UAAU,UAAU,GACpDC,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,UAAMiB,IAASb,EAAKJ,GAAI,qBAAqB,GACvCgB,IAAOC,MAAW,WAAWA,MAAW,SAAS,KAAQ;AAG/D,QAAIjB,aAAc,qBAAqB,CAACiB,KAAUF,EAAI,SAASf,CAAE,EAAG;AACpE,IAAIe,aAAe,eAAeA,EAAI,eAAeA,EAAI,kBACxDF,EAAM,eAAA,GACNE,EAAI,cAAcC,CAAI;AAAA,EAExB;AACD;AAEAE,EAAS,MAAM;AACd,EAAAC,EAAG,UAAU,SAASP,CAAsB,GAC5CO,EAAG,UAAU,UAAUpB,GAAqBqB,CAAW,GACvDD,EAAG,UAAU,gBAAgBR,GAA2BS,CAAW;AACpE,CAAC;"}
@@ -1,10 +1,10 @@
1
1
  import { Placement } from '@floating-ui/dom';
2
2
  import { JSX } from 'react';
3
- import { PolymorphicComponentPropWithRef, PopoverValues } from '../react-types';
3
+ import { PolymorphicComponentPropWithRef } from '../react-types';
4
4
  export type PopoverProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As, {
5
5
  "data-position"?: Placement;
6
6
  "data-overscroll"?: "contain";
7
- popover?: PopoverValues;
7
+ popover?: React.HTMLAttributes<HTMLElement>["popover"];
8
8
  }>;
9
9
  type PopoverComponent = <As extends React.ElementType = "div">(props: PopoverProps<As>) => JSX.Element;
10
10
  export declare const Popover: PopoverComponent;
@@ -1,5 +1,5 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
- import { clsx as m } from "../external/clsx/dist/clsx.js";
2
+ import m from "clsx";
3
3
  import { forwardRef as s } from "react";
4
4
  import f from "../styles.module.css.js";
5
5
  const u = s(function({ as: o, className: r, ...p }, t) {
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.tsx"],"sourcesContent":["import type { Placement } from \"@floating-ui/dom\";\nimport clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tPopoverValues,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type PopoverProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-position\"?: Placement;\n\t\t\t\"data-overscroll\"?: \"contain\";\n\t\t\tpopover?: PopoverValues;\n\t\t}\n\t>;\n\ntype PopoverComponent = <As extends React.ElementType = \"div\">(\n\tprops: PopoverProps<As>,\n) => JSX.Element;\n\nexport const Popover: PopoverComponent = forwardRef<null>(function Popover<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: PopoverProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn (\n\t\t<Tag\n\t\t\tpopover=\"auto\"\n\t\t\tclassName={clsx(styles.popover, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as PopoverComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Popover","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAwBO,MAAMA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,GAA0B;AAGzE,SACC,gBAAAC;AAAA,IAHWJ,KAAM;AAAA,IAGhB;AAAA,MACA,SAAQ;AAAA,MACR,WAAWK,EAAKC,EAAO,SAASL,CAAS;AAAA,MACzC,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
1
+ {"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.tsx"],"sourcesContent":["import type { Placement } from \"@floating-ui/dom\";\nimport clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type PopoverProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-position\"?: Placement;\n\t\t\t\"data-overscroll\"?: \"contain\";\n\t\t\tpopover?: React.HTMLAttributes<HTMLElement>[\"popover\"];\n\t\t}\n\t>;\n\ntype PopoverComponent = <As extends React.ElementType = \"div\">(\n\tprops: PopoverProps<As>,\n) => JSX.Element;\n\nexport const Popover: PopoverComponent = forwardRef<null>(function Popover<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: PopoverProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn (\n\t\t<Tag\n\t\t\tpopover=\"auto\"\n\t\t\tclassName={clsx(styles.popover, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as PopoverComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Popover","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAuBO,MAAMA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,GAA0B;AAGzE,SACC,gBAAAC;AAAA,IAHWJ,KAAM;AAAA,IAGhB;AAAA,MACA,SAAQ;AAAA,MACR,WAAWK,EAAKC,EAAO,SAASL,CAAS;AAAA,MACzC,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
@@ -7,12 +7,11 @@ export type PolymorphicComponentPropWithRef<As extends React.ElementType, Props
7
7
  ref?: PolymorphicRef<As>;
8
8
  };
9
9
  export type PolymorphicRef<As extends React.ElementType> = React.ComponentPropsWithRef<As>["ref"];
10
- export type PopoverValues = "" | "auto" | "manual" | undefined;
11
10
  export type Sizes = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "18" | "22" | "26" | "30" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 22 | 26 | 30;
12
11
  declare global {
13
12
  namespace React {
14
13
  interface HTMLAttributes<T> {
15
- popover?: PopoverValues;
14
+ popover?: React.HTMLAttributes<HTMLElement>["popover"];
16
15
  popovertarget?: string;
17
16
  "data-color"?: "main" | "neutral" | "success" | "danger" | "info" | "warning" | "inverted";
18
17
  "data-size"?: "sm" | "md" | "lg" | (string & {});
@@ -22,7 +21,7 @@ declare global {
22
21
  }
23
22
  namespace React.JSX {
24
23
  interface IntrinsicAttributes {
25
- popover?: PopoverValues;
24
+ popover?: React.HTMLAttributes<HTMLElement>["popover"];
26
25
  popovertarget?: string;
27
26
  popovertargetaction?: string;
28
27
  }
@@ -1,5 +1,5 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
- import { clsx as s } from "../external/clsx/dist/clsx.js";
2
+ import s from "clsx";
3
3
  import { forwardRef as f } from "react";
4
4
  import i from "../styles.module.css.js";
5
5
  const x = f(function({ as: r, className: t, ...o }, e) {
@@ -1,5 +1,5 @@
1
1
  import { jsx as m } from "react/jsx-runtime";
2
- import { clsx as p } from "../external/clsx/dist/clsx.js";
2
+ import p from "clsx";
3
3
  import { forwardRef as s } from "react";
4
4
  import t from "../styles.module.css.js";
5
5
  const l = s(
@@ -1,5 +1,5 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
- import { clsx as m } from "../external/clsx/dist/clsx.js";
2
+ import m from "clsx";
3
3
  import { forwardRef as e } from "react";
4
4
  import p from "../styles.module.css.js";
5
5
  const a = e(function({ className: o, ...r }, t) {