@povio/ui 3.2.4-rc.7 → 3.2.4-rc.9

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 (4) hide show
  1. package/dist/components/inputs/Selection/shared/SelectDesktop.js +191 -397
  2. package/dist/components/inputs/Selection/shared/SelectInput.d.ts +3 -1
  3. package/dist/components/inputs/Selection/shared/SelectInput.js +154 -131
  4. package/package.json +1 -1
package/dist/components/inputs/Selection/shared/SelectDesktop.js CHANGED
@@ -7,419 +7,213 @@ import { SelectContext } from "./select.context.js";
7
7
  import { SelectInput } from "./SelectInput.js";
8
8
  import { SelectListBox } from "./SelectListBox.js";
9
9
  import { selectPopoverDefinition } from "./selectDesktop.cva.js";
10
- import { c } from "react/compiler-runtime";
11
10
  import { jsx, jsxs } from "react/jsx-runtime";
12
11
  import { clsx } from "clsx";
13
- import { Fragment as Fragment$1, useLayoutEffect, useRef, useState } from "react";
12
+ import { Fragment as Fragment$1, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
14
13
  import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
15
14
  import { useLabel, usePreventScroll } from "react-aria";
16
15
  import { mergeRefs } from "@react-aria/utils";
17
16
  //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
18
- var SelectDesktop = (t0) => {
19
- const $ = c(129);
20
- let containerClassName;
21
- let customTrigger;
22
- let error;
23
- let ignoreTriggerWidth;
24
- let inputClassName;
25
- let leadingContent;
26
- let onBlur;
27
- let onFocusCapture;
28
- let onMouseEnter;
29
- let props;
30
- let ref;
31
- let showSelectionContent;
32
- let trailingContent;
33
- if ($[0] !== t0) {
34
- ({ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props} = t0);
35
- $[0] = t0;
36
- $[1] = containerClassName;
37
- $[2] = customTrigger;
38
- $[3] = error;
39
- $[4] = ignoreTriggerWidth;
40
- $[5] = inputClassName;
41
- $[6] = leadingContent;
42
- $[7] = onBlur;
43
- $[8] = onFocusCapture;
44
- $[9] = onMouseEnter;
45
- $[10] = props;
46
- $[11] = ref;
47
- $[12] = showSelectionContent;
48
- $[13] = trailingContent;
49
- } else {
50
- containerClassName = $[1];
51
- customTrigger = $[2];
52
- error = $[3];
53
- ignoreTriggerWidth = $[4];
54
- inputClassName = $[5];
55
- leadingContent = $[6];
56
- onBlur = $[7];
57
- onFocusCapture = $[8];
58
- onMouseEnter = $[9];
59
- props = $[10];
60
- ref = $[11];
61
- showSelectionContent = $[12];
62
- trailingContent = $[13];
63
- }
17
+ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
64
18
  const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
65
19
  const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
66
20
  const selectPopoverCva = UIOverrides.useCva("select.popoverCva", selectPopoverDefinition);
67
- const t1 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
68
- let t2;
69
- if ($[14] !== error || $[15] !== errorClassName || $[16] !== headerClassName || $[17] !== helperText || $[18] !== hideLabel || $[19] !== isDisabled || $[20] !== isRequired || $[21] !== label || $[22] !== rightContent || $[23] !== t1 || $[24] !== tooltipText) {
70
- t2 = {
71
- error,
72
- label,
73
- tooltipText,
74
- helperText,
75
- isRequired,
76
- rightContent,
77
- isHeaderHidden: t1,
78
- hideLabel,
79
- isDisabled,
80
- headerClassName,
81
- errorClassName
82
- };
83
- $[14] = error;
84
- $[15] = errorClassName;
85
- $[16] = headerClassName;
86
- $[17] = helperText;
87
- $[18] = hideLabel;
88
- $[19] = isDisabled;
89
- $[20] = isRequired;
90
- $[21] = label;
91
- $[22] = rightContent;
92
- $[23] = t1;
93
- $[24] = tooltipText;
94
- $[25] = t2;
95
- } else t2 = $[25];
96
- const formFieldProps = t2;
97
- let t3;
98
- if ($[26] !== label) {
99
- t3 = { label };
100
- $[26] = label;
101
- $[27] = t3;
102
- } else t3 = $[27];
103
- const { labelProps, fieldProps } = useLabel(t3);
21
+ const formFieldProps = {
22
+ error,
23
+ label,
24
+ tooltipText,
25
+ helperText,
26
+ isRequired,
27
+ rightContent,
28
+ isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
29
+ hideLabel,
30
+ isDisabled,
31
+ headerClassName,
32
+ errorClassName
33
+ };
34
+ const { labelProps, fieldProps } = useLabel({ label });
104
35
  const triggerRef = useRef(null);
105
- const wrapperRef = useRef(null);
106
36
  const closeComboBoxRef = useRef(null);
37
+ const wrapperRef = useRef(null);
107
38
  const [popoverWidth, setPopoverWidth] = useState(void 0);
108
39
  const { fieldState, isOpen, setIsOpen, onInputChange, onChange, onClear, onSelectAll, listItems, selectableListItems, selectedIds, isMultiple } = SelectContext.useSelect();
109
- const t4 = !isOpen;
110
- let t5;
111
- if ($[28] !== t4) {
112
- t5 = { isDisabled: t4 };
113
- $[28] = t4;
114
- $[29] = t5;
115
- } else t5 = $[29];
116
- usePreventScroll(t5);
117
- let t6;
118
- let t7;
119
- if ($[30] !== isOpen) {
120
- t6 = () => {
121
- if (!isOpen || !wrapperRef.current) return;
122
- setPopoverWidth(wrapperRef.current.getBoundingClientRect().width);
123
- const observer = new ResizeObserver((entries) => {
124
- setPopoverWidth(entries[0].contentRect.width);
125
- });
126
- observer.observe(wrapperRef.current);
127
- return () => {
128
- observer.disconnect();
129
- };
130
- };
131
- t7 = [isOpen];
132
- $[30] = isOpen;
133
- $[31] = t6;
134
- $[32] = t7;
135
- } else {
136
- t6 = $[31];
137
- t7 = $[32];
138
- }
139
- useLayoutEffect(t6, t7);
140
- let t8;
141
- if ($[33] !== fieldState.value || $[34] !== isMultiple || $[35] !== onChange || $[36] !== onClear || $[37] !== onSelectAll || $[38] !== selectableListItems || $[39] !== selectedIds) {
142
- t8 = (value) => {
143
- if (!value) return;
144
- if (value === "all-item-id") {
145
- if (selectedIds.length === selectableListItems.length) onClear();
146
- else onSelectAll();
147
- return;
148
- }
149
- if (!isMultiple) {
150
- onChange(value);
151
- return;
152
- }
153
- if (!Array.isArray(fieldState.value)) {
154
- onChange([value]);
155
- return;
156
- }
157
- if (fieldState.value.includes(value)) onChange(fieldState.value.filter((id) => id !== value));
158
- else onChange(fieldState.value.concat(value));
159
- };
160
- $[33] = fieldState.value;
161
- $[34] = isMultiple;
162
- $[35] = onChange;
163
- $[36] = onClear;
164
- $[37] = onSelectAll;
165
- $[38] = selectableListItems;
166
- $[39] = selectedIds;
167
- $[40] = t8;
168
- } else t8 = $[40];
169
- const onSelectionChange = t8;
170
- let t9;
171
- if ($[41] !== setIsOpen) {
172
- t9 = (value_0) => {
173
- if (closeComboBoxRef.current && value_0) {
174
- closeComboBoxRef.current.setOpen(false);
175
- closeComboBoxRef.current = null;
176
- } else setIsOpen(value_0);
40
+ const isOpenRef = useRef(isOpen);
41
+ const hasOpenIntentRef = useRef(false);
42
+ const isClosingRef = useRef(false);
43
+ const closingFallbackRef = useRef(void 0);
44
+ isOpenRef.current = isOpen;
45
+ usePreventScroll({ isDisabled: !isOpen });
46
+ useLayoutEffect(() => {
47
+ if (!isOpen || !wrapperRef.current) return;
48
+ setPopoverWidth(wrapperRef.current.getBoundingClientRect().width);
49
+ const observer = new ResizeObserver((entries) => {
50
+ setPopoverWidth(entries[0].contentRect.width);
51
+ });
52
+ observer.observe(wrapperRef.current);
53
+ return () => {
54
+ observer.disconnect();
177
55
  };
178
- $[41] = setIsOpen;
179
- $[42] = t9;
180
- } else t9 = $[42];
181
- const openChangeHandler = t9;
56
+ }, [isOpen]);
57
+ useEffect(() => () => {
58
+ clearTimeout(closingFallbackRef.current);
59
+ }, []);
60
+ const finishClosing = () => {
61
+ clearTimeout(closingFallbackRef.current);
62
+ isClosingRef.current = false;
63
+ };
64
+ const onSelectionChange = (value) => {
65
+ if (!isOpenRef.current || isClosingRef.current || !value) return;
66
+ if (value === "all-item-id") {
67
+ if (selectedIds.length === selectableListItems.length) onClear();
68
+ else onSelectAll();
69
+ return;
70
+ }
71
+ if (!isMultiple) {
72
+ onChange(value);
73
+ return;
74
+ }
75
+ if (!Array.isArray(fieldState.value)) {
76
+ onChange([value]);
77
+ return;
78
+ }
79
+ if (fieldState.value.includes(value)) onChange(fieldState.value.filter((id) => id !== value));
80
+ else onChange(fieldState.value.concat(value));
81
+ };
82
+ const registerOpenIntent = () => {
83
+ hasOpenIntentRef.current = true;
84
+ finishClosing();
85
+ };
86
+ const registerCloseIntent = () => {
87
+ hasOpenIntentRef.current = false;
88
+ isClosingRef.current = true;
89
+ clearTimeout(closingFallbackRef.current);
90
+ closingFallbackRef.current = setTimeout(finishClosing, 1e3);
91
+ };
92
+ const registerTriggerPointerIntent = () => {
93
+ if (isOpenRef.current) registerCloseIntent();
94
+ else registerOpenIntent();
95
+ };
96
+ const setDesktopOpen = (value_0) => {
97
+ if (value_0 && isClosingRef.current && !hasOpenIntentRef.current) return;
98
+ hasOpenIntentRef.current = false;
99
+ isOpenRef.current = value_0;
100
+ isClosingRef.current = !value_0;
101
+ clearTimeout(closingFallbackRef.current);
102
+ if (!value_0) closingFallbackRef.current = setTimeout(finishClosing, 1e3);
103
+ setIsOpen(value_0);
104
+ };
105
+ const openChangeHandler = (value_1) => {
106
+ if (closeComboBoxRef.current && value_1) {
107
+ closeComboBoxRef.current.setOpen(false);
108
+ closeComboBoxRef.current = null;
109
+ } else setDesktopOpen(value_1);
110
+ };
182
111
  const WrapperComponent = isSearchable ? ComboBox : Fragment$1;
183
- const t10 = isMultiple ? null : fieldState.value;
184
- const t11 = fieldState.inputValue;
185
- const t12 = !!error;
186
- let t13;
187
- if ($[43] !== containerClassName) {
188
- t13 = clsx("group w-full", containerClassName);
189
- $[43] = containerClassName;
190
- $[44] = t13;
191
- } else t13 = $[44];
192
- let t14;
193
- if ($[45] !== fieldState.inputValue || $[46] !== isDisabled || $[47] !== listItems || $[48] !== onInputChange || $[49] !== onSelectionChange || $[50] !== openChangeHandler || $[51] !== t10 || $[52] !== t12 || $[53] !== t13) {
194
- t14 = {
195
- items: listItems,
196
- selectedKey: t10,
197
- onSelectionChange,
198
- inputValue: t11,
199
- onInputChange,
200
- onOpenChange: openChangeHandler,
201
- allowsEmptyCollection: true,
202
- isDisabled,
203
- isInvalid: t12,
204
- menuTrigger: "focus",
205
- className: t13
206
- };
207
- $[45] = fieldState.inputValue;
208
- $[46] = isDisabled;
209
- $[47] = listItems;
210
- $[48] = onInputChange;
211
- $[49] = onSelectionChange;
212
- $[50] = openChangeHandler;
213
- $[51] = t10;
214
- $[52] = t12;
215
- $[53] = t13;
216
- $[54] = t14;
217
- } else t14 = $[54];
218
- const comboBoxProps = t14;
219
- const t15 = hideLabel || isHeaderHidden;
220
- let t16;
221
- if ($[55] !== headerClassName || $[56] !== helperText || $[57] !== isDisabled || $[58] !== isRequired || $[59] !== label || $[60] !== labelProps || $[61] !== rightContent || $[62] !== t15 || $[63] !== tooltipText) {
222
- t16 = {
223
- label,
224
- tooltipText,
225
- helperText,
226
- isRequired,
227
- rightContent,
228
- isHeaderHidden: t15,
229
- isDisabled,
230
- className: headerClassName,
231
- labelProps
232
- };
233
- $[55] = headerClassName;
234
- $[56] = helperText;
235
- $[57] = isDisabled;
236
- $[58] = isRequired;
237
- $[59] = label;
238
- $[60] = labelProps;
239
- $[61] = rightContent;
240
- $[62] = t15;
241
- $[63] = tooltipText;
242
- $[64] = t16;
243
- } else t16 = $[64];
244
- const headerProps = t16;
245
- let t17;
246
- if ($[65] !== isOpen || $[66] !== setIsOpen) {
247
- t17 = {
248
- isOpen,
249
- onOpenChange: setIsOpen
250
- };
251
- $[65] = isOpen;
252
- $[66] = setIsOpen;
253
- $[67] = t17;
254
- } else t17 = $[67];
255
- const dialogTriggerProps = t17;
256
- let t18;
257
- if ($[68] !== isLoading || $[69] !== listItems) {
258
- t18 = listItems.filter(_temp).length > 0 || isLoading;
259
- $[68] = isLoading;
260
- $[69] = listItems;
261
- $[70] = t18;
262
- } else t18 = $[70];
263
- const showPopover = t18;
264
- let t19;
265
- if ($[71] !== comboBoxProps || $[72] !== isSearchable) {
266
- t19 = isSearchable ? comboBoxProps : {};
267
- $[71] = comboBoxProps;
268
- $[72] = isSearchable;
269
- $[73] = t19;
270
- } else t19 = $[73];
271
- let t20;
272
- if ($[74] !== containerClassName || $[75] !== isSearchable || $[76] !== labelProps) {
273
- t20 = !isSearchable && {
274
- labelProps,
275
- className: clsx("group w-full", containerClassName)
276
- };
277
- $[74] = containerClassName;
278
- $[75] = isSearchable;
279
- $[76] = labelProps;
280
- $[77] = t20;
281
- } else t20 = $[77];
282
- let t21;
283
- if ($[78] !== as || $[79] !== className || $[80] !== collapseAfter || $[81] !== customTrigger || $[82] !== dialogTriggerProps || $[83] !== error || $[84] !== fieldProps || $[85] !== headerProps || $[86] !== hideDropdownIcon || $[87] !== inputClassName || $[88] !== isClearable || $[89] !== isDirty || $[90] !== isDisabled || $[91] !== isRequired || $[92] !== isSearchable || $[93] !== leadingContent || $[94] !== onBlur || $[95] !== placeholder || $[96] !== ref || $[97] !== selectedTagsType || $[98] !== showSelectionContent || $[99] !== size || $[100] !== trailingContent || $[101] !== variant) {
284
- t21 = customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
285
- ...dialogTriggerProps,
286
- children: /* @__PURE__ */ jsx("div", {
287
- ...fieldProps,
288
- ref: mergeRefs(ref, triggerRef),
289
- children: customTrigger
290
- })
291
- }) : /* @__PURE__ */ jsx(SelectInput, {
292
- ref: mergeRefs(ref, triggerRef),
293
- placeholder,
294
- variant,
295
- as,
296
- size,
297
- isDisabled,
298
- isInvalid: !!error,
299
- className,
300
- hideDropdownIcon,
301
- isSearchable,
302
- isClearable,
303
- showSelectionContent,
304
- inputClassName,
305
- leadingContent,
306
- trailingContent,
307
- collapseAfter,
308
- selectedTagsType,
309
- isRequired,
310
- isDirty,
311
- onBlur,
312
- onCloseComboBox: (state) => {
313
- if (isSearchable) closeComboBoxRef.current = state;
314
- },
315
- fieldProps,
316
- headerProps
317
- });
318
- $[78] = as;
319
- $[79] = className;
320
- $[80] = collapseAfter;
321
- $[81] = customTrigger;
322
- $[82] = dialogTriggerProps;
323
- $[83] = error;
324
- $[84] = fieldProps;
325
- $[85] = headerProps;
326
- $[86] = hideDropdownIcon;
327
- $[87] = inputClassName;
328
- $[88] = isClearable;
329
- $[89] = isDirty;
330
- $[90] = isDisabled;
331
- $[91] = isRequired;
332
- $[92] = isSearchable;
333
- $[93] = leadingContent;
334
- $[94] = onBlur;
335
- $[95] = placeholder;
336
- $[96] = ref;
337
- $[97] = selectedTagsType;
338
- $[98] = showSelectionContent;
339
- $[99] = size;
340
- $[100] = trailingContent;
341
- $[101] = variant;
342
- $[102] = t21;
343
- } else t21 = $[102];
344
- let t22;
345
- if ($[103] !== ignoreTriggerWidth || $[104] !== isOpen || $[105] !== isSearchable || $[106] !== popoverCva || $[107] !== popoverWidth || $[108] !== props || $[109] !== selectPopoverCva || $[110] !== setIsOpen || $[111] !== showPopover) {
346
- t22 = (!isSearchable || showPopover) && /* @__PURE__ */ jsx(Popover, {
347
- triggerRef,
348
- isOpen,
349
- onOpenChange: setIsOpen,
350
- className: selectPopoverCva({}),
351
- style: (t23) => {
352
- const { isExiting } = t23;
353
- return {
354
- width: !ignoreTriggerWidth ? popoverWidth : void 0,
355
- pointerEvents: isExiting ? "none" : void 0
356
- };
357
- },
358
- offset: 0,
359
- children: /* @__PURE__ */ jsx(SelectListBox, {
360
- ...props,
361
- className: clsx(popoverCva({}), "max-h-80! [scrollbar-width:thin]"),
362
- autoFocus: !isSearchable
112
+ const comboBoxProps = {
113
+ items: listItems,
114
+ selectedKey: isMultiple ? null : fieldState.value,
115
+ onSelectionChange,
116
+ inputValue: fieldState.inputValue,
117
+ onInputChange,
118
+ onOpenChange: openChangeHandler,
119
+ allowsEmptyCollection: true,
120
+ isDisabled,
121
+ isInvalid: !!error,
122
+ menuTrigger: "focus",
123
+ className: clsx("group w-full", containerClassName)
124
+ };
125
+ const headerProps = {
126
+ label,
127
+ tooltipText,
128
+ helperText,
129
+ isRequired,
130
+ rightContent,
131
+ isHeaderHidden: hideLabel || isHeaderHidden,
132
+ isDisabled,
133
+ className: headerClassName,
134
+ labelProps
135
+ };
136
+ const dialogTriggerProps = {
137
+ isOpen,
138
+ onOpenChange: setDesktopOpen
139
+ };
140
+ const showPopover = useMemo(() => listItems.filter((item) => !item.isSelectAllItem).length > 0 || isLoading, [listItems, isLoading]);
141
+ return /* @__PURE__ */ jsx(TooltipWrapper, {
142
+ as,
143
+ error,
144
+ children: /* @__PURE__ */ jsx(WrapperComponent, {
145
+ ...isSearchable ? comboBoxProps : {},
146
+ children: /* @__PURE__ */ jsxs(FormField, {
147
+ ...formFieldProps,
148
+ ...!isSearchable && {
149
+ labelProps,
150
+ className: clsx("group w-full", containerClassName)
151
+ },
152
+ as,
153
+ onMouseEnter,
154
+ onFocusCapture,
155
+ ref: wrapperRef,
156
+ children: [customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
157
+ ...dialogTriggerProps,
158
+ children: /* @__PURE__ */ jsx("div", {
159
+ ...fieldProps,
160
+ ref: mergeRefs(ref, triggerRef),
161
+ onPointerDownCapture: () => {
162
+ registerOpenIntent();
163
+ if (isOpenRef.current) registerCloseIntent();
164
+ },
165
+ onKeyDownCapture: registerOpenIntent,
166
+ children: customTrigger
167
+ })
168
+ }) : /* @__PURE__ */ jsx(SelectInput, {
169
+ ref: mergeRefs(ref, triggerRef),
170
+ placeholder,
171
+ variant,
172
+ as,
173
+ size,
174
+ isDisabled,
175
+ isInvalid: !!error,
176
+ className,
177
+ hideDropdownIcon,
178
+ isSearchable,
179
+ isClearable,
180
+ showSelectionContent,
181
+ inputClassName,
182
+ leadingContent,
183
+ trailingContent,
184
+ collapseAfter,
185
+ selectedTagsType,
186
+ isRequired,
187
+ isDirty,
188
+ onBlur,
189
+ onOpenIntent: registerTriggerPointerIntent,
190
+ onCloseIntent: registerCloseIntent,
191
+ onCloseComboBox: (state) => {
192
+ if (isSearchable) closeComboBoxRef.current = state;
193
+ },
194
+ fieldProps,
195
+ headerProps
196
+ }), (!isSearchable || showPopover) && /* @__PURE__ */ jsx(Popover, {
197
+ triggerRef,
198
+ isOpen,
199
+ onOpenChange: setDesktopOpen,
200
+ className: selectPopoverCva({}),
201
+ style: ({ isExiting }) => ({
202
+ width: !ignoreTriggerWidth ? popoverWidth : void 0,
203
+ pointerEvents: !isOpen || isExiting ? "none" : void 0
204
+ }),
205
+ onAnimationEnd: finishClosing,
206
+ onTransitionEnd: finishClosing,
207
+ offset: 0,
208
+ children: /* @__PURE__ */ jsx(SelectListBox, {
209
+ ...props,
210
+ className: clsx(popoverCva({}), "max-h-80! [scrollbar-width:thin]"),
211
+ autoFocus: !isSearchable
212
+ })
213
+ })]
363
214
  })
364
- });
365
- $[103] = ignoreTriggerWidth;
366
- $[104] = isOpen;
367
- $[105] = isSearchable;
368
- $[106] = popoverCva;
369
- $[107] = popoverWidth;
370
- $[108] = props;
371
- $[109] = selectPopoverCva;
372
- $[110] = setIsOpen;
373
- $[111] = showPopover;
374
- $[112] = t22;
375
- } else t22 = $[112];
376
- let t23;
377
- if ($[113] !== as || $[114] !== formFieldProps || $[115] !== onFocusCapture || $[116] !== onMouseEnter || $[117] !== t20 || $[118] !== t21 || $[119] !== t22) {
378
- t23 = /* @__PURE__ */ jsxs(FormField, {
379
- ...formFieldProps,
380
- ...t20,
381
- as,
382
- onMouseEnter,
383
- onFocusCapture,
384
- ref: wrapperRef,
385
- children: [t21, t22]
386
- });
387
- $[113] = as;
388
- $[114] = formFieldProps;
389
- $[115] = onFocusCapture;
390
- $[116] = onMouseEnter;
391
- $[117] = t20;
392
- $[118] = t21;
393
- $[119] = t22;
394
- $[120] = t23;
395
- } else t23 = $[120];
396
- let t24;
397
- if ($[121] !== WrapperComponent || $[122] !== t19 || $[123] !== t23) {
398
- t24 = /* @__PURE__ */ jsx(WrapperComponent, {
399
- ...t19,
400
- children: t23
401
- });
402
- $[121] = WrapperComponent;
403
- $[122] = t19;
404
- $[123] = t23;
405
- $[124] = t24;
406
- } else t24 = $[124];
407
- let t25;
408
- if ($[125] !== as || $[126] !== error || $[127] !== t24) {
409
- t25 = /* @__PURE__ */ jsx(TooltipWrapper, {
410
- as,
411
- error,
412
- children: t24
413
- });
414
- $[125] = as;
415
- $[126] = error;
416
- $[127] = t24;
417
- $[128] = t25;
418
- } else t25 = $[128];
419
- return t25;
215
+ })
216
+ });
420
217
  };
421
- function _temp(item) {
422
- return !item.isSelectAllItem;
423
- }
424
218
  //#endregion
425
219
  export { SelectDesktop };
package/dist/components/inputs/Selection/shared/SelectInput.d.ts CHANGED
@@ -10,6 +10,8 @@ interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref
10
10
  fieldProps?: AriaFieldProps;
11
11
  headerProps?: FormFieldHeaderProps;
12
12
  onCloseComboBox?: (state: ComboBoxState<SelectItem> | null) => void;
13
+ onOpenIntent?: () => void;
14
+ onCloseIntent?: () => void;
13
15
  }
14
- export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
16
+ export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onOpenIntent, onCloseIntent, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
15
17
  export {};
package/dist/components/inputs/Selection/shared/SelectInput.js CHANGED
@@ -18,8 +18,8 @@ import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
18
18
  import { useTranslation } from "react-i18next";
19
19
  //#region src/components/inputs/Selection/shared/SelectInput.tsx
20
20
  var SelectInput = (t0) => {
21
- const $0 = c(136);
22
- const { ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props } = t0;
21
+ const $0 = c(144);
22
+ const { ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onOpenIntent, onCloseIntent, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props } = t0;
23
23
  const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
24
24
  const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
25
25
  const inputClearClassCva = UIOverrides.useCva("input.clearClassCva", inputClearClassDefinition);
@@ -240,35 +240,46 @@ var SelectInput = (t0) => {
240
240
  const t30 = isRequired || void 0;
241
241
  const t31 = isDirty || void 0;
242
242
  const t32 = "";
243
- const t33 = clsx("relative flex flex-1 items-center gap-input-gap-input-text-to-elements truncate", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
243
+ let t33;
244
+ if ($0[50] !== isOpen || $0[51] !== onCloseIntent || $0[52] !== onOpenIntent) {
245
+ t33 = (event) => {
246
+ if (isOpen && event.key === "Escape") onCloseIntent?.();
247
+ else onOpenIntent?.();
248
+ };
249
+ $0[50] = isOpen;
250
+ $0[51] = onCloseIntent;
251
+ $0[52] = onOpenIntent;
252
+ $0[53] = t33;
253
+ } else t33 = $0[53];
254
+ const t34 = clsx("relative flex flex-1 items-center gap-input-gap-input-text-to-elements truncate", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
244
255
  as,
245
256
  size,
246
257
  ...props
247
258
  }));
248
- let t34;
249
- if ($0[50] !== as || $0[51] !== headerProps || $0[52] !== labelProps) {
250
- t34 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
259
+ let t35;
260
+ if ($0[54] !== as || $0[55] !== headerProps || $0[56] !== labelProps) {
261
+ t35 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
251
262
  as,
252
263
  ...headerProps,
253
264
  labelProps
254
265
  });
255
- $0[50] = as;
256
- $0[51] = headerProps;
257
- $0[52] = labelProps;
258
- $0[53] = t34;
259
- } else t34 = $0[53];
260
- let t35;
261
- if ($0[54] !== leadingContent) {
262
- t35 = leadingContent && /* @__PURE__ */ jsx("div", {
266
+ $0[54] = as;
267
+ $0[55] = headerProps;
268
+ $0[56] = labelProps;
269
+ $0[57] = t35;
270
+ } else t35 = $0[57];
271
+ let t36;
272
+ if ($0[58] !== leadingContent) {
273
+ t36 = leadingContent && /* @__PURE__ */ jsx("div", {
263
274
  className: "ml-input-side-default flex shrink-0 items-center",
264
275
  children: leadingContent
265
276
  });
266
- $0[54] = leadingContent;
267
- $0[55] = t35;
268
- } else t35 = $0[55];
269
- let t36;
270
- if ($0[56] !== as || $0[57] !== collapseAfter || $0[58] !== fieldProps || $0[59] !== inputClassName || $0[60] !== isDisabled || $0[61] !== isSearchable || $0[62] !== onBlur || $0[63] !== onKeyDown || $0[64] !== onRemove || $0[65] !== placeholder || $0[66] !== selectInputTagsContentWrapperCva || $0[67] !== selectedItems || $0[68] !== selectedTagsType || $0[69] !== showTags) {
271
- t36 = (showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
277
+ $0[58] = leadingContent;
278
+ $0[59] = t36;
279
+ } else t36 = $0[59];
280
+ let t37;
281
+ if ($0[60] !== as || $0[61] !== collapseAfter || $0[62] !== fieldProps || $0[63] !== inputClassName || $0[64] !== isDisabled || $0[65] !== isSearchable || $0[66] !== onBlur || $0[67] !== onKeyDown || $0[68] !== onRemove || $0[69] !== placeholder || $0[70] !== selectInputTagsContentWrapperCva || $0[71] !== selectedItems || $0[72] !== selectedTagsType || $0[73] !== showTags) {
282
+ t37 = (showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
272
283
  className: selectInputTagsContentWrapperCva({ isSearchable }),
273
284
  children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
274
285
  selectedItems,
@@ -285,27 +296,30 @@ var SelectInput = (t0) => {
285
296
  ...fieldProps
286
297
  })]
287
298
  });
288
- $0[56] = as;
289
- $0[57] = collapseAfter;
290
- $0[58] = fieldProps;
291
- $0[59] = inputClassName;
292
- $0[60] = isDisabled;
293
- $0[61] = isSearchable;
294
- $0[62] = onBlur;
295
- $0[63] = onKeyDown;
296
- $0[64] = onRemove;
297
- $0[65] = placeholder;
298
- $0[66] = selectInputTagsContentWrapperCva;
299
- $0[67] = selectedItems;
300
- $0[68] = selectedTagsType;
301
- $0[69] = showTags;
302
- $0[70] = t36;
303
- } else t36 = $0[70];
304
- let t37;
305
- if ($0[71] !== as || $0[72] !== fieldProps || $0[73] !== isDisabled || $0[74] !== isEmpty || $0[75] !== isMultiple || $0[76] !== isOpen || $0[77] !== isSearchable || $0[78] !== onBlur || $0[79] !== onTriggerKeyDown || $0[80] !== placeholder || $0[81] !== selectedItems[0] || $0[82] !== setIsOpen || $0[83] !== showSelectionContent || $0[84] !== showTags) {
306
- t37 = !isSearchable && /* @__PURE__ */ jsxs(Button, {
299
+ $0[60] = as;
300
+ $0[61] = collapseAfter;
301
+ $0[62] = fieldProps;
302
+ $0[63] = inputClassName;
303
+ $0[64] = isDisabled;
304
+ $0[65] = isSearchable;
305
+ $0[66] = onBlur;
306
+ $0[67] = onKeyDown;
307
+ $0[68] = onRemove;
308
+ $0[69] = placeholder;
309
+ $0[70] = selectInputTagsContentWrapperCva;
310
+ $0[71] = selectedItems;
311
+ $0[72] = selectedTagsType;
312
+ $0[73] = showTags;
313
+ $0[74] = t37;
314
+ } else t37 = $0[74];
315
+ let t38;
316
+ if ($0[75] !== as || $0[76] !== fieldProps || $0[77] !== isDisabled || $0[78] !== isEmpty || $0[79] !== isMultiple || $0[80] !== isOpen || $0[81] !== isSearchable || $0[82] !== onBlur || $0[83] !== onCloseIntent || $0[84] !== onTriggerKeyDown || $0[85] !== placeholder || $0[86] !== selectedItems[0] || $0[87] !== setIsOpen || $0[88] !== showSelectionContent || $0[89] !== showTags) {
317
+ t38 = !isSearchable && /* @__PURE__ */ jsxs(Button, {
307
318
  isDisabled,
308
319
  onPress: () => setIsOpen(!isOpen),
320
+ onPointerDownCapture: () => {
321
+ if (isOpen) onCloseIntent?.();
322
+ },
309
323
  onBlur,
310
324
  "data-type": "select-trigger",
311
325
  className: clsx("group/select-trigger w-full truncate text-start outline-none disabled:text-text-default-3", showTags && "absolute inset-0 z-base"),
@@ -317,75 +331,79 @@ var SelectInput = (t0) => {
317
331
  children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
318
332
  })]
319
333
  });
320
- $0[71] = as;
321
- $0[72] = fieldProps;
322
- $0[73] = isDisabled;
323
- $0[74] = isEmpty;
324
- $0[75] = isMultiple;
325
- $0[76] = isOpen;
326
- $0[77] = isSearchable;
327
- $0[78] = onBlur;
328
- $0[79] = onTriggerKeyDown;
329
- $0[80] = placeholder;
330
- $0[81] = selectedItems[0];
331
- $0[82] = setIsOpen;
332
- $0[83] = showSelectionContent;
333
- $0[84] = showTags;
334
- $0[85] = t37;
335
- } else t37 = $0[85];
336
- let t38;
337
- if ($0[86] !== onClick || $0[87] !== t33 || $0[88] !== t34 || $0[89] !== t35 || $0[90] !== t36 || $0[91] !== t37) {
338
- t38 = /* @__PURE__ */ jsxs("div", {
339
- className: t33,
334
+ $0[75] = as;
335
+ $0[76] = fieldProps;
336
+ $0[77] = isDisabled;
337
+ $0[78] = isEmpty;
338
+ $0[79] = isMultiple;
339
+ $0[80] = isOpen;
340
+ $0[81] = isSearchable;
341
+ $0[82] = onBlur;
342
+ $0[83] = onCloseIntent;
343
+ $0[84] = onTriggerKeyDown;
344
+ $0[85] = placeholder;
345
+ $0[86] = selectedItems[0];
346
+ $0[87] = setIsOpen;
347
+ $0[88] = showSelectionContent;
348
+ $0[89] = showTags;
349
+ $0[90] = t38;
350
+ } else t38 = $0[90];
351
+ let t39;
352
+ if ($0[91] !== onClick || $0[92] !== t34 || $0[93] !== t35 || $0[94] !== t36 || $0[95] !== t37 || $0[96] !== t38) {
353
+ t39 = /* @__PURE__ */ jsxs("div", {
354
+ className: t34,
340
355
  onClick,
341
356
  children: [
342
- t34,
343
357
  t35,
344
358
  t36,
345
- t37
359
+ t37,
360
+ t38
346
361
  ]
347
362
  });
348
- $0[86] = onClick;
349
- $0[87] = t33;
350
- $0[88] = t34;
351
- $0[89] = t35;
352
- $0[90] = t36;
353
- $0[91] = t37;
354
- $0[92] = t38;
355
- } else t38 = $0[92];
356
- let t39;
357
- if ($0[93] !== as || $0[94] !== inputClearClassCva || $0[95] !== isClearable || $0[96] !== isDisabled || $0[97] !== onClear || $0[98] !== showClearButton) {
358
- t39 = isClearable && !isDisabled && /* @__PURE__ */ jsx(InputClear, {
363
+ $0[91] = onClick;
364
+ $0[92] = t34;
365
+ $0[93] = t35;
366
+ $0[94] = t36;
367
+ $0[95] = t37;
368
+ $0[96] = t38;
369
+ $0[97] = t39;
370
+ } else t39 = $0[97];
371
+ let t40;
372
+ if ($0[98] !== as || $0[99] !== inputClearClassCva || $0[100] !== isClearable || $0[101] !== isDisabled || $0[102] !== onClear || $0[103] !== showClearButton) {
373
+ t40 = isClearable && !isDisabled && /* @__PURE__ */ jsx(InputClear, {
359
374
  onClear: () => {
360
375
  onClear();
361
376
  },
362
377
  className: inputClearClassCva({ as }),
363
378
  show: showClearButton
364
379
  });
365
- $0[93] = as;
366
- $0[94] = inputClearClassCva;
367
- $0[95] = isClearable;
368
- $0[96] = isDisabled;
369
- $0[97] = onClear;
370
- $0[98] = showClearButton;
371
- $0[99] = t39;
372
- } else t39 = $0[99];
373
- let t40;
374
- if ($0[100] !== trailingContent) {
375
- t40 = trailingContent && /* @__PURE__ */ jsx("div", {
380
+ $0[98] = as;
381
+ $0[99] = inputClearClassCva;
382
+ $0[100] = isClearable;
383
+ $0[101] = isDisabled;
384
+ $0[102] = onClear;
385
+ $0[103] = showClearButton;
386
+ $0[104] = t40;
387
+ } else t40 = $0[104];
388
+ let t41;
389
+ if ($0[105] !== trailingContent) {
390
+ t41 = trailingContent && /* @__PURE__ */ jsx("div", {
376
391
  className: "flex shrink-0 items-center",
377
392
  children: trailingContent
378
393
  });
379
- $0[100] = trailingContent;
380
- $0[101] = t40;
381
- } else t40 = $0[101];
382
- let t41;
383
- if ($0[102] !== hideDropdownIcon || $0[103] !== inputSizeCva || $0[104] !== isDisabled || $0[105] !== isOpen || $0[106] !== isSearchable || $0[107] !== setIsOpen || $0[108] !== size || $0[109] !== t) {
384
- t41 = !hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
394
+ $0[105] = trailingContent;
395
+ $0[106] = t41;
396
+ } else t41 = $0[106];
397
+ let t42;
398
+ if ($0[107] !== hideDropdownIcon || $0[108] !== inputSizeCva || $0[109] !== isDisabled || $0[110] !== isOpen || $0[111] !== isSearchable || $0[112] !== onCloseIntent || $0[113] !== setIsOpen || $0[114] !== size || $0[115] !== t) {
399
+ t42 = !hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
385
400
  excludeFromTabOrder: true,
386
401
  "aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
387
402
  className: clsx("self-stretch pl-1-5 outline-none", inputSizeCva({ size })),
388
403
  isDisabled,
404
+ onPointerDownCapture: () => {
405
+ if (isOpen) onCloseIntent?.();
406
+ },
389
407
  onPress: () => {
390
408
  if (!isSearchable) setIsOpen(!isOpen);
391
409
  },
@@ -394,19 +412,20 @@ var SelectInput = (t0) => {
394
412
  "aria-hidden": "true"
395
413
  })
396
414
  });
397
- $0[102] = hideDropdownIcon;
398
- $0[103] = inputSizeCva;
399
- $0[104] = isDisabled;
400
- $0[105] = isOpen;
401
- $0[106] = isSearchable;
402
- $0[107] = setIsOpen;
403
- $0[108] = size;
404
- $0[109] = t;
405
- $0[110] = t41;
406
- } else t41 = $0[110];
407
- let t42;
408
- if ($0[111] !== focusWithinProps || $0[112] !== hoverProps || $0[113] !== onFocusCapture || $0[114] !== onMouseEnter || $0[115] !== ref || $0[116] !== t16 || $0[117] !== t18 || $0[118] !== t19 || $0[119] !== t20 || $0[120] !== t21 || $0[121] !== t22 || $0[122] !== t23 || $0[123] !== t24 || $0[124] !== t25 || $0[125] !== t26 || $0[126] !== t27 || $0[127] !== t28 || $0[128] !== t29 || $0[129] !== t30 || $0[130] !== t31 || $0[131] !== t38 || $0[132] !== t39 || $0[133] !== t40 || $0[134] !== t41) {
409
- t42 = /* @__PURE__ */ jsxs("div", {
415
+ $0[107] = hideDropdownIcon;
416
+ $0[108] = inputSizeCva;
417
+ $0[109] = isDisabled;
418
+ $0[110] = isOpen;
419
+ $0[111] = isSearchable;
420
+ $0[112] = onCloseIntent;
421
+ $0[113] = setIsOpen;
422
+ $0[114] = size;
423
+ $0[115] = t;
424
+ $0[116] = t42;
425
+ } else t42 = $0[116];
426
+ let t43;
427
+ if ($0[117] !== focusWithinProps || $0[118] !== hoverProps || $0[119] !== onFocusCapture || $0[120] !== onMouseEnter || $0[121] !== onOpenIntent || $0[122] !== ref || $0[123] !== t16 || $0[124] !== t18 || $0[125] !== t19 || $0[126] !== t20 || $0[127] !== t21 || $0[128] !== t22 || $0[129] !== t23 || $0[130] !== t24 || $0[131] !== t25 || $0[132] !== t26 || $0[133] !== t27 || $0[134] !== t28 || $0[135] !== t29 || $0[136] !== t30 || $0[137] !== t31 || $0[138] !== t33 || $0[139] !== t39 || $0[140] !== t40 || $0[141] !== t41 || $0[142] !== t42) {
428
+ t43 = /* @__PURE__ */ jsxs("div", {
410
429
  ref,
411
430
  className: t16,
412
431
  "data-rac": t17,
@@ -426,43 +445,47 @@ var SelectInput = (t0) => {
426
445
  "data-is-dirty": t31,
427
446
  "data-select-input": t32,
428
447
  onMouseEnter,
448
+ onPointerDownCapture: onOpenIntent,
449
+ onKeyDownCapture: t33,
429
450
  onFocusCapture,
430
451
  ...hoverProps,
431
452
  ...focusWithinProps,
432
453
  children: [
433
- t38,
434
454
  t39,
435
455
  t40,
436
- t41
456
+ t41,
457
+ t42
437
458
  ]
438
459
  });
439
- $0[111] = focusWithinProps;
440
- $0[112] = hoverProps;
441
- $0[113] = onFocusCapture;
442
- $0[114] = onMouseEnter;
443
- $0[115] = ref;
444
- $0[116] = t16;
445
- $0[117] = t18;
446
- $0[118] = t19;
447
- $0[119] = t20;
448
- $0[120] = t21;
449
- $0[121] = t22;
450
- $0[122] = t23;
451
- $0[123] = t24;
452
- $0[124] = t25;
453
- $0[125] = t26;
454
- $0[126] = t27;
455
- $0[127] = t28;
456
- $0[128] = t29;
457
- $0[129] = t30;
458
- $0[130] = t31;
459
- $0[131] = t38;
460
- $0[132] = t39;
461
- $0[133] = t40;
462
- $0[134] = t41;
463
- $0[135] = t42;
464
- } else t42 = $0[135];
465
- return t42;
460
+ $0[117] = focusWithinProps;
461
+ $0[118] = hoverProps;
462
+ $0[119] = onFocusCapture;
463
+ $0[120] = onMouseEnter;
464
+ $0[121] = onOpenIntent;
465
+ $0[122] = ref;
466
+ $0[123] = t16;
467
+ $0[124] = t18;
468
+ $0[125] = t19;
469
+ $0[126] = t20;
470
+ $0[127] = t21;
471
+ $0[128] = t22;
472
+ $0[129] = t23;
473
+ $0[130] = t24;
474
+ $0[131] = t25;
475
+ $0[132] = t26;
476
+ $0[133] = t27;
477
+ $0[134] = t28;
478
+ $0[135] = t29;
479
+ $0[136] = t30;
480
+ $0[137] = t31;
481
+ $0[138] = t33;
482
+ $0[139] = t39;
483
+ $0[140] = t40;
484
+ $0[141] = t41;
485
+ $0[142] = t42;
486
+ $0[143] = t43;
487
+ } else t43 = $0[143];
488
+ return t43;
466
489
  };
467
490
  //#endregion
468
491
  export { SelectInput };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@povio/ui",
3
- "version": "3.2.4-rc.7",
3
+ "version": "3.2.4-rc.9",
4
4
  "type": "module",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",