@povio/ui 3.2.3 → 3.2.4-rc.10

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 (33) hide show
  1. package/dist/components/buttons/Button/button.cva.d.ts +1 -1
  2. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +1 -0
  3. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +142 -127
  4. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +2 -17
  5. package/dist/components/inputs/DateTime/shared/DateField.js +92 -87
  6. package/dist/components/inputs/DateTime/shared/DatePickerInput.js +2 -0
  7. package/dist/components/inputs/DateTime/shared/TimePickerInput.js +144 -134
  8. package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.d.ts +2 -0
  9. package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.js +33 -0
  10. package/dist/components/inputs/Input/NumberInput/NumberInput.js +2 -1
  11. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +2 -1
  12. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +56 -2
  13. package/dist/components/inputs/Selection/Select/QuerySelect.js +69 -15
  14. package/dist/components/inputs/Selection/shared/SelectDesktop.js +159 -390
  15. package/dist/components/inputs/Selection/shared/SelectInput.d.ts +2 -1
  16. package/dist/components/inputs/Selection/shared/SelectInput.js +142 -131
  17. package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts +1 -0
  18. package/dist/components/inputs/Selection/shared/querySelect.utils.js +1 -0
  19. package/dist/components/inputs/Selection/shared/select.context.js +19 -9
  20. package/dist/components/inputs/shared/input.cva.js +1 -1
  21. package/dist/components/shared/pagination/minWidth.cva.d.ts +1 -1
  22. package/dist/config/uiConfig.context.d.ts +1 -0
  23. package/dist/config/uiConfig.context.js +2 -1
  24. package/dist/helpers/dynamicColumns.js +2 -1
  25. package/dist/helpers/dynamicInputs.d.ts +1 -1
  26. package/dist/index.d.ts +2 -1
  27. package/dist/index.js +2 -1
  28. package/dist/utils/date-time.utils.d.ts +0 -1
  29. package/dist/utils/date-time.utils.js +21 -45
  30. package/dist/utils/intl.utils.d.ts +7 -0
  31. package/dist/utils/intl.utils.js +38 -0
  32. package/dist/utils/intl.utils.spec.d.ts +1 -0
  33. package/package.json +1 -1
@@ -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(139);
22
+ const { ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onTriggerPointerDown, 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,44 @@ 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] !== onTriggerPointerDown) {
245
+ t33 = (event) => {
246
+ const trigger = event.currentTarget.querySelector("[aria-expanded]");
247
+ onTriggerPointerDown?.(trigger?.getAttribute("aria-expanded") === "true");
248
+ };
249
+ $0[50] = onTriggerPointerDown;
250
+ $0[51] = t33;
251
+ } else t33 = $0[51];
252
+ 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
253
  as,
245
254
  size,
246
255
  ...props
247
256
  }));
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, {
257
+ let t35;
258
+ if ($0[52] !== as || $0[53] !== headerProps || $0[54] !== labelProps) {
259
+ t35 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
251
260
  as,
252
261
  ...headerProps,
253
262
  labelProps
254
263
  });
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", {
263
- className: "ml-input-side-default flex shrink-0 items-center",
264
- children: leadingContent
265
- });
266
- $0[54] = leadingContent;
264
+ $0[52] = as;
265
+ $0[53] = headerProps;
266
+ $0[54] = labelProps;
267
267
  $0[55] = t35;
268
268
  } else t35 = $0[55];
269
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", {
270
+ if ($0[56] !== leadingContent) {
271
+ t36 = leadingContent && /* @__PURE__ */ jsx("div", {
272
+ className: "ml-input-side-default flex shrink-0 items-center",
273
+ children: leadingContent
274
+ });
275
+ $0[56] = leadingContent;
276
+ $0[57] = t36;
277
+ } else t36 = $0[57];
278
+ let t37;
279
+ if ($0[58] !== as || $0[59] !== collapseAfter || $0[60] !== fieldProps || $0[61] !== inputClassName || $0[62] !== isDisabled || $0[63] !== isSearchable || $0[64] !== onBlur || $0[65] !== onKeyDown || $0[66] !== onRemove || $0[67] !== placeholder || $0[68] !== selectInputTagsContentWrapperCva || $0[69] !== selectedItems || $0[70] !== selectedTagsType || $0[71] !== showTags) {
280
+ t37 = (showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
272
281
  className: selectInputTagsContentWrapperCva({ isSearchable }),
273
282
  children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
274
283
  selectedItems,
@@ -285,25 +294,25 @@ var SelectInput = (t0) => {
285
294
  ...fieldProps
286
295
  })]
287
296
  });
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, {
297
+ $0[58] = as;
298
+ $0[59] = collapseAfter;
299
+ $0[60] = fieldProps;
300
+ $0[61] = inputClassName;
301
+ $0[62] = isDisabled;
302
+ $0[63] = isSearchable;
303
+ $0[64] = onBlur;
304
+ $0[65] = onKeyDown;
305
+ $0[66] = onRemove;
306
+ $0[67] = placeholder;
307
+ $0[68] = selectInputTagsContentWrapperCva;
308
+ $0[69] = selectedItems;
309
+ $0[70] = selectedTagsType;
310
+ $0[71] = showTags;
311
+ $0[72] = t37;
312
+ } else t37 = $0[72];
313
+ let t38;
314
+ if ($0[73] !== as || $0[74] !== fieldProps || $0[75] !== isDisabled || $0[76] !== isEmpty || $0[77] !== isMultiple || $0[78] !== isOpen || $0[79] !== isSearchable || $0[80] !== onBlur || $0[81] !== onTriggerKeyDown || $0[82] !== placeholder || $0[83] !== selectedItems[0] || $0[84] !== setIsOpen || $0[85] !== showSelectionContent || $0[86] !== showTags) {
315
+ t38 = !isSearchable && /* @__PURE__ */ jsxs(Button, {
307
316
  isDisabled,
308
317
  onPress: () => setIsOpen(!isOpen),
309
318
  onBlur,
@@ -317,71 +326,71 @@ var SelectInput = (t0) => {
317
326
  children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
318
327
  })]
319
328
  });
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,
329
+ $0[73] = as;
330
+ $0[74] = fieldProps;
331
+ $0[75] = isDisabled;
332
+ $0[76] = isEmpty;
333
+ $0[77] = isMultiple;
334
+ $0[78] = isOpen;
335
+ $0[79] = isSearchable;
336
+ $0[80] = onBlur;
337
+ $0[81] = onTriggerKeyDown;
338
+ $0[82] = placeholder;
339
+ $0[83] = selectedItems[0];
340
+ $0[84] = setIsOpen;
341
+ $0[85] = showSelectionContent;
342
+ $0[86] = showTags;
343
+ $0[87] = t38;
344
+ } else t38 = $0[87];
345
+ let t39;
346
+ if ($0[88] !== onClick || $0[89] !== t34 || $0[90] !== t35 || $0[91] !== t36 || $0[92] !== t37 || $0[93] !== t38) {
347
+ t39 = /* @__PURE__ */ jsxs("div", {
348
+ className: t34,
340
349
  onClick,
341
350
  children: [
342
- t34,
343
351
  t35,
344
352
  t36,
345
- t37
353
+ t37,
354
+ t38
346
355
  ]
347
356
  });
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, {
357
+ $0[88] = onClick;
358
+ $0[89] = t34;
359
+ $0[90] = t35;
360
+ $0[91] = t36;
361
+ $0[92] = t37;
362
+ $0[93] = t38;
363
+ $0[94] = t39;
364
+ } else t39 = $0[94];
365
+ let t40;
366
+ if ($0[95] !== as || $0[96] !== inputClearClassCva || $0[97] !== isClearable || $0[98] !== isDisabled || $0[99] !== onClear || $0[100] !== showClearButton) {
367
+ t40 = isClearable && !isDisabled && /* @__PURE__ */ jsx(InputClear, {
359
368
  onClear: () => {
360
369
  onClear();
361
370
  },
362
371
  className: inputClearClassCva({ as }),
363
372
  show: showClearButton
364
373
  });
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", {
376
- className: "flex shrink-0 items-center",
377
- children: trailingContent
378
- });
379
- $0[100] = trailingContent;
374
+ $0[95] = as;
375
+ $0[96] = inputClearClassCva;
376
+ $0[97] = isClearable;
377
+ $0[98] = isDisabled;
378
+ $0[99] = onClear;
379
+ $0[100] = showClearButton;
380
380
  $0[101] = t40;
381
381
  } else t40 = $0[101];
382
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, {
383
+ if ($0[102] !== trailingContent) {
384
+ t41 = trailingContent && /* @__PURE__ */ jsx("div", {
385
+ className: "flex shrink-0 items-center",
386
+ children: trailingContent
387
+ });
388
+ $0[102] = trailingContent;
389
+ $0[103] = t41;
390
+ } else t41 = $0[103];
391
+ let t42;
392
+ if ($0[104] !== hideDropdownIcon || $0[105] !== inputSizeCva || $0[106] !== isDisabled || $0[107] !== isOpen || $0[108] !== isSearchable || $0[109] !== setIsOpen || $0[110] !== size || $0[111] !== t) {
393
+ t42 = !hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
385
394
  excludeFromTabOrder: true,
386
395
  "aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
387
396
  className: clsx("self-stretch pl-1-5 outline-none", inputSizeCva({ size })),
@@ -394,19 +403,19 @@ var SelectInput = (t0) => {
394
403
  "aria-hidden": "true"
395
404
  })
396
405
  });
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", {
406
+ $0[104] = hideDropdownIcon;
407
+ $0[105] = inputSizeCva;
408
+ $0[106] = isDisabled;
409
+ $0[107] = isOpen;
410
+ $0[108] = isSearchable;
411
+ $0[109] = setIsOpen;
412
+ $0[110] = size;
413
+ $0[111] = t;
414
+ $0[112] = t42;
415
+ } else t42 = $0[112];
416
+ let t43;
417
+ if ($0[113] !== focusWithinProps || $0[114] !== hoverProps || $0[115] !== onFocusCapture || $0[116] !== onMouseEnter || $0[117] !== ref || $0[118] !== t16 || $0[119] !== t18 || $0[120] !== t19 || $0[121] !== t20 || $0[122] !== t21 || $0[123] !== t22 || $0[124] !== t23 || $0[125] !== t24 || $0[126] !== t25 || $0[127] !== t26 || $0[128] !== t27 || $0[129] !== t28 || $0[130] !== t29 || $0[131] !== t30 || $0[132] !== t31 || $0[133] !== t33 || $0[134] !== t39 || $0[135] !== t40 || $0[136] !== t41 || $0[137] !== t42) {
418
+ t43 = /* @__PURE__ */ jsxs("div", {
410
419
  ref,
411
420
  className: t16,
412
421
  "data-rac": t17,
@@ -426,43 +435,45 @@ var SelectInput = (t0) => {
426
435
  "data-is-dirty": t31,
427
436
  "data-select-input": t32,
428
437
  onMouseEnter,
438
+ onPointerDownCapture: t33,
429
439
  onFocusCapture,
430
440
  ...hoverProps,
431
441
  ...focusWithinProps,
432
442
  children: [
433
- t38,
434
443
  t39,
435
444
  t40,
436
- t41
445
+ t41,
446
+ t42
437
447
  ]
438
448
  });
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;
449
+ $0[113] = focusWithinProps;
450
+ $0[114] = hoverProps;
451
+ $0[115] = onFocusCapture;
452
+ $0[116] = onMouseEnter;
453
+ $0[117] = ref;
454
+ $0[118] = t16;
455
+ $0[119] = t18;
456
+ $0[120] = t19;
457
+ $0[121] = t20;
458
+ $0[122] = t21;
459
+ $0[123] = t22;
460
+ $0[124] = t23;
461
+ $0[125] = t24;
462
+ $0[126] = t25;
463
+ $0[127] = t26;
464
+ $0[128] = t27;
465
+ $0[129] = t28;
466
+ $0[130] = t29;
467
+ $0[131] = t30;
468
+ $0[132] = t31;
469
+ $0[133] = t33;
470
+ $0[134] = t39;
471
+ $0[135] = t40;
472
+ $0[136] = t41;
473
+ $0[137] = t42;
474
+ $0[138] = t43;
475
+ } else t43 = $0[138];
476
+ return t43;
466
477
  };
467
478
  //#endregion
468
479
  export { SelectInput };
@@ -9,6 +9,7 @@ export declare const getSelectionIdsToResolve: <TInitialSelectItem, TKey extends
9
9
  mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
10
10
  }) => {
11
11
  count: number;
12
+ isResolvedByInitialSelection: boolean;
12
13
  items: TKey[];
13
14
  };
14
15
  export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];
@@ -26,6 +26,7 @@ var getSelectionIdsToResolve = ({ initialSelection, value, mapInitialToSelectIte
26
26
  const items = Array.from(new Set([...missingLabelInitialSelectionIds, ...values.filter((id) => !labeledInitialSelectionIds.has(id))]));
27
27
  return {
28
28
  count: items.length,
29
+ isResolvedByInitialSelection: values.length > 0 && values.every((id) => labeledInitialSelectionIds.has(id)),
29
30
  items
30
31
  };
31
32
  };
@@ -135,16 +135,26 @@ var SelectContext;
135
135
  triggerBlurOnChange
136
136
  ]);
137
137
  const onClear = useCallback(() => {
138
- if (!valueRef.current || Array.isArray(valueRef.current) && valueRef.current.length === 0) {
139
- setFieldState((prev) => ({
140
- ...prev,
141
- inputValue: ""
142
- }));
138
+ if (selectedIds.length === 0) {
139
+ const newFieldState_2 = {
140
+ ...fieldState,
141
+ inputValue: "",
142
+ searchValue: ""
143
+ };
144
+ setFieldState(newFieldState_2);
145
+ emitStateChanges(newFieldState_2, true);
146
+ setShowAll(true);
143
147
  return;
144
148
  }
145
149
  if (isMultiple) onChange([]);
146
150
  else onChange(null);
147
- }, [isMultiple, onChange]);
151
+ }, [
152
+ emitStateChanges,
153
+ fieldState,
154
+ isMultiple,
155
+ onChange,
156
+ selectedIds.length
157
+ ]);
148
158
  const onSelectAll = useCallback(() => {
149
159
  onChange(selectableListItems.map(({ id: id_4 }) => id_4));
150
160
  }, [selectableListItems, onChange]);
@@ -157,13 +167,13 @@ var SelectContext;
157
167
  ]);
158
168
  const onBlur = useCallback(() => {
159
169
  if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
160
- const newFieldState_2 = {
170
+ const newFieldState_3 = {
161
171
  ...fieldState,
162
172
  inputValue: "",
163
173
  searchValue: ""
164
174
  };
165
- setFieldState(newFieldState_2);
166
- emitStateChanges(newFieldState_2);
175
+ setFieldState(newFieldState_3);
176
+ emitStateChanges(newFieldState_3);
167
177
  setShowAll(true);
168
178
  }
169
179
  fieldOnBlur?.({});
@@ -210,7 +210,7 @@ var inputSizeDefinition = UIOverrides.defineConfig({
210
210
  }
211
211
  });
212
212
  var inputContentWrapperDefinition = UIOverrides.defineConfig({
213
- base: ["flex w-full"],
213
+ base: ["flex min-w-0 w-full"],
214
214
  config: {
215
215
  variants: { as: {
216
216
  default: "",
@@ -1,3 +1,3 @@
1
1
  export declare const minWidth: (props?: ({
2
- size?: "s" | "xs" | "m" | "l" | "xxs" | null | undefined;
2
+ size?: "xs" | "s" | "m" | "l" | "xxs" | null | undefined;
3
3
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -48,6 +48,7 @@ export declare namespace UIConfig {
48
48
  setDateValueOnDateSelection?: boolean;
49
49
  timeZone?: string;
50
50
  todayIconButtonComponent?: DatePickerProps["todayIconButtonComponent"];
51
+ allowPartialRange?: boolean;
51
52
  };
52
53
  actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
53
54
  bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
@@ -78,7 +78,8 @@ var UIConfig;
78
78
  setDateValueOnDateSelection: false,
79
79
  timeZone: "clientLocal",
80
80
  granularity: "day",
81
- shouldUpdateDateOnMonthYearChange: false
81
+ shouldUpdateDateOnMonthYearChange: false,
82
+ allowPartialRange: false
82
83
  },
83
84
  actionModal: {
84
85
  titleTypography: {
@@ -1,3 +1,4 @@
1
+ import { IntlUtils } from "../utils/intl.utils.js";
1
2
  import { StringUtils } from "../utils/string.utils.js";
2
3
  import { ZodUtils } from "../utils/zod.utils.js";
3
4
  import { DateUtils } from "../utils/date.utils.js";
@@ -11,7 +12,7 @@ var FORMAT_MAP = {
11
12
  return `${DateUtils.formatDate(new Date(value.start))} - ${DateUtils.formatDate(new Date(value.end))}`;
12
13
  },
13
14
  enum: (value) => StringUtils.capitalize(value),
14
- number: (value) => value.toLocaleString(i18next.language),
15
+ number: (value) => IntlUtils.getNumberFormatter(i18next.language).format(value),
15
16
  string: (value) => String(value),
16
17
  boolean: (value) => {
17
18
  const key = `${DEFAULT_NAMESPACE}.${value ? "yes" : "no"}`;
@@ -63,7 +63,7 @@ type GlobalProps = {
63
63
  [T in Exclude<InputComponentType, "unknown">]: InputDefBaseProps<InputComponentProps<T>>;
64
64
  }[Exclude<InputComponentType, "unknown">];
65
65
  type SchemaKeyOrString<TSchema extends z.ZodObject<any>> = keyof z.infer<TSchema> | (string & {});
66
- type DynamicInputsObjectSchema<TSchema extends z.ZodType> = TSchema extends z.ZodObject<any> ? TSchema : Extract<ZodUtils.UnwrapZod<TSchema>, z.ZodObject<any>>;
66
+ export type DynamicInputsObjectSchema<TSchema extends z.ZodType> = TSchema extends z.ZodObject<any> ? TSchema : Extract<ZodUtils.UnwrapZod<TSchema>, z.ZodObject<any>>;
67
67
  interface DynamicInputsObjectOptions<TSchema extends z.ZodObject<any>> {
68
68
  inputs?: InputsConfig<TSchema>;
69
69
  order?: SchemaKeyOrString<TSchema>[];
package/dist/index.d.ts CHANGED
@@ -222,7 +222,7 @@ export { tagDefinition } from './components/text/Tag/tag.cva';
222
222
  export { typographyDefinition } from './components/text/Typography/typography.cva';
223
223
  export type { DynamicColumnsOptions } from './helpers/dynamicColumns';
224
224
  export { dynamicColumns } from './helpers/dynamicColumns';
225
- export type { DynamicInputsOptions } from './helpers/dynamicInputs';
225
+ export type { DynamicInputsObjectSchema, DynamicInputsOptions } from './helpers/dynamicInputs';
226
226
  export { dynamicInputs } from './helpers/dynamicInputs';
227
227
  export { useAutosave } from './hooks/useAutosave';
228
228
  export { useBreakpoint } from './hooks/useBreakpoint';
@@ -253,6 +253,7 @@ export { DateTimeUtils } from './utils/date-time.utils';
253
253
  export { DomUtils } from './utils/dom.utils';
254
254
  export { FileUtils } from './utils/file.utils';
255
255
  export { isEqual } from './utils/isEqual';
256
+ export { IntlUtils } from './utils/intl.utils';
256
257
  export { logger } from './utils/logger';
257
258
  export { ObjectUtils } from './utils/object.utils';
258
259
  export { QueriesUtils } from './utils/queries.utils';
package/dist/index.js CHANGED
@@ -82,6 +82,7 @@ import { inputBaseDefinition, inputClearClassDefinition, inputContentWrapperDefi
82
82
  import { CheckboxGroup } from "./components/inputs/Checkbox/CheckboxGroup.js";
83
83
  import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
84
84
  import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
85
+ import { IntlUtils } from "./utils/intl.utils.js";
85
86
  import { DateTimeUtils } from "./utils/date-time.utils.js";
86
87
  import { datePickerInputContentRowDefinition } from "./components/inputs/DateTime/shared/datePickerInput.cva.js";
87
88
  import { popoverDefinition } from "./components/shared/popover.cva.js";
@@ -176,4 +177,4 @@ import { useSorting } from "./hooks/useSorting.js";
176
177
  import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
177
178
  import { ArrayUtils } from "./utils/array.utils.js";
178
179
  import { QueriesUtils } from "./utils/queries.utils.js";
179
- export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxGroup, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberRangeInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, Pill, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIOverrides, UIRouter, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, ZodUtils, accordionChevronDefinition, accordionDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition, alertDefinition, breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition, buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, checkboxContentRowDefinition, checkboxContentWrapperDefinition, checkboxDefinition, checkboxGroupLabelDefinition, checkboxIconDefinition, compoundMapper, createKeyInteractionsHandler, datePickerInputContentRowDefinition, dynamicColumns, dynamicInputs, fileUploadDropZoneDefinition, formFieldErrorDefinition, formFieldHeaderDefinition, formFieldHelperDefinition, getKeyInteractionAction, inputBaseDefinition, inputClearClassDefinition, inputContentWrapperDefinition, inputSideDefinition, inputSizeDefinition, inputUploadButtonDefinition, inputUploadDropZoneDefinition, isEqual, labelDefinition, linkDefinition, loaderDefinition, loaderWrapperDefinition, logger, menuDefinition, menuItemDefinition, menuPopoverDefinition, menuPopoverWrapperDefinition, modalContentDefinition, modalMainDefinition, modalOverlayDefinition, ns, pillButtonContentDefinition, pillButtonDefinition, popoverDefinition, progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition, radioContentRowDefinition, radioContentWrapperDefinition, radioDefinition, resources, segmentDefinition, segmentItemDefinition, selectInputTagsContentWrapperDefinition, selectListBoxItemDefinition, selectPopoverDefinition, statusIconDefinition, statusSeparatorDefinition, stepperDefinition, stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSeparatorDefinition, stepperSubtextDefinition, stepperTitleDefinition, tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition, tagDefinition, textAreaWrapperDefinition, toastDefinition, statusIconDefinition$1 as toastStatusIconDefinition, statusSeparatorDefinition$1 as toastStatusSeparatorDefinition, toggleDefinition, tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition, tooltipWrapperTriggerDefinition, typographyDefinition, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useKeyInteractions, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
180
+ export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxGroup, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, IntlUtils, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberRangeInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, Pill, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIOverrides, UIRouter, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, ZodUtils, accordionChevronDefinition, accordionDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition, alertDefinition, breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition, buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, checkboxContentRowDefinition, checkboxContentWrapperDefinition, checkboxDefinition, checkboxGroupLabelDefinition, checkboxIconDefinition, compoundMapper, createKeyInteractionsHandler, datePickerInputContentRowDefinition, dynamicColumns, dynamicInputs, fileUploadDropZoneDefinition, formFieldErrorDefinition, formFieldHeaderDefinition, formFieldHelperDefinition, getKeyInteractionAction, inputBaseDefinition, inputClearClassDefinition, inputContentWrapperDefinition, inputSideDefinition, inputSizeDefinition, inputUploadButtonDefinition, inputUploadDropZoneDefinition, isEqual, labelDefinition, linkDefinition, loaderDefinition, loaderWrapperDefinition, logger, menuDefinition, menuItemDefinition, menuPopoverDefinition, menuPopoverWrapperDefinition, modalContentDefinition, modalMainDefinition, modalOverlayDefinition, ns, pillButtonContentDefinition, pillButtonDefinition, popoverDefinition, progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition, radioContentRowDefinition, radioContentWrapperDefinition, radioDefinition, resources, segmentDefinition, segmentItemDefinition, selectInputTagsContentWrapperDefinition, selectListBoxItemDefinition, selectPopoverDefinition, statusIconDefinition, statusSeparatorDefinition, stepperDefinition, stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSeparatorDefinition, stepperSubtextDefinition, stepperTitleDefinition, tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition, tagDefinition, textAreaWrapperDefinition, toastDefinition, statusIconDefinition$1 as toastStatusIconDefinition, statusSeparatorDefinition$1 as toastStatusSeparatorDefinition, toggleDefinition, tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition, tooltipWrapperTriggerDefinition, typographyDefinition, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useKeyInteractions, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
@@ -38,6 +38,5 @@ export declare namespace DateTimeUtils {
38
38
  export function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
39
39
  export function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
40
40
  export function fromUTCISOToCalendarDateTime(isoString: string, timeZone?: string): CalendarDateTime;
41
- export function formatTextDateToCalendarDateTime(textDate: string | null, timeZone?: string, locale?: string): CalendarDateTime | null;
42
41
  export {};
43
42
  }
@@ -1,3 +1,4 @@
1
+ import { IntlUtils } from "./intl.utils.js";
1
2
  import { CalendarDate, CalendarDateTime, DateFormatter, fromDate, getLocalTimeZone, parseAbsolute } from "@internationalized/date";
2
3
  import { DateTime } from "luxon";
3
4
  //#region src/utils/date-time.utils.ts
@@ -5,33 +6,42 @@ var DateTimeUtils;
5
6
  (function(_DateTimeUtils) {
6
7
  const DATE_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22));
7
8
  const TIME_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22, 6, 45));
9
+ const timeFormatters = /* @__PURE__ */ new Map();
8
10
  const getDayMonthFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
9
11
  const getTimeHourFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
10
- const getDatePlaceholderFormatter = (locale, options) => new Intl.DateTimeFormat(locale, {
12
+ const getDatePlaceholderFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(locale, {
11
13
  day: getDayMonthFormat(options?.shouldForceLeadingZeros),
12
14
  month: getDayMonthFormat(options?.shouldForceLeadingZeros),
13
15
  year: "numeric"
14
16
  });
15
- const getTimePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
17
+ const getTimePlaceholderFormatter = (locale) => IntlUtils.getDateTimeFormatter(locale, {
16
18
  hour: "2-digit",
17
19
  minute: "2-digit"
18
20
  });
19
21
  const getResolvedLocale = (locale) => {
20
22
  if (locale) return locale;
21
- return new Intl.DateTimeFormat().resolvedOptions().locale;
23
+ return IntlUtils.getDateTimeFormatter().resolvedOptions().locale;
22
24
  };
23
- const getDateFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
25
+ const getDateFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(getResolvedLocale(locale), {
24
26
  day: getDayMonthFormat(options?.shouldForceLeadingZeros),
25
27
  month: getDayMonthFormat(options?.shouldForceLeadingZeros),
26
28
  year: "numeric",
27
29
  timeZone: "UTC"
28
30
  });
29
- const getTimeFormatter = (locale, options) => new DateFormatter(getResolvedLocale(locale), {
30
- hour: getTimeHourFormat(options?.shouldForceLeadingZeros),
31
- minute: "2-digit",
32
- timeZone: "UTC"
33
- });
34
- const getDateTimeFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
31
+ const getTimeFormatter = (locale, options) => {
32
+ const resolvedLocale = getResolvedLocale(locale);
33
+ const key = `${resolvedLocale}|${options?.shouldForceLeadingZeros ?? false}`;
34
+ const cachedFormatter = timeFormatters.get(key);
35
+ if (cachedFormatter) return cachedFormatter;
36
+ const formatter = new DateFormatter(resolvedLocale, {
37
+ hour: getTimeHourFormat(options?.shouldForceLeadingZeros),
38
+ minute: "2-digit",
39
+ timeZone: "UTC"
40
+ });
41
+ timeFormatters.set(key, formatter);
42
+ return formatter;
43
+ };
44
+ const getDateTimeFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(getResolvedLocale(locale), {
35
45
  day: getDayMonthFormat(options?.shouldForceLeadingZeros),
36
46
  month: getDayMonthFormat(options?.shouldForceLeadingZeros),
37
47
  year: "numeric",
@@ -39,22 +49,8 @@ var DateTimeUtils;
39
49
  minute: "2-digit",
40
50
  timeZone: "UTC"
41
51
  });
42
- const getLocaleDateFormat = (locale) => {
43
- const sampleDate = new Date(Date.UTC(2e3, 10, 22));
44
- return new Intl.DateTimeFormat(locale, {
45
- day: "2-digit",
46
- month: "2-digit",
47
- year: "numeric",
48
- timeZone: "UTC"
49
- }).formatToParts(sampleDate).map((part) => {
50
- if (part.type === "day") return "dd";
51
- if (part.type === "month") return "MM";
52
- if (part.type === "year") return "yyyy";
53
- return part.value;
54
- }).join("");
55
- };
56
52
  const repeatLocalizedFieldLabel = (type, length, locale) => {
57
- const placeholderChar = new Intl.DisplayNames(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
53
+ const placeholderChar = IntlUtils.getDisplayNamesFormatter(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
58
54
  if (!placeholderChar) return null;
59
55
  return placeholderChar.repeat(length);
60
56
  };
@@ -191,26 +187,6 @@ var DateTimeUtils;
191
187
  return new CalendarDateTime(zonedDateTime.year, zonedDateTime.month, zonedDateTime.day, zonedDateTime.hour, zonedDateTime.minute, zonedDateTime.second, zonedDateTime.millisecond);
192
188
  }
193
189
  _DateTimeUtils.fromUTCISOToCalendarDateTime = fromUTCISOToCalendarDateTime;
194
- function formatTextDateToCalendarDateTime(textDate, timeZone, locale) {
195
- if (!textDate?.includes("hh")) return null;
196
- const datePart = textDate.split(",").at(0)?.trim();
197
- if (!datePart) return null;
198
- const resolvedTimeZone = resolveTimeZone(timeZone);
199
- const resolvedLocale = locale || Intl.DateTimeFormat().resolvedOptions().locale;
200
- const localeDateFormat = getLocaleDateFormat(resolvedLocale);
201
- const parseOptions = {
202
- zone: resolvedTimeZone,
203
- locale: resolvedLocale
204
- };
205
- let parsedDateTime = DateTime.fromFormat(datePart, localeDateFormat, parseOptions);
206
- if (!parsedDateTime.isValid && localeDateFormat.includes("yyyy")) {
207
- const shortYearFormat = localeDateFormat.replace("yyyy", "yy");
208
- parsedDateTime = DateTime.fromFormat(datePart, shortYearFormat, parseOptions);
209
- }
210
- if (!parsedDateTime.isValid) return null;
211
- return new CalendarDateTime(parsedDateTime.year, parsedDateTime.month, parsedDateTime.day, 0, 0, 0, 0);
212
- }
213
- _DateTimeUtils.formatTextDateToCalendarDateTime = formatTextDateToCalendarDateTime;
214
190
  })(DateTimeUtils || (DateTimeUtils = {}));
215
191
  //#endregion
216
192
  export { DateTimeUtils };