@univerjs/design 1.0.0-alpha.0 → 1.0.0-alpha.2

package/lib/index.js

@@ -167,32 +167,6 @@ const Button = forwardRef(({ className, variant, size, asChild = false, ...props
 });
 Button.displayName = "Button";
 
-//#endregion
-//#region src/components/button/ButtonGroup.tsx
-const ButtonGroup = ({ className, orientation = "horizontal", children }) => {
-	const totalButtons = Children.count(children);
-	const isHorizontal = orientation === "horizontal";
-	const isVertical = orientation === "vertical";
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("univer-grid", {
-			"univer-grid-flow-row": isVertical,
-			"univer-w-fit": isVertical
-		}, className),
-		children: Children.map(children, (child, index) => {
-			const isFirst = index === 0;
-			const isLast = index === totalButtons - 1;
-			return cloneElement(child, { className: clsx({
-				"!univer-rounded-l-none": isHorizontal && !isFirst,
-				"!univer-rounded-r-none": isHorizontal && !isLast,
-				"!univer-border-l-0": isHorizontal && !isFirst,
-				"!univer-rounded-t-none": isVertical && !isFirst,
-				"!univer-rounded-b-none": isVertical && !isLast,
-				"!univer-border-t-0": isVertical && !isFirst
-			}, child.props.className) });
-		})
-	});
-};
-
 //#endregion
 //#region src/helper/is-browser.ts
 /**
@@ -239,6 +213,35 @@ function ConfigProvider(props) {
 	});
 }
 
+//#endregion
+//#region src/components/button/ButtonGroup.tsx
+const ButtonGroup = ({ className, orientation = "horizontal", children }) => {
+	const { direction } = useContext(ConfigContext);
+	const totalButtons = Children.count(children);
+	const isHorizontal = orientation === "horizontal";
+	const isVertical = orientation === "vertical";
+	const isRtl = direction === "rtl";
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("univer-grid", {
+			"univer-grid-flow-row": isVertical,
+			"univer-w-fit": isVertical
+		}, className),
+		children: Children.map(children, (child, index) => {
+			const isFirst = index === 0;
+			const isLast = index === totalButtons - 1;
+			return cloneElement(child, { className: clsx({
+				"!univer-rounded-l-none": isHorizontal && (isRtl ? !isLast : !isFirst),
+				"!univer-rounded-r-none": isHorizontal && (isRtl ? !isFirst : !isLast),
+				"!univer-border-l-0": isHorizontal && !isRtl && !isFirst,
+				"!univer-border-r-0": isHorizontal && isRtl && !isFirst,
+				"!univer-rounded-t-none": isVertical && !isFirst,
+				"!univer-rounded-b-none": isVertical && !isLast,
+				"!univer-border-t-0": isVertical && !isFirst
+			}, child.props.className) });
+		})
+	});
+};
+
 //#endregion
 //#region src/helper/class-utilities.ts
 /**
@@ -978,22 +981,27 @@ const DialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__
 	...props
 }));
 DialogOverlay.displayName = Overlay.displayName;
-const DialogContent = forwardRef(({ className, children, closable = true, onClickClose, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Content$2, {
-	ref,
-	className: clsx("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),
-	...props,
-	children: [children, closable && /* @__PURE__ */ jsxs(Close, {
-		className: "univer-absolute univer-right-4 univer-top-4 univer-size-6 univer-cursor-pointer univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-transition-opacity hover:univer-opacity-100 disabled:univer-pointer-events-none",
-		onClick: onClickClose,
-		children: [/* @__PURE__ */ jsx(CloseIcon, { className: "univer-size-4 univer-text-gray-400" }), /* @__PURE__ */ jsx("span", {
-			className: "univer-sr-only",
-			children: "Close"
+const DialogContent = forwardRef(({ className, children, closable = true, onClickClose, mountContainer, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, {
+	container: mountContainer !== null && mountContainer !== void 0 ? mountContainer : void 0,
+	children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Content$2, {
+		ref,
+		className: clsx("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),
+		...props,
+		children: [children, closable && /* @__PURE__ */ jsxs(Close, {
+			"data-slot": "close",
+			className: "univer-absolute univer-right-4 univer-top-4 univer-size-6 univer-cursor-pointer univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-transition-opacity hover:univer-opacity-100 disabled:univer-pointer-events-none rtl:univer-left-4 rtl:univer-right-auto",
+			onClick: onClickClose,
+			children: [/* @__PURE__ */ jsx(CloseIcon, { className: "univer-size-4 univer-text-gray-400" }), /* @__PURE__ */ jsx("span", {
+				className: "univer-sr-only",
+				children: "Close"
+			})]
 		})]
 	})]
-})] }));
+}));
 DialogContent.displayName = Content$2.displayName;
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: clsx("univer-flex univer-flex-col univer-space-y-1.5 univer-text-center sm:!univer-text-left", className),
+	"data-slot": "dialog-header",
+	className: clsx("univer-flex univer-flex-col univer-space-y-1.5 univer-text-center sm:!univer-text-left sm:rtl:!univer-text-right", className),
 	...props
 });
 DialogHeader.displayName = "DialogHeader";
@@ -1136,7 +1144,7 @@ function useDraggable(options = {}) {
 function Dialog(props) {
 	var _locale$Confirm$cance, _locale$Confirm, _locale$Confirm$confi, _locale$Confirm2;
 	const { className, children, style, open = false, title, width, draggable = false, defaultPosition, footer: propFooter, mask = true, keyboard = true, closable = true, maskClosable = true, showOk, showCancel, onOpenChange, onClose, onOk, onCancel } = props;
-	const { locale } = useContext(ConfigContext);
+	const { locale, mountContainer, direction } = useContext(ConfigContext);
 	const { position, isDragging, setElementRef, handleMouseDown } = useDraggable({
 		defaultPosition,
 		enabled: draggable
@@ -1186,6 +1194,8 @@ function Dialog(props) {
 				} : {}
 			},
 			closable,
+			mountContainer,
+			dir: direction,
 			onClickClose: handleClickClose,
 			onEscapeKeyDown: (e) => {
 				if (keyboard) handleClickClose();
@@ -1452,14 +1462,14 @@ function HexInput({ hsv, onChange }) {
 		if (!isValidHex(inputValue)) setInputValue(hexValue.replace(/^#/, ""));
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-		className: clsx("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-text-white", borderClassName),
+		className: clsx("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none rtl:!univer-pl-2 rtl:!univer-pr-4 dark:!univer-text-white", borderClassName),
 		value: inputValue,
 		onChange: handleChange,
 		onBlur: handleBlur,
 		maxLength: 6,
 		spellCheck: false
 	}), /* @__PURE__ */ jsx("span", {
-		className: "univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400",
+		className: "univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400 rtl:univer-left-auto rtl:univer-right-1.5",
 		children: "#"
 	})] });
 }
@@ -1895,7 +1905,7 @@ const MemoizedColorInput = memo(ColorInput);
 const MemoizedColorPresets = memo(ColorPresets);
 function ColorPicker({ format = "hex", value, onChange }) {
 	if (!isBrowser) return null;
-	const { locale } = useContext(ConfigContext);
+	const { direction, locale } = useContext(ConfigContext);
 	const [hsv, setHsv] = useState([
 		0,
 		100,
@@ -1964,6 +1974,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "color-picker",
+		dir: direction,
 		className: "univer-cursor-default univer-space-y-2 univer-rounded-lg",
 		onClick: (e) => e.stopPropagation(),
 		children: [
@@ -1984,7 +1995,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 				})
 			}),
 			/* @__PURE__ */ jsx(Dialog, {
-				className: "!univer-w-fit !univer-p-2.5",
+				className: "!univer-z-[1090] !univer-w-fit !univer-p-2.5",
 				closable: false,
 				maskClosable: false,
 				open: visible,
@@ -2614,6 +2625,7 @@ const inputVariants = cva$1("univer-box-border univer-w-full univer-rounded-md u
 	defaultVariants: { size: "small" }
 });
 const Input = forwardRef(({ autoFocus = false, className, style, type = "text", placeholder, value, size = "small", allowClear = false, disabled = false, onClick, onKeyDown, onChange, onFocus, onBlur, slot, inputClass, inputStyle, ...props }, ref) => {
+	const { direction } = useContext(ConfigContext);
 	const handleClear = (e) => {
 		e.stopPropagation();
 		onChange === null || onChange === void 0 || onChange("");
@@ -2648,6 +2660,10 @@ const Input = forwardRef(({ autoFocus = false, className, style, type = "text",
 	useEffect(() => {
 		if (allowClear && !(slot && slotRef.current)) setPaddingRight(26);
 	}, []);
+	const mergedInputStyle = direction === "rtl" && paddingRight === 0 ? inputStyle : {
+		...inputStyle,
+		paddingRight
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "input",
 		className: clsx("univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md", disabled && "univer-cursor-not-allowed", className),
@@ -2665,10 +2681,7 @@ const Input = forwardRef(({ autoFocus = false, className, style, type = "text",
 			onChange: handleChange,
 			onFocus,
 			onBlur,
-			style: {
-				...inputStyle,
-				paddingRight
-			},
+			style: mergedInputStyle,
 			...props
 		}), hasSlotContent && /* @__PURE__ */ jsxs("div", {
 			className: "univer-absolute univer-right-2 univer-flex univer-items-center univer-gap-1 univer-rounded-full",

package/lib/types/components/dialog/DialogPrimitive.d.ts

@@ -22,6 +22,7 @@ declare const DialogOverlay: import("react").ForwardRefExoticComponent<Omit<impo
 interface IDialogContentProps {
     closable?: boolean;
     onClickClose?: () => void;
+    mountContainer?: HTMLElement | null;
 }
 declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & IDialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {