@povio/ui 3.3.0 → 3.3.1

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 (98) hide show
  1. package/README.md +1 -1
  2. package/dist/browser-tests/checkbox/CheckboxGroupHarness.d.ts +10 -0
  3. package/dist/browser-tests/checkbox/CheckboxHarness.d.ts +10 -0
  4. package/dist/browser-tests/checkbox/checkbox-group.spec.d.ts +1 -0
  5. package/dist/browser-tests/checkbox/checkbox.spec.d.ts +1 -0
  6. package/dist/browser-tests/datetime-picker/DateTimeHarnesses.d.ts +43 -0
  7. package/dist/browser-tests/datetime-picker/assertions.d.ts +9 -0
  8. package/dist/browser-tests/datetime-picker/date-input-focus.firefox.spec.d.ts +1 -0
  9. package/dist/browser-tests/datetime-picker/date-picker.spec.d.ts +1 -0
  10. package/dist/browser-tests/datetime-picker/date-range-picker.spec.d.ts +1 -0
  11. package/dist/browser-tests/datetime-picker/date-time-picker.spec.d.ts +1 -0
  12. package/dist/browser-tests/datetime-picker/time-picker.spec.d.ts +1 -0
  13. package/dist/browser-tests/file-upload/FileUploadHarness.d.ts +4 -0
  14. package/dist/browser-tests/file-upload/file-upload.spec.d.ts +1 -0
  15. package/dist/browser-tests/file-upload-container/FileUploadContainerHarness.d.ts +4 -0
  16. package/dist/browser-tests/file-upload-container/file-upload-container.spec.d.ts +1 -0
  17. package/dist/browser-tests/input-upload/InputUploadHarness.d.ts +9 -0
  18. package/dist/browser-tests/input-upload/input-upload.spec.d.ts +1 -0
  19. package/dist/browser-tests/modal/ModalHarness.d.ts +5 -0
  20. package/dist/browser-tests/modal/modal.spec.d.ts +1 -0
  21. package/dist/browser-tests/number-input/NumberInputHarness.d.ts +10 -0
  22. package/dist/browser-tests/number-input/number-input.spec.d.ts +1 -0
  23. package/dist/browser-tests/number-range-input/NumberRangeInputHarness.d.ts +10 -0
  24. package/dist/browser-tests/number-range-input/number-range-input.spec.d.ts +1 -0
  25. package/dist/browser-tests/password-input/PasswordInputHarness.d.ts +6 -0
  26. package/dist/browser-tests/password-input/password-input.spec.d.ts +1 -0
  27. package/dist/browser-tests/radio-group/RadioGroupHarness.d.ts +15 -0
  28. package/dist/browser-tests/radio-group/radio-group.spec.d.ts +1 -0
  29. package/dist/browser-tests/selection/SelectionHarnesses.d.ts +61 -0
  30. package/dist/browser-tests/selection/autocomplete.spec.d.ts +1 -0
  31. package/dist/browser-tests/selection/interactions.d.ts +2 -0
  32. package/dist/browser-tests/selection/query-autocomplete.spec.d.ts +1 -0
  33. package/dist/browser-tests/selection/query-select.spec.d.ts +1 -0
  34. package/dist/browser-tests/selection/select.spec.d.ts +1 -0
  35. package/dist/browser-tests/slider/SliderHarness.d.ts +11 -0
  36. package/dist/browser-tests/slider/slider.spec.d.ts +1 -0
  37. package/dist/browser-tests/text-area/TextAreaHarness.d.ts +10 -0
  38. package/dist/browser-tests/text-area/text-area.spec.d.ts +1 -0
  39. package/dist/browser-tests/text-input/TextInputHarness.d.ts +10 -0
  40. package/dist/browser-tests/text-input/text-input.spec.d.ts +1 -0
  41. package/dist/browser-tests/toggle/ToggleHarness.d.ts +10 -0
  42. package/dist/browser-tests/toggle/toggle.spec.d.ts +1 -0
  43. package/dist/browser-tests/utils/blur.d.ts +22 -0
  44. package/dist/browser-tests/utils/events.d.ts +4 -0
  45. package/dist/browser-tests/utils/input.d.ts +10 -0
  46. package/dist/components/Breadcrumbs/Breadcrumbs.js +206 -55
  47. package/dist/components/buttons/Button/button.cva.d.ts +1 -1
  48. package/dist/components/buttons/Button/button.cva.js +4 -4
  49. package/dist/components/buttons/InlineIconButton/InlineIconButton.js +34 -9
  50. package/dist/components/buttons/PillButton/pillButton.cva.js +4 -4
  51. package/dist/components/buttons/shared/ButtonContent.js +80 -22
  52. package/dist/components/inputs/Checkbox/CheckboxCheckmark.js +24 -10
  53. package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +222 -74
  54. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +182 -56
  55. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +128 -41
  56. package/dist/components/inputs/DateTime/shared/Calendar.js +339 -139
  57. package/dist/components/inputs/DateTime/shared/CalendarCell.js +308 -114
  58. package/dist/components/inputs/DateTime/shared/CalendarGrid.js +150 -35
  59. package/dist/components/inputs/DateTime/shared/CalendarHeader.js +229 -95
  60. package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js +296 -115
  61. package/dist/components/inputs/DateTime/shared/DateField.js +306 -135
  62. package/dist/components/inputs/DateTime/shared/DatePickerInput.js +338 -140
  63. package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +59 -10
  64. package/dist/components/inputs/File/FileUpload.js +1 -1
  65. package/dist/components/inputs/File/InputUpload.js +261 -65
  66. package/dist/components/inputs/File/shared/FileUploadContentEmpty.js +180 -48
  67. package/dist/components/inputs/File/shared/FileUploadContentError.js +265 -95
  68. package/dist/components/inputs/File/shared/FileUploadContentFilled.js +261 -99
  69. package/dist/components/inputs/File/shared/FileUploadContentLoading.js +234 -56
  70. package/dist/components/inputs/File/shared/ProgressBar.js +102 -15
  71. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +313 -75
  72. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +83 -23
  73. package/dist/components/inputs/Selection/Select/QuerySelect.js +96 -30
  74. package/dist/components/inputs/Selection/shared/SelectListBox.js +163 -51
  75. package/dist/components/inputs/Selection/shared/useSelectItems.js +108 -48
  76. package/dist/components/inputs/Skeleton/InputFrame.js +550 -177
  77. package/dist/components/inputs/TextEditor/TextEditor.js +389 -87
  78. package/dist/components/navigation/Accordion/Accordion.js +69 -22
  79. package/dist/components/navigation/Accordion/AccordionItem.js +86 -41
  80. package/dist/components/navigation/Stepper/Stepper.js +67 -22
  81. package/dist/components/overlays/ActionModal/ActionModal.js +169 -35
  82. package/dist/components/overlays/BottomSheet/BottomSheet.js +1 -1
  83. package/dist/components/overlays/Modal/Modal.d.ts +3 -2
  84. package/dist/components/overlays/Modal/Modal.js +3 -1
  85. package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js +110 -29
  86. package/dist/components/shared/pagination/Pagination.js +108 -22
  87. package/dist/components/shared/pagination/minWidth.cva.d.ts +1 -1
  88. package/dist/components/status/Alert/Alert.js +97 -30
  89. package/dist/components/table/InfiniteTable.js +67 -16
  90. package/dist/components/text/Typography/Typography.js +23 -8
  91. package/dist/config/confirmation.context.js +1 -1
  92. package/dist/config/theme.context.js +98 -45
  93. package/dist/config/uiConfig.context.js +39 -8
  94. package/dist/hooks/useDebounceCallback.js +51 -17
  95. package/dist/hooks/useFormAutosave.js +120 -33
  96. package/dist/hooks/useLongPressRepeat.js +55 -20
  97. package/dist/vitest.setup.browser.d.ts +6 -0
  98. package/package.json +1 -1
@@ -3,6 +3,7 @@ import { ArrowDropUpIcon } from "../../../../assets/icons/ArrowDropUp.js";
3
3
  import { ChevronLeftIcon } from "../../../../assets/icons/ChevronLeft.js";
4
4
  import { ChevronRightIcon } from "../../../../assets/icons/ChevronRight.js";
5
5
  import { PillButton } from "../../../buttons/PillButton/PillButton.js";
6
+ import { c } from "react/compiler-runtime";
6
7
  import { jsx, jsxs } from "react/jsx-runtime";
7
8
  import { clsx } from "clsx";
8
9
  import { Button, ToggleButtonGroup } from "react-aria-components";
@@ -16,106 +17,239 @@ var HourCycle = {
16
17
  var getTimeFormatterDate = (timeValue, timeZone) => {
17
18
  return new CalendarDateTime(2e3, 1, 1, timeValue.hour, timeValue.minute).toDate(timeZone);
18
19
  };
19
- var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, isTimeOptional, hourCycle, granularity = "day", toggleState, setToggleState }) => {
20
- const formatter = useDateFormatter({
21
- month: "long",
22
- timeZone: calendarState.timeZone
23
- });
24
- const timeFormatter = useDateFormatter({
25
- timeStyle: "short",
26
- timeZone: calendarState.timeZone,
27
- hourCycle: hourCycle ? HourCycle[hourCycle] : void 0
28
- });
29
- const year = calendarState.focusedDate.year.toString();
30
- const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
20
+ var CalendarHeader = (t0) => {
21
+ const $ = c(55);
22
+ const { calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, isTimeOptional, hourCycle, granularity: t1, toggleState, setToggleState } = t0;
23
+ const granularity = t1 === void 0 ? "day" : t1;
24
+ let t2;
25
+ if ($[0] !== calendarState.timeZone) {
26
+ t2 = {
27
+ month: "long",
28
+ timeZone: calendarState.timeZone
29
+ };
30
+ $[0] = calendarState.timeZone;
31
+ $[1] = t2;
32
+ } else t2 = $[1];
33
+ const formatter = useDateFormatter(t2);
34
+ const t3 = hourCycle ? HourCycle[hourCycle] : void 0;
35
+ let t4;
36
+ if ($[2] !== calendarState.timeZone || $[3] !== t3) {
37
+ t4 = {
38
+ timeStyle: "short",
39
+ timeZone: calendarState.timeZone,
40
+ hourCycle: t3
41
+ };
42
+ $[2] = calendarState.timeZone;
43
+ $[3] = t3;
44
+ $[4] = t4;
45
+ } else t4 = $[4];
46
+ const timeFormatter = useDateFormatter(t4);
47
+ let t5;
48
+ if ($[5] !== calendarState.focusedDate.year) {
49
+ t5 = calendarState.focusedDate.year.toString();
50
+ $[5] = calendarState.focusedDate.year;
51
+ $[6] = t5;
52
+ } else t5 = $[6];
53
+ const year = t5;
54
+ let t6;
55
+ if ($[7] !== calendarState.focusedDate || $[8] !== calendarState.timeZone || $[9] !== formatter) {
56
+ t6 = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
57
+ $[7] = calendarState.focusedDate;
58
+ $[8] = calendarState.timeZone;
59
+ $[9] = formatter;
60
+ $[10] = t6;
61
+ } else t6 = $[10];
62
+ const month = t6;
31
63
  const hasTimeValue = !!datePickerState?.timeValue;
32
64
  let timeLabel = "--:--";
33
65
  if (isTimeOptional || hasTimeValue) {
34
- const date = getTimeFormatterDate(datePickerState?.timeValue || new Time(0, 0), calendarState.timeZone);
35
- timeLabel = timeFormatter.format(date);
66
+ let t7;
67
+ if ($[11] !== calendarState.timeZone || $[12] !== datePickerState?.timeValue || $[13] !== timeFormatter) {
68
+ const date = getTimeFormatterDate(datePickerState?.timeValue || new Time(0, 0), calendarState.timeZone);
69
+ t7 = timeFormatter.format(date);
70
+ $[11] = calendarState.timeZone;
71
+ $[12] = datePickerState?.timeValue;
72
+ $[13] = timeFormatter;
73
+ $[14] = t7;
74
+ } else t7 = $[14];
75
+ timeLabel = t7;
36
76
  }
37
- return /* @__PURE__ */ jsxs("div", {
38
- className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
39
- children: [
40
- /* @__PURE__ */ jsx("div", {
41
- className: "inline-flex h-12 items-center p-3",
42
- children: /* @__PURE__ */ jsx(Button, {
43
- ...prevButtonProps,
44
- isDisabled: !!toggleState,
45
- className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
46
- children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" })
47
- })
48
- }),
49
- /* @__PURE__ */ jsxs(ToggleButtonGroup, {
50
- className: "flex gap-2",
51
- children: [
52
- granularity !== "year" && /* @__PURE__ */ jsx(PillButton, {
53
- color: "secondary",
54
- variant: "subtle",
55
- iconPosition: "right",
56
- icon: toggleState === "month" ? ArrowDropUpIcon : ArrowDropDownIcon,
57
- toggle: true,
58
- isSelected: toggleState === "month",
59
- onChange: (isSelected) => {
60
- if (!isSelected) {
61
- if (granularity === "day") {
62
- setToggleState(null);
63
- return;
64
- }
65
- setToggleState("month");
66
- return;
67
- }
68
- setToggleState("month");
69
- },
70
- children: month
71
- }),
72
- /* @__PURE__ */ jsx(PillButton, {
73
- color: "secondary",
74
- variant: "subtle",
75
- iconPosition: "right",
76
- icon: toggleState === "year" ? ArrowDropUpIcon : ArrowDropDownIcon,
77
- toggle: true,
78
- isSelected: toggleState === "year",
79
- onChange: (isSelected_0) => {
80
- if (isSelected_0) {
81
- setToggleState("year");
82
- return;
83
- }
84
- if (granularity === "day") {
85
- setToggleState(null);
86
- return;
87
- }
88
- if (granularity === "month") {
89
- setToggleState("month");
90
- return;
91
- }
92
- setToggleState("year");
93
- },
94
- children: year
95
- }),
96
- includesTime && /* @__PURE__ */ jsx(PillButton, {
97
- color: "secondary",
98
- variant: "subtle",
99
- iconPosition: "right",
100
- icon: toggleState === "time" ? ArrowDropUpIcon : ArrowDropDownIcon,
101
- toggle: true,
102
- isSelected: toggleState === "time",
103
- onChange: (isSelected_1) => setToggleState(isSelected_1 ? "time" : null),
104
- children: timeLabel
105
- })
106
- ]
107
- }),
108
- /* @__PURE__ */ jsx("div", {
109
- className: "inline-flex h-12 items-center p-3",
110
- children: /* @__PURE__ */ jsx(Button, {
111
- ...nextButtonProps,
112
- isDisabled: !!toggleState,
113
- className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
114
- children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" })
115
- })
77
+ const t7 = !!toggleState;
78
+ const t8 = !!toggleState && "opacity-0";
79
+ let t9;
80
+ if ($[15] !== t8) {
81
+ t9 = clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", t8);
82
+ $[15] = t8;
83
+ $[16] = t9;
84
+ } else t9 = $[16];
85
+ let t10;
86
+ if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
87
+ t10 = /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" });
88
+ $[17] = t10;
89
+ } else t10 = $[17];
90
+ let t11;
91
+ if ($[18] !== prevButtonProps || $[19] !== t7 || $[20] !== t9) {
92
+ t11 = /* @__PURE__ */ jsx("div", {
93
+ className: "inline-flex h-12 items-center p-3",
94
+ children: /* @__PURE__ */ jsx(Button, {
95
+ ...prevButtonProps,
96
+ isDisabled: t7,
97
+ className: t9,
98
+ children: t10
116
99
  })
117
- ]
118
- });
100
+ });
101
+ $[18] = prevButtonProps;
102
+ $[19] = t7;
103
+ $[20] = t9;
104
+ $[21] = t11;
105
+ } else t11 = $[21];
106
+ let t12;
107
+ if ($[22] !== granularity || $[23] !== month || $[24] !== setToggleState || $[25] !== toggleState) {
108
+ t12 = granularity !== "year" && /* @__PURE__ */ jsx(PillButton, {
109
+ color: "secondary",
110
+ variant: "subtle",
111
+ iconPosition: "right",
112
+ icon: toggleState === "month" ? ArrowDropUpIcon : ArrowDropDownIcon,
113
+ toggle: true,
114
+ isSelected: toggleState === "month",
115
+ onChange: (isSelected) => {
116
+ if (!isSelected) {
117
+ if (granularity === "day") {
118
+ setToggleState(null);
119
+ return;
120
+ }
121
+ setToggleState("month");
122
+ return;
123
+ }
124
+ setToggleState("month");
125
+ },
126
+ children: month
127
+ });
128
+ $[22] = granularity;
129
+ $[23] = month;
130
+ $[24] = setToggleState;
131
+ $[25] = toggleState;
132
+ $[26] = t12;
133
+ } else t12 = $[26];
134
+ const t13 = toggleState === "year" ? ArrowDropUpIcon : ArrowDropDownIcon;
135
+ const t14 = toggleState === "year";
136
+ let t15;
137
+ if ($[27] !== granularity || $[28] !== setToggleState) {
138
+ t15 = (isSelected_0) => {
139
+ if (isSelected_0) {
140
+ setToggleState("year");
141
+ return;
142
+ }
143
+ if (granularity === "day") {
144
+ setToggleState(null);
145
+ return;
146
+ }
147
+ if (granularity === "month") {
148
+ setToggleState("month");
149
+ return;
150
+ }
151
+ setToggleState("year");
152
+ };
153
+ $[27] = granularity;
154
+ $[28] = setToggleState;
155
+ $[29] = t15;
156
+ } else t15 = $[29];
157
+ let t16;
158
+ if ($[30] !== t13 || $[31] !== t14 || $[32] !== t15 || $[33] !== year) {
159
+ t16 = /* @__PURE__ */ jsx(PillButton, {
160
+ color: "secondary",
161
+ variant: "subtle",
162
+ iconPosition: "right",
163
+ icon: t13,
164
+ toggle: true,
165
+ isSelected: t14,
166
+ onChange: t15,
167
+ children: year
168
+ });
169
+ $[30] = t13;
170
+ $[31] = t14;
171
+ $[32] = t15;
172
+ $[33] = year;
173
+ $[34] = t16;
174
+ } else t16 = $[34];
175
+ let t17;
176
+ if ($[35] !== includesTime || $[36] !== setToggleState || $[37] !== timeLabel || $[38] !== toggleState) {
177
+ t17 = includesTime && /* @__PURE__ */ jsx(PillButton, {
178
+ color: "secondary",
179
+ variant: "subtle",
180
+ iconPosition: "right",
181
+ icon: toggleState === "time" ? ArrowDropUpIcon : ArrowDropDownIcon,
182
+ toggle: true,
183
+ isSelected: toggleState === "time",
184
+ onChange: (isSelected_1) => setToggleState(isSelected_1 ? "time" : null),
185
+ children: timeLabel
186
+ });
187
+ $[35] = includesTime;
188
+ $[36] = setToggleState;
189
+ $[37] = timeLabel;
190
+ $[38] = toggleState;
191
+ $[39] = t17;
192
+ } else t17 = $[39];
193
+ let t18;
194
+ if ($[40] !== t12 || $[41] !== t16 || $[42] !== t17) {
195
+ t18 = /* @__PURE__ */ jsxs(ToggleButtonGroup, {
196
+ className: "flex gap-2",
197
+ children: [
198
+ t12,
199
+ t16,
200
+ t17
201
+ ]
202
+ });
203
+ $[40] = t12;
204
+ $[41] = t16;
205
+ $[42] = t17;
206
+ $[43] = t18;
207
+ } else t18 = $[43];
208
+ const t19 = !!toggleState;
209
+ const t20 = !!toggleState && "opacity-0";
210
+ let t21;
211
+ if ($[44] !== t20) {
212
+ t21 = clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", t20);
213
+ $[44] = t20;
214
+ $[45] = t21;
215
+ } else t21 = $[45];
216
+ let t22;
217
+ if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
218
+ t22 = /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" });
219
+ $[46] = t22;
220
+ } else t22 = $[46];
221
+ let t23;
222
+ if ($[47] !== nextButtonProps || $[48] !== t19 || $[49] !== t21) {
223
+ t23 = /* @__PURE__ */ jsx("div", {
224
+ className: "inline-flex h-12 items-center p-3",
225
+ children: /* @__PURE__ */ jsx(Button, {
226
+ ...nextButtonProps,
227
+ isDisabled: t19,
228
+ className: t21,
229
+ children: t22
230
+ })
231
+ });
232
+ $[47] = nextButtonProps;
233
+ $[48] = t19;
234
+ $[49] = t21;
235
+ $[50] = t23;
236
+ } else t23 = $[50];
237
+ let t24;
238
+ if ($[51] !== t11 || $[52] !== t18 || $[53] !== t23) {
239
+ t24 = /* @__PURE__ */ jsxs("div", {
240
+ className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
241
+ children: [
242
+ t11,
243
+ t18,
244
+ t23
245
+ ]
246
+ });
247
+ $[51] = t11;
248
+ $[52] = t18;
249
+ $[53] = t23;
250
+ $[54] = t24;
251
+ } else t24 = $[54];
252
+ return t24;
119
253
  };
120
254
  //#endregion
121
255
  export { CalendarHeader };