@vellira-ui/react-native 2.40.0 → 2.41.0

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export type { SelectOption, SelectProps } from './components/Select';
 export { Select } from './components/Select';
 export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, } from './components/Tabs';
 export { Tabs } from './components/Tabs';
-export type { TooltipProps } from './components/Tooltip';
+export type { TooltipArrowProps, TooltipContentProps, TooltipProps, TooltipRootProps, TooltipTriggerProps, } from './components/Tooltip';
 export { Tooltip } from './components/Tooltip';
 export type { FormFieldProps } from './patterns/FormField';
 export { FormField } from './patterns/FormField';

package/dist/index.js

@@ -4155,6 +4155,50 @@ const Tabs = Object.assign(TabsRoot, {
 });
 Tabs.displayName = "Tabs";
 //#endregion
+//#region src/components/Tooltip/internal/TooltipContext.tsx
+const TooltipContext = createContext(null);
+const TooltipProvider = TooltipContext.Provider;
+const useTooltipContext = () => {
+	const context = useContext(TooltipContext);
+	if (!context) throw new Error("Tooltip components must be used inside <Tooltip>.");
+	return context;
+};
+TooltipContext.displayName = "TooltipContext";
+//#endregion
+//#region src/components/Tooltip/Arrow/TooltipArrow.tsx
+const TooltipArrow = ({ style }) => {
+	const { theme } = useTheme();
+	const tooltip = useTooltipContext();
+	const size = theme.components.tooltip.arrow.size;
+	const side = tooltip.placement.split("-")[0];
+	const staticSide = {
+		top: "bottom",
+		right: "left",
+		bottom: "top",
+		left: "right"
+	}[side];
+	const crossAxisStyle = side === "left" || side === "right" ? {
+		top: "50%",
+		marginTop: -size / 2
+	} : {
+		left: "50%",
+		marginLeft: -size / 2
+	};
+	return /* @__PURE__ */ jsx(View, {
+		pointerEvents: "none",
+		style: [{
+			position: "absolute",
+			width: size,
+			height: size,
+			backgroundColor: theme.components.tooltip.arrow.bg,
+			transform: [{ rotate: "45deg" }],
+			[staticSide]: -size / 2,
+			...crossAxisStyle
+		}, style]
+	});
+};
+TooltipArrow.displayName = "Tooltip.Arrow";
+//#endregion
 //#region src/components/Tooltip/Tooltip.styles.ts
 const createStyles$3 = (theme) => StyleSheet.create({
 	root: { alignSelf: "flex-start" },
@@ -4162,13 +4206,13 @@ const createStyles$3 = (theme) => StyleSheet.create({
 	bubble: {
 		position: "absolute",
 		zIndex: 1e3,
-		maxWidth: 280,
-		paddingHorizontal: theme.tokens.spacing[3],
-		paddingVertical: theme.tokens.spacing[2],
+		maxWidth: theme.components.tooltip.content.maxWidth,
+		paddingHorizontal: theme.components.tooltip.content.paddingX,
+		paddingVertical: theme.components.tooltip.content.paddingY,
 		backgroundColor: theme.components.tooltip.content.bg,
 		borderColor: theme.components.tooltip.content.border,
-		borderRadius: theme.tokens.radius.sm,
-		borderWidth: 1,
+		borderRadius: theme.components.tooltip.content.radius,
+		borderWidth: theme.components.tooltip.content.borderWidth,
 		shadowColor: theme.tokens.shadows.md.color,
 		shadowOffset: {
 			width: theme.tokens.shadows.md.x,
@@ -4182,83 +4226,192 @@ const createStyles$3 = (theme) => StyleSheet.create({
 		flexShrink: 1,
 		color: theme.components.tooltip.content.fg,
 		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.sm,
-		lineHeight: theme.tokens.typography.lineHeight.sm,
+		fontSize: theme.components.tooltip.content.fontSize,
+		lineHeight: theme.components.tooltip.content.lineHeight,
 		textAlign: "center"
 	}
 });
 //#endregion
-//#region src/components/Tooltip/Tooltip.tsx
-function Tooltip({ children, content, placement = "top", disabled = false, maxWidth = 240, delay, style, contentStyle, textStyle }) {
+//#region src/components/Tooltip/Content/TooltipContent.tsx
+const TooltipContent = ({ children, forceMount = false, style, textStyle }) => {
 	const styles = useThemeStyles(createStyles$3);
-	const overlayId = useId();
-	const [visible, setVisible] = useState(false);
+	const tooltip = useTooltipContext();
+	const visible = tooltip.open && !tooltip.disabled;
+	if (!forceMount && !visible) return null;
+	const bubble = /* @__PURE__ */ jsx(View, {
+		nativeID: tooltip.contentId,
+		pointerEvents: "none",
+		style: [
+			styles.bubble,
+			{
+				top: tooltip.position.top,
+				left: tooltip.position.left
+			},
+			!visible && { display: "none" },
+			style
+		],
+		onLayout: tooltip.onFloatingLayout,
+		children: Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx(Text, {
+			style: [styles.text, textStyle],
+			children: child
+		}) : child)
+	});
+	if (!visible) return bubble;
+	return /* @__PURE__ */ jsx(Modal$1, {
+		visible,
+		transparent: true,
+		animationType: "fade",
+		onRequestClose: tooltip.requestClose,
+		children: /* @__PURE__ */ jsx(Pressable, {
+			style: styles.overlay,
+			onPress: tooltip.requestOutsideClose,
+			children: bubble
+		})
+	});
+};
+TooltipContent.displayName = "Tooltip.Content";
+//#endregion
+//#region src/components/Tooltip/internal/useTooltipDelay.ts
+const resolveTooltipDelay = (delay) => {
+	if (typeof delay === "number") return {
+		open: delay,
+		close: 2500
+	};
+	return {
+		open: delay?.open ?? 0,
+		close: delay?.close ?? 2500
+	};
+};
+//#endregion
+//#region src/components/Tooltip/Root/TooltipRoot.tsx
+const TooltipRoot = ({ children, open: openProp, defaultOpen = false, onOpenChange, placement = "top", disabled = false, delay, offset = 8, closeOnOutsidePress = true, style }) => {
+	const contentId = `${useId()}-content`;
 	const triggerRef = useRef(null);
 	const closeTimerRef = useRef(null);
-	const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, 8);
-	const hideDelay = delay?.close ?? 2500;
-	const clearCloseTimer = () => {
+	const resolvedDelay = useMemo(() => resolveTooltipDelay(delay), [delay]);
+	const [open, setOpenState] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
+	const clearCloseTimer = useCallback(() => {
 		if (closeTimerRef.current) {
 			clearTimeout(closeTimerRef.current);
 			closeTimerRef.current = null;
 		}
-	};
-	const dismiss = useNativeDismiss({
-		id: overlayId,
-		visible: visible && !disabled,
-		onClose: () => {
-			clearCloseTimer();
-			setVisible(false);
-		}
-	});
-	const showTooltip = () => {
+	}, []);
+	const setOpen = useCallback((nextOpen) => {
+		if (disabled && nextOpen) return;
+		setOpenState(nextOpen);
+	}, [disabled, setOpenState]);
+	const hide = useCallback(() => {
+		clearCloseTimer();
+		setOpen(false);
+	}, [clearCloseTimer, setOpen]);
+	const show = useCallback(() => {
 		if (disabled) return;
 		clearCloseTimer();
 		updatePosition(triggerRef);
-		setVisible(true);
-		closeTimerRef.current = setTimeout(() => {
-			setVisible(false);
-			closeTimerRef.current = null;
-		}, hideDelay);
-	};
+		const openTooltip = () => {
+			setOpen(true);
+			closeTimerRef.current = setTimeout(() => {
+				setOpen(false);
+				closeTimerRef.current = null;
+			}, resolvedDelay.close);
+		};
+		if (resolvedDelay.open > 0) {
+			closeTimerRef.current = setTimeout(openTooltip, resolvedDelay.open);
+			return;
+		}
+		openTooltip();
+	}, [
+		clearCloseTimer,
+		disabled,
+		resolvedDelay,
+		setOpen,
+		updatePosition
+	]);
+	const dismiss = useNativeDismiss({
+		id: contentId,
+		visible: open && !disabled,
+		closeOnOutsidePress,
+		onClose: hide
+	});
+	useEffect(() => {
+		if (disabled && open) hide();
+	}, [
+		disabled,
+		hide,
+		open
+	]);
 	useEffect(() => {
 		return clearCloseTimer;
-	}, []);
-	return /* @__PURE__ */ jsxs(View, {
-		style: [styles.root, style],
-		children: [/* @__PURE__ */ jsx(Pressable, {
-			ref: triggerRef,
-			onLongPress: showTooltip,
+	}, [clearCloseTimer]);
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		value: useMemo(() => ({
+			contentId,
+			open,
+			disabled,
+			placement,
+			position,
+			triggerRef,
+			setOpen,
+			show,
+			hide,
+			requestClose: dismiss.requestClose,
+			requestOutsideClose: dismiss.requestOutsideClose,
+			onFloatingLayout
+		}), [
+			contentId,
+			disabled,
+			dismiss.requestClose,
+			dismiss.requestOutsideClose,
+			hide,
+			open,
+			placement,
+			position,
+			setOpen,
+			show,
+			onFloatingLayout
+		]),
+		children: /* @__PURE__ */ jsx(View, {
+			style,
 			children
-		}), /* @__PURE__ */ jsx(Modal$1, {
-			visible: visible && !disabled,
-			transparent: true,
-			animationType: "fade",
-			onRequestClose: dismiss.requestClose,
-			children: /* @__PURE__ */ jsx(Pressable, {
-				style: styles.overlay,
-				onPress: dismiss.requestOutsideClose,
-				children: /* @__PURE__ */ jsx(View, {
-					pointerEvents: "none",
-					style: [
-						styles.bubble,
-						{
-							maxWidth,
-							top: position.top,
-							left: position.left
-						},
-						contentStyle
-					],
-					onLayout: onFloatingLayout,
-					children: typeof content === "string" ? /* @__PURE__ */ jsx(Text, {
-						style: [styles.text, textStyle],
-						children: content
-					}) : content
-				})
-			})
-		})]
+		})
 	});
-}
+};
+TooltipRoot.displayName = "Tooltip.Root";
+//#endregion
+//#region src/components/Tooltip/Trigger/TooltipTrigger.tsx
+const TooltipTrigger = ({ children, disabled, onLongPress, style, ...props }) => {
+	const tooltip = useTooltipContext();
+	const isDisabled = tooltip.disabled || disabled;
+	return /* @__PURE__ */ jsx(Pressable, {
+		...props,
+		ref: tooltip.triggerRef,
+		accessibilityState: {
+			...props.accessibilityState,
+			disabled: isDisabled || props.accessibilityState?.disabled
+		},
+		disabled: isDisabled,
+		onLongPress: (event) => {
+			onLongPress?.(event);
+			if (event.defaultPrevented) return;
+			tooltip.show();
+		},
+		style,
+		children
+	});
+};
+TooltipTrigger.displayName = "Tooltip.Trigger";
+//#endregion
+//#region src/components/Tooltip/Tooltip.tsx
+const Tooltip = Object.assign(TooltipRoot, {
+	Trigger: TooltipTrigger,
+	Content: TooltipContent,
+	Arrow: TooltipArrow
+});
 Tooltip.displayName = "Tooltip";
 //#endregion
 //#region src/utils/devWarning.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.40.0",
+  "version": "2.41.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",