@povio/ui 3.3.0-rc.3 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/README.md +15 -1
  2. package/dist/components/Breadcrumbs/Breadcrumbs.js +55 -206
  3. package/dist/components/buttons/Button/button.cva.d.ts +1 -1
  4. package/dist/components/buttons/InlineIconButton/InlineIconButton.js +9 -34
  5. package/dist/components/buttons/shared/ButtonContent.js +22 -80
  6. package/dist/components/inputs/Checkbox/CheckboxCheckmark.js +10 -24
  7. package/dist/components/inputs/Checkbox/CheckboxGroup.d.ts +5 -1
  8. package/dist/components/inputs/Checkbox/CheckboxGroup.js +234 -201
  9. package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +93 -227
  10. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +1 -0
  11. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +170 -273
  12. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +60 -147
  13. package/dist/components/inputs/DateTime/shared/Calendar.js +139 -339
  14. package/dist/components/inputs/DateTime/shared/CalendarCell.js +114 -308
  15. package/dist/components/inputs/DateTime/shared/CalendarGrid.js +35 -150
  16. package/dist/components/inputs/DateTime/shared/CalendarHeader.js +95 -229
  17. package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js +115 -296
  18. package/dist/components/inputs/DateTime/shared/DateField.js +135 -301
  19. package/dist/components/inputs/DateTime/shared/DatePickerInput.js +142 -338
  20. package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +10 -59
  21. package/dist/components/inputs/DateTime/shared/TimePickerInput.js +144 -134
  22. package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.d.ts +2 -0
  23. package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.js +33 -0
  24. package/dist/components/inputs/File/FileUpload.js +1 -1
  25. package/dist/components/inputs/File/InputUpload.js +65 -261
  26. package/dist/components/inputs/File/shared/FileUploadContentEmpty.js +48 -180
  27. package/dist/components/inputs/File/shared/FileUploadContentError.js +95 -265
  28. package/dist/components/inputs/File/shared/FileUploadContentFilled.js +99 -261
  29. package/dist/components/inputs/File/shared/FileUploadContentLoading.js +56 -234
  30. package/dist/components/inputs/File/shared/ProgressBar.js +15 -102
  31. package/dist/components/inputs/FormField/FormField.js +34 -47
  32. package/dist/components/inputs/Input/NumberInput/NumberInput.js +2 -1
  33. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +77 -314
  34. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +23 -83
  35. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +56 -2
  36. package/dist/components/inputs/Selection/Select/QuerySelect.js +82 -94
  37. package/dist/components/inputs/Selection/Select/Select.js +3 -3
  38. package/dist/components/inputs/Selection/shared/SelectInput.js +1 -0
  39. package/dist/components/inputs/Selection/shared/SelectListBox.js +51 -163
  40. package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts +1 -0
  41. package/dist/components/inputs/Selection/shared/querySelect.utils.js +1 -0
  42. package/dist/components/inputs/Selection/shared/select.context.js +19 -9
  43. package/dist/components/inputs/Selection/shared/useSelectItems.js +48 -108
  44. package/dist/components/inputs/Skeleton/InputFrame.js +177 -552
  45. package/dist/components/inputs/TextEditor/TextEditor.js +87 -389
  46. package/dist/components/inputs/shared/InputClear.js +24 -40
  47. package/dist/components/inputs/shared/input.cva.js +1 -1
  48. package/dist/components/navigation/Accordion/Accordion.js +22 -69
  49. package/dist/components/navigation/Accordion/AccordionItem.js +41 -86
  50. package/dist/components/navigation/Stepper/Stepper.js +22 -67
  51. package/dist/components/overlays/ActionModal/ActionModal.js +35 -169
  52. package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js +29 -110
  53. package/dist/components/shared/pagination/Pagination.js +22 -108
  54. package/dist/components/shared/pagination/minWidth.cva.d.ts +1 -1
  55. package/dist/components/status/Alert/Alert.js +30 -97
  56. package/dist/components/table/InfiniteTable.js +16 -67
  57. package/dist/components/table/Table.d.ts +2 -8
  58. package/dist/components/table/Table.js +33 -55
  59. package/dist/components/text/Typography/Typography.js +8 -23
  60. package/dist/config/confirmation.context.js +1 -1
  61. package/dist/config/theme.context.js +45 -98
  62. package/dist/config/uiConfig.context.d.ts +1 -0
  63. package/dist/config/uiConfig.context.js +10 -40
  64. package/dist/config/uiOverrides.context.d.ts +0 -1
  65. package/dist/helpers/dynamicColumns.js +2 -1
  66. package/dist/hooks/useDebounceCallback.js +17 -51
  67. package/dist/hooks/useFormAutosave.js +33 -120
  68. package/dist/hooks/useLongPressRepeat.js +20 -55
  69. package/dist/index.d.ts +1 -1
  70. package/dist/index.js +2 -2
  71. package/dist/utils/date-time.utils.d.ts +0 -1
  72. package/dist/utils/date-time.utils.js +21 -45
  73. package/dist/utils/intl.utils.d.ts +7 -0
  74. package/dist/utils/intl.utils.js +38 -0
  75. package/dist/utils/intl.utils.spec.d.ts +1 -0
  76. package/package.json +2 -2
  77. package/dist/components/inputs/FormField/formField.cva.d.ts +0 -11
  78. package/dist/components/inputs/FormField/formField.cva.js +0 -16
  79. package/dist/components/table/TableColumnFilterInput.d.ts +0 -9
  80. package/dist/components/table/TableColumnFilterInput.js +0 -108
  81. package/dist/components/table/TableColumnFilterPlaceholder.d.ts +0 -5
  82. package/dist/components/table/TableColumnFilterPlaceholder.js +0 -41
  83. package/dist/components/table/TableColumnFilterRow.d.ts +0 -16
  84. package/dist/components/table/TableColumnFilterRow.js +0 -68
@@ -13,7 +13,6 @@ import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
13
13
  import { InputFrame } from "../../Skeleton/InputFrame.js";
14
14
  import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
15
15
  import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
16
- import { c } from "react/compiler-runtime";
17
16
  import { jsx, jsxs } from "react/jsx-runtime";
18
17
  import { clsx } from "clsx";
19
18
  import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
@@ -164,6 +163,18 @@ var DatePickerBase = (props) => {
164
163
  dialogState.setValue(null);
165
164
  if (fireBlurOnChange) handleBlur(null);
166
165
  };
166
+ const syncDialogFromControlledValue = () => {
167
+ dialogState.setValue(state.value);
168
+ if (state.value) {
169
+ calendarState.setFocusedDate(normalizeByGranularity(state.value));
170
+ return;
171
+ }
172
+ calendarState.setFocusedDate(today(effectiveTimeZone));
173
+ };
174
+ useEffect(() => {
175
+ if (!state.isOpen) return;
176
+ syncDialogFromControlledValue();
177
+ }, [state.isOpen]);
167
178
  useEffect(() => {
168
179
  if (!state.isOpen) return;
169
180
  if (granularity !== "year") return;
@@ -180,11 +191,13 @@ var DatePickerBase = (props) => {
180
191
  normalizeByGranularity,
181
192
  effectiveTimeZone
182
193
  ]);
183
- const onOpenChange = (isOpen) => {
194
+ const onOpenChange = (_isOpen) => {
195
+ state.toggle();
196
+ syncDialogFromControlledValue();
197
+ };
198
+ const onOpenDropdown = () => {
199
+ syncDialogFromControlledValue();
184
200
  state.toggle();
185
- if (state.value) calendarState.setFocusedDate(normalizeByGranularity(state.value));
186
- if (!state.value) calendarState.setFocusedDate(today(effectiveTimeZone));
187
- if (!isOpen) dialogState.setValue(state.value);
188
201
  };
189
202
  return /* @__PURE__ */ jsx(TooltipWrapper, {
190
203
  as,
@@ -225,7 +238,7 @@ var DatePickerBase = (props) => {
225
238
  todayIconButtonSize,
226
239
  todayIconButtonComponent,
227
240
  todayIconPlacement,
228
- onOpenDropdown: () => state.toggle(),
241
+ onOpenDropdown,
229
242
  placeholder,
230
243
  className: inputClassName,
231
244
  dateGranularity: granularity,
@@ -258,11 +271,7 @@ var DatePickerBase = (props) => {
258
271
  })
259
272
  });
260
273
  };
261
- var DatePickerInner = (t0) => {
262
- const $ = c(28);
263
- const { fullIso: t1, granularity: t2, minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props } = t0;
264
- const fullIso = t1 === void 0 ? true : t1;
265
- const granularity = t2 === void 0 ? "day" : t2;
274
+ var DatePickerInner = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
266
275
  const ui = UIConfig.useConfig();
267
276
  const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
268
277
  const { locale } = useLocale();
@@ -273,76 +282,42 @@ var DatePickerInner = (t0) => {
273
282
  inputRef,
274
283
  renderInput,
275
284
  setRenderInput,
276
- getFocusTarget: _temp,
277
- getPressTarget: _temp2
285
+ getFocusTarget: (input, staticTarget) => {
286
+ const container = input.getContainer?.() ?? input;
287
+ return container instanceof HTMLElement ? getStaticDateTimeFocusTarget(container, staticTarget) : null;
288
+ },
289
+ getPressTarget: (input_0) => {
290
+ const container_0 = input_0.getContainer?.() ?? input_0;
291
+ if (!(container_0 instanceof HTMLElement)) return null;
292
+ return container_0.querySelector("[data-static-press-action]");
293
+ }
278
294
  });
279
295
  const normalizedValue = props.value ?? null;
280
- let t3;
281
- if ($[0] !== granularity) {
282
- t3 = (date) => {
283
- if (granularity === "year") return date.set({
284
- month: 1,
285
- day: 1
286
- });
287
- if (granularity === "month") return date.set({ day: 1 });
288
- return date;
289
- };
290
- $[0] = granularity;
291
- $[1] = t3;
292
- } else t3 = $[1];
293
- const normalizeByGranularity = t3;
294
- let t4;
295
- if ($[2] !== fullIso || $[3] !== normalizeByGranularity) {
296
- t4 = (calendarDate) => {
297
- if (calendarDate === null) return null;
298
- const normalizedDate = normalizeByGranularity(calendarDate);
299
- if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
300
- const date_0 = DateTimeUtils.fromDateValueToLocal(normalizedDate, "UTC");
301
- return DateTime.fromJSDate(date_0, { zone: "UTC" }).toISODate();
302
- };
303
- $[2] = fullIso;
304
- $[3] = normalizeByGranularity;
305
- $[4] = t4;
306
- } else t4 = $[4];
307
- const formatCalendarDate = t4;
308
- let t5;
309
- if ($[5] !== fullIso || $[6] !== normalizeByGranularity) {
310
- t5 = (formattedDate) => {
311
- if (formattedDate == null) return null;
312
- if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
313
- const date_1 = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
314
- return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1, "UTC")));
315
- };
316
- $[5] = fullIso;
317
- $[6] = normalizeByGranularity;
318
- $[7] = t5;
319
- } else t5 = $[7];
320
- const parseCalendarDate = t5;
321
- let t6;
322
- if ($[8] !== minValue || $[9] !== parseCalendarDate) {
323
- t6 = typeof minValue === "string" ? parseCalendarDate(minValue) : minValue;
324
- $[8] = minValue;
325
- $[9] = parseCalendarDate;
326
- $[10] = t6;
327
- } else t6 = $[10];
328
- let t7;
329
- if ($[11] !== maxValue || $[12] !== parseCalendarDate) {
330
- t7 = typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue;
331
- $[11] = maxValue;
332
- $[12] = parseCalendarDate;
333
- $[13] = t7;
334
- } else t7 = $[13];
335
- let t8;
336
- if ($[14] !== t6 || $[15] !== t7) {
337
- t8 = {
338
- minValue: t6,
339
- maxValue: t7
340
- };
341
- $[14] = t6;
342
- $[15] = t7;
343
- $[16] = t8;
344
- } else t8 = $[16];
345
- const dateLimits = t8;
296
+ const normalizeByGranularity = (date) => {
297
+ if (granularity === "year") return date.set({
298
+ month: 1,
299
+ day: 1
300
+ });
301
+ if (granularity === "month") return date.set({ day: 1 });
302
+ return date;
303
+ };
304
+ const formatCalendarDate = (calendarDate) => {
305
+ if (calendarDate === null) return null;
306
+ const normalizedDate = normalizeByGranularity(calendarDate);
307
+ if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
308
+ const date_0 = DateTimeUtils.fromDateValueToLocal(normalizedDate, "UTC");
309
+ return DateTime.fromJSDate(date_0, { zone: "UTC" }).toISODate();
310
+ };
311
+ const parseCalendarDate = (formattedDate) => {
312
+ if (formattedDate == null) return null;
313
+ if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
314
+ const date_1 = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
315
+ return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1, "UTC")));
316
+ };
317
+ const dateLimits = {
318
+ minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
319
+ maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
320
+ };
346
321
  if (!renderInput) {
347
322
  const dateValue = normalizedValue ? parseCalendarDate(normalizedValue) : null;
348
323
  const as = props.as ?? ui.input.as;
@@ -400,163 +375,54 @@ var DatePickerInner = (t0) => {
400
375
  trailingClassName: "py-0! pl-0!",
401
376
  action: showDropdown ? {
402
377
  icon: ui.dateInput.calendarIcon,
403
- onClick: _temp3,
378
+ onClick: () => {},
404
379
  altText: ""
405
380
  } : void 0,
406
381
  children: staticSegments
407
382
  });
408
383
  }
409
- const T0 = DatePickerBase;
410
- const t9 = mergeRefs(props.ref, inputRef);
411
- const t10 = parseCalendarDate(normalizedValue);
412
- let t11;
413
- if ($[17] !== formatCalendarDate || $[18] !== props) {
414
- t11 = (value) => props.onChange?.(formatCalendarDate(value));
415
- $[17] = formatCalendarDate;
416
- $[18] = props;
417
- $[19] = t11;
418
- } else t11 = $[19];
419
- let t12;
420
- if ($[20] !== T0 || $[21] !== dateLimits || $[22] !== granularity || $[23] !== props || $[24] !== t10 || $[25] !== t11 || $[26] !== t9) {
421
- t12 = /* @__PURE__ */ jsx(T0, {
422
- ...props,
423
- ...dateLimits,
424
- ref: t9,
425
- granularity,
426
- value: t10,
427
- onChange: t11
428
- });
429
- $[20] = T0;
430
- $[21] = dateLimits;
431
- $[22] = granularity;
432
- $[23] = props;
433
- $[24] = t10;
434
- $[25] = t11;
435
- $[26] = t9;
436
- $[27] = t12;
437
- } else t12 = $[27];
438
- return t12;
384
+ return /* @__PURE__ */ jsx(DatePickerBase, {
385
+ ...props,
386
+ ...dateLimits,
387
+ ref: mergeRefs(props.ref, inputRef),
388
+ granularity,
389
+ value: parseCalendarDate(normalizedValue),
390
+ onChange: (value) => props.onChange?.(formatCalendarDate(value))
391
+ });
439
392
  };
440
- var DatePicker = (t0) => {
441
- const $ = c(33);
442
- let maxValue;
443
- let minValue;
444
- let props;
445
- let renderStaticInput;
446
- let t1;
447
- let t2;
448
- if ($[0] !== t0) {
449
- ({fullIso: t1, granularity: t2, minValue, maxValue, renderStaticInput, ...props} = t0);
450
- $[0] = t0;
451
- $[1] = maxValue;
452
- $[2] = minValue;
453
- $[3] = props;
454
- $[4] = renderStaticInput;
455
- $[5] = t1;
456
- $[6] = t2;
457
- } else {
458
- maxValue = $[1];
459
- minValue = $[2];
460
- props = $[3];
461
- renderStaticInput = $[4];
462
- t1 = $[5];
463
- t2 = $[6];
464
- }
465
- const fullIso = t1 === void 0 ? true : t1;
466
- const granularity = t2 === void 0 ? "day" : t2;
393
+ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, ...props }) => {
467
394
  if ("formControl" in props && props.formControl) {
468
- let formControl;
469
- let innerProps;
470
- let ref;
471
- if ($[7] !== props) {
472
- ({formControl, ref, ...innerProps} = props);
473
- $[7] = props;
474
- $[8] = formControl;
475
- $[9] = innerProps;
476
- $[10] = ref;
477
- } else {
478
- formControl = $[8];
479
- innerProps = $[9];
480
- ref = $[10];
481
- }
395
+ const { formControl, ref, ...innerProps } = props;
482
396
  const controlWithOptions = formControl.control;
483
- let t3;
484
- if ($[11] !== controlWithOptions._options?.disabled || $[12] !== fullIso || $[13] !== granularity || $[14] !== innerProps || $[15] !== maxValue || $[16] !== minValue || $[17] !== props.error || $[18] !== props.isDisabled || $[19] !== ref || $[20] !== renderStaticInput) {
485
- t3 = (t4) => {
486
- const { field, fieldState: t5 } = t4;
487
- const { error, isDirty } = t5;
488
- return /* @__PURE__ */ jsx(DatePickerInner, {
489
- ...innerProps,
490
- ref: mergeRefs(ref, field.ref),
491
- value: field.value ?? null,
492
- onChange: field.onChange,
493
- onBlur: field.onBlur,
494
- isDirty,
495
- isDisabled: field.disabled || props.isDisabled,
496
- isFormControlDisabled: !!controlWithOptions._options?.disabled,
497
- error: props.error ?? error?.message,
498
- fullIso,
499
- granularity,
500
- minValue,
501
- maxValue,
502
- renderStaticInput
503
- });
504
- };
505
- $[11] = controlWithOptions._options?.disabled;
506
- $[12] = fullIso;
507
- $[13] = granularity;
508
- $[14] = innerProps;
509
- $[15] = maxValue;
510
- $[16] = minValue;
511
- $[17] = props.error;
512
- $[18] = props.isDisabled;
513
- $[19] = ref;
514
- $[20] = renderStaticInput;
515
- $[21] = t3;
516
- } else t3 = $[21];
517
- let t4;
518
- if ($[22] !== formControl.control || $[23] !== formControl.name || $[24] !== t3) {
519
- t4 = /* @__PURE__ */ jsx(Controller, {
520
- control: formControl.control,
521
- name: formControl.name,
522
- render: t3
523
- });
524
- $[22] = formControl.control;
525
- $[23] = formControl.name;
526
- $[24] = t3;
527
- $[25] = t4;
528
- } else t4 = $[25];
529
- return t4;
530
- }
531
- let t3;
532
- if ($[26] !== fullIso || $[27] !== granularity || $[28] !== maxValue || $[29] !== minValue || $[30] !== props || $[31] !== renderStaticInput) {
533
- t3 = /* @__PURE__ */ jsx(DatePickerInner, {
534
- ...props,
535
- fullIso,
536
- granularity,
537
- minValue,
538
- maxValue,
539
- renderStaticInput
397
+ return /* @__PURE__ */ jsx(Controller, {
398
+ control: formControl.control,
399
+ name: formControl.name,
400
+ render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerInner, {
401
+ ...innerProps,
402
+ ref: mergeRefs(ref, field.ref),
403
+ value: field.value ?? null,
404
+ onChange: field.onChange,
405
+ onBlur: field.onBlur,
406
+ isDirty,
407
+ isDisabled: field.disabled || props.isDisabled,
408
+ isFormControlDisabled: !!controlWithOptions._options?.disabled,
409
+ error: props.error ?? error?.message,
410
+ fullIso,
411
+ granularity,
412
+ minValue,
413
+ maxValue,
414
+ renderStaticInput
415
+ })
540
416
  });
541
- $[26] = fullIso;
542
- $[27] = granularity;
543
- $[28] = maxValue;
544
- $[29] = minValue;
545
- $[30] = props;
546
- $[31] = renderStaticInput;
547
- $[32] = t3;
548
- } else t3 = $[32];
549
- return t3;
417
+ }
418
+ return /* @__PURE__ */ jsx(DatePickerInner, {
419
+ ...props,
420
+ fullIso,
421
+ granularity,
422
+ minValue,
423
+ maxValue,
424
+ renderStaticInput
425
+ });
550
426
  };
551
- function _temp(input, staticTarget) {
552
- const container = input.getContainer?.() ?? input;
553
- return container instanceof HTMLElement ? getStaticDateTimeFocusTarget(container, staticTarget) : null;
554
- }
555
- function _temp2(input_0) {
556
- const container_0 = input_0.getContainer?.() ?? input_0;
557
- if (!(container_0 instanceof HTMLElement)) return null;
558
- return container_0.querySelector("[data-static-press-action]");
559
- }
560
- function _temp3() {}
561
427
  //#endregion
562
428
  export { DatePicker };
@@ -25,6 +25,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
25
25
  inputClassName?: string;
26
26
  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
27
27
  fireBlurOnChange?: boolean;
28
+ allowPartialRange?: boolean;
28
29
  }
29
30
  export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
30
31
  value?: {