@univerjs/design 1.0.0-alpha.7 → 1.0.0-beta.0

package/lib/cjs/index.js

@@ -14,7 +14,6 @@ let cmdk = require("cmdk");
 let react_dom = require("react-dom");
 let _radix_ui_react_hover_card = require("@radix-ui/react-hover-card");
 let sonner = require("sonner");
-let react_transition_group = require("react-transition-group");
 let _radix_ui_react_separator = require("@radix-ui/react-separator");
 let react_dom_client = require("react-dom/client");
 
@@ -27,10 +26,9 @@ function clsx$1(...inputs) {
 //#endregion
 //#region src/components/accordion/Accordion.tsx
 function Accordion(props) {
-	var _props$openIndex;
 	const { className, defaultOpenIndex = null, items, onOpenIndexChange } = props;
 	const [innerOpenIndex, setInnerOpenIndex] = (0, react.useState)(defaultOpenIndex);
-	const openIndex = (_props$openIndex = props.openIndex) !== null && _props$openIndex !== void 0 ? _props$openIndex : innerOpenIndex;
+	const openIndex = props.openIndex ?? innerOpenIndex;
 	const toggleItem = (index) => {
 		const nextOpenIndex = openIndex === index ? null : index;
 		if (props.openIndex === void 0) setInnerOpenIndex(nextOpenIndex);
@@ -39,30 +37,27 @@ function Accordion(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-u-comp": "accordion",
 		className: clsx$1("univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200 dark:!univer-divide-gray-600", className),
-		children: items.map((item, index) => {
-			var _item$id;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-white",
-				type: "button",
-				onClick: () => toggleItem(index),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: clsx$1("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
-					"-univer-rotate-90": openIndex !== index,
-					"univer-rotate-0": openIndex === index
-				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "univer-font-medium",
-					children: item.label
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: clsx$1("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out", {
-					"univer-max-h-screen": openIndex === index,
-					"univer-max-h-0": openIndex !== index
-				}),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-box-border univer-px-4 univer-py-1.5",
-					children: item.children
-				})
-			})] }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
-		})
+		children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-white",
+			type: "button",
+			onClick: () => toggleItem(index),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: clsx$1("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
+				"-univer-rotate-90": openIndex !== index,
+				"univer-rotate-0": openIndex === index
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-font-medium",
+				children: item.label
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: clsx$1("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out", {
+				"univer-max-h-screen": openIndex === index,
+				"univer-max-h-0": openIndex !== index
+			}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-box-border univer-px-4 univer-py-1.5",
+				children: item.children
+			})
+		})] }, item.id ?? index))
 	});
 }
 
@@ -160,7 +155,7 @@ function ConfigProvider(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigContext.Provider, {
 		value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_direction.DirectionProvider, {
-			dir: direction !== null && direction !== void 0 ? direction : "ltr",
+			dir: direction ?? "ltr",
 			children
 		})
 	});
@@ -541,7 +536,7 @@ function pad(value, length = 2) {
 	return String(value).padStart(length, "0");
 }
 function formatDateWithPattern(value, pattern) {
-	const date = value !== null && value !== void 0 ? value : /* @__PURE__ */ new Date();
+	const date = value ?? /* @__PURE__ */ new Date();
 	if (Number.isNaN(date.getTime())) return "Invalid Date";
 	const tokenMap = {
 		YYYY: String(date.getFullYear()),
@@ -551,10 +546,7 @@ function formatDateWithPattern(value, pattern) {
 		mm: pad(date.getMinutes()),
 		ss: pad(date.getSeconds())
 	};
-	return pattern.replace(/YYYY|MM|DD|HH|mm|ss/g, (token) => {
-		var _tokenMap$token;
-		return (_tokenMap$token = tokenMap[token]) !== null && _tokenMap$token !== void 0 ? _tokenMap$token : token;
-	});
+	return pattern.replace(/YYYY|MM|DD|HH|mm|ss/g, (token) => tokenMap[token] ?? token);
 }
 
 //#endregion
@@ -563,7 +555,7 @@ function TimeInput(props) {
 	const { className, value, onValueChange } = props;
 	function handleChangeTime(event) {
 		const [hours, minutes, seconds] = event.target.value.split(":").map(Number);
-		const newValue = new Date(value !== null && value !== void 0 ? value : Date.now());
+		const newValue = new Date(value ?? Date.now());
 		newValue.setHours(hours, minutes, seconds, 0);
 		onValueChange === null || onValueChange === void 0 || onValueChange(newValue);
 	}
@@ -661,8 +653,8 @@ function Calendar(props) {
 	const { direction = "ltr", locale } = (0, react.useContext)(ConfigContext);
 	const { ariaLabels, year, weekDays, months } = locale === null || locale === void 0 ? void 0 : locale.Calendar;
 	const today = /* @__PURE__ */ new Date();
-	const [currentYear, setCurrentYear] = (0, react.useState)((value !== null && value !== void 0 ? value : today).getFullYear());
-	const [currentMonth, setCurrentMonth] = (0, react.useState)((value !== null && value !== void 0 ? value : today).getMonth());
+	const [currentYear, setCurrentYear] = (0, react.useState)((value ?? today).getFullYear());
+	const [currentMonth, setCurrentMonth] = (0, react.useState)((value ?? today).getMonth());
 	const [yearDropdownOpen, setYearDropdownOpen] = (0, react.useState)(false);
 	function prevMonth() {
 		setCurrentMonth((prev) => {
@@ -690,9 +682,8 @@ function Calendar(props) {
 		setYearDropdownOpen(false);
 	}
 	const yearOptions = (0, react.useMemo)(() => {
-		var _min$getFullYear, _max$getFullYear;
-		const startYear = (_min$getFullYear = min === null || min === void 0 ? void 0 : min.getFullYear()) !== null && _min$getFullYear !== void 0 ? _min$getFullYear : currentYear - DEFAULT_YEAR_RANGE;
-		const endYear = (_max$getFullYear = max === null || max === void 0 ? void 0 : max.getFullYear()) !== null && _max$getFullYear !== void 0 ? _max$getFullYear : currentYear + DEFAULT_YEAR_RANGE;
+		const startYear = (min === null || min === void 0 ? void 0 : min.getFullYear()) ?? currentYear - DEFAULT_YEAR_RANGE;
+		const endYear = (max === null || max === void 0 ? void 0 : max.getFullYear()) ?? currentYear + DEFAULT_YEAR_RANGE;
 		return Array.from({ length: Math.max(0, endYear - startYear + 1) }, (_, index) => ({ year: startYear + index }));
 	}, [
 		currentYear,
@@ -725,31 +716,28 @@ function Calendar(props) {
 		return day && currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate();
 	}
 	function isDisabled(day) {
-		var _value$getHours, _value$getMinutes, _value$getSeconds;
 		if (!day) return false;
-		const hours = (_value$getHours = value === null || value === void 0 ? void 0 : value.getHours()) !== null && _value$getHours !== void 0 ? _value$getHours : today.getHours();
-		const minutes = (_value$getMinutes = value === null || value === void 0 ? void 0 : value.getMinutes()) !== null && _value$getMinutes !== void 0 ? _value$getMinutes : today.getMinutes();
-		const seconds = (_value$getSeconds = value === null || value === void 0 ? void 0 : value.getSeconds()) !== null && _value$getSeconds !== void 0 ? _value$getSeconds : today.getSeconds();
+		const hours = (value === null || value === void 0 ? void 0 : value.getHours()) ?? today.getHours();
+		const minutes = (value === null || value === void 0 ? void 0 : value.getMinutes()) ?? today.getMinutes();
+		const seconds = (value === null || value === void 0 ? void 0 : value.getSeconds()) ?? today.getSeconds();
 		const d = new Date(currentYear, currentMonth, day, hours, minutes, seconds);
 		if (min && d < min) return true;
 		if (max && d > max) return true;
 		return false;
 	}
 	function handleChangeDate(day) {
-		var _value$getHours2, _value$getMinutes2, _value$getSeconds2;
 		if (isDisabled(day)) return;
-		const hours = (_value$getHours2 = value === null || value === void 0 ? void 0 : value.getHours()) !== null && _value$getHours2 !== void 0 ? _value$getHours2 : today.getHours();
-		const minutes = (_value$getMinutes2 = value === null || value === void 0 ? void 0 : value.getMinutes()) !== null && _value$getMinutes2 !== void 0 ? _value$getMinutes2 : today.getMinutes();
-		const seconds = (_value$getSeconds2 = value === null || value === void 0 ? void 0 : value.getSeconds()) !== null && _value$getSeconds2 !== void 0 ? _value$getSeconds2 : today.getSeconds();
+		const hours = (value === null || value === void 0 ? void 0 : value.getHours()) ?? today.getHours();
+		const minutes = (value === null || value === void 0 ? void 0 : value.getMinutes()) ?? today.getMinutes();
+		const seconds = (value === null || value === void 0 ? void 0 : value.getSeconds()) ?? today.getSeconds();
 		const selectedDate = new Date(currentYear, currentMonth, day, hours, minutes, seconds);
 		onValueChange === null || onValueChange === void 0 || onValueChange(selectedDate);
 	}
 	function handleChangeTime(time) {
-		var _value$getDate;
 		const hours = time.getHours();
 		const minutes = time.getMinutes();
 		const seconds = time.getSeconds();
-		const updatedDate = new Date(currentYear, currentMonth, (_value$getDate = value === null || value === void 0 ? void 0 : value.getDate()) !== null && _value$getDate !== void 0 ? _value$getDate : today.getDate(), hours, minutes, seconds);
+		const updatedDate = new Date(currentYear, currentMonth, (value === null || value === void 0 ? void 0 : value.getDate()) ?? today.getDate(), hours, minutes, seconds);
 		onValueChange === null || onValueChange === void 0 || onValueChange(updatedDate);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -927,7 +915,7 @@ function CheckboxGroup(props) {
 				key: index,
 				children: child.props.children,
 				checked: child.props.value ? value.includes(child.props.value) : false,
-				disabled: disabled !== null && disabled !== void 0 ? disabled : child.props.disabled,
+				disabled: disabled ?? child.props.disabled,
 				onChange: handleChange
 			});
 			return child;
@@ -948,8 +936,8 @@ function Checkbox(props) {
 		if (!onChange || disabled) return;
 		if (typeof value !== "undefined") onChange === null || onChange === void 0 || onChange(value);
 		else {
-			var _inputRef$current$che, _inputRef$current;
-			const checked = (_inputRef$current$che = inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.checked) !== null && _inputRef$current$che !== void 0 ? _inputRef$current$che : false;
+			var _inputRef$current;
+			const checked = (inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.checked) ?? false;
 			onChange === null || onChange === void 0 || onChange(checked);
 		}
 	}
@@ -995,7 +983,7 @@ const DialogOverlay = (0, react.forwardRef)(({ className, ...props }, ref) => /*
 }));
 DialogOverlay.displayName = _radix_ui_react_dialog.Overlay.displayName;
 const DialogContent = (0, react.forwardRef)(({ className, children, closable = true, onClickClose, mountContainer, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, {
-	container: mountContainer !== null && mountContainer !== void 0 ? mountContainer : void 0,
+	container: mountContainer ?? void 0,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
 		ref,
 		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-white univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
@@ -1109,7 +1097,8 @@ function useDraggable(options = {}) {
 		if (!isDragging) return;
 		e.preventDefault();
 		e.stopPropagation();
-		setPosition(calculateBounds(e.clientX, e.clientY));
+		const newPosition = calculateBounds(e.clientX, e.clientY);
+		setPosition(newPosition);
 	}, [isDragging, calculateBounds]);
 	const endDrag = (0, react.useCallback)(() => {
 		setIsDragging(false);
@@ -1161,7 +1150,7 @@ function Dialog(props) {
 		defaultPosition,
 		enabled: draggable
 	});
-	const footer = propFooter !== null && propFooter !== void 0 ? propFooter : showOk || showCancel ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const footer = propFooter ?? (showOk || showCancel ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "univer-flex univer-justify-end univer-gap-2",
 		children: [showCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 			onClick: onCancel,
@@ -1171,7 +1160,7 @@ function Dialog(props) {
 			onClick: onOk,
 			children: locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
 		})]
-	}) : null;
+	}) : null);
 	const handleContentRef = (0, react.useCallback)((node) => {
 		if (node && draggable) setElementRef(node);
 	}, [draggable, setElementRef]);
@@ -1367,10 +1356,10 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	const thumbRef = (0, react.useRef)(null);
 	const alphaRef = (0, react.useRef)(alpha);
 	const calculateAlpha = (0, react.useCallback)((clientX) => {
-		var _thumbRef$current$cli, _thumbRef$current;
+		var _thumbRef$current;
 		const slider = sliderRef.current;
 		if (!slider) return;
-		const thumbSize = (_thumbRef$current$cli = (_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) !== null && _thumbRef$current$cli !== void 0 ? _thumbRef$current$cli : 0;
+		const thumbSize = ((_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) ?? 0;
 		const rect = slider.getBoundingClientRect();
 		const maxX = rect.width - thumbSize;
 		if (maxX <= 0) {
@@ -1408,10 +1397,10 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 		handlePointerUp
 	]);
 	const getThumbPosition = () => {
-		var _thumbRef$current$cli2, _thumbRef$current2, _sliderRef$current$cl, _sliderRef$current;
+		var _thumbRef$current2, _sliderRef$current;
 		const safeAlpha = Math.min(Math.max(alpha * 100, 0), 100);
-		const thumbSize = (_thumbRef$current$cli2 = (_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) !== null && _thumbRef$current$cli2 !== void 0 ? _thumbRef$current$cli2 : 0;
-		const sliderWidth = (_sliderRef$current$cl = (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) !== null && _sliderRef$current$cl !== void 0 ? _sliderRef$current$cl : 0;
+		const thumbSize = ((_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) ?? 0;
+		const sliderWidth = ((_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) ?? 0;
 		const thumbOffsetPercent = sliderWidth > 0 ? thumbSize / sliderWidth * 100 : 0;
 		return `${safeAlpha / 100 * (100 - thumbOffsetPercent)}%`;
 	};
@@ -1498,7 +1487,7 @@ function RgbInput({ hsv, alpha, format, onChange }) {
 			r: Math.round(r),
 			g: Math.round(g),
 			b: Math.round(b),
-			a: alpha !== null && alpha !== void 0 ? alpha : 1
+			a: alpha ?? 1
 		});
 	}, [hsv, alpha]);
 	const handleChange = (color, value) => {
@@ -1506,10 +1495,11 @@ function RgbInput({ hsv, alpha, format, onChange }) {
 			if (value !== "" && !/^\d*\.?\d*$/.test(value)) return;
 			const numValue = value === "" ? 0 : Number.parseFloat(value);
 			if (numValue > 1) return;
-			setLocalValues({
+			const newValues = {
 				...localValues,
 				a: numValue
-			});
+			};
+			setLocalValues(newValues);
 			if (onChange) onChange(hsv[0], hsv[1], hsv[2], numValue);
 			return;
 		}
@@ -1529,7 +1519,7 @@ function RgbInput({ hsv, alpha, format, onChange }) {
 			r: Math.round(r),
 			g: Math.round(g),
 			b: Math.round(b),
-			a: alpha !== null && alpha !== void 0 ? alpha : 1
+			a: alpha ?? 1
 		});
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1748,10 +1738,10 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		};
 	}, [hsv]);
 	const getIndicatorStyles = () => {
-		var _containerRef$current3, _containerRef$current4, _containerRef$current5, _containerRef$current6;
+		var _containerRef$current3, _containerRef$current4;
 		const halfIndicatorSize = 16 / 2;
-		const w = (_containerRef$current3 = (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.clientWidth) !== null && _containerRef$current3 !== void 0 ? _containerRef$current3 : 0;
-		const h = (_containerRef$current5 = (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.clientHeight) !== null && _containerRef$current5 !== void 0 ? _containerRef$current5 : 0;
+		const w = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.clientWidth) ?? 0;
+		const h = ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.clientHeight) ?? 0;
 		return {
 			transform: `translate(${hsv[1] / 100 * w - halfIndicatorSize}px, ${(100 - hsv[2]) / 100 * h - halfIndicatorSize}px)`,
 			transition: isDragging ? "none" : "transform 0.1s ease-out"
@@ -1811,10 +1801,10 @@ function HueSlider({ hsv, onChange, onChanged }) {
 	const thumbRef = (0, react.useRef)(null);
 	const hsvRef = (0, react.useRef)(hsv);
 	const calculateHue = (0, react.useCallback)((clientX) => {
-		var _thumbRef$current$cli, _thumbRef$current;
+		var _thumbRef$current;
 		const slider = sliderRef.current;
 		if (!slider) return;
-		const thumbSize = (_thumbRef$current$cli = (_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) !== null && _thumbRef$current$cli !== void 0 ? _thumbRef$current$cli : 0;
+		const thumbSize = ((_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) ?? 0;
 		const rect = slider.getBoundingClientRect();
 		const maxX = rect.width - thumbSize;
 		if (maxX <= 0) {
@@ -1854,10 +1844,10 @@ function HueSlider({ hsv, onChange, onChanged }) {
 		handlePointerUp
 	]);
 	const getThumbPosition = () => {
-		var _thumbRef$current$cli2, _thumbRef$current2, _sliderRef$current$cl, _sliderRef$current;
+		var _thumbRef$current2, _sliderRef$current;
 		const safeHue = Math.min(Math.max(hsv[0], 0), 360);
-		const thumbSize = (_thumbRef$current$cli2 = (_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) !== null && _thumbRef$current$cli2 !== void 0 ? _thumbRef$current$cli2 : 0;
-		const sliderWidth = (_sliderRef$current$cl = (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) !== null && _sliderRef$current$cl !== void 0 ? _sliderRef$current$cl : 0;
+		const thumbSize = ((_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) ?? 0;
+		const sliderWidth = ((_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) ?? 0;
 		const thumbOffsetPercent = sliderWidth > 0 ? thumbSize / sliderWidth * 100 : 0;
 		return `${safeHue / 360 * (100 - thumbOffsetPercent)}%`;
 	};
@@ -2134,11 +2124,11 @@ function Footer(props) {
 		className: "univer-flex univer-items-center univer-justify-end univer-gap-2",
 		children: [closable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 			onClick: onClose,
-			children: cancelText !== null && cancelText !== void 0 ? cancelText : locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel
+			children: cancelText ?? (locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 			variant: "primary",
 			onClick: onConfirm,
-			children: confirmText !== null && confirmText !== void 0 ? confirmText : locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
+			children: confirmText ?? (locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm)
 		})]
 	});
 }
@@ -2394,7 +2384,10 @@ function DraggableList(props) {
 				onPointerDownCapture: (e) => {
 					if (pointerIdRef.current !== null) return;
 					if (!draggableHandle) pressedHandleIdRef.current = itemId;
-					else pressedHandleIdRef.current = !!e.target.closest(draggableHandle) ? itemId : null;
+					else {
+						const isMatched = !!e.target.closest(draggableHandle);
+						pressedHandleIdRef.current = isMatched ? itemId : null;
+					}
 					if (pressedHandleIdRef.current !== itemId) return;
 					const rect = e.currentTarget.getBoundingClientRect();
 					dragPointerOffsetRef.current = {
@@ -2504,7 +2497,7 @@ const FormDualColumnLayout = (props) => {
 */
 function Pager(props) {
 	const { className, value: current = 0, total: count = 0, loop, text: propText, onChange } = props;
-	const text = propText !== null && propText !== void 0 ? propText : `${current}/${count}`;
+	const text = propText ?? `${current}/${count}`;
 	const hasValue = count > 0;
 	const onClickLeftArrow = () => {
 		if (current === 1) {
@@ -2650,7 +2643,7 @@ function Gallery(props) {
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
-				className: "univer-absolute univer-bottom-6 univer-left-1/2 univer-flex -univer-translate-x-1/2 univer-items-center univer-gap-3 univer-rounded-full univer-bg-gray-800 univer-px-6 univer-py-3 univer-text-gray-400",
+				className: "univer-absolute univer-bottom-6 univer-left-1/2 univer-flex -univer-translate-x-1/2 univer-items-center univer-gap-3 univer-rounded-full univer-bg-gray-800 univer-px-6 univer-py-3 univer-text-gray-400 rtl:univer-flex-row-reverse",
 				children: [
 					hasPagination && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pager, {
 						className: "!univer-text-gray-400 [&_[data-u-comp=pager-left-arrow]:hover]:!univer-bg-gray-600 [&_[data-u-comp=pager-right-arrow]:hover]:!univer-bg-gray-600",
@@ -2976,14 +2969,16 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 			const containerRect = containerRef.current.getBoundingClientRect();
 			const newRect = newItemElement.getBoundingClientRect();
 			const newLeft = newRect.left - containerRect.left - SEGMENTED_PADDING;
-			if (oldItemElement) setSlideStyle({
-				"--slide-from": `${oldItemElement.getBoundingClientRect().left - containerRect.left - SEGMENTED_PADDING}px`,
-				"--slide-to": `${newLeft}px`,
-				left: `${SEGMENTED_PADDING}px`,
-				width: `${newRect.width}px`,
-				transform: `translateX(${newLeft}px)`
-			});
-			else setSlideStyle({
+			if (oldItemElement) {
+				const oldLeft = oldItemElement.getBoundingClientRect().left - containerRect.left - SEGMENTED_PADDING;
+				setSlideStyle({
+					"--slide-from": `${oldLeft}px`,
+					"--slide-to": `${newLeft}px`,
+					left: `${SEGMENTED_PADDING}px`,
+					width: `${newRect.width}px`,
+					transform: `translateX(${newLeft}px)`
+				});
+			} else setSlideStyle({
 				left: `${SEGMENTED_PADDING}px`,
 				width: `${newRect.width}px`,
 				transform: `translateX(${newLeft}px)`
@@ -3165,50 +3160,47 @@ function Tooltip(props) {
 		children
 	});
 	let tooltipNode = null;
-	if (typeof document !== "undefined" && visible && title && document.body) {
-		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),
+	if (typeof document !== "undefined" && visible && title && document.body) 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: {
+			top: (coords === null || coords === void 0 ? void 0 : coords.top) ?? -9999,
+			left: (coords === null || coords === void 0 ? void 0 : coords.left) ?? -9999
+		},
+		onMouseEnter: () => showTooltip(),
+		onMouseLeave: () => hideTooltip(),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-break-words",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: arrowRef,
+			className: "univer-absolute univer-size-2.5 univer-rotate-45 univer-rounded-sm univer-bg-gray-700 dark:!univer-bg-gray-100",
 			style: {
-				top: (_coords$top = coords === null || coords === void 0 ? void 0 : coords.top) !== null && _coords$top !== void 0 ? _coords$top : -9999,
-				left: (_coords$left = coords === null || coords === void 0 ? void 0 : coords.left) !== null && _coords$left !== void 0 ? _coords$left : -9999
-			},
-			onMouseEnter: () => showTooltip(),
-			onMouseLeave: () => hideTooltip(),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-break-words",
-				children: title
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: arrowRef,
-				className: "univer-absolute univer-size-2.5 univer-rotate-45 univer-rounded-sm univer-bg-gray-700 dark:!univer-bg-gray-100",
-				style: {
-					...currentPlacement === "bottom" && {
-						top: -5,
-						left: "50%",
-						transform: "translateX(-50%) rotate(45deg)"
-					},
-					...currentPlacement === "top" && {
-						bottom: -5,
-						left: "50%",
-						transform: "translateX(-50%) rotate(45deg)"
-					},
-					...currentPlacement === "left" && {
-						right: -5,
-						top: "50%",
-						transform: "translateY(-50%) rotate(45deg)"
-					},
-					...currentPlacement === "right" && {
-						left: -5,
-						top: "50%",
-						transform: "translateY(-50%) rotate(45deg)"
-					}
+				...currentPlacement === "bottom" && {
+					top: -5,
+					left: "50%",
+					transform: "translateX(-50%) rotate(45deg)"
+				},
+				...currentPlacement === "top" && {
+					bottom: -5,
+					left: "50%",
+					transform: "translateX(-50%) rotate(45deg)"
+				},
+				...currentPlacement === "left" && {
+					right: -5,
+					top: "50%",
+					transform: "translateY(-50%) rotate(45deg)"
+				},
+				...currentPlacement === "right" && {
+					left: -5,
+					top: "50%",
+					transform: "translateY(-50%) rotate(45deg)"
 				}
-			})]
-		}), document.body);
-	}
+			}
+		})]
+	}), document.body);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [triggerElement, tooltipNode] });
 }
 
@@ -3244,8 +3236,7 @@ function clamp(value, min, max) {
 	return Math.max(min, Math.min(max, value));
 }
 function getStopOpacity(stop) {
-	var _stop$opacity;
-	return clamp((_stop$opacity = stop === null || stop === void 0 ? void 0 : stop.opacity) !== null && _stop$opacity !== void 0 ? _stop$opacity : 1, 0, 1);
+	return clamp((stop === null || stop === void 0 ? void 0 : stop.opacity) ?? 1, 0, 1);
 }
 function getColorWithOpacity(color, opacity) {
 	if (opacity >= 1) return color;
@@ -3268,8 +3259,7 @@ function getStopColor(stop) {
 	return getColorWithOpacity(stop.color, getStopOpacity(stop));
 }
 function getGradientAngle(value) {
-	var _ref, _value$angle;
-	return (_ref = (_value$angle = value.angle) !== null && _value$angle !== void 0 ? _value$angle : DEFAULT_VALUE.angle) !== null && _ref !== void 0 ? _ref : 0;
+	return value.angle ?? DEFAULT_VALUE.angle ?? 0;
 }
 function getCssLinearGradientAngle(value) {
 	return (getGradientAngle(value) + 90) % 360;
@@ -3318,7 +3308,7 @@ function GradientColorPicker(props) {
 	const handleAngleChange = (angle) => {
 		emitChange({
 			...valueRef.current,
-			angle: angle !== null && angle !== void 0 ? angle : 0
+			angle: angle ?? 0
 		});
 	};
 	const handleStopColorChange = (color) => {
@@ -3345,7 +3335,7 @@ function GradientColorPicker(props) {
 		});
 	};
 	const handleStopTransparencyChange = (transparency) => {
-		const nextTransparency = clamp(transparency !== null && transparency !== void 0 ? transparency : 0, 0, 100);
+		const nextTransparency = clamp(transparency ?? 0, 0, 100);
 		const newStops = [...valueRef.current.stops];
 		newStops[selectedIndex] = {
 			...newStops[selectedIndex],
@@ -3727,7 +3717,7 @@ const Messager = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runt
 	...props
 });
 const message = ({ content, duration, id, onClose, type = "info" }) => {
-	const messageId = id !== null && id !== void 0 ? id : createMessageId();
+	const messageId = id ?? createMessageId();
 	const method = resolveToastMethod(type);
 	let closed = false;
 	const handleClose = () => {
@@ -3739,7 +3729,7 @@ const message = ({ content, duration, id, onClose, type = "info" }) => {
 	method(content, {
 		id: messageId,
 		toasterId: MESSAGE_TOASTER_ID,
-		duration: duration !== null && duration !== void 0 ? duration : DEFAULT_MESSAGE_DURATION,
+		duration: duration ?? DEFAULT_MESSAGE_DURATION,
 		icon: type === "loading" ? void 0 : iconMap[type],
 		onDismiss: handleClose,
 		onAutoClose: handleClose
@@ -3839,9 +3829,10 @@ function PanelField(props) {
 //#endregion
 //#region src/components/popup/Popup.tsx
 const POPUP_POINTER_OFFSET = 2;
+const DEFAULT_POPUP_OFFSET = [0, 0];
 const HIDDEN_POPUP_OFFSET = [-9999, -9999];
 function Popup(props) {
-	const { children, visible = false, offset = [0, 0], overflowVisible = false, placementY = "below" } = props;
+	const { children, visible = false, offset = DEFAULT_POPUP_OFFSET, overflowVisible = false, placementY = "below" } = props;
 	const nodeRef = (0, react.useRef)(null);
 	const [realOffset, setRealOffset] = (0, react.useState)(HIDDEN_POPUP_OFFSET);
 	const { mountContainer, direction } = (0, react.useContext)(ConfigContext);
@@ -3887,29 +3878,17 @@ function Popup(props) {
 	function preventDefault(event) {
 		event.preventDefault();
 	}
-	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
-		in: visible,
-		nodeRef,
-		timeout: 500,
-		classNames: {
-			enter: "univer-popup-enter",
-			enterActive: "univer-popup-enter-active",
-			enterDone: "univer-popup-enter-done",
-			exitActive: "univer-popup-exit",
-			exitDone: "univer-popup-exit-active"
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		ref: nodeRef,
+		dir: direction,
+		className: clsx$1("univer-popup univer-fixed univer-z-[1070] univer-origin-top-left univer-overflow-hidden univer-rounded-md univer-shadow univer-transition-[transform,opacity] univer-duration-150", visible ? "univer-[transition-timing-function:cubic-bezier(0.08,0.82,0.17,1)] univer-scale-y-100 univer-opacity-100" : "univer-[transition-timing-function:cubic-bezier(0.6,0.04,0.98,0.34)] univer-scale-y-0 univer-opacity-0"),
+		style: {
+			left: realOffset[0] + POPUP_POINTER_OFFSET,
+			top: realOffset[1] + POPUP_POINTER_OFFSET,
+			overflow: overflowVisible ? "visible" : void 0
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-			ref: nodeRef,
-			dir: direction,
-			className: "univer-popup",
-			style: {
-				left: realOffset[0] + POPUP_POINTER_OFFSET,
-				top: realOffset[1] + POPUP_POINTER_OFFSET,
-				overflow: overflowVisible ? "visible" : void 0
-			},
-			onContextMenu: preventDefault,
-			children
-		})
+		onContextMenu: preventDefault,
+		children
 	}), mountContainer);
 }
 
@@ -3932,7 +3911,7 @@ function RadioGroup(props) {
 				children: child.props.children,
 				value: child.props.value,
 				checked: value === child.props.value,
-				disabled: disabled !== null && disabled !== void 0 ? disabled : child.props.disabled,
+				disabled: disabled ?? child.props.disabled,
 				onChange: handleChange
 			});
 			return child;
@@ -4116,13 +4095,19 @@ function MultipleSelect(props) {
 				disabled: option.disabled,
 				checked: value.includes(option.value),
 				onSelect: (item) => {
-					onChange(value.includes(item) ? value.filter((v) => v !== item) : [...value, item]);
+					const newValue = value.includes(item) ? value.filter((v) => v !== item) : [...value, item];
+					onChange(newValue);
 				}
 			};
 		});
-	}, [options]);
+	}, [
+		onChange,
+		options,
+		value
+	]);
 	function handleClose(item) {
-		onChange(value.filter((v) => v !== item));
+		const newValue = value.filter((v) => v !== item);
+		onChange(newValue);
 	}
 	const displayValue = (0, react.useMemo)(() => {
 		return options.filter((option) => value.includes(option.value)).map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
@@ -4273,7 +4258,7 @@ function Toaster({ visibleToasts, ...props }) {
 			error: "[&_[data-icon]]:univer-text-red-500",
 			warning: "[&_[data-icon]]:univer-text-yellow-500"
 		} },
-		visibleToasts: visibleToasts !== null && visibleToasts !== void 0 ? visibleToasts : 5,
+		visibleToasts: visibleToasts ?? 5,
 		...props
 	});
 }
@@ -4295,7 +4280,7 @@ const findNodePathFromTree = (tree, key) => {
 	return result;
 };
 const createCacheWithFindNodePathFromTree = (tree, defaultCache) => {
-	const cache = defaultCache !== null && defaultCache !== void 0 ? defaultCache : /* @__PURE__ */ new Map();
+	const cache = defaultCache ?? /* @__PURE__ */ new Map();
 	let cacheTree = tree;
 	return {
 		findNodePathFromTreeWithCache: (key) => {
@@ -4380,7 +4365,8 @@ const filterLeafNode = (tree, keyList) => {
 	const result = [];
 	const find = createCacheWithFindNodePathFromTree(tree);
 	keyList.forEach((key) => {
-		const node = findNodeFromPath(tree, find.findNodePathFromTreeWithCache(key));
+		const path = find.findNodePathFromTreeWithCache(key);
+		const node = findNodeFromPath(tree, path);
 		if (node) {
 			var _node$children3;
 			if (!((_node$children3 = node.children) === null || _node$children3 === void 0 ? void 0 : _node$children3.length)) result.push(node);
@@ -4534,45 +4520,6 @@ function unmount(container) {
 	}
 }
 
-//#endregion
-//#region src/helper/resize-observer.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-/**
-* All elements are observed by a single ResizeObserver is got greater performance than each element observed by separate ResizeObserver
-* See issue https://github.com/WICG/resize-observer/issues/59#issuecomment-408098151
-*/
-const _resizeObserverCallbacks = /* @__PURE__ */ new Set();
-let _resizeObserver;
-function resizeObserverCtor(callback) {
-	if (!_resizeObserver) _resizeObserver = new ResizeObserver((...args) => {
-		_resizeObserverCallbacks.forEach((callback) => callback(...args));
-	});
-	return {
-		observe(target, options) {
-			_resizeObserverCallbacks.add(callback);
-			_resizeObserver.observe(target, options);
-		},
-		unobserve(target) {
-			_resizeObserverCallbacks.delete(callback);
-			_resizeObserver.unobserve(target);
-		}
-	};
-}
-
 //#endregion
 exports.Accordion = Accordion;
 exports.Avatar = Avatar;
@@ -4655,7 +4602,6 @@ exports.message = message;
 exports.removeMessage = removeMessage;
 exports.render = render;
 exports.resetButtonClassName = resetButtonClassName;
-exports.resizeObserverCtor = resizeObserverCtor;
 exports.scrollbarClassName = scrollbarClassName;
 exports.selectClassName = selectClassName;
 exports.toast = sonner.toast;