@univerjs/design 0.22.1 → 0.23.0

package/lib/cjs/index.js

@@ -6,6 +6,7 @@ let tailwind_merge = require("tailwind-merge");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let _radix_ui_react_direction = require("@radix-ui/react-direction");
 let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 let react_dom = require("react-dom");
@@ -261,16 +262,24 @@ function isBrowser() {
 //#region src/components/config-provider/ConfigProvider.tsx
 const ConfigContext = (0, react.createContext)({ mountContainer: isBrowser() ? document.body : null });
 function ConfigProvider(props) {
-	const { children, locale, mountContainer } = props;
+	const { children, locale, mountContainer, direction } = props;
 	const value = (0, react.useMemo)(() => {
 		return {
 			locale,
+			direction,
 			mountContainer
 		};
-	}, [locale, mountContainer]);
+	}, [
+		locale,
+		direction,
+		mountContainer
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigContext.Provider, {
 		value,
-		children
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_direction.DirectionProvider, {
+			dir: direction !== null && direction !== void 0 ? direction : "ltr",
+			children
+		})
 	});
 }
 
@@ -1925,6 +1934,7 @@ function DraggableList(props) {
 	const pressedHandleIdRef = (0, react.useRef)(null);
 	const dragSourceIdRef = (0, react.useRef)(null);
 	const dragStartIndexRef = (0, react.useRef)(-1);
+	const { direction } = (0, react.useContext)(ConfigContext);
 	(0, react.useEffect)(() => {
 		if (!draggingId) {
 			setDisplayList(list);
@@ -2057,6 +2067,7 @@ function DraggableList(props) {
 			}, itemId);
 		})
 	}), canUsePortal && draggingItem && ghostPosition && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		dir: direction,
 		className: clsx$1("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
 		style: {
 			zIndex: 2147483647,
@@ -2389,6 +2400,7 @@ function Gallery(props) {
 	const [isVisible, setIsVisible] = (0, react.useState)(false);
 	const [activeImageIndex, setActiveImageIndex] = (0, react.useState)(0);
 	const [zoomLevel, setZoomLevel] = (0, react.useState)(1);
+	const { direction } = (0, react.useContext)(ConfigContext);
 	const dialogRef = (0, react.useRef)(null);
 	const activeImage = (0, react.useMemo)(() => images[activeImageIndex], [activeImageIndex, images]);
 	(0, react.useEffect)(() => {
@@ -2436,6 +2448,7 @@ function Gallery(props) {
 	}
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "gallery",
+		dir: direction,
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-label": "Image gallery",
@@ -2829,6 +2842,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 //#region src/components/tooltip/Tooltip.tsx
 function Tooltip(props) {
 	const { children, className, asChild = true, title, placement = "bottom", showIfEllipsis = false, visible: controlledVisible, onVisibleChange } = props;
+	const { direction } = (0, react.useContext)(ConfigContext);
 	const [uncontrolledVisible, setUncontrolledVisible] = (0, react.useState)(false);
 	const isControlled = controlledVisible !== void 0;
 	const visible = isControlled ? controlledVisible : uncontrolledVisible;
@@ -2971,6 +2985,7 @@ function Tooltip(props) {
 		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),
 			style: {
@@ -3434,7 +3449,7 @@ function Popup(props) {
 	const { children, visible = false, offset = [0, 0], overflowVisible = false, placementY = "below" } = props;
 	const nodeRef = (0, react.useRef)(null);
 	const [realOffset, setRealOffset] = (0, react.useState)(HIDDEN_POPUP_OFFSET);
-	const { mountContainer } = (0, react.useContext)(ConfigContext);
+	const { mountContainer, direction } = (0, react.useContext)(ConfigContext);
 	const calculateOffset = () => {
 		const element = nodeRef.current;
 		if (!element) return null;
@@ -3490,6 +3505,7 @@ function Popup(props) {
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 			ref: nodeRef,
+			dir: direction,
 			className: "univer-popup",
 			style: {
 				left: realOffset[0] + POPUP_POINTER_OFFSET,

package/lib/es/index.js

@@ -5,6 +5,7 @@ import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slot } from "@radix-ui/react-slot";
+import { DirectionProvider } from "@radix-ui/react-direction";
 import { Close, Content, Description, Overlay, Portal, Root, Title } from "@radix-ui/react-dialog";
 import { Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger } from "@radix-ui/react-popover";
 import { createPortal } from "react-dom";
@@ -260,16 +261,24 @@ function isBrowser() {
 //#region src/components/config-provider/ConfigProvider.tsx
 const ConfigContext = createContext({ mountContainer: isBrowser() ? document.body : null });
 function ConfigProvider(props) {
-	const { children, locale, mountContainer } = props;
+	const { children, locale, mountContainer, direction } = props;
 	const value = useMemo(() => {
 		return {
 			locale,
+			direction,
 			mountContainer
 		};
-	}, [locale, mountContainer]);
+	}, [
+		locale,
+		direction,
+		mountContainer
+	]);
 	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
 		value,
-		children
+		children: /* @__PURE__ */ jsx(DirectionProvider, {
+			dir: direction !== null && direction !== void 0 ? direction : "ltr",
+			children
+		})
 	});
 }
 
@@ -1924,6 +1933,7 @@ function DraggableList(props) {
 	const pressedHandleIdRef = useRef(null);
 	const dragSourceIdRef = useRef(null);
 	const dragStartIndexRef = useRef(-1);
+	const { direction } = useContext(ConfigContext);
 	useEffect(() => {
 		if (!draggingId) {
 			setDisplayList(list);
@@ -2056,6 +2066,7 @@ function DraggableList(props) {
 			}, itemId);
 		})
 	}), canUsePortal && draggingItem && ghostPosition && createPortal(/* @__PURE__ */ jsx("div", {
+		dir: direction,
 		className: clsx("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
 		style: {
 			zIndex: 2147483647,
@@ -2388,6 +2399,7 @@ function Gallery(props) {
 	const [isVisible, setIsVisible] = useState(false);
 	const [activeImageIndex, setActiveImageIndex] = useState(0);
 	const [zoomLevel, setZoomLevel] = useState(1);
+	const { direction } = useContext(ConfigContext);
 	const dialogRef = useRef(null);
 	const activeImage = useMemo(() => images[activeImageIndex], [activeImageIndex, images]);
 	useEffect(() => {
@@ -2435,6 +2447,7 @@ function Gallery(props) {
 	}
 	return createPortal(/* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "gallery",
+		dir: direction,
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-label": "Image gallery",
@@ -2828,6 +2841,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 //#region src/components/tooltip/Tooltip.tsx
 function Tooltip(props) {
 	const { children, className, asChild = true, title, placement = "bottom", showIfEllipsis = false, visible: controlledVisible, onVisibleChange } = props;
+	const { direction } = useContext(ConfigContext);
 	const [uncontrolledVisible, setUncontrolledVisible] = useState(false);
 	const isControlled = controlledVisible !== void 0;
 	const visible = isControlled ? controlledVisible : uncontrolledVisible;
@@ -2970,6 +2984,7 @@ function Tooltip(props) {
 		var _coords$top, _coords$left;
 		tooltipNode = createPortal(/* @__PURE__ */ jsxs("div", {
 			ref: tooltipRef,
+			dir: direction,
 			role: "tooltip",
 			className: clsx("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: {
@@ -3433,7 +3448,7 @@ function Popup(props) {
 	const { children, visible = false, offset = [0, 0], overflowVisible = false, placementY = "below" } = props;
 	const nodeRef = useRef(null);
 	const [realOffset, setRealOffset] = useState(HIDDEN_POPUP_OFFSET);
-	const { mountContainer } = useContext(ConfigContext);
+	const { mountContainer, direction } = useContext(ConfigContext);
 	const calculateOffset = () => {
 		const element = nodeRef.current;
 		if (!element) return null;
@@ -3489,6 +3504,7 @@ function Popup(props) {
 		},
 		children: /* @__PURE__ */ jsx("section", {
 			ref: nodeRef,
+			dir: direction,
 			className: "univer-popup",
 			style: {
 				left: realOffset[0] + POPUP_POINTER_OFFSET,

package/lib/index.js

@@ -5,6 +5,7 @@ import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slot } from "@radix-ui/react-slot";
+import { DirectionProvider } from "@radix-ui/react-direction";
 import { Close, Content, Description, Overlay, Portal, Root, Title } from "@radix-ui/react-dialog";
 import { Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger } from "@radix-ui/react-popover";
 import { createPortal } from "react-dom";
@@ -260,16 +261,24 @@ function isBrowser() {
 //#region src/components/config-provider/ConfigProvider.tsx
 const ConfigContext = createContext({ mountContainer: isBrowser() ? document.body : null });
 function ConfigProvider(props) {
-	const { children, locale, mountContainer } = props;
+	const { children, locale, mountContainer, direction } = props;
 	const value = useMemo(() => {
 		return {
 			locale,
+			direction,
 			mountContainer
 		};
-	}, [locale, mountContainer]);
+	}, [
+		locale,
+		direction,
+		mountContainer
+	]);
 	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
 		value,
-		children
+		children: /* @__PURE__ */ jsx(DirectionProvider, {
+			dir: direction !== null && direction !== void 0 ? direction : "ltr",
+			children
+		})
 	});
 }
 
@@ -1924,6 +1933,7 @@ function DraggableList(props) {
 	const pressedHandleIdRef = useRef(null);
 	const dragSourceIdRef = useRef(null);
 	const dragStartIndexRef = useRef(-1);
+	const { direction } = useContext(ConfigContext);
 	useEffect(() => {
 		if (!draggingId) {
 			setDisplayList(list);
@@ -2056,6 +2066,7 @@ function DraggableList(props) {
 			}, itemId);
 		})
 	}), canUsePortal && draggingItem && ghostPosition && createPortal(/* @__PURE__ */ jsx("div", {
+		dir: direction,
 		className: clsx("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
 		style: {
 			zIndex: 2147483647,
@@ -2388,6 +2399,7 @@ function Gallery(props) {
 	const [isVisible, setIsVisible] = useState(false);
 	const [activeImageIndex, setActiveImageIndex] = useState(0);
 	const [zoomLevel, setZoomLevel] = useState(1);
+	const { direction } = useContext(ConfigContext);
 	const dialogRef = useRef(null);
 	const activeImage = useMemo(() => images[activeImageIndex], [activeImageIndex, images]);
 	useEffect(() => {
@@ -2435,6 +2447,7 @@ function Gallery(props) {
 	}
 	return createPortal(/* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "gallery",
+		dir: direction,
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-label": "Image gallery",
@@ -2828,6 +2841,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 //#region src/components/tooltip/Tooltip.tsx
 function Tooltip(props) {
 	const { children, className, asChild = true, title, placement = "bottom", showIfEllipsis = false, visible: controlledVisible, onVisibleChange } = props;
+	const { direction } = useContext(ConfigContext);
 	const [uncontrolledVisible, setUncontrolledVisible] = useState(false);
 	const isControlled = controlledVisible !== void 0;
 	const visible = isControlled ? controlledVisible : uncontrolledVisible;
@@ -2970,6 +2984,7 @@ function Tooltip(props) {
 		var _coords$top, _coords$left;
 		tooltipNode = createPortal(/* @__PURE__ */ jsxs("div", {
 			ref: tooltipRef,
+			dir: direction,
 			role: "tooltip",
 			className: clsx("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: {
@@ -3433,7 +3448,7 @@ function Popup(props) {
 	const { children, visible = false, offset = [0, 0], overflowVisible = false, placementY = "below" } = props;
 	const nodeRef = useRef(null);
 	const [realOffset, setRealOffset] = useState(HIDDEN_POPUP_OFFSET);
-	const { mountContainer } = useContext(ConfigContext);
+	const { mountContainer, direction } = useContext(ConfigContext);
 	const calculateOffset = () => {
 		const element = nodeRef.current;
 		if (!element) return null;
@@ -3489,6 +3504,7 @@ function Popup(props) {
 		},
 		children: /* @__PURE__ */ jsx("section", {
 			ref: nodeRef,
+			dir: direction,
 			className: "univer-popup",
 			style: {
 				left: realOffset[0] + POPUP_POINTER_OFFSET,

package/lib/types/components/config-provider/ConfigProvider.d.ts

@@ -17,6 +17,7 @@ import type { ReactNode } from 'react';
 export interface IConfigProviderProps {
     children: ReactNode;
     locale?: any;
+    direction?: 'ltr' | 'rtl';
     mountContainer: HTMLElement | null;
 }
 export declare const ConfigContext: import("react").Context<Omit<IConfigProviderProps, "children">>;