@povio/ui 2.2.12 → 2.3.0

package/dist/config/router.context.d.ts

@@ -1,15 +1,14 @@
 import { PropsWithChildren } from 'react';
 interface UIRouterProviderProps {
-    push: (url: string) => Promise<boolean>;
-    replace: (url: string) => Promise<boolean>;
-    pathname: string;
+    push: (path: string, params?: Record<string, unknown>) => Promise<boolean>;
+    replace: (path: string, params?: Record<string, unknown>) => Promise<boolean>;
     searchString: string;
 }
 interface UIRouterContextValue extends UIRouterProviderProps {
     searchParams: URLSearchParams;
 }
 export declare namespace UIRouter {
-    const UIRouterProvider: ({ children, pathname, push, replace, searchString, }: PropsWithChildren<UIRouterProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    const UIRouterProvider: ({ children, push, replace, searchString, }: PropsWithChildren<UIRouterProviderProps>) => import("react/jsx-runtime").JSX.Element;
     const useUIRouter: () => UIRouterContextValue;
 }
 export {};

package/dist/config/router.context.js

@@ -5,20 +5,18 @@ import { RouterProvider } from "react-aria";
 var UIRouter;
 (function(_UIRouter) {
 	const UIRouterContext = createContext(null);
-	_UIRouter.UIRouterProvider = ({ children, pathname, push, replace, searchString }) => {
+	_UIRouter.UIRouterProvider = ({ children, push, replace, searchString }) => {
 		const searchParams = useMemo(() => {
 			return new URLSearchParams(searchString);
 		}, [searchString]);
 		return /* @__PURE__ */ jsx(UIRouterContext, {
 			value: useMemo(() => ({
 				searchParams,
-				pathname,
 				push,
 				searchString,
 				replace
 			}), [
 				searchParams,
-				pathname,
 				push,
 				searchString,
 				replace

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/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/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.js

@@ -126,6 +126,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 +135,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 };

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());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.12",
+  "version": "2.3.0",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -48,7 +48,7 @@
     "react-stately": "^3.44.0",
     "react-toastify": "^11.0.5",
     "tailwindcss": "^4.2.4",
-    "tailwindcss-react-aria-components": "^2.0.1",
+    "tailwindcss-react-aria-components": "^2.1.0",
     "zod": "^4.4.3"
   },
   "peerDependencies": {