@povio/ui 2.2.11 → 2.2.12

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.11",
+  "version": "2.2.12",
   "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": "^4.2.4",
     "tailwindcss-react-aria-components": "^2.0.1",
-    "zod": "^4.3.5"
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "@casl/ability": "^6.7.3",