@univerjs/design 0.22.1 → 0.23.0-insiders.20260522-e8f2a3b

package/lib/cjs/index.js

@@ -6,6 +6,7 @@ let tailwind_merge = require("tailwind-merge");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let _radix_ui_react_direction = require("@radix-ui/react-direction");
 let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 let react_dom = require("react-dom");
@@ -261,16 +262,24 @@ function isBrowser() {
 //#region src/components/config-provider/ConfigProvider.tsx
 const ConfigContext = (0, react.createContext)({ mountContainer: isBrowser() ? document.body : null });
 function ConfigProvider(props) {
-	const { children, locale, mountContainer } = props;
+	const { children, locale, mountContainer, direction } = props;
 	const value = (0, react.useMemo)(() => {
 		return {
 			locale,
+			direction,
 			mountContainer
 		};
-	}, [locale, mountContainer]);
+	}, [
+		locale,
+		direction,
+		mountContainer
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigContext.Provider, {
 		value,
-		children
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_direction.DirectionProvider, {
+			dir: direction !== null && direction !== void 0 ? direction : "ltr",
+			children
+		})
 	});
 }
 
@@ -910,6 +919,7 @@ function Dialog(props) {
 * limitations under the License.
 */
 const hsvToRgb = (h, s, v) => {
+	h = h % 360;
 	s = s / 100;
 	v = v / 100;
 	const c = v * s;
@@ -1020,6 +1030,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	const [isDragging, setIsDragging] = (0, react.useState)(false);
 	const sliderRef = (0, react.useRef)(null);
 	const thumbRef = (0, react.useRef)(null);
+	const alphaRef = (0, react.useRef)(alpha);
 	const calculateAlpha = (0, react.useCallback)((clientX) => {
 		var _thumbRef$current$cli, _thumbRef$current;
 		const slider = sliderRef.current;
@@ -1038,10 +1049,13 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 		if (!isDragging) return;
 		calculateAlpha(e.clientX);
 	}, [isDragging, calculateAlpha]);
+	(0, react.useEffect)(() => {
+		alphaRef.current = alpha;
+	}, [alpha]);
 	const handlePointerUp = (0, react.useCallback)(() => {
 		setIsDragging(false);
-		onChanged === null || onChanged === void 0 || onChanged(alpha);
-	}, [alpha]);
+		onChanged === null || onChanged === void 0 || onChanged(alphaRef.current);
+	}, [onChanged]);
 	(0, react.useEffect)(() => {
 		if (isDragging) {
 			window.addEventListener("pointermove", handlePointerMove);
@@ -1068,6 +1082,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	};
 	const color = hsvToRgb(...hsv);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "color-picker-alpha-slider",
 		className: "univer-relative univer-w-full univer-select-none",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-absolute univer-inset-0 univer-rounded-full",
@@ -1078,6 +1093,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			}
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: sliderRef,
+			"data-u-comp": "color-picker-alpha-slider-track",
 			className: "univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",
 			style: { background: `linear-gradient(to right, transparent, rgb(${color.join(",")}))` },
 			onPointerDown: (e) => {
@@ -1086,6 +1102,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			},
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: thumbRef,
+				"data-u-comp": "color-picker-alpha-slider-thumb",
 				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
@@ -1365,7 +1382,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		gradientV.addColorStop(1, "rgba(0, 0, 0, 1)");
 		ctx.fillStyle = gradientV;
 		ctx.fillRect(0, 0, canvas.width, canvas.height);
-	}, [hsv]);
+	}, [hsv[0]]);
 	const handlePointerEvent = (e) => {
 		e.stopPropagation();
 		const canvas = canvasRef.current;
@@ -1379,7 +1396,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 	};
 	const handlePointerUp = (0, react.useCallback)(() => {
 		setIsDragging(false);
-	}, [hsv]);
+	}, []);
 	function handleChange() {
 		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
 	}
@@ -1422,6 +1439,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		className: "univer-relative univer-overflow-hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 			ref: canvasRef,
+			"data-u-comp": "color-picker-spectrum-canvas",
 			className: "univer-size-full univer-cursor-crosshair univer-rounded",
 			onPointerDown: (e) => {
 				setIsDragging(true);
@@ -1456,6 +1474,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 	const [isDragging, setIsDragging] = (0, react.useState)(false);
 	const sliderRef = (0, react.useRef)(null);
 	const thumbRef = (0, react.useRef)(null);
+	const hsvRef = (0, react.useRef)(hsv);
 	const calculateHue = (0, react.useCallback)((clientX) => {
 		var _thumbRef$current$cli, _thumbRef$current;
 		const slider = sliderRef.current;
@@ -1475,10 +1494,14 @@ function HueSlider({ hsv, onChange, onChanged }) {
 		if (!isDragging) return;
 		calculateHue(e.clientX);
 	}, [isDragging, calculateHue]);
+	(0, react.useEffect)(() => {
+		hsvRef.current = hsv;
+	}, [hsv]);
 	const handlePointerUp = (0, react.useCallback)(() => {
 		setIsDragging(false);
-		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
-	}, [hsv, onChanged]);
+		const [h, s, v] = hsvRef.current;
+		onChanged === null || onChanged === void 0 || onChanged(h, s, v);
+	}, [onChanged]);
 	(0, react.useEffect)(() => {
 		if (isDragging) {
 			window.addEventListener("pointermove", handlePointerMove);
@@ -1523,6 +1546,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 			},
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: thumbRef,
+				"data-u-comp": "color-picker-hue-slider-thumb",
 				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
@@ -1925,6 +1949,7 @@ function DraggableList(props) {
 	const pressedHandleIdRef = (0, react.useRef)(null);
 	const dragSourceIdRef = (0, react.useRef)(null);
 	const dragStartIndexRef = (0, react.useRef)(-1);
+	const { direction } = (0, react.useContext)(ConfigContext);
 	(0, react.useEffect)(() => {
 		if (!draggingId) {
 			setDisplayList(list);
@@ -2057,6 +2082,7 @@ function DraggableList(props) {
 			}, itemId);
 		})
 	}), canUsePortal && draggingItem && ghostPosition && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		dir: direction,
 		className: clsx$1("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
 		style: {
 			zIndex: 2147483647,
@@ -2389,6 +2415,7 @@ function Gallery(props) {
 	const [isVisible, setIsVisible] = (0, react.useState)(false);
 	const [activeImageIndex, setActiveImageIndex] = (0, react.useState)(0);
 	const [zoomLevel, setZoomLevel] = (0, react.useState)(1);
+	const { direction } = (0, react.useContext)(ConfigContext);
 	const dialogRef = (0, react.useRef)(null);
 	const activeImage = (0, react.useMemo)(() => images[activeImageIndex], [activeImageIndex, images]);
 	(0, react.useEffect)(() => {
@@ -2436,6 +2463,7 @@ function Gallery(props) {
 	}
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "gallery",
+		dir: direction,
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-label": "Image gallery",
@@ -2829,6 +2857,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 //#region src/components/tooltip/Tooltip.tsx
 function Tooltip(props) {
 	const { children, className, asChild = true, title, placement = "bottom", showIfEllipsis = false, visible: controlledVisible, onVisibleChange } = props;
+	const { direction } = (0, react.useContext)(ConfigContext);
 	const [uncontrolledVisible, setUncontrolledVisible] = (0, react.useState)(false);
 	const isControlled = controlledVisible !== void 0;
 	const visible = isControlled ? controlledVisible : uncontrolledVisible;
@@ -2971,6 +3000,7 @@ function Tooltip(props) {
 		var _coords$top, _coords$left;
 		tooltipNode = (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: tooltipRef,
+			dir: direction,
 			role: "tooltip",
 			className: clsx$1("univer-animate-in univer-fade-in-0 univer-zoom-in-95 univer-pointer-events-auto univer-absolute univer-z-[1081] univer-box-border univer-w-fit univer-max-w-sm univer-text-balance univer-rounded-lg univer-bg-gray-700 univer-px-2.5 univer-py-2 univer-text-xs univer-font-medium univer-text-white univer-shadow-lg univer-drop-shadow-sm dark:!univer-bg-gray-100 dark:!univer-text-gray-900", className),
 			style: {
@@ -3047,6 +3077,19 @@ function GradientColorPicker(props) {
 	const { locale } = (0, react.useContext)(ConfigContext);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
 	const barRef = (0, react.useRef)(null);
+	const cleanupRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		setSelectedIndex((prev) => {
+			if (prev >= value.stops.length) return Math.max(0, value.stops.length - 1);
+			return prev;
+		});
+	}, [value.stops.length]);
+	(0, react.useEffect)(() => {
+		return () => {
+			var _cleanupRef$current;
+			(_cleanupRef$current = cleanupRef.current) === null || _cleanupRef$current === void 0 || _cleanupRef$current.call(cleanupRef);
+		};
+	}, []);
 	const stops = (0, react.useMemo)(() => {
 		return [...value.stops].sort((a, b) => a.offset - b.offset);
 	}, [value.stops]);
@@ -3148,6 +3191,7 @@ function GradientColorPicker(props) {
 				onChange: (v) => handleTypeChange(v)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-u-comp": "gradient-color-picker-preview",
 				className: "univer-h-32 univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600",
 				style: { background: mainPreview }
 			}),
@@ -3155,10 +3199,13 @@ function GradientColorPicker(props) {
 				className: "univer-relative univer-mt-4 univer-h-6",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: barRef,
+					"data-u-comp": "gradient-color-picker-bar",
 					className: "univer-absolute univer-inset-x-0 univer-top-1/2 univer-h-2 -univer-translate-y-1/2 univer-cursor-crosshair univer-rounded-full",
 					style: { background: gradientPreview },
 					onClick: handleAddStop
 				}), value.stops.map((stop, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-u-comp": "gradient-color-picker-stop",
+					"data-selected": selectedIndex === index,
 					className: clsx$1("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-white univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
 					style: {
 						left: `${stop.offset}%`,
@@ -3189,7 +3236,9 @@ function GradientColorPicker(props) {
 						const handlePointerUp = () => {
 							window.removeEventListener("pointermove", handlePointerMove);
 							window.removeEventListener("pointerup", handlePointerUp);
+							cleanupRef.current = null;
 						};
+						cleanupRef.current = handlePointerUp;
 						window.addEventListener("pointermove", handlePointerMove);
 						window.addEventListener("pointerup", handlePointerUp);
 					}
@@ -3227,6 +3276,7 @@ function GradientColorPicker(props) {
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 							title: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.delete,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								"data-u-comp": "gradient-color-picker-delete",
 								variant: "danger",
 								onClick: handleRemoveStop,
 								disabled: value.stops.length <= 2,
@@ -3434,7 +3484,7 @@ function Popup(props) {
 	const { children, visible = false, offset = [0, 0], overflowVisible = false, placementY = "below" } = props;
 	const nodeRef = (0, react.useRef)(null);
 	const [realOffset, setRealOffset] = (0, react.useState)(HIDDEN_POPUP_OFFSET);
-	const { mountContainer } = (0, react.useContext)(ConfigContext);
+	const { mountContainer, direction } = (0, react.useContext)(ConfigContext);
 	const calculateOffset = () => {
 		const element = nodeRef.current;
 		if (!element) return null;
@@ -3490,6 +3540,7 @@ function Popup(props) {
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 			ref: nodeRef,
+			dir: direction,
 			className: "univer-popup",
 			style: {
 				left: realOffset[0] + POPUP_POINTER_OFFSET,

package/lib/es/index.js

@@ -5,6 +5,7 @@ import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slot } from "@radix-ui/react-slot";
+import { DirectionProvider } from "@radix-ui/react-direction";
 import { Close, Content, Description, Overlay, Portal, Root, Title } from "@radix-ui/react-dialog";
 import { Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger } from "@radix-ui/react-popover";
 import { createPortal } from "react-dom";
@@ -260,16 +261,24 @@ function isBrowser() {
 //#region src/components/config-provider/ConfigProvider.tsx
 const ConfigContext = createContext({ mountContainer: isBrowser() ? document.body : null });
 function ConfigProvider(props) {
-	const { children, locale, mountContainer } = props;
+	const { children, locale, mountContainer, direction } = props;
 	const value = useMemo(() => {
 		return {
 			locale,
+			direction,
 			mountContainer
 		};
-	}, [locale, mountContainer]);
+	}, [
+		locale,
+		direction,
+		mountContainer
+	]);
 	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
 		value,
-		children
+		children: /* @__PURE__ */ jsx(DirectionProvider, {
+			dir: direction !== null && direction !== void 0 ? direction : "ltr",
+			children
+		})
 	});
 }
 
@@ -909,6 +918,7 @@ function Dialog(props) {
 * limitations under the License.
 */
 const hsvToRgb = (h, s, v) => {
+	h = h % 360;
 	s = s / 100;
 	v = v / 100;
 	const c = v * s;
@@ -1019,6 +1029,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	const [isDragging, setIsDragging] = useState(false);
 	const sliderRef = useRef(null);
 	const thumbRef = useRef(null);
+	const alphaRef = useRef(alpha);
 	const calculateAlpha = useCallback((clientX) => {
 		var _thumbRef$current$cli, _thumbRef$current;
 		const slider = sliderRef.current;
@@ -1037,10 +1048,13 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 		if (!isDragging) return;
 		calculateAlpha(e.clientX);
 	}, [isDragging, calculateAlpha]);
+	useEffect(() => {
+		alphaRef.current = alpha;
+	}, [alpha]);
 	const handlePointerUp = useCallback(() => {
 		setIsDragging(false);
-		onChanged === null || onChanged === void 0 || onChanged(alpha);
-	}, [alpha]);
+		onChanged === null || onChanged === void 0 || onChanged(alphaRef.current);
+	}, [onChanged]);
 	useEffect(() => {
 		if (isDragging) {
 			window.addEventListener("pointermove", handlePointerMove);
@@ -1067,6 +1081,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	};
 	const color = hsvToRgb(...hsv);
 	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "color-picker-alpha-slider",
 		className: "univer-relative univer-w-full univer-select-none",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "univer-absolute univer-inset-0 univer-rounded-full",
@@ -1077,6 +1092,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			}
 		}), /* @__PURE__ */ jsx("div", {
 			ref: sliderRef,
+			"data-u-comp": "color-picker-alpha-slider-track",
 			className: "univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",
 			style: { background: `linear-gradient(to right, transparent, rgb(${color.join(",")}))` },
 			onPointerDown: (e) => {
@@ -1085,6 +1101,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			},
 			children: /* @__PURE__ */ jsx("div", {
 				ref: thumbRef,
+				"data-u-comp": "color-picker-alpha-slider-thumb",
 				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
@@ -1364,7 +1381,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		gradientV.addColorStop(1, "rgba(0, 0, 0, 1)");
 		ctx.fillStyle = gradientV;
 		ctx.fillRect(0, 0, canvas.width, canvas.height);
-	}, [hsv]);
+	}, [hsv[0]]);
 	const handlePointerEvent = (e) => {
 		e.stopPropagation();
 		const canvas = canvasRef.current;
@@ -1378,7 +1395,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 	};
 	const handlePointerUp = useCallback(() => {
 		setIsDragging(false);
-	}, [hsv]);
+	}, []);
 	function handleChange() {
 		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
 	}
@@ -1421,6 +1438,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		className: "univer-relative univer-overflow-hidden",
 		children: [/* @__PURE__ */ jsx("canvas", {
 			ref: canvasRef,
+			"data-u-comp": "color-picker-spectrum-canvas",
 			className: "univer-size-full univer-cursor-crosshair univer-rounded",
 			onPointerDown: (e) => {
 				setIsDragging(true);
@@ -1455,6 +1473,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 	const [isDragging, setIsDragging] = useState(false);
 	const sliderRef = useRef(null);
 	const thumbRef = useRef(null);
+	const hsvRef = useRef(hsv);
 	const calculateHue = useCallback((clientX) => {
 		var _thumbRef$current$cli, _thumbRef$current;
 		const slider = sliderRef.current;
@@ -1474,10 +1493,14 @@ function HueSlider({ hsv, onChange, onChanged }) {
 		if (!isDragging) return;
 		calculateHue(e.clientX);
 	}, [isDragging, calculateHue]);
+	useEffect(() => {
+		hsvRef.current = hsv;
+	}, [hsv]);
 	const handlePointerUp = useCallback(() => {
 		setIsDragging(false);
-		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
-	}, [hsv, onChanged]);
+		const [h, s, v] = hsvRef.current;
+		onChanged === null || onChanged === void 0 || onChanged(h, s, v);
+	}, [onChanged]);
 	useEffect(() => {
 		if (isDragging) {
 			window.addEventListener("pointermove", handlePointerMove);
@@ -1522,6 +1545,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 			},
 			children: /* @__PURE__ */ jsx("div", {
 				ref: thumbRef,
+				"data-u-comp": "color-picker-hue-slider-thumb",
 				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
@@ -1924,6 +1948,7 @@ function DraggableList(props) {
 	const pressedHandleIdRef = useRef(null);
 	const dragSourceIdRef = useRef(null);
 	const dragStartIndexRef = useRef(-1);
+	const { direction } = useContext(ConfigContext);
 	useEffect(() => {
 		if (!draggingId) {
 			setDisplayList(list);
@@ -2056,6 +2081,7 @@ function DraggableList(props) {
 			}, itemId);
 		})
 	}), canUsePortal && draggingItem && ghostPosition && createPortal(/* @__PURE__ */ jsx("div", {
+		dir: direction,
 		className: clsx("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
 		style: {
 			zIndex: 2147483647,
@@ -2388,6 +2414,7 @@ function Gallery(props) {
 	const [isVisible, setIsVisible] = useState(false);
 	const [activeImageIndex, setActiveImageIndex] = useState(0);
 	const [zoomLevel, setZoomLevel] = useState(1);
+	const { direction } = useContext(ConfigContext);
 	const dialogRef = useRef(null);
 	const activeImage = useMemo(() => images[activeImageIndex], [activeImageIndex, images]);
 	useEffect(() => {
@@ -2435,6 +2462,7 @@ function Gallery(props) {
 	}
 	return createPortal(/* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "gallery",
+		dir: direction,
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-label": "Image gallery",
@@ -2828,6 +2856,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 //#region src/components/tooltip/Tooltip.tsx
 function Tooltip(props) {
 	const { children, className, asChild = true, title, placement = "bottom", showIfEllipsis = false, visible: controlledVisible, onVisibleChange } = props;
+	const { direction } = useContext(ConfigContext);
 	const [uncontrolledVisible, setUncontrolledVisible] = useState(false);
 	const isControlled = controlledVisible !== void 0;
 	const visible = isControlled ? controlledVisible : uncontrolledVisible;
@@ -2970,6 +2999,7 @@ function Tooltip(props) {
 		var _coords$top, _coords$left;
 		tooltipNode = createPortal(/* @__PURE__ */ jsxs("div", {
 			ref: tooltipRef,
+			dir: direction,
 			role: "tooltip",
 			className: clsx("univer-animate-in univer-fade-in-0 univer-zoom-in-95 univer-pointer-events-auto univer-absolute univer-z-[1081] univer-box-border univer-w-fit univer-max-w-sm univer-text-balance univer-rounded-lg univer-bg-gray-700 univer-px-2.5 univer-py-2 univer-text-xs univer-font-medium univer-text-white univer-shadow-lg univer-drop-shadow-sm dark:!univer-bg-gray-100 dark:!univer-text-gray-900", className),
 			style: {
@@ -3046,6 +3076,19 @@ function GradientColorPicker(props) {
 	const { locale } = useContext(ConfigContext);
 	const [selectedIndex, setSelectedIndex] = useState(0);
 	const barRef = useRef(null);
+	const cleanupRef = useRef(null);
+	useEffect(() => {
+		setSelectedIndex((prev) => {
+			if (prev >= value.stops.length) return Math.max(0, value.stops.length - 1);
+			return prev;
+		});
+	}, [value.stops.length]);
+	useEffect(() => {
+		return () => {
+			var _cleanupRef$current;
+			(_cleanupRef$current = cleanupRef.current) === null || _cleanupRef$current === void 0 || _cleanupRef$current.call(cleanupRef);
+		};
+	}, []);
 	const stops = useMemo(() => {
 		return [...value.stops].sort((a, b) => a.offset - b.offset);
 	}, [value.stops]);
@@ -3147,6 +3190,7 @@ function GradientColorPicker(props) {
 				onChange: (v) => handleTypeChange(v)
 			}),
 			/* @__PURE__ */ jsx("div", {
+				"data-u-comp": "gradient-color-picker-preview",
 				className: "univer-h-32 univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600",
 				style: { background: mainPreview }
 			}),
@@ -3154,10 +3198,13 @@ function GradientColorPicker(props) {
 				className: "univer-relative univer-mt-4 univer-h-6",
 				children: [/* @__PURE__ */ jsx("div", {
 					ref: barRef,
+					"data-u-comp": "gradient-color-picker-bar",
 					className: "univer-absolute univer-inset-x-0 univer-top-1/2 univer-h-2 -univer-translate-y-1/2 univer-cursor-crosshair univer-rounded-full",
 					style: { background: gradientPreview },
 					onClick: handleAddStop
 				}), value.stops.map((stop, index) => /* @__PURE__ */ jsx("div", {
+					"data-u-comp": "gradient-color-picker-stop",
+					"data-selected": selectedIndex === index,
 					className: clsx("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-white univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
 					style: {
 						left: `${stop.offset}%`,
@@ -3188,7 +3235,9 @@ function GradientColorPicker(props) {
 						const handlePointerUp = () => {
 							window.removeEventListener("pointermove", handlePointerMove);
 							window.removeEventListener("pointerup", handlePointerUp);
+							cleanupRef.current = null;
 						};
+						cleanupRef.current = handlePointerUp;
 						window.addEventListener("pointermove", handlePointerMove);
 						window.addEventListener("pointerup", handlePointerUp);
 					}
@@ -3226,6 +3275,7 @@ function GradientColorPicker(props) {
 						children: /* @__PURE__ */ jsx(Tooltip, {
 							title: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.delete,
 							children: /* @__PURE__ */ jsx(Button, {
+								"data-u-comp": "gradient-color-picker-delete",
 								variant: "danger",
 								onClick: handleRemoveStop,
 								disabled: value.stops.length <= 2,
@@ -3433,7 +3483,7 @@ function Popup(props) {
 	const { children, visible = false, offset = [0, 0], overflowVisible = false, placementY = "below" } = props;
 	const nodeRef = useRef(null);
 	const [realOffset, setRealOffset] = useState(HIDDEN_POPUP_OFFSET);
-	const { mountContainer } = useContext(ConfigContext);
+	const { mountContainer, direction } = useContext(ConfigContext);
 	const calculateOffset = () => {
 		const element = nodeRef.current;
 		if (!element) return null;
@@ -3489,6 +3539,7 @@ function Popup(props) {
 		},
 		children: /* @__PURE__ */ jsx("section", {
 			ref: nodeRef,
+			dir: direction,
 			className: "univer-popup",
 			style: {
 				left: realOffset[0] + POPUP_POINTER_OFFSET,