asma-ui-core 3.86.1 → 3.86.2

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 (42) hide show
  1. package/dist/asma-ui-core.css +1 -1
  2. package/dist/components/data-display/chip/StyledChip.js +28 -27
  3. package/dist/components/data-display/tooltip/StyledTooltip.js +76 -47
  4. package/dist/components/feedback/dialog/StyledDialog.js +62 -58
  5. package/dist/components/feedback/minimizable-dialog/MinimizableDialog.js +113 -105
  6. package/dist/components/feedback/minimizable-dialog/components/FullscreenBtn.js +10 -12
  7. package/dist/components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js +75 -67
  8. package/dist/components/feedback/snack-bar/StyledSnackbar.js +12 -10
  9. package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js +69 -71
  10. package/dist/components/inputs/input-field/StyledInputField.js +10 -9
  11. package/dist/components/inputs/phone-field/CountryCodeOptions.js +16 -15
  12. package/dist/components/inputs/phone-field/CountryCodeSelect.js +98 -85
  13. package/dist/components/inputs/phone-field/useCountryPicker.js +44 -24
  14. package/dist/components/inputs/select/StyledSelect.js +15 -14
  15. package/dist/components/inputs/select/StyledSelectItem.js +4 -4
  16. package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js +199 -172
  17. package/dist/components/navigation/listbox/Listbox.js +104 -54
  18. package/dist/components/navigation/menu/StyledMenu.js +22 -18
  19. package/dist/components/navigation/menu/StyledMenuItem.js +6 -6
  20. package/dist/components/utils/accordion/base-ui/StyledAccordionDetails.js +26 -22
  21. package/dist/components/utils/copy-wrapper/CopyWrapper.module.js +2 -2
  22. package/dist/components/utils/popover/StyledPopover.js +102 -52
  23. package/dist/datetime/components/date-picker/StyledDatePicker.js +40 -34
  24. package/dist/datetime/components/date-picker/components/StyledCalendarPicker.js +5 -4
  25. package/dist/datetime/components/time-picker/StyledTimePicker.js +69 -56
  26. package/dist/helpers/focusable.js +5 -0
  27. package/dist/hooks/useFocusTrap.hook.js +24 -19
  28. package/dist/src/components/data-display/chip/StyledChip.d.ts +2 -0
  29. package/dist/src/components/inputs/dynamic-select/StyledDynamicSelect.d.ts +3 -4
  30. package/dist/src/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.test.d.ts +1 -0
  31. package/dist/src/components/inputs/phone-field/CountryCodeOptions.d.ts +1 -1
  32. package/dist/src/components/inputs/phone-field/useCountryPicker.d.ts +5 -2
  33. package/dist/src/components/navigation/listbox/Listbox.d.ts +3 -2
  34. package/dist/src/components/navigation/menu/StyledMenu.d.ts +3 -2
  35. package/dist/src/components/utils/accordion/base-ui/StyledAccordionDetails.d.ts +2 -1
  36. package/dist/src/components/utils/popover/StyledPopover.d.ts +9 -2
  37. package/dist/src/helpers/focusable.d.ts +8 -0
  38. package/dist/src/hooks/useFocusTrap.hook.d.ts +2 -1
  39. package/dist/table/components/columns/action-column/components/RowActionMenu.js +30 -34
  40. package/dist/table/components/table-footer/TablePagination.js +18 -17
  41. package/dist/table/components/table-footer/TableRowCountSelect.js +5 -4
  42. package/package.json +1 -1
@@ -1,25 +1,28 @@
1
1
  import { cn as h } from "../../../helpers/cn.js";
2
- import { DotsVerticalIcon as re } from "../../icons/dots-vertical-icon/DotsVerticalIcon.js";
3
- import { LoadingIcon as $ } from "../../icons/loading-icon/LoadingIcon.js";
2
+ import { DotsVerticalIcon as ae } from "../../icons/dots-vertical-icon/DotsVerticalIcon.js";
3
+ import { LoadingIcon as A } from "../../icons/loading-icon/LoadingIcon.js";
4
4
  import { CloseIcon as K } from "../../icons/close-icon/CloseIcon.js";
5
- import { MinimizeIcon as de } from "../../icons/minimize-icon/MinimizeIcon.js";
6
- import { KeyboardCapslockIcon as ae } from "../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
7
- import { ArrowExpandIcon as ne } from "../../icons/arrow-expand-icon/ArrowExpandIcon.js";
8
- import { ArrowShrinkIcon as oe } from "../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
5
+ import { MinimizeIcon as oe } from "../../icons/minimize-icon/MinimizeIcon.js";
6
+ import { KeyboardCapslockIcon as se } from "../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
7
+ import { ArrowExpandIcon as ce } from "../../icons/arrow-expand-icon/ArrowExpandIcon.js";
8
+ import { ArrowShrinkIcon as me } from "../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
9
+ import { firstTabbable as he } from "../../../helpers/focusable.js";
9
10
  import { StyledTooltip as f } from "../../data-display/tooltip/StyledTooltip.js";
10
- import { StyledButton as t } from "../../inputs/button/StyledButton.js";
11
- import { StyledMenu as se } from "../../navigation/menu/StyledMenu.js";
12
- import { StyledMenuItem as ce } from "../../navigation/menu/StyledMenuItem.js";
13
- import { useFocusTrap as me } from "../../../hooks/useFocusTrap.hook.js";
14
- import q from "./MinimizableDialog.module.js";
15
- import { useToggleMenuVisibility as he } from "../../../hooks/useToggleMenuVisibility.hook.js";
16
- import H from "clsx";
17
- import { useRef as fe, useState as J } from "react";
18
- import { Fragment as z, jsx as e, jsxs as i } from "react/jsx-runtime";
19
- var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: j = !0, showMinimizeIcon: Q = !0, showExpandIcon: T = !0, showFullScreenIcon: W = !0, title: s, label: b, children: g, open: C, onClose: x, className: _ = "", primaryButtonText: w, primaryButtonLoading: k = !1, secondaryButtonText: c, onPrimaryButtonClick: v, onSecondaryButtonClick: p, dataTest: F, actionNode: X, extraActions: r, extraActionsText: m, btnContainerClassName: G, footerClassName: Y, footerInfo: D, locale: l = "en", enableFullscreen: Z = !0, fullScreenState: E, handleFullScreenState: L }) => {
20
- const [d, A] = J(!1), [R, P] = J(!1), { open: B, anchorEl: ee, handleOpen: ie, handleClose: te } = he(), S = fe(null), a = E ?? R, n = a && !d;
21
- if (me(C && n, S, x), !C) return null;
22
- const le = n ? {
11
+ import { StyledButton as l } from "../../inputs/button/StyledButton.js";
12
+ import { StyledMenu as fe } from "../../navigation/menu/StyledMenu.js";
13
+ import { StyledMenuItem as ue } from "../../navigation/menu/StyledMenuItem.js";
14
+ import { useFocusTrap as ve } from "../../../hooks/useFocusTrap.hook.js";
15
+ import H from "./MinimizableDialog.module.js";
16
+ import { useToggleMenuVisibility as pe } from "../../../hooks/useToggleMenuVisibility.hook.js";
17
+ import J from "clsx";
18
+ import { useLayoutEffect as be, useRef as Q, useState as T } from "react";
19
+ import { Fragment as M, jsx as e, jsxs as t } from "react/jsx-runtime";
20
+ var Oe = ({ onCloseText: u = "", onMinimizeText: j = "", onExpandText: C = "", onFullScreenText: F = "", showCloseIcon: _ = !0, showMinimizeIcon: W = !0, showExpandIcon: X = !0, showFullScreenIcon: Y = !0, title: s, label: g, children: x, open: E, onClose: w, className: G = "", primaryButtonText: y, primaryButtonLoading: k = !1, secondaryButtonText: c, onPrimaryButtonClick: v, onSecondaryButtonClick: p, dataTest: S, actionNode: Z, extraActions: n, extraActionsText: m, btnContainerClassName: D, footerClassName: P, footerInfo: L, locale: r = "en", enableFullscreen: B = !0, fullScreenState: R, handleFullScreenState: q }) => {
21
+ const [i, ee] = T(!1), [O, te] = T(!1), { open: ie, anchorEl: le, handleOpen: re, handleClose: ne } = pe(), b = Q(null), z = Q(null), d = R ?? O, a = d && !i;
22
+ if (ve(E && a, b, w), be(() => {
23
+ b.current?.toggleAttribute("inert", i), z.current?.toggleAttribute("inert", !i);
24
+ }, [i]), !E) return null;
25
+ const de = a ? {
23
26
  right: "auto",
24
27
  bottom: "auto",
25
28
  left: "50%",
@@ -27,45 +30,50 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
27
30
  transform: "translate(-50%, -50%)",
28
31
  width: "min(1000px, calc(100vw - 32px))",
29
32
  height: "95dvh"
30
- } : void 0, O = a ? l === "en" ? "Exit full screen" : "Avslutt fullskjerm" : l === "en" ? "Full screen" : "Fullskjerm", y = w ?? k, U = y || c, V = () => {
31
- A(!d);
33
+ } : void 0, U = d ? r === "en" ? "Exit full screen" : "Avslutt fullskjerm" : r === "en" ? "Full screen" : "Fullskjerm", N = y ?? k, V = N || c, $ = () => {
34
+ const o = i ? b : z;
35
+ ee(!i), requestAnimationFrame(() => {
36
+ const I = o.current;
37
+ I && (I.querySelector('[data-testid="minimize-button"]') ?? he(I))?.focus({ preventScroll: !0 });
38
+ });
32
39
  };
33
- return /* @__PURE__ */ i(z, { children: [
34
- n && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[51] bg-[rgb(98,110,126)] bg-opacity-70" }),
40
+ return /* @__PURE__ */ t(M, { children: [
41
+ a && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[51] bg-[rgb(98,110,126)] bg-opacity-70" }),
35
42
  /* @__PURE__ */ e("div", {
43
+ ref: z,
36
44
  style: { zIndex: 51 },
37
- className: h(q.dialog, !d && q.hidden),
38
- children: /* @__PURE__ */ i("div", {
39
- className: H("flex items-center justify-between", !d && "hidden"),
40
- "data-testid": F,
45
+ className: h(H.dialog, !i && H.hidden),
46
+ children: /* @__PURE__ */ t("div", {
47
+ className: J("flex items-center justify-between", !i && "hidden"),
48
+ "data-testid": S,
41
49
  children: [/* @__PURE__ */ e("div", {
42
50
  className: "truncate text-lg font-semibold text-delta-800",
43
51
  children: s
44
- }), /* @__PURE__ */ i("div", {
52
+ }), /* @__PURE__ */ t("div", {
45
53
  className: "flex items-center gap-x-1",
46
- children: [T && /* @__PURE__ */ e(f, {
47
- title: l === "en" ? "Expand" : "Utvid",
48
- children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
54
+ children: [X && /* @__PURE__ */ e(f, {
55
+ title: r === "en" ? "Expand" : "Utvid",
56
+ children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, {
49
57
  dataTest: "minimize-button",
50
- "aria-label": I ? void 0 : l === "en" ? "Expand" : "Utvid",
58
+ "aria-label": C ? void 0 : r === "en" ? "Expand" : "Utvid",
51
59
  variant: "text",
52
60
  size: "small",
53
- onClick: V,
54
- endIcon: /* @__PURE__ */ e(ae, {
61
+ onClick: $,
62
+ endIcon: /* @__PURE__ */ e(se, {
55
63
  height: 20,
56
64
  width: 20,
57
65
  color: "text-gama-500"
58
66
  }),
59
- children: I
67
+ children: C
60
68
  }) })
61
- }), j && /* @__PURE__ */ e(f, {
62
- title: l === "en" ? "Close" : "Lukk",
63
- children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
69
+ }), _ && /* @__PURE__ */ e(f, {
70
+ title: r === "en" ? "Close" : "Lukk",
71
+ children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, {
64
72
  dataTest: "close-button",
65
- "aria-label": u ? void 0 : l === "en" ? "Close" : "Lukk",
73
+ "aria-label": u ? void 0 : r === "en" ? "Close" : "Lukk",
66
74
  variant: "textGray",
67
75
  size: "small",
68
- onClick: x,
76
+ onClick: w,
69
77
  endIcon: /* @__PURE__ */ e(K, {
70
78
  height: 20,
71
79
  width: 20,
@@ -77,74 +85,74 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
77
85
  })]
78
86
  })
79
87
  }),
80
- /* @__PURE__ */ i("div", {
81
- ref: S,
82
- style: le,
83
- role: n ? "dialog" : void 0,
84
- "aria-modal": n ? !0 : void 0,
85
- "aria-label": n && typeof s == "string" ? s : void 0,
86
- className: h("fixed bottom-4 right-4 z-[51] rounded-lg bg-white shadow-[0_4px_40px_0px_rgba(34,33,51,0.4)] transition-all duration-300", _ && !d && !a ? _ : "", d && "!h-0 !w-0 opacity-0 duration-0", n && "fixed duration-0"),
87
- "data-testid": F,
88
- children: [/* @__PURE__ */ i("div", {
88
+ /* @__PURE__ */ t("div", {
89
+ ref: b,
90
+ style: de,
91
+ role: a ? "dialog" : void 0,
92
+ "aria-modal": a ? !0 : void 0,
93
+ "aria-label": a && typeof s == "string" ? s : void 0,
94
+ className: h("fixed bottom-4 right-4 z-[51] rounded-lg bg-white shadow-[0_4px_40px_0px_rgba(34,33,51,0.4)] transition-all duration-300", G && !i && !d ? G : "", i && "!h-0 !w-0 opacity-0 duration-0", a && "fixed duration-0"),
95
+ "data-testid": S,
96
+ children: [/* @__PURE__ */ t("div", {
89
97
  className: "flex flex-col gap-y-2 border-b-[1px] border-delta-200 p-4",
90
- children: [/* @__PURE__ */ i("div", {
98
+ children: [/* @__PURE__ */ t("div", {
91
99
  className: "flex items-center justify-between",
92
- children: [b ? /* @__PURE__ */ e("div", {
100
+ children: [g ? /* @__PURE__ */ e("div", {
93
101
  className: "text-sm text-delta-700",
94
- children: b
102
+ children: g
95
103
  }) : /* @__PURE__ */ e("div", {
96
104
  className: "text-2xl font-semibold text-delta-800",
97
105
  children: s
98
- }), /* @__PURE__ */ i("div", {
106
+ }), /* @__PURE__ */ t("div", {
99
107
  className: "flex items-center gap-x-1",
100
108
  children: [
101
- X,
102
- Q && !a && /* @__PURE__ */ e(f, {
103
- title: l === "en" ? "Minimize" : "Minimer",
104
- children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
109
+ Z,
110
+ W && !d && /* @__PURE__ */ e(f, {
111
+ title: r === "en" ? "Minimize" : "Minimer",
112
+ children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, {
105
113
  dataTest: "minimize-button",
106
- "aria-label": N ? void 0 : l === "en" ? "Minimize" : "Minimer",
114
+ "aria-label": j ? void 0 : r === "en" ? "Minimize" : "Minimer",
107
115
  variant: "textGray",
108
116
  size: "small",
109
- onClick: V,
110
- endIcon: /* @__PURE__ */ e(de, {
117
+ onClick: $,
118
+ endIcon: /* @__PURE__ */ e(oe, {
111
119
  height: 20,
112
120
  width: 20,
113
121
  color: "text-delta-700"
114
122
  }),
115
- children: N
123
+ children: j
116
124
  }) })
117
125
  }),
118
- Z && W && /* @__PURE__ */ e(f, {
119
- title: O,
120
- children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
126
+ B && Y && /* @__PURE__ */ e(f, {
127
+ title: U,
128
+ children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, {
121
129
  dataTest: "fullscreen-button",
122
- "aria-label": M ? void 0 : O,
130
+ "aria-label": F ? void 0 : U,
123
131
  variant: "textGray",
124
132
  size: "small",
125
- onClick: (o) => {
126
- E !== void 0 && L ? L() : P(!R), o.detail !== 0 && o.currentTarget.blur();
133
+ onClick: () => {
134
+ R !== void 0 && q ? q() : te(!O);
127
135
  },
128
- endIcon: a ? /* @__PURE__ */ e(oe, {
136
+ endIcon: d ? /* @__PURE__ */ e(me, {
129
137
  width: 20,
130
138
  height: 20,
131
139
  color: "text-delta-700"
132
- }) : /* @__PURE__ */ e(ne, {
140
+ }) : /* @__PURE__ */ e(ce, {
133
141
  width: 20,
134
142
  height: 20,
135
143
  color: "text-delta-700"
136
144
  }),
137
- children: M
145
+ children: F
138
146
  }) })
139
147
  }),
140
- j && /* @__PURE__ */ e(f, {
141
- title: l === "en" ? "Close" : "Lukk",
142
- children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
148
+ _ && /* @__PURE__ */ e(f, {
149
+ title: r === "en" ? "Close" : "Lukk",
150
+ children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, {
143
151
  dataTest: "close-button",
144
- "aria-label": u ? void 0 : l === "en" ? "Close" : "Lukk",
152
+ "aria-label": u ? void 0 : r === "en" ? "Close" : "Lukk",
145
153
  variant: "textGray",
146
154
  size: "small",
147
- onClick: x,
155
+ onClick: w,
148
156
  endIcon: /* @__PURE__ */ e(K, {
149
157
  height: 20,
150
158
  width: 20,
@@ -155,77 +163,77 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
155
163
  })
156
164
  ]
157
165
  })]
158
- }), b && /* @__PURE__ */ e("div", {
166
+ }), g && /* @__PURE__ */ e("div", {
159
167
  className: "truncate text-2xl font-semibold text-delta-800",
160
168
  children: s
161
169
  })]
162
- }), /* @__PURE__ */ i("div", {
163
- className: H("flex flex-col", a && !d && "h-[87dvh]"),
170
+ }), /* @__PURE__ */ t("div", {
171
+ className: J("flex flex-col", d && !i && "h-[87dvh]"),
164
172
  children: [/* @__PURE__ */ e("div", {
165
173
  className: "flex-grow overflow-y-auto",
166
- children: typeof g == "function" ? g({ fullScreen: a }) : g
167
- }), (Array.isArray(r) && r.length || typeof r == "function") && m || D ? /* @__PURE__ */ i("div", {
168
- className: h("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", Y),
174
+ children: typeof x == "function" ? x({ fullScreen: d }) : x
175
+ }), (Array.isArray(n) && n.length || typeof n == "function") && m || L ? /* @__PURE__ */ t("div", {
176
+ className: h("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", P),
169
177
  children: [
170
- Array.isArray(r) && r.length && m ? /* @__PURE__ */ i(z, { children: [/* @__PURE__ */ e(t, {
178
+ Array.isArray(n) && n.length && m ? /* @__PURE__ */ t(M, { children: [/* @__PURE__ */ e(l, {
171
179
  dataTest: "extra-actions-button",
172
180
  variant: "textGray",
173
- startIcon: /* @__PURE__ */ e(re, {
181
+ startIcon: /* @__PURE__ */ e(ae, {
174
182
  width: 24,
175
183
  height: 24
176
184
  }),
177
- onClick: ie,
185
+ onClick: re,
178
186
  children: m
179
- }), /* @__PURE__ */ e(se, {
180
- open: B,
181
- anchorEl: ee,
182
- onClose: te,
183
- children: r.map((o) => /* @__PURE__ */ e(ce, {
187
+ }), /* @__PURE__ */ e(fe, {
188
+ open: ie,
189
+ anchorEl: le,
190
+ onClose: ne,
191
+ children: n.map((o) => /* @__PURE__ */ e(ue, {
184
192
  className: o.className,
185
193
  onClick: o.onClick,
186
194
  children: o.label
187
195
  }, o.label))
188
- })] }) : m && typeof r == "function" && /* @__PURE__ */ e(t, {
196
+ })] }) : m && typeof n == "function" && /* @__PURE__ */ e(l, {
189
197
  dataTest: "extra-action-button",
190
198
  variant: "text",
191
- onClick: r,
199
+ onClick: n,
192
200
  children: m
193
201
  }),
194
202
  " ",
195
- D,
196
- U ? /* @__PURE__ */ i("div", {
197
- className: h("flex justify-end gap-x-2", G),
198
- children: [c && p && /* @__PURE__ */ e(t, {
203
+ L,
204
+ V ? /* @__PURE__ */ t("div", {
205
+ className: h("flex justify-end gap-x-2", D),
206
+ children: [c && p && /* @__PURE__ */ e(l, {
199
207
  dataTest: "cancel-button",
200
208
  variant: "outlined",
201
209
  onClick: p,
202
210
  children: c
203
- }), y && v && /* @__PURE__ */ e(t, {
211
+ }), N && v && /* @__PURE__ */ e(l, {
204
212
  dataTest: "save-button",
205
- startIcon: k && /* @__PURE__ */ e($, {
213
+ startIcon: k && /* @__PURE__ */ e(A, {
206
214
  width: 24,
207
215
  height: 24
208
216
  }),
209
217
  onClick: v,
210
- children: w
218
+ children: y
211
219
  })]
212
220
  }) : null
213
221
  ]
214
- }) : /* @__PURE__ */ e(z, { children: U ? /* @__PURE__ */ i("div", {
215
- className: h("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", G),
216
- children: [c && p && /* @__PURE__ */ e(t, {
222
+ }) : /* @__PURE__ */ e(M, { children: V ? /* @__PURE__ */ t("div", {
223
+ className: h("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", D),
224
+ children: [c && p && /* @__PURE__ */ e(l, {
217
225
  dataTest: "cancel-button",
218
226
  variant: "outlined",
219
227
  onClick: p,
220
228
  children: c
221
- }), y && v && /* @__PURE__ */ e(t, {
229
+ }), N && v && /* @__PURE__ */ e(l, {
222
230
  dataTest: "save-button",
223
- startIcon: k && /* @__PURE__ */ e($, {
231
+ startIcon: k && /* @__PURE__ */ e(A, {
224
232
  width: 24,
225
233
  height: 24
226
234
  }),
227
235
  onClick: v,
228
- children: w
236
+ children: y
229
237
  })]
230
238
  }) : null })]
231
239
  })]
@@ -233,5 +241,5 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
233
241
  ] });
234
242
  };
235
243
  export {
236
- Ee as MinimizableDialog
244
+ Oe as MinimizableDialog
237
245
  };
@@ -1,23 +1,21 @@
1
- import { ArrowExpandIcon as n } from "../../../icons/arrow-expand-icon/ArrowExpandIcon.js";
2
- import { ArrowShrinkIcon as a } from "../../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
3
- import { StyledTooltip as d } from "../../../data-display/tooltip/StyledTooltip.js";
4
- import { StyledButton as c } from "../../../inputs/button/StyledButton.js";
1
+ import { ArrowExpandIcon as i } from "../../../icons/arrow-expand-icon/ArrowExpandIcon.js";
2
+ import { ArrowShrinkIcon as n } from "../../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
3
+ import { StyledTooltip as a } from "../../../data-display/tooltip/StyledTooltip.js";
4
+ import { StyledButton as d } from "../../../inputs/button/StyledButton.js";
5
5
  import { jsx as r } from "react/jsx-runtime";
6
- var x = ({ fullScreen: o, showFullScreenIcon: l, tooltipTitle: t, onClick: i }) => l ? /* @__PURE__ */ r(d, {
6
+ var u = ({ fullScreen: e, showFullScreenIcon: o, tooltipTitle: t, onClick: l }) => o ? /* @__PURE__ */ r(a, {
7
7
  title: t,
8
- children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(c, {
8
+ children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(d, {
9
9
  dataTest: "fullscreen-button",
10
10
  "aria-label": t,
11
11
  variant: "textGray",
12
12
  size: "small",
13
- onClick: (e) => {
14
- i(), e.detail !== 0 && e.currentTarget.blur();
15
- },
16
- endIcon: o ? /* @__PURE__ */ r(a, {
13
+ onClick: l,
14
+ endIcon: e ? /* @__PURE__ */ r(n, {
17
15
  width: 20,
18
16
  height: 20,
19
17
  color: "text-delta-700"
20
- }) : /* @__PURE__ */ r(n, {
18
+ }) : /* @__PURE__ */ r(i, {
21
19
  width: 20,
22
20
  height: 20,
23
21
  color: "text-delta-700"
@@ -25,5 +23,5 @@ var x = ({ fullScreen: o, showFullScreenIcon: l, tooltipTitle: t, onClick: i })
25
23
  }) })
26
24
  }) : null;
27
25
  export {
28
- x as FullScreenBtn
26
+ u as FullScreenBtn
29
27
  };
@@ -1,26 +1,37 @@
1
1
  import { cn as s } from "../../../../helpers/cn.js";
2
- import { StyledTooltip as j } from "../../../data-display/tooltip/StyledTooltip.js";
3
- import { useMobileMediaQuery as B } from "../../../../hooks/useMediaQuery.hook.js";
4
- import { useFocusTrap as D } from "../../../../hooks/useFocusTrap.hook.js";
5
- import { CloseBtn as y } from "../components/CloseBtn.js";
6
- import { MinimizeBtn as z } from "../components/MinimizeBtn.js";
7
- import { FullScreenBtn as R } from "../components/FullscreenBtn.js";
8
- import d from "./MinimizableDialogV2.module.js";
9
- import { useTranslations as V } from "./useTranslations.js";
10
- import { useControlledProps as W } from "./useControlledProps.js";
11
- import _ from "clsx";
12
- import { useRef as $ } from "react";
13
- import { Fragment as A, jsx as e, jsxs as o } from "react/jsx-runtime";
14
- var ee = (f) => {
15
- const { showCloseIcon: h = !0, showMinimizeIcon: N = !0, showExpandIcon: w = !0, enableFullscreen: C = !0, title: n, label: m, children: F, open: u, onClose: T, classNameOverrides: c = {
2
+ import { firstTabbable as q } from "../../../../helpers/focusable.js";
3
+ import { StyledTooltip as E } from "../../../data-display/tooltip/StyledTooltip.js";
4
+ import { useMobileMediaQuery as P } from "../../../../hooks/useMediaQuery.hook.js";
5
+ import { useFocusTrap as V } from "../../../../hooks/useFocusTrap.hook.js";
6
+ import { CloseBtn as w } from "../components/CloseBtn.js";
7
+ import { MinimizeBtn as C } from "../components/MinimizeBtn.js";
8
+ import { FullScreenBtn as W } from "../components/FullscreenBtn.js";
9
+ import c from "./MinimizableDialogV2.module.js";
10
+ import { useTranslations as _ } from "./useTranslations.js";
11
+ import { useControlledProps as $ } from "./useControlledProps.js";
12
+ import H from "clsx";
13
+ import { useLayoutEffect as L, useRef as F } from "react";
14
+ import { Fragment as O, jsx as e, jsxs as o } from "react/jsx-runtime";
15
+ var ae = (h) => {
16
+ const { showCloseIcon: v = !0, showMinimizeIcon: S = !0, showExpandIcon: T = !0, enableFullscreen: M = !0, title: n, label: d, children: k, open: g, onClose: I, classNameOverrides: f = {
16
17
  maximized: "",
17
18
  minimized: "",
18
19
  fullscreen: ""
19
- }, dataTest: M, actionNode: S, locale: k = "en", style: v } = f, a = B(), r = V(k), b = $(null), { minimized: i, setMinimized: x, fullScreen: l, setFullScreen: g } = W(f), t = l && !i, p = () => {
20
- x(!1), T();
20
+ }, dataTest: j, actionNode: A, locale: R = "en", style: b } = h, r = P(), a = _(R), m = F(null), p = F(null), { minimized: i, setMinimized: z, fullScreen: t, setFullScreen: y } = $(h), l = t && !i, u = () => {
21
+ z(!1), I();
21
22
  };
22
- D(u && t, b, p);
23
- const I = t ? a ? {
23
+ L(() => {
24
+ m.current?.toggleAttribute("inert", i), p.current?.toggleAttribute("inert", !i);
25
+ }, [i]);
26
+ const N = () => {
27
+ const D = i ? m : p;
28
+ z(!i), requestAnimationFrame(() => {
29
+ const x = D.current;
30
+ x && (x.querySelector('[data-testid="toggle-minimize-btn"]') ?? q(x))?.focus({ preventScroll: !0 });
31
+ });
32
+ };
33
+ V(g && l, m, u);
34
+ const B = l ? r ? {
24
35
  inset: 0,
25
36
  maxHeight: "100dvh",
26
37
  maxWidth: "100dvw",
@@ -37,19 +48,20 @@ var ee = (f) => {
37
48
  maxWidth: "min(1000px, calc(100vw - 32px))",
38
49
  height: "95dvh"
39
50
  } : void 0;
40
- return u ? /* @__PURE__ */ o(A, { children: [
51
+ return g ? /* @__PURE__ */ o(O, { children: [
41
52
  /* @__PURE__ */ e("div", {
53
+ ref: p,
42
54
  style: {
43
55
  zIndex: 51,
44
- ...v
56
+ ...b
45
57
  },
46
- className: s(d["minimized-dialog"], !i && d.hidden, c.minimized),
58
+ className: s(c["minimized-dialog"], !i && c.hidden, f.minimized),
47
59
  children: /* @__PURE__ */ o("div", {
48
- className: _("flex items-center justify-between", !i && "hidden"),
49
- "data-testid": M,
60
+ className: H("flex items-center justify-between", !i && "hidden"),
61
+ "data-testid": j,
50
62
  children: [/* @__PURE__ */ e("div", {
51
63
  className: "max-w-[303px] truncate pr-1 text-lg font-semibold text-delta-800",
52
- children: /* @__PURE__ */ e(j, {
64
+ children: /* @__PURE__ */ e(E, {
53
65
  title: n,
54
66
  placement: "top",
55
67
  children: /* @__PURE__ */ e("div", {
@@ -59,86 +71,82 @@ var ee = (f) => {
59
71
  })
60
72
  }), /* @__PURE__ */ o("div", {
61
73
  className: "flex items-center gap-x-1",
62
- children: [/* @__PURE__ */ e(z, {
74
+ children: [/* @__PURE__ */ e(C, {
63
75
  type: "expand",
64
- visibility: w,
65
- onClick: () => {
66
- x(!i);
67
- },
68
- tooltipTitle: r.expand
69
- }), /* @__PURE__ */ e(y, {
70
- showCloseIcon: h,
71
- onClick: p,
72
- tooltipTitle: r.close
76
+ visibility: T,
77
+ onClick: N,
78
+ tooltipTitle: a.expand
79
+ }), /* @__PURE__ */ e(w, {
80
+ showCloseIcon: v,
81
+ onClick: u,
82
+ tooltipTitle: a.close
73
83
  })]
74
84
  })]
75
85
  })
76
86
  }),
77
- t && /* @__PURE__ */ e("div", {
87
+ l && /* @__PURE__ */ e("div", {
78
88
  className: "fixed inset-0 z-[52] bg-[rgb(98,110,126)] bg-opacity-70",
79
89
  onClick: () => {
80
- g(!1);
90
+ y(!1);
81
91
  }
82
92
  }),
83
93
  /* @__PURE__ */ o("div", {
84
94
  style: {
85
95
  zIndex: 51,
86
- ...v,
87
- ...I
96
+ ...b,
97
+ ...B
88
98
  },
89
- ref: b,
90
- role: t ? "dialog" : void 0,
91
- "aria-modal": t ? !0 : void 0,
92
- "aria-label": t && typeof n == "string" ? n : void 0,
93
- className: s(d.dialog, i && d.hidden, !l && c.maximized, l && c.fullscreen, t && "fixed z-[53] duration-0"),
99
+ ref: m,
100
+ role: l ? "dialog" : void 0,
101
+ "aria-modal": l ? !0 : void 0,
102
+ "aria-label": l && typeof n == "string" ? n : void 0,
103
+ className: s(c.dialog, i && c.hidden, !t && f.maximized, t && f.fullscreen, l && "fixed z-[53] duration-0"),
94
104
  children: [/* @__PURE__ */ o("div", {
95
- className: s("flex flex-col border-b-[1px] border-delta-200 px-4", a ? "py-3" : "py-4"),
105
+ className: s("flex flex-col border-b-[1px] border-delta-200 px-4", r ? "py-3" : "py-4"),
96
106
  children: [/* @__PURE__ */ o("div", {
97
107
  className: "flex items-center justify-between",
98
- children: [m ? /* @__PURE__ */ e("div", {
108
+ children: [d ? /* @__PURE__ */ e("div", {
99
109
  className: "text-sm text-delta-700",
100
- children: m
110
+ children: d
101
111
  }) : /* @__PURE__ */ e("div", {
102
- className: s("font-semibold text-delta-800", a ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
112
+ className: s("font-semibold text-delta-800", r ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
103
113
  children: n
104
114
  }), /* @__PURE__ */ o("div", {
105
115
  className: "flex items-center gap-x-1",
106
116
  children: [
107
- S,
108
- /* @__PURE__ */ e(z, {
109
- visibility: N && !a && !l,
117
+ A,
118
+ /* @__PURE__ */ e(C, {
119
+ visibility: S && !r && !t,
110
120
  type: "minimize",
111
- onClick: () => {
112
- x(!i);
113
- },
114
- tooltipTitle: r.minimize
121
+ onClick: N,
122
+ tooltipTitle: a.minimize
115
123
  }),
116
- /* @__PURE__ */ e(R, {
117
- showFullScreenIcon: C && !a,
118
- fullScreen: l,
124
+ /* @__PURE__ */ e(W, {
125
+ showFullScreenIcon: M && !r,
126
+ fullScreen: t,
119
127
  onClick: () => {
120
- g(!l);
128
+ y(!t);
121
129
  },
122
- tooltipTitle: l ? r.exitFullscreen : r.fullscreen
130
+ tooltipTitle: t ? a.exitFullscreen : a.fullscreen
123
131
  }),
124
- /* @__PURE__ */ e(y, {
125
- showCloseIcon: h,
126
- onClick: p,
127
- tooltipTitle: r.close
132
+ /* @__PURE__ */ e(w, {
133
+ showCloseIcon: v,
134
+ onClick: u,
135
+ tooltipTitle: a.close
128
136
  })
129
137
  ]
130
138
  })]
131
- }), m && /* @__PURE__ */ e("div", {
132
- className: s("font-semibold text-delta-800", a ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
139
+ }), d && /* @__PURE__ */ e("div", {
140
+ className: s("font-semibold text-delta-800", r ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
133
141
  children: n
134
142
  })]
135
143
  }), /* @__PURE__ */ e("div", {
136
144
  className: s(i && "hidden", "flex flex-grow flex-col overflow-y-auto"),
137
- children: F
145
+ children: k
138
146
  })]
139
147
  })
140
148
  ] }) : null;
141
149
  };
142
150
  export {
143
- ee as MinimizableDialogV2
151
+ ae as MinimizableDialogV2
144
152
  };