@univerjs/design 0.23.0 → 0.24.0

package/lib/index.js

@@ -1,5 +1,5 @@
 import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, DropdownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+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 { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -918,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;
@@ -1028,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;
@@ -1046,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);
@@ -1076,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",
@@ -1086,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) => {
@@ -1094,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(),
@@ -1373,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;
@@ -1387,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]);
 	}
@@ -1430,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);
@@ -1464,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;
@@ -1483,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);
@@ -1531,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(),
@@ -3061,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]);
@@ -3162,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 }
 			}),
@@ -3169,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}%`,
@@ -3203,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);
 					}
@@ -3241,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,
@@ -3440,6 +3475,83 @@ const removeMessage = (id) => {
 	activeMessageIds.clear();
 };
 
+//#endregion
+//#region src/components/panel/Panel.tsx
+function Panel(props) {
+	const { children, className, style } = props;
+	return /* @__PURE__ */ jsx("div", {
+		"data-u-comp": "panel",
+		className: clsx("univer-flex univer-flex-col univer-gap-5 univer-py-2", className),
+		style,
+		children
+	});
+}
+function PanelSection(props) {
+	const { title, children, className, defaultExpanded = true, collapsible = true } = props;
+	const [expanded, setExpanded] = useState(defaultExpanded);
+	const contentId = useId();
+	const headerId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "panel-section",
+		className: clsx("univer-flex univer-flex-col", className),
+		children: [/* @__PURE__ */ jsxs("button", {
+			id: headerId,
+			type: "button",
+			"aria-expanded": expanded,
+			"aria-controls": contentId,
+			disabled: !collapsible,
+			className: clsx("univer-box-border univer-flex univer-w-full univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-0 univer-pb-2.5 univer-text-left univer-text-sm univer-font-medium univer-text-gray-700 dark:!univer-text-gray-200", {
+				"univer-cursor-pointer": collapsible,
+				"univer-cursor-default": !collapsible
+			}),
+			onClick: () => collapsible && setExpanded((v) => !v),
+			children: [collapsible && /* @__PURE__ */ jsx(DownIcon, { className: clsx("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
+				"-univer-rotate-90": !expanded,
+				"univer-rotate-0": expanded
+			}) }), /* @__PURE__ */ jsx("span", { children: title })]
+		}), /* @__PURE__ */ jsx("div", {
+			id: contentId,
+			role: "region",
+			"aria-labelledby": headerId,
+			className: clsx("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-300 univer-ease-in-out", {
+				"univer-max-h-[1000px] univer-opacity-100": expanded,
+				"univer-max-h-0 univer-opacity-0": !expanded
+			}),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "univer-box-border univer-flex univer-flex-col univer-gap-3 univer-py-1",
+				children
+			})
+		})]
+	});
+}
+function PanelField(props) {
+	const { label, children, className, required, error } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "panel-field",
+		className: clsx("univer-flex univer-flex-col univer-gap-1.5", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-items-center univer-gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-600 dark:!univer-text-gray-300",
+					children: label
+				}), required && /* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-red-500",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-w-full",
+				children
+			}),
+			error && /* @__PURE__ */ jsx("span", {
+				className: "univer-text-xs univer-text-red-500",
+				children: error
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/popup/Popup.tsx
 const POPUP_POINTER_OFFSET = 2;
@@ -4221,4 +4333,4 @@ function resizeObserverCtor(callback) {
 }
 
 //#endregion
-export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MultipleSelect, Pager, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resizeObserverCtor, scrollbarClassName, toast, unmount };
+export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, 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, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resizeObserverCtor, scrollbarClassName, toast, unmount };

package/lib/types/components/panel/Panel.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+import type { CSSProperties, ReactNode } from 'react';
+export interface IPanelProps {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Panel(props: IPanelProps): import("react/jsx-runtime").JSX.Element;
+export interface IPanelSectionProps {
+    title: ReactNode;
+    children: ReactNode;
+    className?: string;
+    defaultExpanded?: boolean;
+    collapsible?: boolean;
+}
+export declare function PanelSection(props: IPanelSectionProps): import("react/jsx-runtime").JSX.Element;
+export interface IPanelFieldProps {
+    label: ReactNode;
+    children: ReactNode;
+    className?: string;
+    required?: boolean;
+    error?: string;
+}
+export declare function PanelField(props: IPanelFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/panel/Panel.stories.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+import type { Meta } from '@storybook/react';
+import { Panel } from './Panel';
+declare const meta: Meta<typeof Panel>;
+export default meta;
+export declare const PanelBasic: {
+    render(): import("react/jsx-runtime").JSX.Element;
+};

package/lib/types/index.d.ts

@@ -41,6 +41,7 @@ export { type IInputProps, Input } from './components/input/Input';
 export { type IKBDProps, KBD } from './components/kbd/Kbd';
 export { type IMessageProps, message, Messager, MessageType, removeMessage } from './components/message/Message';
 export { type IPagerProps, Pager } from './components/pager/Pager';
+export { type IPanelFieldProps, type IPanelProps, type IPanelSectionProps, Panel, PanelField, PanelSection } from './components/panel/Panel';
 export { type IPopupProps, Popup } from './components/popup';
 export { type IRadioGroupProps, RadioGroup } from './components/radio-group/RadioGroup';
 export { type IRadioProps, Radio } from './components/radio/Radio';