@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
@@ -1,25 +1,59 @@
1
- import { useCallback, useEffect, useRef, useState } from "react";
1
+ import { c } from "react/compiler-runtime";
2
+ import { useEffect, useRef, useState } from "react";
2
3
  //#region src/hooks/useDebounceCallback.ts
3
- function useDebounceCallback(callback, { delay = 500 } = {}) {
4
+ function useDebounceCallback(callback, t0) {
5
+ const $ = c(10);
6
+ let t1;
7
+ if ($[0] !== t0) {
8
+ t1 = t0 === void 0 ? {} : t0;
9
+ $[0] = t0;
10
+ $[1] = t1;
11
+ } else t1 = $[1];
12
+ const { delay: t2 } = t1;
13
+ const delay = t2 === void 0 ? 500 : t2;
4
14
  const timeoutRef = useRef(null);
5
15
  const [isDebouncing, setIsDebouncing] = useState(false);
6
- const debouncedCallback = useCallback((...args) => {
7
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
8
- setIsDebouncing(true);
9
- timeoutRef.current = setTimeout(() => {
10
- setIsDebouncing(false);
11
- callback?.(...args);
12
- }, delay);
13
- }, [callback, delay]);
14
- useEffect(() => {
15
- return () => {
16
+ let t3;
17
+ if ($[2] !== callback || $[3] !== delay) {
18
+ t3 = (...t4) => {
19
+ const args = t4;
16
20
  if (timeoutRef.current) clearTimeout(timeoutRef.current);
21
+ setIsDebouncing(true);
22
+ timeoutRef.current = setTimeout(() => {
23
+ setIsDebouncing(false);
24
+ callback?.(...args);
25
+ }, delay);
17
26
  };
18
- }, []);
19
- return {
20
- callback: debouncedCallback,
21
- isDebouncing
22
- };
27
+ $[2] = callback;
28
+ $[3] = delay;
29
+ $[4] = t3;
30
+ } else t3 = $[4];
31
+ const debouncedCallback = t3;
32
+ let t4;
33
+ let t5;
34
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
35
+ t4 = () => () => {
36
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
37
+ };
38
+ t5 = [];
39
+ $[5] = t4;
40
+ $[6] = t5;
41
+ } else {
42
+ t4 = $[5];
43
+ t5 = $[6];
44
+ }
45
+ useEffect(t4, t5);
46
+ let t6;
47
+ if ($[7] !== debouncedCallback || $[8] !== isDebouncing) {
48
+ t6 = {
49
+ callback: debouncedCallback,
50
+ isDebouncing
51
+ };
52
+ $[7] = debouncedCallback;
53
+ $[8] = isDebouncing;
54
+ $[9] = t6;
55
+ } else t6 = $[9];
56
+ return t6;
23
57
  }
24
58
  //#endregion
25
59
  export { useDebounceCallback };
@@ -1,7 +1,8 @@
1
1
  import { ObjectUtils } from "../utils/object.utils.js";
2
2
  import { useAutosave } from "./useAutosave.js";
3
3
  import { useForm } from "./useForm.js";
4
- import { useCallback, useEffect, useRef } from "react";
4
+ import { c } from "react/compiler-runtime";
5
+ import { useEffect, useRef } from "react";
5
6
  //#region src/hooks/useFormAutosave.ts
6
7
  var getResetTimeoutErrorMessage = (resetTimeout) => `Form Reset Timeout (${resetTimeout}ms) - Action Required
7
8
  Problem: Form values weren't reset after submission.
@@ -15,44 +16,130 @@ Solutions:
15
16
  1. Ensure reset dependencies include all relevant state variables
16
17
  2. Confirm your submission handler updates state properly (check query invalidation)
17
18
  3. For slower operations, consider increasing the timeout threshold`;
18
- function useFormAutosave({ autosaveDelay, enableAutosave, autosaveOn = "change", normalizeAutosaveData, onAutosave, getResetValues, resetDeps, resetTimeout = 5e3, ...props }) {
19
- const form = useForm({
20
- ...props,
21
- defaultValues: getResetValues()
22
- });
19
+ function useFormAutosave(t0) {
20
+ const $ = c(32);
21
+ let autosaveDelay;
22
+ let enableAutosave;
23
+ let getResetValues;
24
+ let normalizeAutosaveData;
25
+ let onAutosave;
26
+ let props;
27
+ let resetDeps;
28
+ let t1;
29
+ let t2;
30
+ if ($[0] !== t0) {
31
+ ({autosaveDelay, enableAutosave, autosaveOn: t1, normalizeAutosaveData, onAutosave, getResetValues, resetDeps, resetTimeout: t2, ...props} = t0);
32
+ $[0] = t0;
33
+ $[1] = autosaveDelay;
34
+ $[2] = enableAutosave;
35
+ $[3] = getResetValues;
36
+ $[4] = normalizeAutosaveData;
37
+ $[5] = onAutosave;
38
+ $[6] = props;
39
+ $[7] = resetDeps;
40
+ $[8] = t1;
41
+ $[9] = t2;
42
+ } else {
43
+ autosaveDelay = $[1];
44
+ enableAutosave = $[2];
45
+ getResetValues = $[3];
46
+ normalizeAutosaveData = $[4];
47
+ onAutosave = $[5];
48
+ props = $[6];
49
+ resetDeps = $[7];
50
+ t1 = $[8];
51
+ t2 = $[9];
52
+ }
53
+ const autosaveOn = t1 === void 0 ? "change" : t1;
54
+ const resetTimeout = t2 === void 0 ? 5e3 : t2;
55
+ let t3;
56
+ if ($[10] !== getResetValues) {
57
+ t3 = getResetValues();
58
+ $[10] = getResetValues;
59
+ $[11] = t3;
60
+ } else t3 = $[11];
61
+ let t4;
62
+ if ($[12] !== props || $[13] !== t3) {
63
+ t4 = {
64
+ ...props,
65
+ defaultValues: t3
66
+ };
67
+ $[12] = props;
68
+ $[13] = t3;
69
+ $[14] = t4;
70
+ } else t4 = $[14];
71
+ const form = useForm(t4);
23
72
  const shouldResetFormValuesRef = useRef(false);
24
73
  const resetFormValuesTimeoutRef = useRef(void 0);
25
- useEffect(() => {
26
- const resetValues = getResetValues();
27
- if (resetValues === void 0) return;
28
- const resetFormValues = async () => {
29
- const keepStateOptions = shouldResetFormValuesRef.current ? { keepDirtyValues: true } : void 0;
30
- shouldResetFormValuesRef.current = false;
31
- let values = resetValues;
32
- if (ObjectUtils.isFunction(resetValues)) values = await resetValues();
33
- form.reset(values, keepStateOptions);
74
+ let t5;
75
+ if ($[15] !== form || $[16] !== getResetValues) {
76
+ t5 = () => {
77
+ const resetValues = getResetValues();
78
+ if (resetValues === void 0) return;
79
+ const resetFormValues = async () => {
80
+ const keepStateOptions = shouldResetFormValuesRef.current ? { keepDirtyValues: true } : void 0;
81
+ shouldResetFormValuesRef.current = false;
82
+ let values = resetValues;
83
+ if (ObjectUtils.isFunction(resetValues)) values = await resetValues();
84
+ form.reset(values, keepStateOptions);
85
+ };
86
+ resetFormValues();
87
+ };
88
+ $[15] = form;
89
+ $[16] = getResetValues;
90
+ $[17] = t5;
91
+ } else t5 = $[17];
92
+ let t6;
93
+ if ($[18] !== resetDeps) {
94
+ t6 = [...resetDeps];
95
+ $[18] = resetDeps;
96
+ $[19] = t6;
97
+ } else t6 = $[19];
98
+ useEffect(t5, t6);
99
+ let t7;
100
+ if ($[20] !== resetTimeout) {
101
+ t7 = () => {
102
+ shouldResetFormValuesRef.current = true;
103
+ if (resetFormValuesTimeoutRef.current) clearTimeout(resetFormValuesTimeoutRef.current);
104
+ resetFormValuesTimeoutRef.current = setTimeout(() => {
105
+ if (shouldResetFormValuesRef.current) throw new Error(getResetTimeoutErrorMessage(resetTimeout));
106
+ }, resetTimeout);
34
107
  };
35
- resetFormValues();
36
- }, [...resetDeps]);
37
- const onSaveSuccess = () => {
38
- shouldResetFormValuesRef.current = true;
39
- if (resetFormValuesTimeoutRef.current) clearTimeout(resetFormValuesTimeoutRef.current);
40
- resetFormValuesTimeoutRef.current = setTimeout(() => {
41
- if (shouldResetFormValuesRef.current) throw new Error(getResetTimeoutErrorMessage(resetTimeout));
42
- }, resetTimeout);
43
- };
44
- useAutosave({
45
- form,
46
- delay: autosaveDelay,
47
- enabled: enableAutosave,
48
- trigger: autosaveOn,
49
- onSave: useCallback((data) => {
108
+ $[20] = resetTimeout;
109
+ $[21] = t7;
110
+ } else t7 = $[21];
111
+ const onSaveSuccess = t7;
112
+ let t8;
113
+ if ($[22] !== normalizeAutosaveData || $[23] !== onAutosave) {
114
+ t8 = (data) => {
50
115
  const normalizedData = normalizeAutosaveData ? normalizeAutosaveData(data) : data;
51
116
  if (!normalizedData || ObjectUtils.isEmpty(normalizedData)) return Promise.resolve(void 0);
52
117
  return onAutosave(normalizedData);
53
- }, [normalizeAutosaveData, onAutosave]),
54
- onSaveSuccess
55
- });
118
+ };
119
+ $[22] = normalizeAutosaveData;
120
+ $[23] = onAutosave;
121
+ $[24] = t8;
122
+ } else t8 = $[24];
123
+ const onSave = t8;
124
+ let t9;
125
+ if ($[25] !== autosaveDelay || $[26] !== autosaveOn || $[27] !== enableAutosave || $[28] !== form || $[29] !== onSave || $[30] !== onSaveSuccess) {
126
+ t9 = {
127
+ form,
128
+ delay: autosaveDelay,
129
+ enabled: enableAutosave,
130
+ trigger: autosaveOn,
131
+ onSave,
132
+ onSaveSuccess
133
+ };
134
+ $[25] = autosaveDelay;
135
+ $[26] = autosaveOn;
136
+ $[27] = enableAutosave;
137
+ $[28] = form;
138
+ $[29] = onSave;
139
+ $[30] = onSaveSuccess;
140
+ $[31] = t9;
141
+ } else t9 = $[31];
142
+ useAutosave(t9);
56
143
  return form;
57
144
  }
58
145
  //#endregion
@@ -1,29 +1,64 @@
1
+ import { c } from "react/compiler-runtime";
1
2
  import { useEffect, useRef } from "react";
2
3
  //#region src/hooks/useLongPressRepeat.ts
3
- var useLongPressRepeat = ({ onPress, enabled = true, interval = 85, timeout = 500 }) => {
4
+ var useLongPressRepeat = (t0) => {
5
+ const $ = c(10);
6
+ const { onPress, enabled: t1, interval: t2, timeout: t3 } = t0;
7
+ const enabled = t1 === void 0 ? true : t1;
8
+ const interval = t2 === void 0 ? 85 : t2;
9
+ const timeout = t3 === void 0 ? 500 : t3;
4
10
  const intervalRef = useRef(void 0);
5
- useEffect(() => {
6
- return () => {
11
+ let t4;
12
+ let t5;
13
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
14
+ t4 = () => () => {
7
15
  clearInterval(intervalRef.current);
8
16
  };
9
- }, []);
10
- const onPressStart = () => {
11
- onPress(false);
12
- if (!enabled) return;
13
- intervalRef.current = setTimeout(() => {
14
- onPress(true);
15
- intervalRef.current = setInterval(() => {
17
+ t5 = [];
18
+ $[0] = t4;
19
+ $[1] = t5;
20
+ } else {
21
+ t4 = $[0];
22
+ t5 = $[1];
23
+ }
24
+ useEffect(t4, t5);
25
+ let t6;
26
+ if ($[2] !== enabled || $[3] !== interval || $[4] !== onPress || $[5] !== timeout) {
27
+ t6 = () => {
28
+ onPress(false);
29
+ if (!enabled) return;
30
+ intervalRef.current = setTimeout(() => {
16
31
  onPress(true);
17
- }, interval);
18
- }, timeout);
19
- };
20
- const onPressEnd = () => {
21
- clearInterval(intervalRef.current);
22
- };
23
- return {
24
- onPressStart,
25
- onPressEnd
26
- };
32
+ intervalRef.current = setInterval(() => {
33
+ onPress(true);
34
+ }, interval);
35
+ }, timeout);
36
+ };
37
+ $[2] = enabled;
38
+ $[3] = interval;
39
+ $[4] = onPress;
40
+ $[5] = timeout;
41
+ $[6] = t6;
42
+ } else t6 = $[6];
43
+ const onPressStart = t6;
44
+ let t7;
45
+ if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
46
+ t7 = () => {
47
+ clearInterval(intervalRef.current);
48
+ };
49
+ $[7] = t7;
50
+ } else t7 = $[7];
51
+ const onPressEnd = t7;
52
+ let t8;
53
+ if ($[8] !== onPressStart) {
54
+ t8 = {
55
+ onPressStart,
56
+ onPressEnd
57
+ };
58
+ $[8] = onPressStart;
59
+ $[9] = t8;
60
+ } else t8 = $[9];
61
+ return t8;
27
62
  };
28
63
  //#endregion
29
64
  export { useLongPressRepeat };
@@ -0,0 +1,6 @@
1
+ import { Locator } from 'vitest/browser';
2
+ declare module "vitest/browser" {
3
+ interface LocatorSelectors {
4
+ getByCSS: (selector: string) => Locator;
5
+ }
6
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@povio/ui",
3
- "version": "3.3.0",
3
+ "version": "3.3.1",
4
4
  "type": "module",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",