@povio/ui 2.2.12 → 2.3.0-rc.2

package/dist/hooks/useFilters.js

@@ -1,4 +1,5 @@
 import { UIRouter } from "../config/router.context.js";
+import { RoutingUtils } from "../utils/routing.utils.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 //#region src/hooks/useFilters.ts
@@ -18,43 +19,47 @@ var serializeFiltersToQuery = (filterData, prefix) => {
 	for (const [key, value] of Object.entries(filterData)) {
 		if (value === null || value === void 0) continue;
 		const filterKey = `filter[${prefix && `${prefix}-`}${key}]`;
-		if (Array.isArray(value) || typeof value === "object") query[filterKey] = JSON.stringify(value);
-		else if (typeof value === "boolean") query[filterKey] = value ? "true" : "false";
-		else query[filterKey] = value.toString();
+		query[filterKey] = value;
 	}
 	return query;
 };
+function normalizeBooleanQueryValue(value) {
+	if (value === "\"true\"") return "true";
+	if (value === "\"false\"") return "false";
+	return value;
+}
 var parseFilterFromQuery = (searchParams, schema) => {
 	const filter = {};
 	for (const [key, value] of searchParams.entries()) {
+		const normalizedValue = normalizeBooleanQueryValue(value);
 		const match = /^filter\[(.+?)\]$/.exec(key);
 		if (!match) continue;
 		const filterKey = match[1];
-		const isArray = value.startsWith("[") && value.endsWith("]");
-		const isObject = value.startsWith("{") && value.endsWith("}");
-		const isNumber = !Number.isNaN(Number(value)) && value !== "";
-		const isBoolean = ["true", "false"].includes(value);
-		if (isArray || isObject || isNumber) filter[filterKey] = JSON.parse(value);
-		else if (isBoolean) filter[filterKey] = value === "true";
+		const isArray = normalizedValue.startsWith("[") && normalizedValue.endsWith("]");
+		const isObject = normalizedValue.startsWith("{") && normalizedValue.endsWith("}");
+		const isNumber = !Number.isNaN(Number(normalizedValue)) && normalizedValue !== "";
+		const isBoolean = ["true", "false"].includes(normalizedValue);
+		if (isArray || isObject || isNumber) filter[filterKey] = JSON.parse(normalizedValue);
+		else if (isBoolean) filter[filterKey] = normalizedValue === "true";
 		else {
 			const expectedType = getFieldType(schema, filterKey);
-			if (expectedType === "number" && !Number.isNaN(Number(value)) && value !== "" && value !== null) filter[filterKey] = Number(value);
-			else if (expectedType === "boolean" && ["true", "false"].includes(value)) filter[filterKey] = value === "true";
-			else filter[filterKey] = value;
+			if (expectedType === "number" && !Number.isNaN(Number(normalizedValue)) && normalizedValue !== "" && normalizedValue !== null) filter[filterKey] = Number(normalizedValue);
+			else if (expectedType === "boolean" && ["true", "false"].includes(normalizedValue)) filter[filterKey] = normalizedValue === "true";
+			else filter[filterKey] = normalizedValue;
 		}
 	}
 	return filter;
 };
 var useFilters = (defaultFilterValues, prefix = "", schema) => {
-	const { searchParams, pathname, replace } = UIRouter.useUIRouter();
+	const { searchParams, replace } = UIRouter.useUIRouter();
 	const [filterData, setFilterData] = useState(() => parseFilterFromQuery(searchParams, schema));
 	useEffect(() => {
 		const setUrlToDefaultFilters = () => {
 			const flatFilterQuery = serializeFiltersToQuery(defaultFilterValues, prefix);
-			replace(`${pathname}?${new URLSearchParams({
-				...Object.fromEntries(searchParams.entries()),
+			replace(".", {
+				...RoutingUtils.toRouterSearch(searchParams),
 				...flatFilterQuery
-			}).toString()}`);
+			});
 		};
 		const currentFilters = parseFilterFromQuery(searchParams, schema);
 		const hasFiltersSet = Object.keys(currentFilters).length > 0;
@@ -77,20 +82,19 @@ var useFilters = (defaultFilterValues, prefix = "", schema) => {
 			else newFilters[key] = value;
 		});
 		const prefixPart = prefix ? `${prefix}-` : "";
-		const cleanedQuery = searchParams.keys().reduce((acc, k) => {
-			if (!k.startsWith(`filter[${prefixPart}`)) acc[k] = searchParams.get(k) ?? "";
-			return acc;
-		}, {});
+		const cleanedQuery = RoutingUtils.toRouterSearch(searchParams);
+		Object.keys(cleanedQuery).forEach((key) => {
+			if (key.startsWith(`filter[${prefixPart}`)) delete cleanedQuery[key];
+		});
 		const flatFilterQuery = serializeFiltersToQuery(newFilters, prefix);
-		replace(`${pathname}?${new URLSearchParams({
+		replace(".", {
 			...cleanedQuery,
 			...flatFilterQuery
-		}).toString()}`);
+		});
 		setFilterData(newFilters);
 	}, [
 		filterData,
 		prefix,
-		pathname,
 		replace,
 		defaultFilterValues,
 		searchParams

package/dist/hooks/useIntersectionObserver.d.ts

@@ -3,6 +3,6 @@ type UseIntersectionObserverProps = {
     onIntersectionChange?: (entry: IntersectionObserverEntry) => void;
 } & IntersectionObserverInit;
 export declare const useIntersectionObserver: <T extends HTMLElement>({ onIntersection, onIntersectionChange, root, rootMargin, threshold, }: UseIntersectionObserverProps) => {
-    ref: (node: T | null) => void;
+    ref: (element: T | null) => void;
 };
 export {};

package/dist/hooks/useIntersectionObserver.js

@@ -1,31 +1,44 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 //#region src/hooks/useIntersectionObserver.ts
 var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
-	const [element, setElement] = useState(null);
-	const ref = useCallback((node) => {
-		setElement(node);
-	}, []);
+	const elementRef = useRef(null);
+	const observerRef = useRef(null);
+	const onIntersectionRef = useRef(onIntersection);
+	const onIntersectionChangeRef = useRef(onIntersectionChange);
+	useEffect(() => {
+		onIntersectionRef.current = onIntersection;
+	}, [onIntersection]);
+	useEffect(() => {
+		onIntersectionChangeRef.current = onIntersectionChange;
+	}, [onIntersectionChange]);
 	useEffect(() => {
-		if (!element) return;
 		const observer = new IntersectionObserver((entries) => {
-			if (entries.some((entry) => entry.isIntersecting)) onIntersection?.();
-			onIntersectionChange?.(entries[0]);
+			if (entries.some((entry) => entry.isIntersecting)) onIntersectionRef.current?.();
+			onIntersectionChangeRef.current?.(entries[0]);
 		}, {
 			root,
 			rootMargin,
 			threshold
 		});
-		observer.observe(element);
-		return () => observer.disconnect();
+		observerRef.current = observer;
+		if (elementRef.current) observer.observe(elementRef.current);
+		return () => {
+			if (elementRef.current) observer.unobserve(elementRef.current);
+			observer.disconnect();
+			observerRef.current = null;
+		};
 	}, [
-		element,
 		root,
-		onIntersection,
-		onIntersectionChange,
 		rootMargin,
 		threshold
 	]);
-	return { ref };
+	const ref = useCallback((element) => {
+		if (elementRef.current === element) return;
+		if (observerRef.current && elementRef.current) observerRef.current.unobserve(elementRef.current);
+		elementRef.current = element;
+		if (observerRef.current && elementRef.current) observerRef.current.observe(elementRef.current);
+	}, []);
+	return useMemo(() => ({ ref }), [ref]);
 };
 //#endregion
 export { useIntersectionObserver };

package/dist/hooks/usePagination.js

@@ -1,4 +1,5 @@
 import { UIRouter } from "../config/router.context.js";
+import { RoutingUtils } from "../utils/routing.utils.js";
 import { useEffect, useState } from "react";
 //#region src/hooks/usePagination.ts
 var DEFAULT_STATE = {
@@ -6,16 +7,19 @@ var DEFAULT_STATE = {
 	pageSize: 20
 };
 function usePagination(defaultPagination) {
-	const { pathname, replace, searchParams } = UIRouter.useUIRouter();
+	const { replace, searchParams } = UIRouter.useUIRouter();
 	const [pagination, setPagination] = useState(defaultPagination ?? {
 		pageIndex: searchParams.has("page") ? Number.parseInt(searchParams.get("page") ?? "", 10) : DEFAULT_STATE.pageIndex,
 		pageSize: searchParams.has("size") ? Number.parseInt(searchParams.get("size") ?? "", 10) : DEFAULT_STATE.pageSize
 	});
 	useEffect(() => {
 		const params = new URLSearchParams(searchParams);
-		if (pagination.pageSize !== DEFAULT_STATE.pageSize) params.append("size", pagination.pageSize.toString());
-		if (pagination.pageIndex !== DEFAULT_STATE.pageIndex) params.append("page", pagination.pageIndex.toString());
-		replace(`${pathname}${params.size > 0 ? `?${params.toString()}` : ""}`);
+		params.delete("size");
+		params.delete("page");
+		if (pagination.pageSize !== DEFAULT_STATE.pageSize) params.set("size", pagination.pageSize.toString());
+		if (pagination.pageIndex !== DEFAULT_STATE.pageIndex) params.set("page", pagination.pageIndex.toString());
+		if (params.toString() === searchParams.toString()) return;
+		replace(".", RoutingUtils.toRouterSearch(params));
 	}, [pagination]);
 	return {
 		pagination,

package/dist/hooks/useQueryAutocomplete.d.ts

@@ -0,0 +1,14 @@
+import { InfiniteData } from '@tanstack/react-query';
+import { Key } from 'react-aria-components';
+import { InfiniteQueryPage, QueryFn, UseQueryAutocompleteOptions } from '../components/inputs/Selection/Autocomplete/queryAutocomplete.types';
+export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, initialQueryState, search, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
+    data: any;
+    isLoading: boolean;
+    isQueryEnabled: boolean;
+    handleEnableQuery: () => void;
+    items: import('..').SelectItem<TKey>[];
+    totalItems: number | undefined;
+    hasNextPage: boolean;
+    fetchNextPage: ((options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<InfiniteData<InfiniteQueryPage<TKey>, unknown>, Error>>) | undefined;
+    isFetchingNextPage: boolean;
+};

package/dist/hooks/useQueryAutocomplete.js

@@ -0,0 +1,56 @@
+import { ApiQueryUtils } from "../utils/query.utils.js";
+import { useMemo, useState } from "react";
+//#region src/hooks/useQueryAutocomplete.ts
+var isFilterSearchParams = (params) => {
+	return typeof params === "object" && params !== null && "filter" in params;
+};
+var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
+	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
+	const queryResult = query(search === void 0 ? queryParams : {
+		...queryParams,
+		limit: queryParams?.limit ?? ApiQueryUtils.DEFAULT_LIMIT,
+		search,
+		filter: {
+			...isFilterSearchParams(queryParams) ? queryParams.filter : {},
+			search
+		}
+	}, {
+		...queryOptions,
+		enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
+	});
+	const data = queryResult.data;
+	const isLoading = queryResult.isLoading;
+	const isInfiniteQueryResult = (result) => {
+		return "hasNextPage" in result && "fetchNextPage" in result;
+	};
+	const handleEnableQuery = () => {
+		setIsQueryEnabled(true);
+	};
+	const infiniteQueryResult = isInfiniteQueryResult(queryResult) ? queryResult : void 0;
+	const isInfiniteQuery = infiniteQueryResult !== void 0;
+	const hasNextPage = infiniteQueryResult?.hasNextPage ?? false;
+	const fetchNextPage = infiniteQueryResult?.fetchNextPage;
+	const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;
+	const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
+	const items = useMemo(() => {
+		if (!data) return [];
+		return mapItems(isInfiniteQuery ? data.pages?.flatMap((page) => page?.items ?? []) : data);
+	}, [
+		data,
+		isInfiniteQuery,
+		mapItems
+	]);
+	return {
+		data,
+		isLoading: isLoading || isFetchingNextPage,
+		isQueryEnabled,
+		handleEnableQuery,
+		items,
+		totalItems,
+		hasNextPage,
+		fetchNextPage,
+		isFetchingNextPage
+	};
+};
+//#endregion
+export { useQueryAutocomplete };

package/dist/hooks/useSorting.js

@@ -1,8 +1,9 @@
 import { UIRouter } from "../config/router.context.js";
+import { RoutingUtils } from "../utils/routing.utils.js";
 import { useEffect, useMemo, useState } from "react";
 //#region src/hooks/useSorting.ts
 function useSorting(defaultSorting, prefix = "") {
-	const { pathname, replace, searchParams } = UIRouter.useUIRouter();
+	const { replace, searchParams } = UIRouter.useUIRouter();
 	const [sorting, setSorting] = useState(defaultSorting ?? searchParams.get(`order${prefix && `-${prefix}`}`)?.split(",").map((item) => {
 		if (item.startsWith("-")) return {
 			id: item.slice(1),
@@ -22,9 +23,11 @@ function useSorting(defaultSorting, prefix = "") {
 	}, [sorting]);
 	useEffect(() => {
 		const params = new URLSearchParams(searchParams);
-		params.delete("order");
-		if (order) params.append(`order${prefix && `-${prefix}`}`, order);
-		replace(`${pathname}${params.size > 0 ? `?${params.toString()}` : ""}`);
+		const orderKey = prefix ? `order-${prefix}` : "order";
+		params.delete(orderKey);
+		if (order) params.set(orderKey, order);
+		if (params.toString() === searchParams.toString()) return;
+		replace(".", RoutingUtils.toRouterSearch(params));
 	}, [order]);
 	return {
 		sorting,

package/dist/index.d.ts

@@ -78,6 +78,8 @@ export type { FormFieldProps } from './components/inputs/FormField/FormField';
 export { FormField } from './components/inputs/FormField/FormField';
 export type { ControlledNumberInputProps, NumberInputProps } from './components/inputs/Input/NumberInput/NumberInput';
 export { NumberInput } from './components/inputs/Input/NumberInput/NumberInput';
+export type { ControlledNumberRangeInputProps, NumberRangeInputProps, NumberRangeValue, } from './components/inputs/Input/NumberRangeInput/NumberRangeInput';
+export { NumberRangeInput } from './components/inputs/Input/NumberRangeInput/NumberRangeInput';
 export type { ControlledPasswordInputProps, PasswordInputProps, } from './components/inputs/Input/PasswordInput/PasswordInput';
 export { PasswordInput } from './components/inputs/Input/PasswordInput/PasswordInput';
 export type { ControlledTextAreaProps, TextAreaProps } from './components/inputs/Input/TextArea/TextArea';
@@ -94,11 +96,16 @@ export type { RadioVariantProps } from './components/inputs/RadioGroup/radio.cva
 export type { AutocompleteProps, ControlledAutocompleteProps, } from './components/inputs/Selection/Autocomplete/Autocomplete';
 export { Autocomplete } from './components/inputs/Selection/Autocomplete/Autocomplete';
 export { QueryAutocomplete } from './components/inputs/Selection/Autocomplete/QueryAutocomplete';
+export type { SelectBaseProps } from './components/inputs/Selection/shared/SelectBase';
+export type { DefaultInitialSelectItem, SelectAsyncProps, SelectItem, } from './components/inputs/Selection/shared/select.types';
+export type { QuerySelectProps } from './components/inputs/Selection/Select/QuerySelect';
+export { QuerySelect } from './components/inputs/Selection/Select/QuerySelect';
 export type { ControlledSelectProps, SelectProps } from './components/inputs/Selection/Select/Select';
 export { Select } from './components/inputs/Selection/Select/Select';
 export type { ControlledSliderProps, SliderProps } from './components/inputs/Slider/Slider';
 export { Slider } from './components/inputs/Slider/Slider';
 export type { InputVariantProps } from './components/inputs/shared/input.cva';
+export type { TooltipWrapperTriggerVariantProps } from './components/inputs/shared/tooltipWrapper.cva';
 export type { ControlledToggleProps, ToggleProps } from './components/inputs/Toggle/Toggle';
 export { Toggle } from './components/inputs/Toggle/Toggle';
 export type { MenuProps } from './components/Menu/Menu';

package/dist/index.js

@@ -85,6 +85,7 @@ import { FileUpload } from "./components/inputs/File/FileUpload.js";
 import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
 import { InputUpload } from "./components/inputs/File/InputUpload.js";
 import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
+import { NumberRangeInput } from "./components/inputs/Input/NumberRangeInput/NumberRangeInput.js";
 import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
 import { TextArea } from "./components/inputs/Input/TextArea/TextArea.js";
 import { Autocomplete } from "./components/inputs/Selection/Autocomplete/Autocomplete.js";
@@ -92,6 +93,8 @@ import { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/Qu
 import { Slider } from "./components/inputs/Slider/Slider.js";
 import { Toggle } from "./components/inputs/Toggle/Toggle.js";
 import { Segment } from "./components/segment/Segment.js";
+import { QuerySelect } from "./components/inputs/Selection/Select/QuerySelect.js";
+import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
 import { StringUtils } from "./utils/string.utils.js";
 import { dynamicInputs } from "./helpers/dynamicInputs.js";
 import { Form } from "./components/inputs/Inputs/Form.js";
@@ -102,7 +105,6 @@ import { Stepper } from "./components/navigation/Stepper/Stepper.js";
 import { Modal } from "./components/overlays/Modal/Modal.js";
 import { ActionModal } from "./components/overlays/ActionModal/ActionModal.js";
 import { Drawer } from "./components/overlays/Drawer/Drawer.js";
-import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
 import { TooltipEllipsis } from "./components/overlays/Tooltip/TooltipEllipsis.js";
 import { PaginationList } from "./components/shared/pagination/PaginationList.js";
 import { Pagination } from "./components/shared/pagination/Pagination.js";
@@ -126,6 +128,7 @@ import { ThemeContext } from "./config/theme.context.js";
 import { DateUtils } from "./utils/date.utils.js";
 import { dynamicColumns } from "./helpers/dynamicColumns.js";
 import { useAutosave } from "./hooks/useAutosave.js";
+import { RoutingUtils } from "./utils/routing.utils.js";
 import { useFilters } from "./hooks/useFilters.js";
 import { useForm } from "./hooks/useForm.js";
 import { useFormAutosave } from "./hooks/useFormAutosave.js";
@@ -134,5 +137,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";
-import { RoutingUtils } from "./utils/routing.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, 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, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, 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, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, 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, 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, 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, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };

package/dist/tw-ui-plugin.js

@@ -7,6 +7,7 @@ var uiPlugin = plugin(({ addVariant }) => {
 		"&:is(:where(.group\\/select-content)[data-has-selection] *)",
 		"&:is(:where(.group\\/select-content)[data-has-search] *)",
 		"&:is(:where(.group\\/select-content)[data-searchable-focus-within] *)",
+		"&:is(:where(.group\\/radio-group-content)[data-radio-group-content] *)",
 		"&:is(:where(.group\\/date-picker-content)[data-has-selection] *)",
 		"&:is(:where(.group\\/date-picker-content)[data-focus-within] *)"
 	].join(", "));
@@ -14,6 +15,7 @@ var uiPlugin = plugin(({ addVariant }) => {
 		"&:is(:where(.group\\/input-content):has(*:is(input:disabled)) *)",
 		"&:is(:where(.group\\/select-content)[data-disabled] *)",
 		"&:is(:where(.group\\/select-content):has(*:is(input:disabled)) *)",
+		"&:is(:where(.group\\/radio-group-content)[data-disabled] *)",
 		"&:is(:where(.group\\/text-area):has(*:is(textarea:disabled)) *)",
 		"&:is(:where(.group\\/text-editor):where([data-rac])[data-disabled] *)",
 		"&:is(:where(.group\\/date-picker-content):where([data-rac])[data-disabled] *)"

package/dist/utils/date-time.utils.d.ts

@@ -1,15 +1,36 @@
 import { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
 export declare namespace DateTimeUtils {
-    function fromISOtoZonedDateTime(isoString: string, timeZone?: string): ZonedDateTime;
-    function fromDateValueToISO(dateValue: DateValue, timeZone?: string): string;
-    function fromDateValueToOffsetISO(dateValue: DateValue, timeZone?: string): string;
-    function fromLocalToZonedDateTime(date: Date, timeZone?: string): ZonedDateTime;
-    function fromDateValueToLocal(dateValue: DateValue, timeZone?: string): Date;
-    function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
+    interface LocalizedDateFormatOptions {
+        shouldForceLeadingZeros?: boolean;
+    }
+    export interface LocalizedDatePart {
+        type: Intl.DateTimeFormatPartTypes;
+        value: string;
+        placeholder: string;
+        isPlaceholder: boolean;
+    }
+    export function getDatePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function getTimePlaceholder(locale?: string): string;
+    export function getDateTimePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function getDateRangePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function formatCalendarDateLocalized(calendarDate: CalendarDate, locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function formatCalendarDatePartsLocalized(calendarDate?: CalendarDate | null, locale?: string, options?: LocalizedDateFormatOptions): LocalizedDatePart[];
+    export function formatTimeLocalized(timeValue: {
+        hour: number;
+        minute: number;
+    }, locale?: string): string;
+    export function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function fromISOtoZonedDateTime(isoString: string, timeZone?: string): ZonedDateTime;
+    export function fromDateValueToISO(dateValue: DateValue, timeZone?: string): string;
+    export function fromDateValueToOffsetISO(dateValue: DateValue, timeZone?: string): string;
+    export function fromLocalToZonedDateTime(date: Date, timeZone?: string): ZonedDateTime;
+    export function fromDateValueToLocal(dateValue: DateValue, timeZone?: string): Date;
+    export function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
         endOfDay?: boolean;
     }): string;
-    function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
-    function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
-    function fromUTCISOToCalendarDateTime(isoString: string, timeZone?: string): CalendarDateTime;
-    function formatTextDateToCalendarDateTime(textDate: string | null, timeZone?: string, locale?: string): CalendarDateTime | null;
+    export function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
+    export function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
+    export function fromUTCISOToCalendarDateTime(isoString: string, timeZone?: string): CalendarDateTime;
+    export function formatTextDateToCalendarDateTime(textDate: string | null, timeZone?: string, locale?: string): CalendarDateTime | null;
+    export {};
 }

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

@@ -1,33 +1,134 @@
-import { CalendarDate, CalendarDateTime, fromDate, getLocalTimeZone, parseAbsolute } from "@internationalized/date";
+import { CalendarDate, CalendarDateTime, DateFormatter, fromDate, getLocalTimeZone, parseAbsolute } from "@internationalized/date";
 import { DateTime } from "luxon";
 //#region src/utils/date-time.utils.ts
 var DateTimeUtils;
 (function(_DateTimeUtils) {
-	function getLocaleDateFormat(locale) {
-		const parts = new Intl.DateTimeFormat(locale, {
+	const DATE_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22));
+	const TIME_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22, 13, 45));
+	const getDayMonthFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
+	const getDatePlaceholderFormatter = (locale, options) => new Intl.DateTimeFormat(locale, {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		year: "numeric"
+	});
+	const getTimePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	});
+	const getResolvedLocale = (locale) => {
+		if (locale) return locale;
+		return new Intl.DateTimeFormat().resolvedOptions().locale;
+	};
+	const getDateFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		year: "numeric",
+		timeZone: "UTC"
+	});
+	const getTimeFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23",
+		timeZone: "UTC"
+	});
+	const getDateTimeFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23",
+		timeZone: "UTC"
+	});
+	const getLocaleDateFormat = (locale) => {
+		const sampleDate = new Date(Date.UTC(2e3, 10, 22));
+		return new Intl.DateTimeFormat(locale, {
 			day: "2-digit",
 			month: "2-digit",
-			year: "numeric"
-		}).formatToParts(new Date(2001, 10, 23));
-		let format = "";
-		for (const part of parts) {
-			if (part.type === "day") {
-				format += "dd";
-				continue;
-			}
-			if (part.type === "month") {
-				format += "MM";
-				continue;
-			}
-			if (part.type === "year") {
-				format += "yyyy";
-				continue;
-			}
-			if (part.type === "literal") format += part.value;
+			year: "numeric",
+			timeZone: "UTC"
+		}).formatToParts(sampleDate).map((part) => {
+			if (part.type === "day") return "dd";
+			if (part.type === "month") return "MM";
+			if (part.type === "year") return "yyyy";
+			return part.value;
+		}).join("");
+	};
+	const repeatLocalizedFieldLabel = (type, length, locale) => {
+		const placeholderChar = new Intl.DisplayNames(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
+		if (!placeholderChar) return null;
+		return placeholderChar.repeat(length);
+	};
+	const mapTypeToPlaceholder = (type, locale) => {
+		switch (type) {
+			case "day": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "month": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "year": return repeatLocalizedFieldLabel(type, 4, locale);
+			case "hour": return "hh";
+			case "minute": return "mm";
+			default: return null;
 		}
-		if (!format.includes("dd") || !format.includes("MM") || !format.includes("yyyy")) return "dd/MM/yyyy";
-		return format;
+	};
+	const formatPlaceholder = (formatter, sampleDate) => {
+		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale) ?? part.value.replace(/\s+/gu, "")).join("");
+	};
+	const removeLeadingZero = (value) => value.replace(/^0+(?=\d)/u, "");
+	const removeDateSeparatorSpacing = (value) => value.replace(/([./-])\s+(?=\d)/gu, "$1");
+	const formatLocalizedDateParts = (formatter, date, options) => {
+		if (options?.shouldForceLeadingZeros !== false) return removeDateSeparatorSpacing(formatter.format(date));
+		return removeDateSeparatorSpacing(formatter.formatToParts(date).map((part) => {
+			if (part.type === "day" || part.type === "month") return removeLeadingZero(part.value);
+			return part.value;
+		}).join(""));
+	};
+	const formatLocalizedDatePartList = (formatter, date, isPlaceholder, options) => {
+		const locale = formatter.resolvedOptions().locale;
+		return formatter.formatToParts(date).map((part) => {
+			const value = options?.shouldForceLeadingZeros === false && (part.type === "day" || part.type === "month") ? removeLeadingZero(part.value) : part.value.replace(/\s+/gu, "");
+			return {
+				type: part.type,
+				value,
+				placeholder: mapTypeToPlaceholder(part.type, locale) ?? part.value.replace(/\s+/gu, ""),
+				isPlaceholder
+			};
+		});
+	};
+	function getDatePlaceholder(locale, options) {
+		return formatPlaceholder(getDatePlaceholderFormatter(locale, options), DATE_SAMPLE_DATE_UTC);
 	}
+	_DateTimeUtils.getDatePlaceholder = getDatePlaceholder;
+	function getTimePlaceholder(locale) {
+		return formatPlaceholder(getTimePlaceholderFormatter(locale), TIME_SAMPLE_DATE_UTC);
+	}
+	_DateTimeUtils.getTimePlaceholder = getTimePlaceholder;
+	function getDateTimePlaceholder(locale, options) {
+		return `${getDatePlaceholder(locale, options)}, ${getTimePlaceholder(locale)}`;
+	}
+	_DateTimeUtils.getDateTimePlaceholder = getDateTimePlaceholder;
+	function getDateRangePlaceholder(locale, options) {
+		const datePlaceholder = getDatePlaceholder(locale, options);
+		return `${datePlaceholder} – ${datePlaceholder}`;
+	}
+	_DateTimeUtils.getDateRangePlaceholder = getDateRangePlaceholder;
+	function formatCalendarDateLocalized(calendarDate, locale, options) {
+		return formatLocalizedDateParts(getDateFormatter(locale, options), calendarDate.toDate("UTC"), options);
+	}
+	_DateTimeUtils.formatCalendarDateLocalized = formatCalendarDateLocalized;
+	function formatCalendarDatePartsLocalized(calendarDate, locale, options) {
+		return formatLocalizedDatePartList(getDateFormatter(locale, options), calendarDate?.toDate("UTC") ?? DATE_SAMPLE_DATE_UTC, !calendarDate, options);
+	}
+	_DateTimeUtils.formatCalendarDatePartsLocalized = formatCalendarDatePartsLocalized;
+	function formatTimeLocalized(timeValue, locale) {
+		const dateTime = new CalendarDateTime(2e3, 11, 22, timeValue.hour, timeValue.minute);
+		return getTimeFormatter(locale).format(dateTime.toDate("UTC"));
+	}
+	_DateTimeUtils.formatTimeLocalized = formatTimeLocalized;
+	function formatCalendarDateTimeLocalized(calendarDateTime, locale, options) {
+		const normalizedValue = new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute);
+		return formatLocalizedDateParts(getDateTimeFormatter(locale, options), normalizedValue.toDate("UTC"), options);
+	}
+	_DateTimeUtils.formatCalendarDateTimeLocalized = formatCalendarDateTimeLocalized;
 	function resolveTimeZone(timeZone) {
 		if (timeZone) return timeZone;
 		return getLocalTimeZone();

package/dist/utils/query.utils.d.ts

@@ -0,0 +1,4 @@
+export declare namespace ApiQueryUtils {
+    const DEFAULT_LIMIT = 20;
+    const DEFAULT_PAGE = 1;
+}

package/dist/utils/query.utils.js

@@ -0,0 +1,8 @@
+//#region src/utils/query.utils.ts
+var ApiQueryUtils;
+(function(_ApiQueryUtils) {
+	_ApiQueryUtils.DEFAULT_LIMIT = 20;
+	_ApiQueryUtils.DEFAULT_PAGE = 1;
+})(ApiQueryUtils || (ApiQueryUtils = {}));
+//#endregion
+export { ApiQueryUtils };

package/dist/utils/routing.utils.d.ts

@@ -1,3 +1,4 @@
 export declare namespace RoutingUtils {
+    const toRouterSearch: (params: URLSearchParams) => Record<string, string | number | boolean>;
     const addQueryParams: (path: string, params: Record<string, string | number | boolean | undefined>) => string;
 }

package/dist/utils/routing.utils.js

@@ -1,6 +1,20 @@
 //#region src/utils/routing.utils.ts
 var RoutingUtils;
 (function(_RoutingUtils) {
+	const isNumericString = (value) => {
+		return /^-?(0|[1-9]\d*)(\.\d+)?$/.test(value);
+	};
+	const coerceQueryValue = (value) => {
+		if (value === "true") return true;
+		if (value === "false") return false;
+		if (isNumericString(value)) return Number(value);
+		return value;
+	};
+	_RoutingUtils.toRouterSearch = (params) => {
+		const search = {};
+		for (const [key, value] of params.entries()) search[key] = coerceQueryValue(value);
+		return search;
+	};
 	_RoutingUtils.addQueryParams = (path, params) => {
 		const sParams = new URLSearchParams();
 		for (const [key, value] of Object.entries(params)) if (value) sParams.append(key, value.toString());