@univerjs/design 1.0.0-alpha.6 → 1.0.0-alpha.8

package/lib/cjs/index.js

@@ -10,10 +10,10 @@ let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+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");
 
@@ -1108,7 +1108,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);
@@ -1505,10 +1506,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;
 		}
@@ -2062,6 +2064,69 @@ function ColorPicker({ format = "hex", value, onChange }) {
 	});
 }
 
+//#endregion
+//#region src/components/command/Command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command, {
+		"data-slot": "command",
+		className: clsx$1("univer-flex univer-h-full univer-w-full univer-flex-col univer-overflow-hidden univer-rounded-md univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-700 dark:!univer-text-white", className),
+		...props
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "command-input-wrapper",
+		className: "univer-flex univer-h-10 univer-items-center univer-gap-2 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-px-3 dark:!univer-border-gray-600 [&>svg]:univer-size-4 [&>svg]:univer-shrink-0 [&>svg]:univer-text-gray-400",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SearchIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Input, {
+			"data-slot": "command-input",
+			className: clsx$1("univer-h-10 univer-w-full univer-border-none univer-bg-transparent univer-text-sm univer-outline-none placeholder:univer-text-gray-400", className),
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.List, {
+		"data-slot": "command-list",
+		className: clsx$1("univer-max-h-[300px] univer-overflow-y-auto univer-overflow-x-hidden univer-p-1 [scroll-padding-block:4px]", className),
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Empty, {
+		"data-slot": "command-empty",
+		className: clsx$1("univer-py-6 univer-text-center univer-text-sm univer-text-gray-500", className),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Group, {
+		"data-slot": "command-group",
+		className: clsx$1("univer-overflow-hidden univer-p-1 [&_[cmdk-group-heading]]:univer-px-2 [&_[cmdk-group-heading]]:univer-py-1.5 [&_[cmdk-group-heading]]:univer-text-xs [&_[cmdk-group-heading]]:univer-font-medium [&_[cmdk-group-heading]]:univer-text-gray-500", className),
+		...props
+	});
+}
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Item, {
+		"data-slot": "command-item",
+		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none data-[disabled=true]:univer-pointer-events-none data-[selected=true]:univer-bg-gray-100 data-[disabled=true]:univer-opacity-50 dark:data-[selected=true]:!univer-bg-gray-600", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Separator, {
+		"data-slot": "command-separator",
+		className: clsx$1("univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "command-shortcut",
+		className: clsx$1("univer-ml-auto univer-text-xs univer-tracking-widest univer-text-gray-400 rtl:univer-ml-0 rtl:univer-mr-auto", className),
+		...props
+	});
+}
+
 //#endregion
 //#region src/components/confirm/Confirm.tsx
 function Footer(props) {
@@ -2330,7 +2395,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 = {
@@ -2709,7 +2777,7 @@ const Input = (0, react.forwardRef)(({ autoFocus = false, className, style, type
 
 //#endregion
 //#region src/components/input-number/InputNumber.tsx
-const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false }, ref) => {
+const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false, allowClear = false }, ref) => {
 	const { locale } = (0, react.useContext)(ConfigContext);
 	const [internalValue, setInternalValue] = (0, react.useState)(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : null);
 	const lastValidValueRef = (0, react.useRef)(internalValue);
@@ -2855,6 +2923,7 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 				className: clsx$1("univer-box-border", inputClassName),
 				size,
 				value: inputValue,
+				allowClear,
 				disabled,
 				onChange: handleInputChange,
 				onFocus,
@@ -2911,14 +2980,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)`
@@ -3774,9 +3845,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);
@@ -3822,29 +3894,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);
 }
 
@@ -4051,13 +4111,15 @@ 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]);
 	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, {
@@ -4315,7 +4377,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);
@@ -4469,45 +4532,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;
@@ -4520,6 +4544,14 @@ exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.ColorPicker = ColorPicker;
 exports.ColorPresets = ColorPresets;
+exports.Command = Command;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;
 exports.ConfigContext = ConfigContext;
 exports.ConfigProvider = ConfigProvider;
 exports.Confirm = Confirm;
@@ -4582,7 +4614,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;

package/lib/cjs/locale/ar-SA.js

@@ -17,7 +17,7 @@ const locale = { design: {
 	},
 	CascaderList: { empty: "لا شيء" },
 	Calendar: {
-		year: "",
+		year: "سنة",
 		weekDays: [
 			"ح",
 			"ن",

package/lib/cjs/locale/ca-ES.js

@@ -13,11 +13,11 @@ const locale = { design: {
 	},
 	Confirm: {
 		cancel: "cancel·la",
-		confirm: "ok"
+		confirm: "D'acord"
 	},
 	CascaderList: { empty: "Cap" },
 	Calendar: {
-		year: "",
+		year: "Any",
 		weekDays: [
 			"dg",
 			"dl",
@@ -52,7 +52,7 @@ const locale = { design: {
 	ColorPicker: {
 		more: "Més colors",
 		cancel: "cancel·la",
-		confirm: "ok"
+		confirm: "D'acord"
 	},
 	GradientColorPicker: {
 		linear: "Lineal",

package/lib/cjs/locale/de-DE.js

@@ -17,7 +17,7 @@ const locale = { design: {
 	},
 	CascaderList: { empty: "Keine" },
 	Calendar: {
-		year: "",
+		year: "Jahr",
 		weekDays: [
 			"So",
 			"Mo",

package/lib/cjs/locale/es-ES.js

@@ -17,7 +17,7 @@ const locale = { design: {
 	},
 	CascaderList: { empty: "Cap" },
 	Calendar: {
-		year: "",
+		year: "Año",
 		weekDays: [
 			"Dg",
 			"Dl",

package/lib/cjs/locale/fr-FR.js

@@ -13,11 +13,11 @@ const locale = { design: {
 	},
 	Confirm: {
 		cancel: "annuler",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	CascaderList: { empty: "Aucun" },
 	Calendar: {
-		year: "",
+		year: "Année",
 		weekDays: [
 			"Dim",
 			"Lun",
@@ -52,7 +52,7 @@ const locale = { design: {
 	ColorPicker: {
 		more: "Plus de couleurs",
 		cancel: "annuler",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	GradientColorPicker: {
 		linear: "Linéaire",

package/lib/cjs/locale/id-ID.js

@@ -17,7 +17,7 @@ const locale = { design: {
 	},
 	CascaderList: { empty: "Tidak ada" },
 	Calendar: {
-		year: "",
+		year: "Tahun",
 		weekDays: [
 			"Min",
 			"Sen",

package/lib/cjs/locale/it-IT.js

@@ -13,11 +13,11 @@ const locale = { design: {
 	},
 	Confirm: {
 		cancel: "annulla",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	CascaderList: { empty: "Nessuno" },
 	Calendar: {
-		year: "",
+		year: "Anno",
 		weekDays: [
 			"Dom",
 			"Lun",
@@ -52,7 +52,7 @@ const locale = { design: {
 	ColorPicker: {
 		more: "Altri Colori",
 		cancel: "annulla",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	GradientColorPicker: {
 		linear: "Lineare",

package/lib/cjs/locale/pl-PL.js

@@ -13,11 +13,11 @@ const locale = { design: {
 	},
 	Confirm: {
 		cancel: "anuluj",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	CascaderList: { empty: "Brak" },
 	Calendar: {
-		year: "",
+		year: "Rok",
 		weekDays: [
 			"nd",
 			"pn",
@@ -52,7 +52,7 @@ const locale = { design: {
 	ColorPicker: {
 		more: "Więcej kolorów",
 		cancel: "anuluj",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	GradientColorPicker: {
 		linear: "Liniowy",

package/lib/cjs/locale/pt-BR.js

@@ -13,11 +13,11 @@ const locale = { design: {
 	},
 	Confirm: {
 		cancel: "cancelar",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	CascaderList: { empty: "Nenhum" },
 	Calendar: {
-		year: "",
+		year: "Ano",
 		weekDays: [
 			"Dom",
 			"Seg",
@@ -52,7 +52,7 @@ const locale = { design: {
 	ColorPicker: {
 		more: "Mais Cores",
 		cancel: "cancelar",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	GradientColorPicker: {
 		linear: "Linear",

package/lib/cjs/locale/ru-RU.js

@@ -18,7 +18,7 @@ const locale = { design: {
 	CascaderList: { empty: "Нет" },
 	Select: { empty: "Нет" },
 	Calendar: {
-		year: "",
+		year: "Год",
 		weekDays: [
 			"Вс",
 			"Пн",

package/lib/cjs/locale/sk-SK.js

@@ -13,11 +13,11 @@ const locale = { design: {
 	},
 	Confirm: {
 		cancel: "zrušiť",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	CascaderList: { empty: "Žiadne" },
 	Calendar: {
-		year: "",
+		year: "Rok",
 		weekDays: [
 			"Ne",
 			"Po",
@@ -52,7 +52,7 @@ const locale = { design: {
 	ColorPicker: {
 		more: "Viac farieb",
 		cancel: "zrušiť",
-		confirm: "ok"
+		confirm: "OK"
 	},
 	GradientColorPicker: {
 		linear: "Lineárny",