@pismo/marola 1.0.0-beta.59 → 1.0.0-beta.6

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 (159) hide show
  1. package/dist/{Button-BAljjMv3.js → Button-2b1peDFT.js} +2 -2
  2. package/dist/{ClickAwayListener-DbEYZpyh.js → ClickAwayListener-BSW-Nd-y.js} +3 -4
  3. package/dist/Dialog.module-DFEmFdYT.js +30 -0
  4. package/dist/Group-B3p31ftp.js +26 -0
  5. package/dist/{Popup-Ck3XlWMq.js → Popup-B6ZSGIEI.js} +3 -3
  6. package/dist/{Portal-oY3enyAm.js → Portal-DIeBsWdL.js} +2 -2
  7. package/dist/SelectButton-K3OIfR5m.js +61 -0
  8. package/dist/{Tabs.module-BGGTkDc5.js → Tabs.module-jkH1Qjn7.js} +7 -7
  9. package/dist/Toggle-BCgIItCc.js +142 -0
  10. package/dist/assets/Advice.css +1 -1
  11. package/dist/assets/Button.css +1 -1
  12. package/dist/assets/Checkbox.css +1 -1
  13. package/dist/assets/Dialog.css +1 -1
  14. package/dist/assets/EllipsisTooltip.css +1 -1
  15. package/dist/assets/Group.css +1 -1
  16. package/dist/assets/IconButton.css +1 -1
  17. package/dist/assets/Input.css +1 -1
  18. package/dist/assets/PageHeader.css +1 -1
  19. package/dist/assets/Pagination.css +1 -1
  20. package/dist/assets/SelectButton.css +1 -1
  21. package/dist/assets/Skeleton.css +1 -1
  22. package/dist/assets/Snackbar.css +1 -1
  23. package/dist/assets/SortTooltip.css +1 -1
  24. package/dist/assets/Stepper.css +1 -1
  25. package/dist/assets/Table.css +1 -1
  26. package/dist/assets/Tabs.css +1 -1
  27. package/dist/assets/TextDisplay.css +1 -1
  28. package/dist/assets/Toggle.css +1 -1
  29. package/dist/assets/Toggle2.css +1 -1
  30. package/dist/assets/Typography.css +1 -1
  31. package/dist/{combineHooksSlotProps-C-zYvfnF.js → combineHooksSlotProps-DVjg9PRh.js} +1 -1
  32. package/dist/components/Advice/Advice.d.ts +17 -32
  33. package/dist/components/Advice/Advice.js +40 -39
  34. package/dist/components/Advice/Advice.stories.d.ts +3 -4
  35. package/dist/components/Button/Button.d.ts +0 -2
  36. package/dist/components/Button/Button.js +49 -51
  37. package/dist/components/Checkbox/Checkbox.js +52 -52
  38. package/dist/components/Chip/Chip.d.ts +12 -6
  39. package/dist/components/Chip/Chip.js +6 -11
  40. package/dist/components/Chip/Chip.stories.d.ts +14 -5
  41. package/dist/components/Dialog/Actions.js +1 -1
  42. package/dist/components/Dialog/Backdrop.d.ts +3 -3
  43. package/dist/components/Dialog/Backdrop.js +7 -8
  44. package/dist/components/Dialog/CloseIconButton.d.ts +2 -1
  45. package/dist/components/Dialog/CloseIconButton.js +18 -15
  46. package/dist/components/Dialog/Dialog.d.ts +6 -9
  47. package/dist/components/Dialog/Dialog.js +139 -139
  48. package/dist/components/Dialog/Dialog.stories.d.ts +46 -50
  49. package/dist/components/Dialog/DialogTitle.js +1 -1
  50. package/dist/components/EllipsisTooltip/EllipsisTooltip.js +17 -30
  51. package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts +1 -2
  52. package/dist/components/Icon/Icon.js +47 -315
  53. package/dist/components/Icon/types.d.ts +1 -1
  54. package/dist/components/IconButton/IconButton.js +42 -42
  55. package/dist/components/Input/Input.d.ts +5 -26
  56. package/dist/components/Input/Input.js +304 -319
  57. package/dist/components/Input/Input.stories.d.ts +21 -2
  58. package/dist/components/InputSearch/InputSearch.d.ts +7 -37
  59. package/dist/components/InputSearch/InputSearch.js +29 -27
  60. package/dist/components/InputSearch/InputSearch.stories.d.ts +3 -15
  61. package/dist/components/PageHeader/PageHeader.d.ts +2 -6
  62. package/dist/components/PageHeader/PageHeader.js +65 -72
  63. package/dist/components/PageHeader/PageHeader.stories.d.ts +1 -3
  64. package/dist/components/Pagination/Pagination.d.ts +1 -5
  65. package/dist/components/Pagination/Pagination.js +91 -90
  66. package/dist/components/Pagination/Pagination.stories.d.ts +1 -1
  67. package/dist/components/Select/Select.d.ts +0 -21
  68. package/dist/components/Select/Select.js +413 -476
  69. package/dist/components/Select/SelectButton.d.ts +0 -2
  70. package/dist/components/Select/SelectButton.js +2 -3
  71. package/dist/components/Skeleton/Skeleton.d.ts +1 -3
  72. package/dist/components/Skeleton/Skeleton.js +14 -20
  73. package/dist/components/Skeleton/SkeletonTable.stories.d.ts +1 -1
  74. package/dist/components/Snackbar/Snackbar.js +94 -94
  75. package/dist/components/Snackbar/Snackbar.stories.d.ts +3 -3
  76. package/dist/components/SortTooltip/SortTooltip.js +46 -46
  77. package/dist/components/Stepper/Stepper.js +35 -35
  78. package/dist/components/Table/Table.d.ts +1 -3
  79. package/dist/components/Table/Table.js +99 -87
  80. package/dist/components/Table/Table.stories.d.ts +1 -1
  81. package/dist/components/Tabs/Tab.d.ts +3 -5
  82. package/dist/components/Tabs/Tab.js +36 -38
  83. package/dist/components/Tabs/TabPanel.d.ts +2 -4
  84. package/dist/components/Tabs/TabPanel.js +40 -51
  85. package/dist/components/Tabs/Tabs.d.ts +4 -6
  86. package/dist/components/Tabs/Tabs.js +128 -131
  87. package/dist/components/TextDisplay/TextDisplay.d.ts +3 -9
  88. package/dist/components/TextDisplay/TextDisplay.js +31 -45
  89. package/dist/components/TextDisplay/TextDisplay.stories.d.ts +1 -2
  90. package/dist/components/Toggle/Toggle.js +56 -56
  91. package/dist/components/ToggleGroup/Group.d.ts +0 -2
  92. package/dist/components/ToggleGroup/Group.js +2 -4
  93. package/dist/components/ToggleGroup/Toggle.d.ts +0 -2
  94. package/dist/components/ToggleGroup/Toggle.js +5 -9
  95. package/dist/components/ToggleGroup/ToggleGroup.js +2 -2
  96. package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +0 -2
  97. package/dist/components/Tooltip/Tooltip.d.ts +1 -3
  98. package/dist/components/Tooltip/Tooltip.js +4 -4
  99. package/dist/components/Tooltip/Tooltip.stories.d.ts +0 -1
  100. package/dist/components/Typography/Typography.js +47 -47
  101. package/dist/{useSlotProps-C_I1kEHr.js → index-CH45lKw7.js} +99 -99
  102. package/dist/{index-bQFToy-I.js → index-CjW42-M-.js} +1 -1
  103. package/dist/main.d.ts +0 -8
  104. package/dist/main.js +76 -90
  105. package/dist/marola.css +1 -1
  106. package/dist/{useButton-DcihopJG.js → useButton-DNk3wrQp.js} +1 -1
  107. package/dist/useCompoundItem-D1iRfg8D.js +84 -0
  108. package/dist/useEventCallback-xTG9piMa.js +45 -0
  109. package/dist/{useList-B9C55YB7.js → useList-B0hog_3-.js} +2 -2
  110. package/package.json +12 -21
  111. package/dist/Dialog.module-BSeaj3tQ.js +0 -30
  112. package/dist/Group-DspH8hyO.js +0 -30
  113. package/dist/Popover.module-B4boCutS.js +0 -10
  114. package/dist/SelectButton-B38avP9u.js +0 -75
  115. package/dist/Toggle-2kIaSHMl.js +0 -190
  116. package/dist/assets/Adornment.css +0 -1
  117. package/dist/assets/Autocomplete.css +0 -1
  118. package/dist/assets/Avatar.css +0 -1
  119. package/dist/assets/Popover.css +0 -1
  120. package/dist/assets/ResultWithChips.css +0 -1
  121. package/dist/assets/StepperNavigator.css +0 -1
  122. package/dist/components/Adornment/Adornment.d.ts +0 -20
  123. package/dist/components/Adornment/Adornment.js +0 -13
  124. package/dist/components/Adornment/Adornment.stories.d.ts +0 -14
  125. package/dist/components/Adornment/adornment.test.d.ts +0 -1
  126. package/dist/components/Autocomplete/Autocomplete.d.ts +0 -20
  127. package/dist/components/Autocomplete/Autocomplete.js +0 -679
  128. package/dist/components/Autocomplete/Autocomplete.stories.d.ts +0 -23
  129. package/dist/components/Avatar/Avatar.d.ts +0 -15
  130. package/dist/components/Avatar/Avatar.js +0 -51
  131. package/dist/components/Avatar/Avatar.stories.d.ts +0 -25
  132. package/dist/components/ConfirmationDialog/ConfirmationDialog.d.ts +0 -14
  133. package/dist/components/ConfirmationDialog/ConfirmationDialog.js +0 -37
  134. package/dist/components/ConfirmationDialog/ConfirmationDialog.stories.d.ts +0 -23
  135. package/dist/components/ConfirmationDialog/ConfirmationModal.test.d.ts +0 -1
  136. package/dist/components/PageHeader/PageHeader.test.d.ts +0 -1
  137. package/dist/components/Popover/Popover.d.ts +0 -32
  138. package/dist/components/Popover/Popover.js +0 -24
  139. package/dist/components/Popover/Popover.stories.d.ts +0 -34
  140. package/dist/components/Popover/PopoverBody.d.ts +0 -6
  141. package/dist/components/Popover/PopoverBody.js +0 -6
  142. package/dist/components/Popover/PopoverFooter.d.ts +0 -6
  143. package/dist/components/Popover/PopoverFooter.js +0 -6
  144. package/dist/components/Popover/PopoverHeader.d.ts +0 -6
  145. package/dist/components/Popover/PopoverHeader.js +0 -6
  146. package/dist/components/ResultWithChips/ResultWithChips.d.ts +0 -12
  147. package/dist/components/ResultWithChips/ResultWithChips.js +0 -33
  148. package/dist/components/RowItem/RowItem.d.ts +0 -25
  149. package/dist/components/RowItem/RowItem.js +0 -23
  150. package/dist/components/RowItem/RowItem.stories.d.ts +0 -17
  151. package/dist/components/RowItem/rowItem.test.d.ts +0 -1
  152. package/dist/components/StepperNavigator/StepperNavigator.d.ts +0 -58
  153. package/dist/components/StepperNavigator/StepperNavigator.js +0 -115
  154. package/dist/components/StepperNavigator/StepperNavigator.stories.d.ts +0 -18
  155. package/dist/components/StepperNavigator/StepperNavigator.test.d.ts +0 -1
  156. package/dist/ownerDocument-YGhwAnr1.js +0 -33
  157. package/dist/useCompoundItem-B7Eo_qZk.js +0 -68
  158. package/dist/useEventCallback-BAQJJ3ye.js +0 -14
  159. package/dist/useId-BW-oWmul.js +0 -19
@@ -1,679 +0,0 @@
1
- import '../../assets/Autocomplete.css';
2
- import { jsx as le, jsxs as lt } from "react/jsx-runtime";
3
- import * as h from "react";
4
- import { useId as at, useState as ut, createElement as ct } from "react";
5
- import { Icon as pt } from "../Icon/Icon.js";
6
- import { Input as ft } from "../Input/Input.js";
7
- import { b as je, s as dt } from "../../useSlotProps-C_I1kEHr.js";
8
- import { u as gt } from "../../useId-BW-oWmul.js";
9
- import { u as _e } from "../../useControlled-CCMYYdCM.js";
10
- import { u as ae } from "../../useEventCallback-BAQJJ3ye.js";
11
- const ht = (c) => {
12
- const b = h.useRef({});
13
- return h.useEffect(() => {
14
- b.current = c;
15
- }), b.current;
16
- };
17
- function Ve(c) {
18
- return typeof c.normalize < "u" ? c.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : c;
19
- }
20
- function mt(c = {}) {
21
- const {
22
- ignoreAccents: b = !0,
23
- ignoreCase: g = !0,
24
- limit: D,
25
- matchFrom: K = "any",
26
- stringify: v,
27
- trim: C = !1
28
- } = c;
29
- return (N, {
30
- inputValue: L,
31
- getOptionLabel: y
32
- }) => {
33
- let S = C ? L.trim() : L;
34
- g && (S = S.toLowerCase()), b && (S = Ve(S));
35
- const q = S ? N.filter((z) => {
36
- let w = (v || y)(z);
37
- return g && (w = w.toLowerCase()), b && (w = Ve(w)), K === "start" ? w.indexOf(S) === 0 : w.indexOf(S) > -1;
38
- }) : N;
39
- return typeof D == "number" ? q.slice(0, D) : q;
40
- };
41
- }
42
- function ue(c, b) {
43
- for (let g = 0; g < c.length; g += 1)
44
- if (b(c[g]))
45
- return g;
46
- return -1;
47
- }
48
- const bt = mt(), Me = 5, yt = (c) => {
49
- var b;
50
- return c.current !== null && ((b = c.current.parentElement) == null ? void 0 : b.contains(document.activeElement));
51
- };
52
- function xt(c) {
53
- const {
54
- // eslint-disable-next-line @typescript-eslint/naming-convention
55
- unstable_isActiveElementInListbox: b = yt,
56
- // eslint-disable-next-line @typescript-eslint/naming-convention
57
- unstable_classNamePrefix: g = "Mui",
58
- autoComplete: D = !1,
59
- autoHighlight: K = !1,
60
- autoSelect: v = !1,
61
- blurOnSelect: C = !1,
62
- clearOnBlur: N = !c.freeSolo,
63
- clearOnEscape: L = !1,
64
- componentName: y = "useAutocomplete",
65
- defaultValue: S = c.multiple ? [] : null,
66
- disableClearable: q = !1,
67
- disableCloseOnSelect: z = !1,
68
- disabled: w,
69
- disabledItemsFocusable: ce = !1,
70
- disableListWrap: J = !1,
71
- filterOptions: pe = bt,
72
- filterSelectedOptions: Q = !1,
73
- freeSolo: i = !1,
74
- getOptionDisabled: m,
75
- getOptionKey: j,
76
- getOptionLabel: V = (t) => {
77
- var e;
78
- return (e = t.label) != null ? e : t;
79
- },
80
- groupBy: _,
81
- handleHomeEndKeys: Z = !c.freeSolo,
82
- id: fe,
83
- includeInputInList: Oe = !1,
84
- inputValue: Re,
85
- isOptionEqualToValue: M = (t, e) => t === e,
86
- multiple: u = !1,
87
- onChange: Ie,
88
- onClose: Se,
89
- onHighlightChange: we,
90
- onInputChange: R,
91
- onOpen: ke,
92
- open: He,
93
- openOnFocus: Fe = !1,
94
- options: de,
95
- readOnly: W = !1,
96
- selectOnFocus: qe = !c.freeSolo,
97
- value: Be
98
- } = c, E = gt(fe);
99
- let O = V;
100
- O = (t) => {
101
- const e = V(t);
102
- if (typeof e != "string") {
103
- if (process.env.NODE_ENV !== "production") {
104
- const r = e === void 0 ? "undefined" : `${typeof e} (${e})`;
105
- console.error(`MUI: The \`getOptionLabel\` method of ${y} returned ${r} instead of a string for ${JSON.stringify(t)}.`);
106
- }
107
- return String(e);
108
- }
109
- return e;
110
- };
111
- const ge = h.useRef(!1), he = h.useRef(!0), f = h.useRef(null), T = h.useRef(null), [ee, Ue] = h.useState(null), [$, me] = h.useState(-1), Ee = K ? 0 : -1, x = h.useRef(Ee), [o, Ke] = _e({
112
- controlled: Be,
113
- default: S,
114
- name: y
115
- }), [a, te] = _e({
116
- controlled: Re,
117
- default: "",
118
- name: y,
119
- state: "inputValue"
120
- }), [re, Te] = h.useState(!1), oe = h.useCallback((t, e) => {
121
- if (!(u ? o.length < e.length : e !== null) && !N)
122
- return;
123
- let n;
124
- if (u)
125
- n = "";
126
- else if (e == null)
127
- n = "";
128
- else {
129
- const s = O(e);
130
- n = typeof s == "string" ? s : "";
131
- }
132
- a !== n && (te(n), R && R(t, n, "reset"));
133
- }, [O, a, u, R, te, N, o]), [B, $e] = _e({
134
- controlled: He,
135
- default: !1,
136
- name: y,
137
- state: "open"
138
- }), [ze, Pe] = h.useState(!0), Ae = !u && o != null && a === O(o), k = B && !W, p = k ? pe(
139
- de.filter((t) => !(Q && (u ? o : [o]).some((e) => e !== null && M(t, e)))),
140
- // we use the empty string to manipulate `filterOptions` to not filter any options
141
- // i.e. the filter predicate always returns true
142
- {
143
- inputValue: Ae && ze ? "" : a,
144
- getOptionLabel: O
145
- }
146
- ) : [], P = ht({
147
- filteredOptions: p,
148
- value: o,
149
- inputValue: a
150
- });
151
- h.useEffect(() => {
152
- const t = o !== P.value;
153
- re && !t || i && !t || oe(null, o);
154
- }, [o, oe, re, P.value, i]);
155
- const be = B && p.length > 0 && !W;
156
- if (process.env.NODE_ENV !== "production" && o !== null && !i && de.length > 0) {
157
- const t = (u ? o : [o]).filter((e) => !de.some((r) => M(r, e)));
158
- t.length > 0 && console.warn([`MUI: The value provided to ${y} is invalid.`, `None of the options match with \`${t.length > 1 ? JSON.stringify(t) : JSON.stringify(t[0])}\`.`, "You can use the `isOptionEqualToValue` prop to customize the equality test."].join(`
159
- `));
160
- }
161
- const ne = ae((t) => {
162
- t === -1 ? f.current.focus() : ee.querySelector(`[data-tag-index="${t}"]`).focus();
163
- });
164
- h.useEffect(() => {
165
- u && $ > o.length - 1 && (me(-1), ne(-1));
166
- }, [o, u, $, ne]);
167
- function Je(t, e) {
168
- if (!T.current || t < 0 || t >= p.length)
169
- return -1;
170
- let r = t;
171
- for (; ; ) {
172
- const n = T.current.querySelector(`[data-option-index="${r}"]`), s = ce ? !1 : !n || n.disabled || n.getAttribute("aria-disabled") === "true";
173
- if (n && n.hasAttribute("tabindex") && !s)
174
- return r;
175
- if (e === "next" ? r = (r + 1) % p.length : r = (r - 1 + p.length) % p.length, r === t)
176
- return -1;
177
- }
178
- }
179
- const H = ae(({
180
- event: t,
181
- index: e,
182
- reason: r = "auto"
183
- }) => {
184
- if (x.current = e, e === -1 ? f.current.removeAttribute("aria-activedescendant") : f.current.setAttribute("aria-activedescendant", `${E}-option-${e}`), we && we(t, e === -1 ? null : p[e], r), !T.current)
185
- return;
186
- const n = T.current.querySelector(`[role="option"].${g}-focused`);
187
- n && (n.classList.remove(`${g}-focused`), n.classList.remove(`${g}-focusVisible`));
188
- let s = T.current;
189
- if (T.current.getAttribute("role") !== "listbox" && (s = T.current.parentElement.querySelector('[role="listbox"]')), !s)
190
- return;
191
- if (e === -1) {
192
- s.scrollTop = 0;
193
- return;
194
- }
195
- const l = T.current.querySelector(`[data-option-index="${e}"]`);
196
- if (l && (l.classList.add(`${g}-focused`), r === "keyboard" && l.classList.add(`${g}-focusVisible`), s.scrollHeight > s.clientHeight && r !== "mouse" && r !== "touch")) {
197
- const d = l, I = s.clientHeight + s.scrollTop, ie = d.offsetTop + d.offsetHeight;
198
- ie > I ? s.scrollTop = ie - s.clientHeight : d.offsetTop - d.offsetHeight * (_ ? 1.3 : 0) < s.scrollTop && (s.scrollTop = d.offsetTop - d.offsetHeight * (_ ? 1.3 : 0));
199
- }
200
- }), A = ae(({
201
- event: t,
202
- diff: e,
203
- direction: r = "next",
204
- reason: n = "auto"
205
- }) => {
206
- if (!k)
207
- return;
208
- const l = Je((() => {
209
- const d = p.length - 1;
210
- if (e === "reset")
211
- return Ee;
212
- if (e === "start")
213
- return 0;
214
- if (e === "end")
215
- return d;
216
- const I = x.current + e;
217
- return I < 0 ? I === -1 && Oe ? -1 : J && x.current !== -1 || Math.abs(e) > 1 ? 0 : d : I > d ? I === d + 1 && Oe ? -1 : J || Math.abs(e) > 1 ? d : 0 : I;
218
- })(), r);
219
- if (H({
220
- index: l,
221
- reason: n,
222
- event: t
223
- }), D && e !== "reset")
224
- if (l === -1)
225
- f.current.value = a;
226
- else {
227
- const d = O(p[l]);
228
- f.current.value = d, d.toLowerCase().indexOf(a.toLowerCase()) === 0 && a.length > 0 && f.current.setSelectionRange(a.length, d.length);
229
- }
230
- }), We = () => {
231
- const t = (e, r) => {
232
- const n = e ? O(e) : "", s = r ? O(r) : "";
233
- return n === s;
234
- };
235
- if (x.current !== -1 && P.filteredOptions && P.filteredOptions.length !== p.length && P.inputValue === a && (u ? o.length === P.value.length && P.value.every((e, r) => O(o[r]) === O(e)) : t(P.value, o))) {
236
- const e = P.filteredOptions[x.current];
237
- if (e)
238
- return ue(p, (r) => O(r) === O(e));
239
- }
240
- return -1;
241
- }, ye = h.useCallback(() => {
242
- if (!k)
243
- return;
244
- const t = We();
245
- if (t !== -1) {
246
- x.current = t;
247
- return;
248
- }
249
- const e = u ? o[0] : o;
250
- if (p.length === 0 || e == null) {
251
- A({
252
- diff: "reset"
253
- });
254
- return;
255
- }
256
- if (T.current) {
257
- if (e != null) {
258
- const r = p[x.current];
259
- if (u && r && ue(o, (s) => M(r, s)) !== -1)
260
- return;
261
- const n = ue(p, (s) => M(s, e));
262
- n === -1 ? A({
263
- diff: "reset"
264
- }) : H({
265
- index: n
266
- });
267
- return;
268
- }
269
- if (x.current >= p.length - 1) {
270
- H({
271
- index: p.length - 1
272
- });
273
- return;
274
- }
275
- H({
276
- index: x.current
277
- });
278
- }
279
- }, [
280
- // Only sync the highlighted index when the option switch between empty and not
281
- p.length,
282
- // Don't sync the highlighted index with the value when multiple
283
- // eslint-disable-next-line react-hooks/exhaustive-deps
284
- u ? !1 : o,
285
- Q,
286
- A,
287
- H,
288
- k,
289
- a,
290
- u
291
- ]), Ye = ae((t) => {
292
- dt(T, t), t && ye();
293
- });
294
- process.env.NODE_ENV !== "production" && h.useEffect(() => {
295
- (!f.current || f.current.nodeName !== "INPUT") && (f.current && f.current.nodeName === "TEXTAREA" ? console.warn([`A textarea element was provided to ${y} where input was expected.`, "This is not a supported scenario but it may work under certain conditions.", "A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).", "Make sure to test keyboard navigation and add custom event handlers if necessary."].join(`
296
- `)) : console.error([`MUI: Unable to find the input element. It was resolved to ${f.current} while an HTMLInputElement was expected.`, `Instead, ${y} expects an input element.`, "", y === "useAutocomplete" ? "Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed." : "Make sure you have customized the input component correctly."].join(`
297
- `)));
298
- }, [y]), h.useEffect(() => {
299
- ye();
300
- }, [ye]);
301
- const F = (t) => {
302
- B || ($e(!0), Pe(!0), ke && ke(t));
303
- }, Y = (t, e) => {
304
- B && ($e(!1), Se && Se(t, e));
305
- }, U = (t, e, r, n) => {
306
- if (u) {
307
- if (o.length === e.length && o.every((s, l) => s === e[l]))
308
- return;
309
- } else if (o === e)
310
- return;
311
- Ie && Ie(t, e, r, n), Ke(e);
312
- }, se = h.useRef(!1), X = (t, e, r = "selectOption", n = "options") => {
313
- let s = r, l = e;
314
- if (u) {
315
- if (l = Array.isArray(o) ? o.slice() : [], process.env.NODE_ENV !== "production") {
316
- const I = l.filter((ie) => M(e, ie));
317
- I.length > 1 && console.error([`MUI: The \`isOptionEqualToValue\` method of ${y} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${I.length} matches.`].join(`
318
- `));
319
- }
320
- const d = ue(l, (I) => M(e, I));
321
- d === -1 ? l.push(e) : n !== "freeSolo" && (l.splice(d, 1), s = "removeOption");
322
- }
323
- oe(t, l), U(t, l, s, {
324
- option: e
325
- }), !z && (!t || !t.ctrlKey && !t.metaKey) && Y(t, s), (C === !0 || C === "touch" && se.current || C === "mouse" && !se.current) && f.current.blur();
326
- };
327
- function Xe(t, e) {
328
- if (t === -1)
329
- return -1;
330
- let r = t;
331
- for (; ; ) {
332
- if (e === "next" && r === o.length || e === "previous" && r === -1)
333
- return -1;
334
- const n = ee.querySelector(`[data-tag-index="${r}"]`);
335
- if (!n || !n.hasAttribute("tabindex") || n.disabled || n.getAttribute("aria-disabled") === "true")
336
- r += e === "next" ? 1 : -1;
337
- else
338
- return r;
339
- }
340
- }
341
- const De = (t, e) => {
342
- if (!u)
343
- return;
344
- a === "" && Y(t, "toggleInput");
345
- let r = $;
346
- $ === -1 ? a === "" && e === "previous" && (r = o.length - 1) : (r += e === "next" ? 1 : -1, r < 0 && (r = 0), r === o.length && (r = -1)), r = Xe(r, e), me(r), ne(r);
347
- }, Ce = (t) => {
348
- ge.current = !0, te(""), R && R(t, "", "clear"), U(t, u ? [] : null, "clear");
349
- }, Ge = (t) => (e) => {
350
- if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && ($ !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (me(-1), ne(-1)), e.which !== 229))
351
- switch (e.key) {
352
- case "Home":
353
- k && Z && (e.preventDefault(), A({
354
- diff: "start",
355
- direction: "next",
356
- reason: "keyboard",
357
- event: e
358
- }));
359
- break;
360
- case "End":
361
- k && Z && (e.preventDefault(), A({
362
- diff: "end",
363
- direction: "previous",
364
- reason: "keyboard",
365
- event: e
366
- }));
367
- break;
368
- case "PageUp":
369
- e.preventDefault(), A({
370
- diff: -Me,
371
- direction: "previous",
372
- reason: "keyboard",
373
- event: e
374
- }), F(e);
375
- break;
376
- case "PageDown":
377
- e.preventDefault(), A({
378
- diff: Me,
379
- direction: "next",
380
- reason: "keyboard",
381
- event: e
382
- }), F(e);
383
- break;
384
- case "ArrowDown":
385
- e.preventDefault(), A({
386
- diff: 1,
387
- direction: "next",
388
- reason: "keyboard",
389
- event: e
390
- }), F(e);
391
- break;
392
- case "ArrowUp":
393
- e.preventDefault(), A({
394
- diff: -1,
395
- direction: "previous",
396
- reason: "keyboard",
397
- event: e
398
- }), F(e);
399
- break;
400
- case "ArrowLeft":
401
- De(e, "previous");
402
- break;
403
- case "ArrowRight":
404
- De(e, "next");
405
- break;
406
- case "Enter":
407
- if (x.current !== -1 && k) {
408
- const r = p[x.current], n = m ? m(r) : !1;
409
- if (e.preventDefault(), n)
410
- return;
411
- X(e, r, "selectOption"), D && f.current.setSelectionRange(f.current.value.length, f.current.value.length);
412
- } else
413
- i && a !== "" && Ae === !1 && (u && e.preventDefault(), X(e, a, "createOption", "freeSolo"));
414
- break;
415
- case "Escape":
416
- k ? (e.preventDefault(), e.stopPropagation(), Y(e, "escape")) : L && (a !== "" || u && o.length > 0) && (e.preventDefault(), e.stopPropagation(), Ce(e));
417
- break;
418
- case "Backspace":
419
- if (u && !W && a === "" && o.length > 0) {
420
- const r = $ === -1 ? o.length - 1 : $, n = o.slice();
421
- n.splice(r, 1), U(e, n, "removeOption", {
422
- option: o[r]
423
- });
424
- }
425
- break;
426
- case "Delete":
427
- if (u && !W && a === "" && o.length > 0 && $ !== -1) {
428
- const r = $, n = o.slice();
429
- n.splice(r, 1), U(e, n, "removeOption", {
430
- option: o[r]
431
- });
432
- }
433
- break;
434
- }
435
- }, Qe = (t) => {
436
- Te(!0), Fe && !ge.current && F(t);
437
- }, Ne = (t) => {
438
- if (b(T)) {
439
- f.current.focus();
440
- return;
441
- }
442
- Te(!1), he.current = !0, ge.current = !1, v && x.current !== -1 && k ? X(t, p[x.current], "blur") : v && i && a !== "" ? X(t, a, "blur", "freeSolo") : N && oe(t, o), Y(t, "blur");
443
- }, Ze = (t) => {
444
- const e = t.target.value;
445
- a !== e && (te(e), Pe(!1), R && R(t, e, "input")), e === "" ? !q && !u && U(t, null, "clear") : F(t);
446
- }, et = (t) => {
447
- const e = Number(t.currentTarget.getAttribute("data-option-index"));
448
- x.current !== e && H({
449
- event: t,
450
- index: e,
451
- reason: "mouse"
452
- });
453
- }, tt = (t) => {
454
- H({
455
- event: t,
456
- index: Number(t.currentTarget.getAttribute("data-option-index")),
457
- reason: "touch"
458
- }), se.current = !0;
459
- }, rt = (t) => {
460
- const e = Number(t.currentTarget.getAttribute("data-option-index"));
461
- X(t, p[e], "selectOption"), se.current = !1;
462
- }, ot = (t) => (e) => {
463
- const r = o.slice();
464
- r.splice(t, 1), U(e, r, "removeOption", {
465
- option: o[t]
466
- });
467
- }, ve = (t) => {
468
- B ? Y(t, "toggleInput") : F(t);
469
- }, nt = (t) => {
470
- t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== E && t.preventDefault();
471
- }, st = (t) => {
472
- t.currentTarget.contains(t.target) && (f.current.focus(), qe && he.current && f.current.selectionEnd - f.current.selectionStart === 0 && f.current.select(), he.current = !1);
473
- }, it = (t) => {
474
- !w && (a === "" || !B) && ve(t);
475
- };
476
- let xe = i && a.length > 0;
477
- xe = xe || (u ? o.length > 0 : o !== null);
478
- let Le = p;
479
- if (_) {
480
- const t = /* @__PURE__ */ new Map();
481
- let e = !1;
482
- Le = p.reduce((r, n, s) => {
483
- const l = _(n);
484
- return r.length > 0 && r[r.length - 1].group === l ? r[r.length - 1].options.push(n) : (process.env.NODE_ENV !== "production" && (t.get(l) && !e && (console.warn(`MUI: The options provided combined with the \`groupBy\` method of ${y} returns duplicated headers.`, "You can solve the issue by sorting the options with the output of `groupBy`."), e = !0), t.set(l, !0)), r.push({
485
- key: s,
486
- index: s,
487
- group: l,
488
- options: [n]
489
- })), r;
490
- }, []);
491
- }
492
- return w && re && Ne(), {
493
- getRootProps: (t = {}) => je({
494
- "aria-owns": be ? `${E}-listbox` : null
495
- }, t, {
496
- onKeyDown: Ge(t),
497
- onMouseDown: nt,
498
- onClick: st
499
- }),
500
- getInputLabelProps: () => ({
501
- id: `${E}-label`,
502
- htmlFor: E
503
- }),
504
- getInputProps: () => ({
505
- id: E,
506
- value: a,
507
- onBlur: Ne,
508
- onFocus: Qe,
509
- onChange: Ze,
510
- onMouseDown: it,
511
- // if open then this is handled imperatively so don't let react override
512
- // only have an opinion about this when closed
513
- "aria-activedescendant": k ? "" : null,
514
- "aria-autocomplete": D ? "both" : "list",
515
- "aria-controls": be ? `${E}-listbox` : void 0,
516
- "aria-expanded": be,
517
- // Disable browser's suggestion that might overlap with the popup.
518
- // Handle autocomplete but not autofill.
519
- autoComplete: "off",
520
- ref: f,
521
- autoCapitalize: "none",
522
- spellCheck: "false",
523
- role: "combobox",
524
- disabled: w
525
- }),
526
- getClearProps: () => ({
527
- tabIndex: -1,
528
- type: "button",
529
- onClick: Ce
530
- }),
531
- getPopupIndicatorProps: () => ({
532
- tabIndex: -1,
533
- type: "button",
534
- onClick: ve
535
- }),
536
- getTagProps: ({
537
- index: t
538
- }) => je({
539
- key: t,
540
- "data-tag-index": t,
541
- tabIndex: -1
542
- }, !W && {
543
- onDelete: ot(t)
544
- }),
545
- getListboxProps: () => ({
546
- role: "listbox",
547
- id: `${E}-listbox`,
548
- "aria-labelledby": `${E}-label`,
549
- ref: Ye,
550
- onMouseDown: (t) => {
551
- t.preventDefault();
552
- }
553
- }),
554
- getOptionProps: ({
555
- index: t,
556
- option: e
557
- }) => {
558
- var r;
559
- const n = (u ? o : [o]).some((l) => l != null && M(e, l)), s = m ? m(e) : !1;
560
- return {
561
- key: (r = j == null ? void 0 : j(e)) != null ? r : O(e),
562
- tabIndex: -1,
563
- role: "option",
564
- id: `${E}-option-${t}`,
565
- onMouseMove: et,
566
- onClick: rt,
567
- onTouchStart: tt,
568
- "data-option-index": t,
569
- "aria-disabled": s,
570
- "aria-selected": n
571
- };
572
- },
573
- id: E,
574
- inputValue: a,
575
- value: o,
576
- dirty: xe,
577
- expanded: k && ee,
578
- popupOpen: k,
579
- focused: re || $ !== -1,
580
- anchorEl: ee,
581
- setAnchorEl: Ue,
582
- focusedTag: $,
583
- groupedOptions: Le
584
- };
585
- }
586
- const _t = "_autocomplete_mj65r_65", G = {
587
- "u-typography-h1": "_u-typography-h1_mj65r_1",
588
- "u-typography-h2": "_u-typography-h2_mj65r_8",
589
- "u-typography-h3": "_u-typography-h3_mj65r_15",
590
- "u-typography-h4": "_u-typography-h4_mj65r_22",
591
- "u-typography-h5": "_u-typography-h5_mj65r_29",
592
- "u-typography-h6": "_u-typography-h6_mj65r_36",
593
- "u-typography-base": "_u-typography-base_mj65r_43",
594
- "u-typography-base--xxl": "_u-typography-base--xxl_mj65r_49",
595
- "u-typography-base--xl": "_u-typography-base--xl_mj65r_53",
596
- "u-typography-base--lg": "_u-typography-base--lg_mj65r_57",
597
- "u-typography-base--sm": "_u-typography-base--sm_mj65r_61",
598
- "u-typography-base--bold": "_u-typography-base--bold_mj65r_65",
599
- "autocomplete__dropdown-item": "_autocomplete__dropdown-item_mj65r_65",
600
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_mj65r_68",
601
- "u-typography-base--underlined": "_u-typography-base--underlined_mj65r_71",
602
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_mj65r_74",
603
- autocomplete: _t,
604
- "autocomplete__dropdown-list": "_autocomplete__dropdown-list_mj65r_82",
605
- "option-focused": "_option-focused_mj65r_106"
606
- }, Pt = ({
607
- labelKey: c,
608
- valueKey: b,
609
- options: g,
610
- type: D,
611
- value: K,
612
- onChange: v,
613
- onInputChange: C,
614
- "data-testid-wrapper": N,
615
- ...L
616
- }) => {
617
- const y = at(), [S, q] = ut("");
618
- g != null && g.some((i) => typeof i != "string") && (!c || !b) && console.error(
619
- '[autocomplete] When options is a list of objects, you must provide the "labelKey" and "valueKey" parameters.'
620
- );
621
- const { getRootProps: z, getInputProps: w, getOptionProps: ce, groupedOptions: J, getListboxProps: pe } = xt({
622
- id: `autocomplete_${y}`,
623
- options: g,
624
- getOptionLabel: (i) => typeof i == "string" ? i : String(i[c || "label"]),
625
- value: K,
626
- inputValue: S,
627
- isOptionEqualToValue: (i, m) => typeof i == "string" ? String(i) === String(m) : String(i[b || "id"]) === String(m[b || "id"]),
628
- onChange: (i, m) => {
629
- v && v(i, m);
630
- },
631
- onInputChange: (i, m) => {
632
- C && C(i, m), q(m);
633
- },
634
- onHighlightChange: (i, m, j) => {
635
- var V;
636
- if (j === "keyboard") {
637
- const _ = document.querySelector("#autocomplete-list"), Z = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
638
- _ == null || _.querySelectorAll("li").forEach((fe) => fe.classList.remove(G["option-focused"])), (V = _ == null ? void 0 : _.querySelector(`[id="${Z}"]`)) == null || V.classList.add(G["option-focused"]);
639
- }
640
- }
641
- }), Q = {
642
- ...w(),
643
- ...L
644
- };
645
- return /* @__PURE__ */ le("div", { className: G.autocomplete, "data-testid": N, children: /* @__PURE__ */ lt("div", { ...z(), children: [
646
- /* @__PURE__ */ le(
647
- ft,
648
- {
649
- rightIcon: D === "search" && /* @__PURE__ */ le(pt, { color: "var(--accent)", icon: "magnifying-glass" }),
650
- ...Q
651
- }
652
- ),
653
- J.length > 0 && !L.disabled && /* @__PURE__ */ le(
654
- "ul",
655
- {
656
- ...pe(),
657
- id: "autocomplete-list",
658
- className: G["autocomplete__dropdown-list"],
659
- children: J.map((i, m) => {
660
- const j = ce({ option: i, index: m }), V = typeof i == "string" ? i : String(i[c || "label"]), _ = j.key === S;
661
- return /* @__PURE__ */ ct(
662
- "li",
663
- {
664
- tabIndex: m,
665
- className: G["autocomplete__dropdown-item"],
666
- ...j,
667
- "aria-selected": _,
668
- key: String(m)
669
- },
670
- V
671
- );
672
- })
673
- }
674
- )
675
- ] }) });
676
- };
677
- export {
678
- Pt as Autocomplete
679
- };
@@ -1,23 +0,0 @@
1
- import { StoryObj } from '@storybook/react';
2
-
3
- declare const meta: {
4
- title: string;
5
- component: <T extends string | object>({ labelKey, valueKey, options, type, value, onChange, onInputChange, "data-testid-wrapper": dataTestId, ...props }: import('./Autocomplete.tsx').AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
6
- tags: string[];
7
- parameters: {
8
- layout: string;
9
- };
10
- };
11
- export default meta;
12
- type Story = StoryObj<typeof meta>;
13
- export declare const Simple: Story;
14
- export declare const WithObjectsOptions: Story;
15
- export declare const WithAHugeList: Story;
16
- export declare const WithLabel: Story;
17
- export declare const WithSearch: Story;
18
- export declare const WithPlaceholder: Story;
19
- export declare const Disabled: Story;
20
- export declare const WithLeftIcon: Story;
21
- export declare const WithBothIcons: Story;
22
- export declare const WithInfoMessage: Story;
23
- export declare const WithErrorMessage: Story;