@povio/ui 2.2.11 → 2.3.0

package/dist/components/inputs/DateTime/shared/Calendar.js

@@ -52,6 +52,30 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 		}
 		setToggleState("year");
 	};
+	const handleHeaderMonthNavigation = (months) => {
+		if (toggleState) return;
+		if (!onMonthYearChange) return;
+		const focusedDate = props.state.focusedDate;
+		if (months === -1) {
+			onMonthYearChange(focusedDate.subtract({ months: 1 }));
+			return;
+		}
+		onMonthYearChange(focusedDate.add({ months: 1 }));
+	};
+	const headerPrevButtonProps = {
+		...prevButtonProps,
+		onPress: (event) => {
+			prevButtonProps.onPress?.(event);
+			handleHeaderMonthNavigation(-1);
+		}
+	};
+	const headerNextButtonProps = {
+		...nextButtonProps,
+		onPress: (event) => {
+			nextButtonProps.onPress?.(event);
+			handleHeaderMonthNavigation(1);
+		}
+	};
 	const handleDateChange = () => {
 		if (includesTime && !datePickerState.value) setToggleState("time");
 		else onApply();
@@ -112,8 +136,8 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 		children: [/* @__PURE__ */ jsx(CalendarHeader, {
 			calendarState: props.state,
 			datePickerState,
-			prevButtonProps,
-			nextButtonProps,
+			prevButtonProps: headerPrevButtonProps,
+			nextButtonProps: headerNextButtonProps,
 			includesTime,
 			hourCycle,
 			granularity,

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -188,7 +188,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-(--visual-viewport-height) left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
+						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[100dvh] left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
 						children: footer
 					})
 				] })

package/dist/components/segment/Segment.js

@@ -11,7 +11,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
 //#region src/components/segment/Segment.tsx
-var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...rest }) => {
+var SegmentBase = ({ className, items, error, onChange, value, defaultValue, segmentItemClassName, ...rest }) => {
 	const props = {
 		...rest,
 		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
@@ -49,6 +49,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...
 			style: { gridTemplateColumns },
 			children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
 				...item,
+				className: clsx(item.className, segmentItemClassName),
 				isDisabled: item.isDisabled || props.isDisabled,
 				isSelected: state.selectedKeys.has(item.id),
 				onPress: () => {

package/dist/components/segment/SegmentItem.d.ts

@@ -1,2 +1,2 @@
 import { SegmentItem as SegmentItemProps } from './segment.types';
-export declare const SegmentItem: ({ label, icon, id, isDisabled, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentItem: ({ label, icon, id, isDisabled, className, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/SegmentItem.js

@@ -4,14 +4,17 @@ import { segmentItemCva } from "./segment.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
 //#region src/components/segment/SegmentItem.tsx
-var SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
+var SegmentItem = ({ label, icon, id, isDisabled, className, ...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
 	const segmentItemCva$1 = UIStyle.useCva("segment.itemCva", segmentItemCva);
 	return /* @__PURE__ */ jsxs(ToggleButton, {
 		...props,
 		id,
-		className: segmentItemCva$1({ iconOnly }),
+		className: segmentItemCva$1({
+			iconOnly,
+			className
+		}),
 		isDisabled,
 		children: [icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }), label && /* @__PURE__ */ jsx(Typography, {
 			size: "label-2",

package/dist/components/segment/segment.types.d.ts

@@ -30,6 +30,7 @@ export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps &
     ref?: Ref<HTMLElement>;
     items: SegmentItem<TKey>[];
     className?: string;
+    segmentItemClassName?: string;
     error?: string;
 } & GroupedSegmentProps<TKey>;
 export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> & GroupedSegmentControlProps<TFieldValues, TKey>;

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/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: import('react').RefObject<T | null>;
+    ref: (node: T | null) => void;
 };
 export {};

package/dist/hooks/useIntersectionObserver.js

@@ -1,8 +1,12 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useState } from "react";
 //#region src/hooks/useIntersectionObserver.ts
 var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
-	const ref = useRef(null);
+	const [element, setElement] = useState(null);
+	const ref = useCallback((node) => {
+		setElement(node);
+	}, []);
 	useEffect(() => {
+		if (!element) return;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries.some((entry) => entry.isIntersecting)) onIntersection?.();
 			onIntersectionChange?.(entries[0]);
@@ -11,13 +15,15 @@ var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, roo
 			rootMargin,
 			threshold
 		});
-		if (ref.current) observer.observe(ref.current);
+		observer.observe(element);
 		return () => observer.disconnect();
 	}, [
-		ref,
+		element,
 		root,
 		onIntersection,
-		onIntersectionChange
+		onIntersectionChange,
+		rootMargin,
+		threshold
 	]);
 	return { ref };
 };

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.11",
+  "version": "2.3.0",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,9 +47,9 @@
     "react-responsive": "^10.0.1",
     "react-stately": "^3.44.0",
     "react-toastify": "^11.0.5",
-    "tailwindcss": "^4.2.1",
-    "tailwindcss-react-aria-components": "^2.0.1",
-    "zod": "^4.3.5"
+    "tailwindcss": "^4.2.4",
+    "tailwindcss-react-aria-components": "^2.1.0",
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "@casl/ability": "^6.7.3",