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

package/lib/es/index.js

@@ -1,4 +1,4 @@
-import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
+import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SearchIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
 import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { clsx as clsx$1 } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
@@ -9,10 +9,10 @@ import { Slot } from "@radix-ui/react-slot";
 import { CheckboxItem, Content, Item, ItemIndicator, Portal, RadioGroup as RadioGroup$1, RadioItem, Root, Separator as Separator$1, Sub, SubContent, SubTrigger, Trigger } from "@radix-ui/react-dropdown-menu";
 import { Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger as Trigger$1 } from "@radix-ui/react-popover";
 import { Close, Content as Content$2, Description, Overlay, Portal as Portal$2, Root as Root$2, Title } from "@radix-ui/react-dialog";
+import { Command as Command$1 } from "cmdk";
 import { createPortal } from "react-dom";
 import { Content as Content$3, Portal as Portal$3, Root as Root$3, Trigger as Trigger$2 } from "@radix-ui/react-hover-card";
 import { Toaster as Toaster$1, toast, toast as toast$1 } from "sonner";
-import { CSSTransition } from "react-transition-group";
 import { Root as Root$4 } from "@radix-ui/react-separator";
 import { createRoot } from "react-dom/client";
 
@@ -1107,7 +1107,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 = useCallback(() => {
 		setIsDragging(false);
@@ -1504,10 +1505,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;
 		}
@@ -2061,6 +2063,69 @@ function ColorPicker({ format = "hex", value, onChange }) {
 	});
 }
 
+//#endregion
+//#region src/components/command/Command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1, {
+		"data-slot": "command",
+		className: clsx("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__ */ 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__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Command$1.Input, {
+			"data-slot": "command-input",
+			className: clsx("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__ */ jsx(Command$1.List, {
+		"data-slot": "command-list",
+		className: clsx("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__ */ jsx(Command$1.Empty, {
+		"data-slot": "command-empty",
+		className: clsx("univer-py-6 univer-text-center univer-text-sm univer-text-gray-500", className),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		"data-slot": "command-group",
+		className: clsx("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__ */ jsx(Command$1.Item, {
+		"data-slot": "command-item",
+		className: clsx("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__ */ jsx(Command$1.Separator, {
+		"data-slot": "command-separator",
+		className: clsx("univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: clsx("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) {
@@ -2329,7 +2394,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 = {
@@ -2708,7 +2776,7 @@ const Input = forwardRef(({ autoFocus = false, className, style, type = "text",
 
 //#endregion
 //#region src/components/input-number/InputNumber.tsx
-const InputNumber = 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 = 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 } = useContext(ConfigContext);
 	const [internalValue, setInternalValue] = useState(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : null);
 	const lastValidValueRef = useRef(internalValue);
@@ -2854,6 +2922,7 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 				className: clsx("univer-box-border", inputClassName),
 				size,
 				value: inputValue,
+				allowClear,
 				disabled,
 				onChange: handleInputChange,
 				onFocus,
@@ -2910,14 +2979,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)`
@@ -3773,9 +3844,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 = useRef(null);
 	const [realOffset, setRealOffset] = useState(HIDDEN_POPUP_OFFSET);
 	const { mountContainer, direction } = useContext(ConfigContext);
@@ -3821,29 +3893,17 @@ function Popup(props) {
 	function preventDefault(event) {
 		event.preventDefault();
 	}
-	return createPortal(/* @__PURE__ */ jsx(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 createPortal(/* @__PURE__ */ jsx("section", {
+		ref: nodeRef,
+		dir: direction,
+		className: clsx("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__ */ 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);
 }
 
@@ -4050,13 +4110,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 = useMemo(() => {
 		return options.filter((option) => value.includes(option.value)).map((option, index) => /* @__PURE__ */ jsx(Badge, {
@@ -4314,7 +4376,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,43 +4532,4 @@ 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
-export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ColorPresets, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MultipleSelect, Pager, Panel, PanelField, PanelSection, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, cva, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resetButtonClassName, resizeObserverCtor, scrollbarClassName, selectClassName, toast, unmount };
+export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ColorPresets, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MultipleSelect, Pager, Panel, PanelField, PanelSection, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, cva, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resetButtonClassName, scrollbarClassName, selectClassName, toast, unmount };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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