asma-ui-core 3.108.4 → 3.110.0

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 (58) hide show
  1. package/dist/asma-ui-core.css +1 -1
  2. package/dist/components/data-display/interactive-chip/StyledInteractiveChip.js +18 -18
  3. package/dist/components/feedback/minimizable-dialog/MinimizableDialog.js +17 -15
  4. package/dist/components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js +26 -24
  5. package/dist/components/inputs/dynamic-select/components/DynamicInteractiveChipGroup.js +59 -55
  6. package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js +88 -84
  7. package/dist/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.js +15 -11
  8. package/dist/components/inputs/dynamic-select/components/DynamicSelectTitle.js +9 -0
  9. package/dist/components/inputs/field-styles.js +16 -6
  10. package/dist/components/inputs/form-layout/StyledFieldPair.js +22 -0
  11. package/dist/components/inputs/form-layout/StyledFieldPair.module.js +8 -0
  12. package/dist/components/inputs/form-layout/StyledFormColumn.js +13 -0
  13. package/dist/components/inputs/input-field/StyledInputField.js +235 -198
  14. package/dist/components/inputs/phone-field/StyledPhoneField.js +41 -39
  15. package/dist/components/inputs/search-field/StyledSearchField.js +22 -20
  16. package/dist/components/inputs/select/StyledSelect.js +110 -108
  17. package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js +111 -108
  18. package/dist/components/inputs/slider/StyledSlider.js +2 -2
  19. package/dist/components/inputs/textarea/StyledTextarea.js +50 -52
  20. package/dist/components/inputs/textarea/StyledTextarea.module.js +3 -3
  21. package/dist/components/miscellaneous/StyledFormControl.js +29 -25
  22. package/dist/components/miscellaneous/StyledInputLabel.js +28 -18
  23. package/dist/datetime/components/date-picker/components/BaseDatePickerInput.js +137 -122
  24. package/dist/datetime/components/date-picker/components/DatePickerInputRangeCompact.js +17 -15
  25. package/dist/datetime/components/date-picker/components/DatePickerInputRangeCompact.module.js +2 -2
  26. package/dist/datetime/components/date-picker/components/DatePickerInputSingle.js +9 -8
  27. package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectMonth.js +17 -14
  28. package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectYear.js +14 -9
  29. package/dist/datetime/components/time-picker/StyledTimePicker.js +78 -74
  30. package/dist/datetime/components/time-picker/TimePickerInput.js +43 -41
  31. package/dist/datetime/components/time-picker/helpers/timePickerWidth.js +12 -0
  32. package/dist/helpers/CharacterCounter.js +21 -0
  33. package/dist/index.js +219 -211
  34. package/dist/src/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.d.ts +2 -2
  35. package/dist/src/components/inputs/dynamic-select/components/DynamicSelectTitle.d.ts +14 -0
  36. package/dist/src/components/inputs/dynamic-select/types.d.ts +11 -2
  37. package/dist/src/components/inputs/field-styles.d.ts +22 -0
  38. package/dist/src/components/inputs/form-layout/StyledFieldPair.d.ts +18 -0
  39. package/dist/src/components/inputs/form-layout/StyledFormColumn.d.ts +12 -0
  40. package/dist/src/components/inputs/form-layout/index.d.ts +4 -0
  41. package/dist/src/components/inputs/input-field/StyledInputField.d.ts +19 -4
  42. package/dist/src/components/inputs/select/StyledSelect.d.ts +7 -2
  43. package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts +5 -1
  44. package/dist/src/components/inputs/textarea/StyledTextarea.d.ts +6 -0
  45. package/dist/src/components/miscellaneous/StyledFormControl.d.ts +5 -2
  46. package/dist/src/components/miscellaneous/StyledInputLabel.d.ts +7 -5
  47. package/dist/src/datetime/components/date-picker/components/BaseDatePickerInput.d.ts +2 -0
  48. package/dist/src/datetime/components/date-picker/types.d.ts +3 -0
  49. package/dist/src/datetime/components/time-picker/helpers/timePickerWidth.d.ts +7 -0
  50. package/dist/src/datetime/components/time-picker/types.d.ts +3 -1
  51. package/dist/src/helpers/CharacterCounter.d.ts +16 -0
  52. package/dist/src/helpers/CharacterCounter.test.d.ts +1 -0
  53. package/dist/src/index.d.ts +1 -0
  54. package/dist/tailwind.config.d.ts +14 -0
  55. package/package.json +1 -1
  56. package/src/styles/fieldWidthTokens.css +8 -0
  57. package/src/styles/index.css +1 -0
  58. package/tw-configs/twConfigs.json +14 -0
@@ -1,43 +1,43 @@
1
1
  import { cn as o } from "../../../helpers/cn.js";
2
- import { StyledChip as f } from "../chip/StyledChip.js";
3
- import { StyledCheckbox as v } from "../../inputs/checkbox/base-ui/StyledCheckbox.js";
2
+ import { StyledChip as v } from "../chip/StyledChip.js";
3
+ import { StyledCheckbox as f } from "../../inputs/checkbox/base-ui/StyledCheckbox.js";
4
4
  import { StyledRadio as x } from "../../inputs/radio-button/base-ui/StyledRadio.js";
5
5
  import i from "./StyledInteractiveChip.module.js";
6
- import { forwardRef as y } from "react";
6
+ import { forwardRef as _ } from "react";
7
7
  import { jsx as r } from "react/jsx-runtime";
8
- var S = "[&[data-testid][role]]:border-2 [&[data-testid][role]]:border-gama-400 [&[data-testid][role]]:bg-gama-25", C = { paddingLeft: "6px" }, h = y(({ type: l = "checkbox", checked: a, size: d = "small", ariaLabel: n, ...e }, c) => {
9
- const t = l === "checkbox", m = n ?? (typeof e.label == "string" ? e.label : void 0), s = !e.readOnly && !t && !!a, b = t ? /* @__PURE__ */ r(v, {
10
- dataTest: e.dataTest,
8
+ var y = "[&[data-testid][role]]:border-gama-400 [&[data-testid][role]]:shadow-[inset_0_0_0_1px_var(--colors-gama-400)] [&[data-testid][role]]:bg-gama-25", S = { paddingLeft: "6px" }, R = _(({ type: l = "checkbox", checked: e, size: d = "small", ariaLabel: n, ...a }, c) => {
9
+ const t = l === "checkbox", m = n ?? (typeof a.label == "string" ? a.label : void 0), s = !a.readOnly && !t && !!e, b = t ? /* @__PURE__ */ r(f, {
10
+ dataTest: a.dataTest,
11
11
  disableRipple: !0,
12
- checked: a,
12
+ checked: e,
13
13
  size: d,
14
- readOnly: e.readOnly,
14
+ readOnly: a.readOnly,
15
15
  decorative: !0,
16
16
  className: o("pointer-events-none", i.control)
17
17
  }) : /* @__PURE__ */ r(x, {
18
- dataTest: e.dataTest,
19
- checked: a,
18
+ dataTest: a.dataTest,
19
+ checked: e,
20
20
  size: d,
21
21
  decorative: !0,
22
22
  className: o("pointer-events-none", i.control)
23
23
  });
24
- return /* @__PURE__ */ r(f, {
24
+ return /* @__PURE__ */ r(v, {
25
25
  ref: c,
26
26
  "aria-label": m,
27
27
  role: l,
28
- "aria-checked": !!a,
29
- "aria-readonly": t ? e.readOnly : void 0,
28
+ "aria-checked": !!e,
29
+ "aria-readonly": t ? a.readOnly : void 0,
30
30
  avatar: b,
31
31
  clickable: !0,
32
32
  tabIndex: 0,
33
- ...e,
34
- className: o(s && S, e.className),
33
+ ...a,
34
+ className: o(s && y, a.className),
35
35
  sx: {
36
- ...C,
37
- ...e.sx
36
+ ...S,
37
+ ...a.sx
38
38
  }
39
39
  });
40
40
  });
41
41
  export {
42
- h as StyledInteractiveChip
42
+ R as StyledInteractiveChip
43
43
  };
@@ -12,21 +12,22 @@ import { OverlayBackOwnerContext as pe, useBackCloses as ge } from "../../../hoo
12
12
  import { useFocusTrap as xe } from "../../../hooks/useFocusTrap.hook.js";
13
13
  import { StyledMenu as ye } from "../../navigation/menu/StyledMenu.js";
14
14
  import { StyledMenuItem as ke } from "../../navigation/menu/StyledMenuItem.js";
15
+ import { fullScreenFieldWidthVars as we } from "../../inputs/field-styles.js";
15
16
  import T from "./MinimizableDialog.module.js";
16
- import { useToggleMenuVisibility as we } from "../../../hooks/useToggleMenuVisibility.hook.js";
17
+ import { useToggleMenuVisibility as ze } from "../../../hooks/useToggleMenuVisibility.hook.js";
17
18
  import H from "clsx";
18
- import { useLayoutEffect as ze, useRef as J, useState as Q } from "react";
19
+ import { useLayoutEffect as Ne, useRef as J, useState as Q } from "react";
19
20
  import { Fragment as p, jsx as e, jsxs as l } from "react/jsx-runtime";
20
- var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: R = !0, showMinimizeIcon: X = !0, showExpandIcon: Y = !0, showFullScreenIcon: Z = !0, title: m, label: g, children: x, open: y, onClose: L, className: j = "", primaryButtonText: S, primaryButtonLoading: n = !1, primaryButtonDisabled: B, primaryButtonDisabledReason: ee, secondaryButtonText: k, onPrimaryButtonClick: F, onSecondaryButtonClick: _, dataTest: E, actionNode: te, extraActions: d, extraActionsText: h, btnContainerClassName: G, footerClassName: ie, footerInfo: D, locale: t = "en", enableFullscreen: le = !0, fullScreenState: O, handleFullScreenState: q }) => {
21
- const [i, re] = Q(!1), [V, ne] = Q(!1), { open: de, anchorEl: ae, handleOpen: oe, handleClose: se } = we(), s = J(null), w = J(null), z = t === "en" ? "Wait until saved" : "Vent til lagringen er ferdig", b = () => {
21
+ var He = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: R = !0, showMinimizeIcon: X = !0, showExpandIcon: Y = !0, showFullScreenIcon: Z = !0, title: m, label: g, children: x, open: y, onClose: L, className: j = "", primaryButtonText: S, primaryButtonLoading: n = !1, primaryButtonDisabled: B, primaryButtonDisabledReason: ee, secondaryButtonText: k, onPrimaryButtonClick: F, onSecondaryButtonClick: _, dataTest: E, actionNode: te, extraActions: d, extraActionsText: h, btnContainerClassName: G, footerClassName: ie, footerInfo: D, locale: t = "en", enableFullscreen: le = !0, fullScreenState: O, handleFullScreenState: V }) => {
22
+ const [i, re] = Q(!1), [q, ne] = Q(!1), { open: de, anchorEl: ae, handleOpen: oe, handleClose: se } = ze(), s = J(null), w = J(null), z = t === "en" ? "Wait until saved" : "Vent til lagringen er ferdig", b = () => {
22
23
  if (n) return !1;
23
24
  L();
24
- }, o = O ?? V, a = o && !i;
25
+ }, o = O ?? q, a = o && !i;
25
26
  if (xe(y && a, s, b), ge({
26
27
  active: y && a,
27
28
  requestClose: b,
28
29
  ownerRef: s
29
- }), ze(() => {
30
+ }), Ne(() => {
30
31
  s.current?.toggleAttribute("inert", i), w.current?.toggleAttribute("inert", !i);
31
32
  }, [i]), !y) return null;
32
33
  const ce = a ? {
@@ -36,15 +37,16 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
36
37
  top: "50%",
37
38
  transform: "translate(-50%, -50%)",
38
39
  width: "min(1000px, calc(100vw - 32px))",
39
- height: "95dvh"
40
- } : void 0, P = o ? t === "en" ? "Exit full screen" : "Avslutt fullskjerm" : t === "en" ? "Full screen" : "Fullskjerm", U = S ?? n, W = U || k, $ = /* @__PURE__ */ l(p, { children: [k && _ && /* @__PURE__ */ e(r, {
40
+ height: "95dvh",
41
+ ...we
42
+ } : void 0, W = o ? t === "en" ? "Exit full screen" : "Avslutt fullskjerm" : t === "en" ? "Full screen" : "Fullskjerm", P = S ?? n, U = P || k, $ = /* @__PURE__ */ l(p, { children: [k && _ && /* @__PURE__ */ e(r, {
41
43
  dataTest: "cancel-button",
42
44
  variant: "outlined",
43
45
  disabled: n,
44
46
  disabledReason: z,
45
47
  onClick: _,
46
48
  children: k
47
- }), U && F && /* @__PURE__ */ e(r, {
49
+ }), P && F && /* @__PURE__ */ e(r, {
48
50
  dataTest: "save-button",
49
51
  loading: n,
50
52
  locale: t,
@@ -151,14 +153,14 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
151
153
  }) })
152
154
  }),
153
155
  le && Z && /* @__PURE__ */ e(u, {
154
- title: P,
156
+ title: W,
155
157
  children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {
156
158
  dataTest: "fullscreen-button",
157
- "aria-label": M ? void 0 : P,
159
+ "aria-label": M ? void 0 : W,
158
160
  variant: "textGray",
159
161
  size: "small",
160
162
  onClick: () => {
161
- O !== void 0 && q ? q() : ne(!V);
163
+ O !== void 0 && V ? V() : ne(!q);
162
164
  },
163
165
  endIcon: o ? /* @__PURE__ */ e(be, {
164
166
  width: 20,
@@ -231,12 +233,12 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
231
233
  }),
232
234
  " ",
233
235
  D,
234
- W ? /* @__PURE__ */ e("div", {
236
+ U ? /* @__PURE__ */ e("div", {
235
237
  className: f("flex justify-end gap-x-2", G),
236
238
  children: $
237
239
  }) : null
238
240
  ]
239
- }) : /* @__PURE__ */ e(p, { children: W ? /* @__PURE__ */ e("div", {
241
+ }) : /* @__PURE__ */ e(p, { children: U ? /* @__PURE__ */ e("div", {
240
242
  className: f("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", G),
241
243
  children: $
242
244
  }) : null })]
@@ -246,5 +248,5 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
246
248
  ] });
247
249
  };
248
250
  export {
249
- Ke as MinimizableDialog
251
+ He as MinimizableDialog
250
252
  };
@@ -5,27 +5,28 @@ import { DialogBusyContext as A, useDialogBusyBoundary as ie } from "../../dialo
5
5
  import { useMobileMediaQuery as le } from "../../../../hooks/useMediaQuery.hook.js";
6
6
  import { OverlayBackOwnerContext as ne, useBackCloses as oe } from "../../../../hooks/useBackCloses.hook.js";
7
7
  import { useFocusTrap as re } from "../../../../hooks/useFocusTrap.hook.js";
8
- import { CloseBtn as $ } from "../components/CloseBtn.js";
9
- import { MinimizeBtn as q } from "../components/MinimizeBtn.js";
10
- import { FullScreenBtn as se } from "../components/FullscreenBtn.js";
8
+ import { fullScreenFieldWidthVars as se } from "../../../inputs/field-styles.js";
9
+ import { CloseBtn as V } from "../components/CloseBtn.js";
10
+ import { MinimizeBtn as $ } from "../components/MinimizeBtn.js";
11
+ import { FullScreenBtn as ce } from "../components/FullscreenBtn.js";
11
12
  import h from "./MinimizableDialogV2.module.js";
12
- import { useTranslations as ce } from "./useTranslations.js";
13
- import { useControlledProps as ae } from "./useControlledProps.js";
14
- import de from "clsx";
15
- import { useId as V, useLayoutEffect as H, useRef as d } from "react";
16
- import { Fragment as me, jsx as e, jsxs as r } from "react/jsx-runtime";
17
- var Te = (C) => {
18
- const { showCloseIcon: R = !0, showMinimizeIcon: L = !0, showExpandIcon: W = !0, enableFullscreen: _ = !0, title: u, label: f, children: Q, open: i, onClose: U, classNameOverrides: b = {
13
+ import { useTranslations as ae } from "./useTranslations.js";
14
+ import { useControlledProps as de } from "./useControlledProps.js";
15
+ import me from "clsx";
16
+ import { useId as q, useLayoutEffect as W, useRef as d } from "react";
17
+ import { Fragment as ue, jsx as e, jsxs as r } from "react/jsx-runtime";
18
+ var Me = (C) => {
19
+ const { showCloseIcon: R = !0, showMinimizeIcon: H = !0, showExpandIcon: L = !0, enableFullscreen: _ = !0, title: u, label: f, children: Q, open: i, onClose: U, classNameOverrides: b = {
19
20
  maximized: "",
20
21
  minimized: "",
21
22
  fullscreen: ""
22
- }, dataTest: G, actionNode: J, locale: K = "en", busyReason: X, style: N, initialFocusRef: S } = C, s = le(), l = ce(K), n = d(null), p = d(null), F = d(null), B = d(null), g = d(!1), y = d(null), x = V(), T = V(), { minimized: t, setMinimized: I, fullScreen: o, setFullScreen: M } = ae(C), c = o && !t, { busy: z, busyReason: k, contextValue: E } = ie(X ?? l.waitUntilSaved), v = () => {
23
+ }, dataTest: G, actionNode: J, locale: K = "en", busyReason: X, style: N, initialFocusRef: S } = C, s = le(), l = ae(K), n = d(null), p = d(null), F = d(null), B = d(null), g = d(!1), y = d(null), x = q(), T = q(), { minimized: t, setMinimized: I, fullScreen: o, setFullScreen: M } = de(C), c = o && !t, { busy: z, busyReason: k, contextValue: E } = ie(X ?? l.waitUntilSaved), v = () => {
23
24
  if (z) return !1;
24
25
  I(!1), U();
25
26
  };
26
- H(() => {
27
+ W(() => {
27
28
  n.current?.toggleAttribute("inert", t), p.current?.toggleAttribute("inert", !t);
28
- }, [t]), H(() => {
29
+ }, [t]), W(() => {
29
30
  const w = i && !g.current, m = !i && g.current;
30
31
  if (g.current = i, m) {
31
32
  const D = y.current;
@@ -68,11 +69,12 @@ var Te = (C) => {
68
69
  transform: "translate(-50%, -50%)",
69
70
  width: "min(1000px, calc(100vw - 32px))",
70
71
  maxWidth: "min(1000px, calc(100vw - 32px))",
71
- height: "95dvh"
72
+ height: "95dvh",
73
+ ...se
72
74
  } : void 0;
73
75
  if (!i) return null;
74
76
  const Z = f ? `${T} ${x}` : x;
75
- return /* @__PURE__ */ r(me, { children: [
77
+ return /* @__PURE__ */ r(ue, { children: [
76
78
  /* @__PURE__ */ e("div", {
77
79
  ref: p,
78
80
  style: {
@@ -81,7 +83,7 @@ var Te = (C) => {
81
83
  },
82
84
  className: a(h["minimized-dialog"], !t && h.hidden, b.minimized),
83
85
  children: /* @__PURE__ */ r("div", {
84
- className: de("flex items-center justify-between", !t && "hidden"),
86
+ className: me("flex items-center justify-between", !t && "hidden"),
85
87
  "data-testid": G,
86
88
  children: [/* @__PURE__ */ e("div", {
87
89
  className: "max-w-[303px] truncate pr-1 text-lg font-semibold text-delta-800",
@@ -95,12 +97,12 @@ var Te = (C) => {
95
97
  })
96
98
  }), /* @__PURE__ */ r("div", {
97
99
  className: "flex items-center gap-x-1",
98
- children: [/* @__PURE__ */ e(q, {
100
+ children: [/* @__PURE__ */ e($, {
99
101
  type: "expand",
100
- visibility: W,
102
+ visibility: L,
101
103
  onClick: j,
102
104
  tooltipTitle: l.expand
103
- }), /* @__PURE__ */ e($, {
105
+ }), /* @__PURE__ */ e(V, {
104
106
  buttonRef: B,
105
107
  showCloseIcon: R,
106
108
  onClick: v,
@@ -148,13 +150,13 @@ var Te = (C) => {
148
150
  value: E,
149
151
  children: J
150
152
  }),
151
- /* @__PURE__ */ e(q, {
152
- visibility: L && !s && !o,
153
+ /* @__PURE__ */ e($, {
154
+ visibility: H && !s && !o,
153
155
  type: "minimize",
154
156
  onClick: j,
155
157
  tooltipTitle: l.minimize
156
158
  }),
157
- /* @__PURE__ */ e(se, {
159
+ /* @__PURE__ */ e(ce, {
158
160
  showFullScreenIcon: _ && !s,
159
161
  fullScreen: o,
160
162
  onClick: () => {
@@ -162,7 +164,7 @@ var Te = (C) => {
162
164
  },
163
165
  tooltipTitle: o ? l.exitFullscreen : l.fullscreen
164
166
  }),
165
- /* @__PURE__ */ e($, {
167
+ /* @__PURE__ */ e(V, {
166
168
  buttonRef: F,
167
169
  showCloseIcon: R,
168
170
  onClick: v,
@@ -188,5 +190,5 @@ var Te = (C) => {
188
190
  ] });
189
191
  };
190
192
  export {
191
- Te as MinimizableDialogV2
193
+ Me as MinimizableDialogV2
192
194
  };
@@ -1,43 +1,47 @@
1
1
  import { cn as v } from "../../../../helpers/cn.js";
2
- import { StyledTooltip as J } from "../../../data-display/tooltip/StyledTooltip.js";
2
+ import { StyledTooltip as Q } from "../../../data-display/tooltip/StyledTooltip.js";
3
3
  import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
4
- import { ErrorOutlineIcon as P } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
5
- import { StyledChip as Q } from "../../../data-display/chip/StyledChip.js";
4
+ import { ErrorOutlineIcon as U } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
5
+ import { StyledChip as X } from "../../../data-display/chip/StyledChip.js";
6
6
  import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
7
- import { StyledButton as U } from "../../button/StyledButton.js";
8
- import { useHelperAlertRole as X } from "../../../../helpers/useHelperAlertRole.js";
9
- import { warnMissingErrorMessage as Y } from "../../../../helpers/warnMissingErrorMessage.js";
10
- import { useWrap as Z } from "../helpers/useWrap.js";
7
+ import { StyledButton as Y } from "../../button/StyledButton.js";
8
+ import { useHelperAlertRole as Z } from "../../../../helpers/useHelperAlertRole.js";
9
+ import { warnMissingErrorMessage as _ } from "../../../../helpers/warnMissingErrorMessage.js";
10
+ import { fieldWidthStyle as ee } from "../../field-styles.js";
11
+ import { useWrap as te } from "../helpers/useWrap.js";
12
+ import { DynamicSelectTitle as le } from "./DynamicSelectTitle.js";
11
13
  import { Skeleton as N } from "../../../mui-compat/Skeleton.js";
12
- import { forwardRef as _, useEffect as ee, useId as te } from "react";
13
- import { jsx as t, jsxs as T } from "react/jsx-runtime";
14
- var he = _((V, A) => {
15
- const { options: d, dataTest: R, value: r, readOnly: n, multiple: i, title: C, disabled: b, onChange: p, required: D, error: f, helperText: I, valueKey: E = "value", labelKey: L = "label", renderLabel: o, getOptionTooltip: k, loading: $, size: g, locale: z = "en", clearSelectionLabel: B } = V, q = te();
16
- Y("DynamicInteractiveChipGroup", f, I);
17
- const G = X(f), { containerRef: m, wrapDisabled: w } = Z({ dependencyList: [d, d.length] });
18
- ee(() => {
14
+ import { forwardRef as re, useEffect as ie, useId as ae } from "react";
15
+ import { jsx as t, jsxs as S } from "react/jsx-runtime";
16
+ var ve = re((V, A) => {
17
+ const { options: d, dataTest: D, value: r, readOnly: a, multiple: n, title: R, titleSize: z, width: T = "full", disabled: b, onChange: p, required: E, error: f, helperText: C, valueKey: L = "value", labelKey: $ = "label", renderLabel: o, getOptionTooltip: I, loading: B, size: y, locale: q = "en", clearSelectionLabel: G } = V, K = ae();
18
+ _("DynamicInteractiveChipGroup", f, C);
19
+ const M = Z(f), { containerRef: m, wrapDisabled: w } = te({ dependencyList: [d, d.length] });
20
+ ie(() => {
19
21
  m.current && (m.current.inert = !0);
20
22
  }, [m]);
21
- const u = (e) => typeof e == "object" ? e?.[L]?.toString() ?? "" : e?.toString() ?? "", y = (e) => typeof e == "object" ? e?.[E] : e, c = (e) => {
22
- const l = y(e);
23
+ const u = (e) => typeof e == "object" ? e?.[$]?.toString() ?? "" : e?.toString() ?? "", g = (e) => typeof e == "object" ? e?.[L] : e, c = (e) => {
24
+ const l = g(e);
23
25
  return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : u(e);
24
- }, s = (e, l) => y(e) === y(l), K = i ? Array.isArray(r) && r.length > 0 : r != null, M = (e) => {
25
- if (!i) {
26
- const a = s(e, r) ? null : e;
27
- if (a === null) return;
28
- p(a);
26
+ }, s = (e, l) => g(e) === g(l), W = n ? Array.isArray(r) && r.length > 0 : r != null, F = (e) => {
27
+ if (!n) {
28
+ const i = s(e, r) ? null : e;
29
+ if (i === null) return;
30
+ p(i);
29
31
  return;
30
32
  }
31
33
  const l = r ?? [];
32
- p(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
33
- }, h = n ? d.filter((e) => !!(i ? r?.find((l) => s(l, e)) : s(r, e))) : d, F = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !n);
34
- return /* @__PURE__ */ T("div", {
35
- "data-testid": `${R}-dynamic-radio-group`,
34
+ p(l.find((i) => s(i, e)) ? l.filter((i) => !s(i, e)) : [...l, e]);
35
+ }, h = a ? d.filter((e) => !!(n ? r?.find((l) => s(l, e)) : s(r, e))) : d, H = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !a);
36
+ return /* @__PURE__ */ S("div", {
37
+ "data-testid": `${D}-dynamic-radio-group`,
36
38
  className: "relative flex flex-col gap-y-1",
39
+ "data-field-width": T,
40
+ style: ee(T),
37
41
  children: [
38
- C && /* @__PURE__ */ t("span", {
39
- className: "text-base font-semibold text-delta-800",
40
- children: C
42
+ /* @__PURE__ */ t(le, {
43
+ title: R,
44
+ titleSize: z
41
45
  }),
42
46
  /* @__PURE__ */ t("div", {
43
47
  "aria-hidden": !0,
@@ -46,15 +50,15 @@ var he = _((V, A) => {
46
50
  style: { width: "100%" },
47
51
  children: h.map((e) => /* @__PURE__ */ t(O, {
48
52
  className: "w-fit",
49
- readOnly: n,
50
- type: i ? "checkbox" : "radio",
53
+ readOnly: a,
54
+ type: n ? "checkbox" : "radio",
51
55
  dataTest: `ic-${c(e)}-hidden`,
52
56
  label: o ? o(e) : u(e)
53
57
  }, c(e)))
54
58
  }),
55
59
  /* @__PURE__ */ t("div", {
56
60
  className: v("flex flex-wrap gap-2", w && "flex-col gap-1"),
57
- children: $ ? /* @__PURE__ */ T("div", {
61
+ children: B ? /* @__PURE__ */ S("div", {
58
62
  className: "flex flex-wrap gap-2",
59
63
  children: [
60
64
  /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" }),
@@ -62,45 +66,45 @@ var he = _((V, A) => {
62
66
  /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" })
63
67
  ]
64
68
  }) : h?.length ? h.map((e, l) => {
65
- const a = !!(i ? r?.find((W) => s(W, e)) : s(r, e)), H = k ? k(e) : null;
66
- if (n && !a) return null;
67
- const x = typeof e == "object" ? !!e?.disabled : !1, S = !x && !n && l === F ? A : void 0;
68
- return /* @__PURE__ */ t(J, {
69
- title: H,
69
+ const i = !!(n ? r?.find((P) => s(P, e)) : s(r, e)), J = I ? I(e) : null;
70
+ if (a && !i) return null;
71
+ const x = typeof e == "object" ? !!e?.disabled : !1, k = !x && !a && l === H ? A : void 0;
72
+ return /* @__PURE__ */ t(Q, {
73
+ title: J,
70
74
  arrow: !0,
71
75
  children: /* @__PURE__ */ t("span", {
72
76
  className: v(x && "cursor-not-allowed"),
73
- children: n && !w ? /* @__PURE__ */ t(Q, {
74
- ref: S,
77
+ children: a && !w ? /* @__PURE__ */ t(X, {
78
+ ref: k,
75
79
  disabled: !!b || x,
76
80
  classes: { root: "min-h-[32px] h-full" },
77
81
  className: "w-fit",
78
82
  dataTest: `ic-${c(e)}`,
79
83
  label: o ? o(e) : u(e)
80
84
  }) : /* @__PURE__ */ t(O, {
81
- ref: S,
85
+ ref: k,
82
86
  disabled: !!b || x,
83
87
  classes: w ? {
84
88
  root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
85
89
  label: "block whitespace-normal break-words overflow-visible"
86
90
  } : { root: "min-h-[32px] h-full" },
87
91
  className: "w-fit",
88
- readOnly: n,
89
- type: i ? "checkbox" : "radio",
92
+ readOnly: a,
93
+ type: n ? "checkbox" : "radio",
90
94
  dataTest: `ic-${c(e)}`,
91
- checked: a,
92
- size: g,
93
- onClick: () => M(e),
95
+ checked: i,
96
+ size: y,
97
+ onClick: () => F(e),
94
98
  label: o ? o(e) : u(e)
95
99
  })
96
100
  })
97
101
  }, c(e));
98
102
  }) : /* @__PURE__ */ t("span", { children: "-" })
99
103
  }),
100
- !D && K && !n && !b && /* @__PURE__ */ t(U, {
104
+ !E && W && !a && !b && /* @__PURE__ */ t(Y, {
101
105
  dataTest: "clear-selection-btn",
102
106
  variant: "text",
103
- startIcon: g === "medium" ? /* @__PURE__ */ t(j, {
107
+ startIcon: y === "medium" ? /* @__PURE__ */ t(j, {
104
108
  height: 24,
105
109
  width: 24,
106
110
  className: "size-6"
@@ -110,26 +114,26 @@ var he = _((V, A) => {
110
114
  className: "size-5"
111
115
  }),
112
116
  className: "w-fit",
113
- size: g,
114
- onClick: () => p(i ? [] : null),
115
- children: B ?? (z === "en" ? "Clear selection" : "Fjern valget")
117
+ size: y,
118
+ onClick: () => p(n ? [] : null),
119
+ children: G ?? (q === "en" ? "Clear selection" : "Fjern valget")
116
120
  }),
117
- /* @__PURE__ */ T("div", {
118
- id: q,
119
- role: G,
121
+ /* @__PURE__ */ S("div", {
122
+ id: K,
123
+ role: M,
120
124
  className: v("flex min-h-[24px] items-center gap-1 pt-1 text-sm/5 text-delta-600", f && "text-error-500"),
121
- children: [f && /* @__PURE__ */ t(P, {
125
+ children: [f && /* @__PURE__ */ t(U, {
122
126
  width: 20,
123
127
  height: 20,
124
128
  className: "min-w-5"
125
129
  }), /* @__PURE__ */ t("span", {
126
130
  className: "line-clamp-1",
127
- children: I
131
+ children: C
128
132
  })]
129
133
  })
130
134
  ]
131
135
  });
132
136
  });
133
137
  export {
134
- he as DynamicInteractiveChipGroup
138
+ ve as DynamicInteractiveChipGroup
135
139
  };