@redis-ui/components 47.3.3 → 47.5.0

package/dist/node_modules/@radix-ui/react-tooltip/dist/index.js

@@ -2,7 +2,7 @@
 import { composeEventHandlers } from "../../primitive/dist/index.js";
 import { useComposedRefs } from "../../react-compose-refs/dist/index.js";
 import { createContextScope } from "../../react-context/dist/index.js";
-import { Slottable } from "../../react-slot/dist/index.js";
+import { createSlottable } from "../../react-slot/dist/index.js";
 import { Primitive } from "../../react-primitive/dist/index.js";
 import { DismissableLayer } from "../../react-dismissable-layer/dist/index.js";
 import { useId } from "../../react-id/dist/index.js";
@@ -22,7 +22,7 @@ var TOOLTIP_OPEN = "tooltip.open";
 var [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME);
 var TooltipProvider = (props) => {
 	const { __scopeTooltip, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300, disableHoverableContent = false, children } = props;
-	const [isOpenDelayed, setIsOpenDelayed] = React$1.useState(true);
+	const isOpenDelayedRef = React$1.useRef(true);
 	const isPointerInTransitRef = React$1.useRef(false);
 	const skipDelayTimerRef = React$1.useRef(0);
 	React$1.useEffect(() => {
@@ -31,15 +31,15 @@ var TooltipProvider = (props) => {
 	}, []);
 	return /* @__PURE__ */ jsx(TooltipProviderContextProvider, {
 		scope: __scopeTooltip,
-		isOpenDelayed,
+		isOpenDelayedRef,
 		delayDuration,
 		onOpen: React$1.useCallback(() => {
 			window.clearTimeout(skipDelayTimerRef.current);
-			setIsOpenDelayed(false);
+			isOpenDelayedRef.current = false;
 		}, []),
 		onClose: React$1.useCallback(() => {
 			window.clearTimeout(skipDelayTimerRef.current);
-			skipDelayTimerRef.current = window.setTimeout(() => setIsOpenDelayed(true), skipDelayDuration);
+			skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
 		}, [skipDelayDuration]),
 		isPointerInTransitRef,
 		onPointerInTransitChange: React$1.useCallback((inTransit) => {
@@ -53,7 +53,7 @@ TooltipProvider.displayName = PROVIDER_NAME;
 var TOOLTIP_NAME = "Tooltip";
 var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
 var Tooltip = (props) => {
-	const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent: disableHoverableContentProp, delayDuration: delayDurationProp } = props;
+	const { __scopeTooltip, children, open: openProp, defaultOpen, onOpenChange, disableHoverableContent: disableHoverableContentProp, delayDuration: delayDurationProp } = props;
 	const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);
 	const popperScope = usePopperScope(__scopeTooltip);
 	const [trigger, setTrigger] = React$1.useState(null);
@@ -62,27 +62,30 @@ var Tooltip = (props) => {
 	const disableHoverableContent = disableHoverableContentProp ?? providerContext.disableHoverableContent;
 	const delayDuration = delayDurationProp ?? providerContext.delayDuration;
 	const wasOpenDelayedRef = React$1.useRef(false);
-	const [open = false, setOpen] = useControllableState({
+	const [open, setOpen] = useControllableState({
 		prop: openProp,
-		defaultProp: defaultOpen,
+		defaultProp: defaultOpen ?? false,
 		onChange: (open2) => {
 			if (open2) {
 				providerContext.onOpen();
 				document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
 			} else providerContext.onClose();
 			onOpenChange?.(open2);
-		}
+		},
+		caller: TOOLTIP_NAME
 	});
 	const stateAttribute = React$1.useMemo(() => {
 		return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
 	}, [open]);
 	const handleOpen = React$1.useCallback(() => {
 		window.clearTimeout(openTimerRef.current);
+		openTimerRef.current = 0;
 		wasOpenDelayedRef.current = false;
 		setOpen(true);
 	}, [setOpen]);
 	const handleClose = React$1.useCallback(() => {
 		window.clearTimeout(openTimerRef.current);
+		openTimerRef.current = 0;
 		setOpen(false);
 	}, [setOpen]);
 	const handleDelayedOpen = React$1.useCallback(() => {
@@ -90,10 +93,16 @@ var Tooltip = (props) => {
 		openTimerRef.current = window.setTimeout(() => {
 			wasOpenDelayedRef.current = true;
 			setOpen(true);
+			openTimerRef.current = 0;
 		}, delayDuration);
 	}, [delayDuration, setOpen]);
 	React$1.useEffect(() => {
-		return () => window.clearTimeout(openTimerRef.current);
+		return () => {
+			if (openTimerRef.current) {
+				window.clearTimeout(openTimerRef.current);
+				openTimerRef.current = 0;
+			}
+		};
 	}, []);
 	return /* @__PURE__ */ jsx(Root2, {
 		...popperScope,
@@ -105,16 +114,19 @@ var Tooltip = (props) => {
 			trigger,
 			onTriggerChange: setTrigger,
 			onTriggerEnter: React$1.useCallback(() => {
-				if (providerContext.isOpenDelayed) handleDelayedOpen();
+				if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
 				else handleOpen();
 			}, [
-				providerContext.isOpenDelayed,
+				providerContext.isOpenDelayedRef,
 				handleDelayedOpen,
 				handleOpen
 			]),
 			onTriggerLeave: React$1.useCallback(() => {
 				if (disableHoverableContent) handleClose();
-				else window.clearTimeout(openTimerRef.current);
+				else {
+					window.clearTimeout(openTimerRef.current);
+					openTimerRef.current = 0;
+				}
 			}, [handleClose, disableHoverableContent]),
 			onOpen: handleOpen,
 			onClose: handleClose,
@@ -157,6 +169,7 @@ var TooltipTrigger = React$1.forwardRef((props, forwardedRef) => {
 				hasPointerMoveOpenedRef.current = false;
 			}),
 			onPointerDown: composeEventHandlers(props.onPointerDown, () => {
+				if (context.open) context.onClose();
 				isPointerDownRef.current = true;
 				document.addEventListener("pointerup", handlePointerUp, { once: true });
 			}),
@@ -282,6 +295,7 @@ var TooltipContentHoverable = React$1.forwardRef((props, forwardedRef) => {
 	});
 });
 var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
+var Slottable = createSlottable("TooltipContent");
 var TooltipContentImpl = React$1.forwardRef((props, forwardedRef) => {
 	const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
 	const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
@@ -424,10 +438,12 @@ function isPointInPolygon(point, polygon) {
 	const { x, y } = point;
 	let inside = false;
 	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-		const xi = polygon[i].x;
-		const yi = polygon[i].y;
-		const xj = polygon[j].x;
-		const yj = polygon[j].y;
+		const ii = polygon[i];
+		const jj = polygon[j];
+		const xi = ii.x;
+		const yi = ii.y;
+		const xj = jj.x;
+		const yj = jj.y;
 		if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
 	}
 	return inside;

package/dist/node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs

@@ -1,44 +1,57 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
-const require_index = require("../../react-use-callback-ref/dist/index.cjs");
+const require_index = require("../../react-use-layout-effect/dist/index.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 //#region ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-function useControllableState({ prop, defaultProp, onChange = () => {} }) {
-	const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+var useInsertionEffect = react[" useInsertionEffect ".trim().toString()] || require_index.useLayoutEffect2;
+function useControllableState({ prop, defaultProp, onChange = () => {}, caller }) {
+	const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
 		defaultProp,
 		onChange
 	});
 	const isControlled = prop !== void 0;
 	const value = isControlled ? prop : uncontrolledProp;
-	const handleChange = require_index.useCallbackRef(onChange);
+	{
+		const isControlledRef = react.useRef(prop !== void 0);
+		react.useEffect(() => {
+			const wasControlled = isControlledRef.current;
+			if (wasControlled !== isControlled) console.warn(`${caller} is changing from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`);
+			isControlledRef.current = isControlled;
+		}, [isControlled, caller]);
+	}
 	return [value, react.useCallback((nextValue) => {
 		if (isControlled) {
-			const value2 = typeof nextValue === "function" ? nextValue(prop) : nextValue;
-			if (value2 !== prop) handleChange(value2);
+			const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+			if (value2 !== prop) onChangeRef.current?.(value2);
 		} else setUncontrolledProp(nextValue);
 	}, [
 		isControlled,
 		prop,
 		setUncontrolledProp,
-		handleChange
+		onChangeRef
 	])];
 }
 function useUncontrolledState({ defaultProp, onChange }) {
-	const uncontrolledState = react.useState(defaultProp);
-	const [value] = uncontrolledState;
+	const [value, setValue] = react.useState(defaultProp);
 	const prevValueRef = react.useRef(value);
-	const handleChange = require_index.useCallbackRef(onChange);
+	const onChangeRef = react.useRef(onChange);
+	useInsertionEffect(() => {
+		onChangeRef.current = onChange;
+	}, [onChange]);
 	react.useEffect(() => {
 		if (prevValueRef.current !== value) {
-			handleChange(value);
+			onChangeRef.current?.(value);
 			prevValueRef.current = value;
 		}
-	}, [
+	}, [value, prevValueRef]);
+	return [
 		value,
-		prevValueRef,
-		handleChange
-	]);
-	return uncontrolledState;
+		setValue,
+		onChangeRef
+	];
+}
+function isFunction(value) {
+	return typeof value === "function";
 }
 //#endregion
 exports.useControllableState = useControllableState;

package/dist/node_modules/@radix-ui/react-use-controllable-state/dist/index.js

@@ -1,42 +1,55 @@
-import { useCallbackRef } from "../../react-use-callback-ref/dist/index.js";
+import { useLayoutEffect2 } from "../../react-use-layout-effect/dist/index.js";
 import * as React$1 from "react";
 //#region ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-function useControllableState({ prop, defaultProp, onChange = () => {} }) {
-	const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+var useInsertionEffect = React$1[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({ prop, defaultProp, onChange = () => {}, caller }) {
+	const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
 		defaultProp,
 		onChange
 	});
 	const isControlled = prop !== void 0;
 	const value = isControlled ? prop : uncontrolledProp;
-	const handleChange = useCallbackRef(onChange);
+	{
+		const isControlledRef = React$1.useRef(prop !== void 0);
+		React$1.useEffect(() => {
+			const wasControlled = isControlledRef.current;
+			if (wasControlled !== isControlled) console.warn(`${caller} is changing from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`);
+			isControlledRef.current = isControlled;
+		}, [isControlled, caller]);
+	}
 	return [value, React$1.useCallback((nextValue) => {
 		if (isControlled) {
-			const value2 = typeof nextValue === "function" ? nextValue(prop) : nextValue;
-			if (value2 !== prop) handleChange(value2);
+			const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+			if (value2 !== prop) onChangeRef.current?.(value2);
 		} else setUncontrolledProp(nextValue);
 	}, [
 		isControlled,
 		prop,
 		setUncontrolledProp,
-		handleChange
+		onChangeRef
 	])];
 }
 function useUncontrolledState({ defaultProp, onChange }) {
-	const uncontrolledState = React$1.useState(defaultProp);
-	const [value] = uncontrolledState;
+	const [value, setValue] = React$1.useState(defaultProp);
 	const prevValueRef = React$1.useRef(value);
-	const handleChange = useCallbackRef(onChange);
+	const onChangeRef = React$1.useRef(onChange);
+	useInsertionEffect(() => {
+		onChangeRef.current = onChange;
+	}, [onChange]);
 	React$1.useEffect(() => {
 		if (prevValueRef.current !== value) {
-			handleChange(value);
+			onChangeRef.current?.(value);
 			prevValueRef.current = value;
 		}
-	}, [
+	}, [value, prevValueRef]);
+	return [
 		value,
-		prevValueRef,
-		handleChange
-	]);
-	return uncontrolledState;
+		setValue,
+		onChangeRef
+	];
+}
+function isFunction(value) {
+	return typeof value === "function";
 }
 //#endregion
 export { useControllableState };

package/dist/node_modules/@radix-ui/react-use-layout-effect/dist/index.cjs

@@ -2,6 +2,6 @@ const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 //#region ../../node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-var useLayoutEffect2 = Boolean(globalThis?.document) ? react.useLayoutEffect : () => {};
+var useLayoutEffect2 = globalThis?.document ? react.useLayoutEffect : () => {};
 //#endregion
 exports.useLayoutEffect2 = useLayoutEffect2;

package/dist/node_modules/@radix-ui/react-use-layout-effect/dist/index.js

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
 //#region ../../node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-var useLayoutEffect2 = Boolean(globalThis?.document) ? React$1.useLayoutEffect : () => {};
+var useLayoutEffect2 = globalThis?.document ? React$1.useLayoutEffect : () => {};
 //#endregion
 export { useLayoutEffect2 };

package/dist/node_modules/@radix-ui/react-visually-hidden/dist/index.cjs

@@ -4,22 +4,25 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 //#region ../../node_modules/@radix-ui/react-visually-hidden/dist/index.mjs
+var VISUALLY_HIDDEN_STYLES = Object.freeze({
+	position: "absolute",
+	border: 0,
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	wordWrap: "normal"
+});
 var NAME = "VisuallyHidden";
 var VisuallyHidden = react.forwardRef((props, forwardedRef) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Primitive.span, {
 		...props,
 		ref: forwardedRef,
 		style: {
-			position: "absolute",
-			border: 0,
-			width: 1,
-			height: 1,
-			padding: 0,
-			margin: -1,
-			overflow: "hidden",
-			clip: "rect(0, 0, 0, 0)",
-			whiteSpace: "nowrap",
-			wordWrap: "normal",
+			...VISUALLY_HIDDEN_STYLES,
 			...props.style
 		}
 	});
@@ -28,4 +31,4 @@ VisuallyHidden.displayName = NAME;
 var Root = VisuallyHidden;
 //#endregion
 exports.Root = Root;
-exports.VisuallyHidden = VisuallyHidden;
+exports.VISUALLY_HIDDEN_STYLES = VISUALLY_HIDDEN_STYLES;

package/dist/node_modules/@radix-ui/react-visually-hidden/dist/index.js

@@ -2,22 +2,25 @@ import { Primitive } from "../../react-primitive/dist/index.js";
 import { jsx } from "react/jsx-runtime";
 import * as React$1 from "react";
 //#region ../../node_modules/@radix-ui/react-visually-hidden/dist/index.mjs
+var VISUALLY_HIDDEN_STYLES = Object.freeze({
+	position: "absolute",
+	border: 0,
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	wordWrap: "normal"
+});
 var NAME = "VisuallyHidden";
 var VisuallyHidden = React$1.forwardRef((props, forwardedRef) => {
 	return /* @__PURE__ */ jsx(Primitive.span, {
 		...props,
 		ref: forwardedRef,
 		style: {
-			position: "absolute",
-			border: 0,
-			width: 1,
-			height: 1,
-			padding: 0,
-			margin: -1,
-			overflow: "hidden",
-			clip: "rect(0, 0, 0, 0)",
-			whiteSpace: "nowrap",
-			wordWrap: "normal",
+			...VISUALLY_HIDDEN_STYLES,
 			...props.style
 		}
 	});
@@ -25,4 +28,4 @@ var VisuallyHidden = React$1.forwardRef((props, forwardedRef) => {
 VisuallyHidden.displayName = NAME;
 var Root = VisuallyHidden;
 //#endregion
-export { Root, VisuallyHidden };
+export { Root, VISUALLY_HIDDEN_STYLES };