@povio/ui 3.2.4-rc.2 → 3.2.4-rc.4

package/dist/components/buttons/Button/button.cva.d.ts

@@ -92,7 +92,7 @@ export declare const buttonIconSizeDefinition: {
 export type ButtonIconSizeConfig = NonNullable<typeof buttonIconSizeDefinition.config>;
 export declare const buttonTypography: (props: {
     readonly width?: "fill" | "hug" | null | undefined;
-    readonly size?: "none" | "s" | "xs" | "m" | "l" | null | undefined;
+    readonly size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
     readonly color?: "error" | "primary" | "dual" | "secondary" | "success" | "warning" | null | undefined;
     readonly variant?: "text" | "contained" | "outlined" | "subtle" | "ghost" | null | undefined;
     readonly inverted?: boolean | null | undefined;

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -2,6 +2,7 @@ import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { FormField } from "../../FormField/FormField.js";
 import { inputBaseDefinition } from "../../shared/input.cva.js";
+import { IntlUtils } from "../../../../utils/intl.utils.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
@@ -338,7 +339,7 @@ var NumberInputInner = (t0) => {
 	if (!renderInput) {
 		const staticValue = props.value ?? props.defaultValue;
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
-		const displayValue = getStaticNumberDisplayValue(staticValue, new Intl.NumberFormat(locale, formatOptions)) ?? "";
+		const displayValue = getStaticNumberDisplayValue(staticValue, IntlUtils.getNumberFormatter(locale, formatOptions)) ?? "";
 		const hasValue = displayValue !== "";
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;

package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js

@@ -2,6 +2,7 @@ import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
+import { IntlUtils } from "../../../../utils/intl.utils.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
@@ -381,7 +382,7 @@ var NumberRangeInputInner = (t0) => {
 	if (!renderInput) {
 		const staticValue = normalizeRangeValue(props.value, props.minValue, props.maxValue);
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
-		const formatter = new Intl.NumberFormat(locale, formatOptions);
+		const formatter = IntlUtils.getNumberFormatter(locale, formatOptions);
 		const minDisplay = getStaticNumberDisplayValue(staticValue.min, formatter);
 		const maxDisplay = getStaticNumberDisplayValue(staticValue.max, formatter);
 		const hasValue = minDisplay !== null || maxDisplay !== null;

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
-var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, leadingContent, ...props }) => {
+var LoadedQueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially = false, leadingContent, ...props }) => {
 	"use no memo";
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
@@ -27,7 +27,7 @@ var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, re
 		mapItems: (data) => getQueryItems(data, queryMap),
 		resolveSelectedItemsWithIds: resolveSelectedItemsWithIds ?? ui.queryAutocomplete?.resolveSelectedItemsWithIds,
 		search,
-		initialQueryState: shouldEnableInitialQuery ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled,
+		initialQueryState: isQueryEnabledInitially || shouldEnableInitialQuery ? false : selectedIdsToResolve.isResolvedByInitialSelection || (props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled),
 		selectedIdsToResolve: selectedIdsToResolve.items
 	});
 	const handleChange = (value_0) => {
@@ -55,6 +55,58 @@ var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, re
 		onLoadMore: fetchNextPage
 	});
 };
+var QueryAutocompleteContent = (props) => {
+	const $ = c(9);
+	const [isQueryMounted, setIsQueryMounted] = useState(false);
+	const value = "value" in props ? props.value : void 0;
+	if (!getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	}).isResolvedByInitialSelection || isQueryMounted) {
+		let t0;
+		if ($[0] !== isQueryMounted || $[1] !== props) {
+			t0 = /* @__PURE__ */ jsx(LoadedQueryAutocompleteContent, {
+				...props,
+				isQueryEnabledInitially: isQueryMounted
+			});
+			$[0] = isQueryMounted;
+			$[1] = props;
+			$[2] = t0;
+		} else t0 = $[2];
+		return t0;
+	}
+	let autocompleteProps;
+	if ($[3] !== props) {
+		const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...t0 } = props;
+		autocompleteProps = t0;
+		$[3] = props;
+		$[4] = autocompleteProps;
+	} else autocompleteProps = $[4];
+	let t0;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => setIsQueryMounted(true);
+		$[5] = t0;
+	} else t0 = $[5];
+	const mountQuery = t0;
+	let t1;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== autocompleteProps) {
+		t2 = /* @__PURE__ */ jsx(Autocomplete, {
+			...autocompleteProps,
+			items: t1,
+			onMouseEnter: mountQuery,
+			onFocusCapture: mountQuery
+		});
+		$[7] = autocompleteProps;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+};
 var QueryAutocomplete = (props) => {
 	const $ = c(16);
 	if ("formControl" in props && props.formControl) {

package/dist/components/inputs/Selection/Select/QuerySelect.js

@@ -8,9 +8,10 @@ import { useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
-var QuerySelectContent = (t0) => {
+var LoadedQuerySelectContent = (t0) => {
 	const $ = c(31);
-	const { query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, ...props } = t0;
+	const { query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially: t1, ...props } = t0;
+	const isQueryEnabledInitially = t1 === void 0 ? false : t1;
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
 	const isSearchable = props.isSearchable ?? ui.select.isSearchable;
@@ -21,44 +22,44 @@ var QuerySelectContent = (t0) => {
 		mapInitialToSelectItem: props.mapInitialToSelectItem
 	});
 	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
-	let t1;
+	let t2;
 	if ($[0] !== queryMap) {
-		t1 = (data) => getQueryItems(data, queryMap);
+		t2 = (data) => getQueryItems(data, queryMap);
 		$[0] = queryMap;
-		$[1] = t1;
-	} else t1 = $[1];
-	const t2 = resolveSelectedItemsWithIds ?? ui.querySelect?.resolveSelectedItemsWithIds;
-	const t3 = isSearchable ? search : void 0;
-	const t4 = shouldEnableInitialQuery ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
-	let t5;
-	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== t1 || $[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
-		t5 = {
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = resolveSelectedItemsWithIds ?? ui.querySelect?.resolveSelectedItemsWithIds;
+	const t4 = isSearchable ? search : void 0;
+	const t5 = isQueryEnabledInitially || shouldEnableInitialQuery ? false : selectedIdsToResolve.isResolvedByInitialSelection || (props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled);
+	let t6;
+	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== t2 || $[7] !== t3 || $[8] !== t4 || $[9] !== t5) {
+		t6 = {
 			query,
 			queryParams,
 			queryOptions,
-			mapItems: t1,
-			resolveSelectedItemsWithIds: t2,
-			search: t3,
-			initialQueryState: t4,
+			mapItems: t2,
+			resolveSelectedItemsWithIds: t3,
+			search: t4,
+			initialQueryState: t5,
 			selectedIdsToResolve: selectedIdsToResolve.items
 		};
 		$[2] = query;
 		$[3] = queryOptions;
 		$[4] = queryParams;
 		$[5] = selectedIdsToResolve.items;
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
-	} else t5 = $[10];
-	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t5);
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t6);
 	let onSearchChange;
 	let selectProps;
 	if ($[11] !== props) {
-		const { isInitialQueryDisabled: _, onSearchChange: t6, ...t7 } = props;
-		onSearchChange = t6;
-		selectProps = t7;
+		const { isInitialQueryDisabled: _, onSearchChange: t7, ...t8 } = props;
+		onSearchChange = t7;
+		selectProps = t8;
 		$[11] = props;
 		$[12] = onSearchChange;
 		$[13] = selectProps;
@@ -66,9 +67,9 @@ var QuerySelectContent = (t0) => {
 		onSearchChange = $[12];
 		selectProps = $[13];
 	}
-	let t6;
+	let t7;
 	if ($[14] !== handleEnableQuery || $[15] !== onSearchChange || $[16] !== setSearch) {
-		t6 = (value_0) => {
+		t7 = (value_0) => {
 			setSearch(value_0);
 			handleEnableQuery();
 			onSearchChange?.(value_0);
@@ -76,33 +77,33 @@ var QuerySelectContent = (t0) => {
 		$[14] = handleEnableQuery;
 		$[15] = onSearchChange;
 		$[16] = setSearch;
-		$[17] = t6;
-	} else t6 = $[17];
-	const handleSearchChange = t6;
-	const t7 = props.searchDebounceDelay ?? ui.querySelect?.searchDebounceDelay;
-	let t8;
+		$[17] = t7;
+	} else t7 = $[17];
+	const handleSearchChange = t7;
+	const t8 = props.searchDebounceDelay ?? ui.querySelect?.searchDebounceDelay;
+	let t9;
 	if ($[18] !== handleSearchChange || $[19] !== isSearchable) {
-		t8 = isSearchable && {
+		t9 = isSearchable && {
 			isClientSearchDisabled: true,
 			onSearchChange: handleSearchChange
 		};
 		$[18] = handleSearchChange;
 		$[19] = isSearchable;
-		$[20] = t8;
-	} else t8 = $[20];
-	let t9;
-	if ($[21] !== fetchNextPage || $[22] !== handleEnableQuery || $[23] !== hasNextPage || $[24] !== isLoading || $[25] !== items || $[26] !== selectProps || $[27] !== t7 || $[28] !== t8 || $[29] !== totalItems) {
-		t9 = /* @__PURE__ */ jsx(Select, {
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== fetchNextPage || $[22] !== handleEnableQuery || $[23] !== hasNextPage || $[24] !== isLoading || $[25] !== items || $[26] !== selectProps || $[27] !== t8 || $[28] !== t9 || $[29] !== totalItems) {
+		t10 = /* @__PURE__ */ jsx(Select, {
 			...selectProps,
 			items,
 			isLoading,
 			totalItems,
 			hasLoadMore: hasNextPage,
 			onLoadMore: fetchNextPage,
-			searchDebounceDelay: t7,
+			searchDebounceDelay: t8,
 			onMouseEnter: handleEnableQuery,
 			onFocusCapture: handleEnableQuery,
-			...t8
+			...t9
 		});
 		$[21] = fetchNextPage;
 		$[22] = handleEnableQuery;
@@ -110,12 +111,64 @@ var QuerySelectContent = (t0) => {
 		$[24] = isLoading;
 		$[25] = items;
 		$[26] = selectProps;
-		$[27] = t7;
-		$[28] = t8;
+		$[27] = t8;
+		$[28] = t9;
 		$[29] = totalItems;
-		$[30] = t9;
-	} else t9 = $[30];
-	return t9;
+		$[30] = t10;
+	} else t10 = $[30];
+	return t10;
+};
+var QuerySelectContent = (props) => {
+	const $ = c(9);
+	const [isQueryMounted, setIsQueryMounted] = useState(false);
+	const value = "value" in props ? props.value : void 0;
+	if (!getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	}).isResolvedByInitialSelection || isQueryMounted) {
+		let t0;
+		if ($[0] !== isQueryMounted || $[1] !== props) {
+			t0 = /* @__PURE__ */ jsx(LoadedQuerySelectContent, {
+				...props,
+				isQueryEnabledInitially: isQueryMounted
+			});
+			$[0] = isQueryMounted;
+			$[1] = props;
+			$[2] = t0;
+		} else t0 = $[2];
+		return t0;
+	}
+	let selectProps;
+	if ($[3] !== props) {
+		const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...t0 } = props;
+		selectProps = t0;
+		$[3] = props;
+		$[4] = selectProps;
+	} else selectProps = $[4];
+	let t0;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => setIsQueryMounted(true);
+		$[5] = t0;
+	} else t0 = $[5];
+	const mountQuery = t0;
+	let t1;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== selectProps) {
+		t2 = /* @__PURE__ */ jsx(Select, {
+			...selectProps,
+			items: t1,
+			onMouseEnter: mountQuery,
+			onFocusCapture: mountQuery
+		});
+		$[7] = selectProps;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
 };
 var QuerySelect = (props) => {
 	const $ = c(16);

package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts

@@ -9,6 +9,7 @@ export declare const getSelectionIdsToResolve: <TInitialSelectItem, TKey extends
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
 }) => {
     count: number;
+    isResolvedByInitialSelection: boolean;
     items: TKey[];
 };
 export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];

package/dist/components/inputs/Selection/shared/querySelect.utils.js

@@ -26,6 +26,7 @@ var getSelectionIdsToResolve = ({ initialSelection, value, mapInitialToSelectIte
 	const items = Array.from(new Set([...missingLabelInitialSelectionIds, ...values.filter((id) => !labeledInitialSelectionIds.has(id))]));
 	return {
 		count: items.length,
+		isResolvedByInitialSelection: values.length > 0 && values.every((id) => labeledInitialSelectionIds.has(id)),
 		items
 	};
 };

package/dist/components/inputs/Selection/shared/select.context.js

@@ -135,16 +135,26 @@ var SelectContext;
 			triggerBlurOnChange
 		]);
 		const onClear = useCallback(() => {
-			if (!valueRef.current || Array.isArray(valueRef.current) && valueRef.current.length === 0) {
-				setFieldState((prev) => ({
-					...prev,
-					inputValue: ""
-				}));
+			if (selectedIds.length === 0) {
+				const newFieldState_2 = {
+					...fieldState,
+					inputValue: "",
+					searchValue: ""
+				};
+				setFieldState(newFieldState_2);
+				emitStateChanges(newFieldState_2, true);
+				setShowAll(true);
 				return;
 			}
 			if (isMultiple) onChange([]);
 			else onChange(null);
-		}, [isMultiple, onChange]);
+		}, [
+			emitStateChanges,
+			fieldState,
+			isMultiple,
+			onChange,
+			selectedIds.length
+		]);
 		const onSelectAll = useCallback(() => {
 			onChange(selectableListItems.map(({ id: id_4 }) => id_4));
 		}, [selectableListItems, onChange]);
@@ -157,13 +167,13 @@ var SelectContext;
 		]);
 		const onBlur = useCallback(() => {
 			if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
-				const newFieldState_2 = {
+				const newFieldState_3 = {
 					...fieldState,
 					inputValue: "",
 					searchValue: ""
 				};
-				setFieldState(newFieldState_2);
-				emitStateChanges(newFieldState_2);
+				setFieldState(newFieldState_3);
+				emitStateChanges(newFieldState_3);
 				setShowAll(true);
 			}
 			fieldOnBlur?.({});

package/dist/components/inputs/shared/input.cva.js

@@ -210,7 +210,7 @@ var inputSizeDefinition = UIOverrides.defineConfig({
 	}
 });
 var inputContentWrapperDefinition = UIOverrides.defineConfig({
-	base: ["flex w-full"],
+	base: ["flex min-w-0 w-full"],
 	config: {
 		variants: { as: {
 			default: "",

package/dist/components/shared/pagination/minWidth.cva.d.ts

@@ -1,3 +1,3 @@
 export declare const minWidth: (props?: ({
-    size?: "s" | "xs" | "m" | "l" | "xxs" | null | undefined;
+    size?: "xs" | "s" | "m" | "l" | "xxs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/helpers/dynamicColumns.js

@@ -1,3 +1,4 @@
+import { IntlUtils } from "../utils/intl.utils.js";
 import { StringUtils } from "../utils/string.utils.js";
 import { ZodUtils } from "../utils/zod.utils.js";
 import { DateUtils } from "../utils/date.utils.js";
@@ -11,7 +12,7 @@ var FORMAT_MAP = {
 		return `${DateUtils.formatDate(new Date(value.start))} - ${DateUtils.formatDate(new Date(value.end))}`;
 	},
 	enum: (value) => StringUtils.capitalize(value),
-	number: (value) => value.toLocaleString(i18next.language),
+	number: (value) => IntlUtils.getNumberFormatter(i18next.language).format(value),
 	string: (value) => String(value),
 	boolean: (value) => {
 		const key = `${DEFAULT_NAMESPACE}.${value ? "yes" : "no"}`;

package/dist/index.d.ts

@@ -253,6 +253,7 @@ export { DateTimeUtils } from './utils/date-time.utils';
 export { DomUtils } from './utils/dom.utils';
 export { FileUtils } from './utils/file.utils';
 export { isEqual } from './utils/isEqual';
+export { IntlUtils } from './utils/intl.utils';
 export { logger } from './utils/logger';
 export { ObjectUtils } from './utils/object.utils';
 export { QueriesUtils } from './utils/queries.utils';

package/dist/index.js

@@ -82,6 +82,7 @@ import { inputBaseDefinition, inputClearClassDefinition, inputContentWrapperDefi
 import { CheckboxGroup } from "./components/inputs/Checkbox/CheckboxGroup.js";
 import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
+import { IntlUtils } from "./utils/intl.utils.js";
 import { DateTimeUtils } from "./utils/date-time.utils.js";
 import { datePickerInputContentRowDefinition } from "./components/inputs/DateTime/shared/datePickerInput.cva.js";
 import { popoverDefinition } from "./components/shared/popover.cva.js";
@@ -176,4 +177,4 @@ import { useSorting } from "./hooks/useSorting.js";
 import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
 import { ArrayUtils } from "./utils/array.utils.js";
 import { QueriesUtils } from "./utils/queries.utils.js";
-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 };
+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 };

package/dist/utils/date-time.utils.js

@@ -1,3 +1,4 @@
+import { IntlUtils } from "./intl.utils.js";
 import { CalendarDate, CalendarDateTime, DateFormatter, fromDate, getLocalTimeZone, parseAbsolute } from "@internationalized/date";
 import { DateTime } from "luxon";
 //#region src/utils/date-time.utils.ts
@@ -5,33 +6,42 @@ var DateTimeUtils;
 (function(_DateTimeUtils) {
 	const DATE_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22));
 	const TIME_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22, 6, 45));
+	const timeFormatters = /* @__PURE__ */ new Map();
 	const getDayMonthFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
 	const getTimeHourFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
-	const getDatePlaceholderFormatter = (locale, options) => new Intl.DateTimeFormat(locale, {
+	const getDatePlaceholderFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(locale, {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric"
 	});
-	const getTimePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
+	const getTimePlaceholderFormatter = (locale) => IntlUtils.getDateTimeFormatter(locale, {
 		hour: "2-digit",
 		minute: "2-digit"
 	});
 	const getResolvedLocale = (locale) => {
 		if (locale) return locale;
-		return new Intl.DateTimeFormat().resolvedOptions().locale;
+		return IntlUtils.getDateTimeFormatter().resolvedOptions().locale;
 	};
-	const getDateFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+	const getDateFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(getResolvedLocale(locale), {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric",
 		timeZone: "UTC"
 	});
-	const getTimeFormatter = (locale, options) => new DateFormatter(getResolvedLocale(locale), {
-		hour: getTimeHourFormat(options?.shouldForceLeadingZeros),
-		minute: "2-digit",
-		timeZone: "UTC"
-	});
-	const getDateTimeFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+	const getTimeFormatter = (locale, options) => {
+		const resolvedLocale = getResolvedLocale(locale);
+		const key = `${resolvedLocale}|${options?.shouldForceLeadingZeros ?? false}`;
+		const cachedFormatter = timeFormatters.get(key);
+		if (cachedFormatter) return cachedFormatter;
+		const formatter = new DateFormatter(resolvedLocale, {
+			hour: getTimeHourFormat(options?.shouldForceLeadingZeros),
+			minute: "2-digit",
+			timeZone: "UTC"
+		});
+		timeFormatters.set(key, formatter);
+		return formatter;
+	};
+	const getDateTimeFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(getResolvedLocale(locale), {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric",
@@ -40,7 +50,7 @@ var DateTimeUtils;
 		timeZone: "UTC"
 	});
 	const repeatLocalizedFieldLabel = (type, length, locale) => {
-		const placeholderChar = new Intl.DisplayNames(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
+		const placeholderChar = IntlUtils.getDisplayNamesFormatter(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
 		if (!placeholderChar) return null;
 		return placeholderChar.repeat(length);
 	};

package/dist/utils/intl.utils.d.ts

@@ -0,0 +1,7 @@
+type IntlLocale = Intl.LocalesArgument;
+export declare namespace IntlUtils {
+    const getDateTimeFormatter: (locale?: IntlLocale, options?: Intl.DateTimeFormatOptions) => Intl.DateTimeFormat;
+    const getDisplayNamesFormatter: (locale: IntlLocale, options: Intl.DisplayNamesOptions) => Intl.DisplayNames;
+    const getNumberFormatter: (locale?: IntlLocale, options?: Intl.NumberFormatOptions) => Intl.NumberFormat;
+}
+export {};

package/dist/utils/intl.utils.js

@@ -0,0 +1,38 @@
+//#region src/utils/intl.utils.ts
+var formatterCacheKey = (locale, options) => {
+	const locales = Array.isArray(locale) ? locale.map(String) : locale ? [String(locale)] : [];
+	const normalizedOptions = Object.entries(options ?? {}).sort(([left], [right]) => left.localeCompare(right));
+	return JSON.stringify([locales, normalizedOptions]);
+};
+var IntlUtils;
+(function(_IntlUtils) {
+	const dateTimeFormatters = /* @__PURE__ */ new Map();
+	const displayNamesFormatters = /* @__PURE__ */ new Map();
+	const numberFormatters = /* @__PURE__ */ new Map();
+	_IntlUtils.getDateTimeFormatter = (locale, options) => {
+		const key = formatterCacheKey(locale, options);
+		const cachedFormatter = dateTimeFormatters.get(key);
+		if (cachedFormatter) return cachedFormatter;
+		const formatter = new Intl.DateTimeFormat(locale, options);
+		dateTimeFormatters.set(key, formatter);
+		return formatter;
+	};
+	_IntlUtils.getDisplayNamesFormatter = (locale, options) => {
+		const key = formatterCacheKey(locale, options);
+		const cachedFormatter = displayNamesFormatters.get(key);
+		if (cachedFormatter) return cachedFormatter;
+		const formatter = new Intl.DisplayNames(locale, options);
+		displayNamesFormatters.set(key, formatter);
+		return formatter;
+	};
+	_IntlUtils.getNumberFormatter = (locale, options) => {
+		const key = formatterCacheKey(locale, options);
+		const cachedFormatter = numberFormatters.get(key);
+		if (cachedFormatter) return cachedFormatter;
+		const formatter = new Intl.NumberFormat(locale, options);
+		numberFormatters.set(key, formatter);
+		return formatter;
+	};
+})(IntlUtils || (IntlUtils = {}));
+//#endregion
+export { IntlUtils };

package/dist/utils/intl.utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "3.2.4-rc.2",
+  "version": "3.2.4-rc.4",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",