@univerjs/ui 1.0.0-alpha.1 → 1.0.0-alpha.2

package/lib/cjs/index.js

@@ -307,11 +307,11 @@ function getHeaderFooterMenuHiddenObservable(accessor) {
 	return new rxjs.Observable((subscriber) => {
 		const subscription = univerInstanceService.focused$.subscribe((unitId) => {
 			if (unitId == null) return subscriber.next(true);
-			const docDataModel = univerInstanceService.getUniverDocInstance(unitId);
+			const docDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 			const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
 			subscriber.next(documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
 		});
-		const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
+		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (docDataModel == null) subscriber.next(true);
 		else {
 			const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
@@ -2668,14 +2668,14 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 //#endregion
 //#region src/views/components/ribbon/ToolbarItem.tsx
 const toolbarDisabledClassName = "univer-pointer-events-none univer-cursor-not-allowed univer-text-gray-300 dark:!univer-text-gray-600";
-const toolbarButtonSelectorRootVariants = (0, _univerjs_design.cva)("univer-toolbar-button-selector-root univer-animate-in univer-fade-in univer-group univer-relative univer-flex univer-h-6 univer-cursor-pointer univer-items-center univer-rounded univer-pr-5 univer-text-sm univer-transition-colors hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700", {
+const toolbarButtonSelectorRootVariants = (0, _univerjs_design.cva)("univer-toolbar-button-selector-root univer-animate-in univer-fade-in univer-group univer-relative univer-flex univer-h-6 univer-cursor-pointer univer-items-center univer-rounded univer-pr-5 univer-text-sm univer-transition-colors hover:univer-bg-gray-100 rtl:univer-pl-5 rtl:univer-pr-0 dark:hover:!univer-bg-gray-700", {
 	variants: { disabled: {
 		true: toolbarDisabledClassName,
 		false: "univer-text-gray-900 dark:!univer-text-white"
 	} },
 	defaultVariants: { disabled: false }
 });
-const toolbarButtonSelectorMainVariants = (0, _univerjs_design.cva)("univer-toolbar-button-selector-main univer-relative univer-z-[1] univer-flex univer-h-full univer-items-center univer-rounded-l univer-px-1 univer-transition-colors hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", {
+const toolbarButtonSelectorMainVariants = (0, _univerjs_design.cva)("univer-toolbar-button-selector-main univer-relative univer-z-[1] univer-flex univer-h-full univer-items-center univer-rounded-l univer-px-1 univer-transition-colors hover:univer-bg-gray-200 rtl:univer-rounded-l-none rtl:univer-rounded-r dark:hover:!univer-bg-gray-600", {
 	variants: {
 		active: {
 			true: "univer-bg-gray-200 dark:!univer-bg-gray-500",
@@ -2696,7 +2696,7 @@ const toolbarButtonSelectorMainVariants = (0, _univerjs_design.cva)("univer-tool
 		disabled: false
 	}
 });
-const toolbarButtonSelectorTriggerVariants = (0, _univerjs_design.cva)("univer-toolbar-button-selector-trigger univer-absolute univer-right-0 univer-top-0 univer-box-border univer-flex univer-h-6 univer-w-5 univer-items-center univer-justify-center univer-rounded-r univer-transition-colors hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", {
+const toolbarButtonSelectorTriggerVariants = (0, _univerjs_design.cva)("univer-toolbar-button-selector-trigger univer-absolute univer-right-0 univer-top-0 univer-box-border univer-flex univer-h-6 univer-w-5 univer-items-center univer-justify-center univer-rounded-r univer-transition-colors hover:univer-bg-gray-200 rtl:univer-left-0 rtl:univer-right-auto rtl:univer-rounded-l rtl:univer-rounded-r-none dark:hover:!univer-bg-gray-600", {
 	variants: {
 		disabled: {
 			true: toolbarDisabledClassName,
@@ -3028,7 +3028,7 @@ function Ribbon(props) {
 				activatedTab,
 				onSelectTab: handleSelectTab
 			}), headerMenu && headerMenuComponents && headerMenuComponents.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-items-center univer-gap-2 [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded [&>*]:univer-px-1 [&>*]:univer-transition-colors hover:[&>*]:univer-bg-gray-100",
+				className: "univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-flex-row univer-items-center univer-gap-2 rtl:univer-left-2 rtl:univer-right-auto [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded [&>*]:univer-px-1 [&>*]:univer-transition-colors hover:[&>*]:univer-bg-gray-100",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerMenuComponents })
 			})]
 		}),
@@ -3044,7 +3044,7 @@ function Ribbon(props) {
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-u-comp": "ribbon-toolbar",
 				ref: containerRef,
-				className: (0, _univerjs_design.clsx)("univer-flex univer-overflow-hidden", _univerjs_design.divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
+				className: (0, _univerjs_design.clsx)("univer-flex univer-overflow-hidden rtl:univer-divide-x-reverse", _univerjs_design.divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
 				role: "toolbar",
 				"aria-label": localeService.t(activatedTabTitle),
 				children: [activeGroup.visibleGroups.map((groupItem) => {
@@ -4199,7 +4199,9 @@ function ContextMenuMenuItem(props) {
 			const submenuRect = submenuElement.getBoundingClientRect();
 			const rightLeft = menuItemRect.right - submenuOverlapOffset;
 			const leftLeft = menuItemRect.left - submenuRect.width + submenuOverlapOffset;
-			const useLeft = rightLeft + submenuRect.width + menuViewportPadding > window.innerWidth && leftLeft >= menuViewportPadding;
+			const hasLeftSpace = leftLeft >= menuViewportPadding;
+			const hasRightSpace = rightLeft + submenuRect.width + menuViewportPadding <= window.innerWidth;
+			const useLeft = direction === "rtl" ? hasLeftSpace || !hasRightSpace : !hasRightSpace && hasLeftSpace;
 			const left = useLeft ? leftLeft : rightLeft;
 			setSubmenuPlacement(useLeft ? "left" : "right");
 			const maxTop = window.innerHeight - menuViewportPadding - submenuRect.height;
@@ -4218,6 +4220,7 @@ function ContextMenuMenuItem(props) {
 			window.removeEventListener("scroll", updateSubmenuPosition, true);
 		};
 	}, [
+		direction,
 		submenuVisible,
 		hasSelectionSubmenu,
 		hasSubItemSubmenu
@@ -5258,7 +5261,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.2";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -20558,14 +20561,10 @@ let FontService = class FontService {
 FontService = __decorate([__decorateParam(0, _univerjs_core.IConfigService)], FontService);
 
 //#endregion
-//#region src/views/font-family/FontFamily.tsx
-const FontFamily = ({ id, value, disabled$ }) => {
-	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$);
-	const commandService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ICommandService);
-	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+//#region src/views/font-family/use-font-list.ts
+function useFontList() {
 	const fontService = (0, _wendellhu_redi_react_bindings.useDependency)(IFontService);
-	const [inputValue, setInputValue] = (0, react.useState)("");
-	const [fonts, setFonts] = (0, react.useState)([]);
+	const [fonts, setFonts] = (0, react.useState)(() => fontService.getFonts());
 	(0, react.useEffect)(() => {
 		const subscription = fontService.fonts$.subscribe((fonts) => {
 			setFonts(fonts);
@@ -20573,7 +20572,22 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		return () => {
 			subscription.unsubscribe();
 		};
-	}, []);
+	}, [fontService]);
+	return {
+		fonts,
+		fontService
+	};
+}
+
+//#endregion
+//#region src/views/font-family/FontFamily.tsx
+const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
+const FontFamily = ({ className, disabled: disabledProp, value, disabled$, onChange }) => {
+	const disabledObservableValue = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$);
+	const disabled = Boolean(disabledProp || disabledObservableValue);
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const { fonts } = useFontList();
+	const [draftValue, setDraftValue] = (0, react.useState)(null);
 	const viewValue = (0, react.useMemo)(() => {
 		if (value == null) return "";
 		const font = fonts.find((font) => {
@@ -20586,14 +20600,12 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		fonts,
 		localeService
 	]);
-	(0, react.useMemo)(() => {
-		setInputValue(viewValue);
-	}, [value]);
+	const inputValue = draftValue !== null && draftValue !== void 0 ? draftValue : viewValue;
 	function resetValue() {
-		setInputValue(viewValue);
+		setDraftValue(null);
 	}
 	function handleChangeSelection(e) {
-		setInputValue(e.target.value);
+		setDraftValue(e.target.value);
 	}
 	function handleKeyDown(e) {
 		e.stopPropagation();
@@ -20605,7 +20617,7 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		}
 	}
 	function handleBlur() {
-		if (inputValue !== value) resetValue();
+		if (draftValue !== null && inputValue !== viewValue) resetValue();
 	}
 	function confirm() {
 		const font = fonts.find((item) => {
@@ -20617,11 +20629,12 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		}
 		handleSelectFont(font.value);
 	}
-	function handleSelectFont(value) {
-		commandService.executeCommand(id, { value });
+	function handleSelectFont(nextValue) {
+		resetValue();
+		onChange(nextValue);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-w-32 univer-truncate univer-text-sm",
+		className: (0, _univerjs_design.clsx)("univer-w-32 univer-truncate univer-text-sm", className),
 		style: { fontFamily: value },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			className: "univer-block univer-h-6 univer-border-none univer-bg-transparent univer-leading-6 focus:univer-outline-none dark:!univer-text-white [&_input:focus]:!univer-ring-0 [&_input]:univer-h-6 [&_input]:univer-w-7 [&_input]:univer-border-none [&_input]:!univer-bg-transparent [&_input]:univer-p-0 [&_input]:univer-text-sm",
@@ -20637,23 +20650,12 @@ const FontFamily = ({ id, value, disabled$ }) => {
 
 //#endregion
 //#region src/views/font-family/FontFamilyItem.tsx
-const FontFamilyItem = ({ id, value }) => {
-	const commandService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ICommandService);
-	const fontService = (0, _wendellhu_redi_react_bindings.useDependency)(IFontService);
-	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
-	const [fonts, setFonts] = (0, react.useState)([]);
-	(0, react.useEffect)(() => {
-		const subscription = fontService.fonts$.subscribe((fonts) => {
-			setFonts(fonts);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, []);
+const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
+const FontFamilyItem = ({ value, onChange }) => {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
-	function handleSelectFont(value) {
-		layoutService.focus();
-		commandService.executeCommand(id, { value });
+	const { fonts, fontService } = useFontList();
+	function handleSelectFont(nextValue) {
+		onChange(nextValue);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 		className: "univer-m-0 univer-list-none univer-p-0 univer-text-sm",
@@ -20672,9 +20674,48 @@ const FontFamilyItem = ({ id, value }) => {
 };
 
 //#endregion
-//#region src/views/font-family/interface.ts
-const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
-const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
+//#region src/views/font-family/FontFamilyDropdown.tsx
+function FontFamilyDropdown(props) {
+	const { value, onChange, ariaLabel, className, disabled: disabledProp, disabled$, inputClassName, popupClassName, popupDataComponent, title, onMouseDown, onPointerDown } = props;
+	const disabledObservableValue = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$);
+	const disabled = Boolean(disabledProp || disabledObservableValue);
+	const [open, setOpen] = (0, react.useState)(false);
+	const popupDataAttributes = popupDataComponent ? { "data-u-comp": popupDataComponent } : void 0;
+	function handleChange(nextValue) {
+		setOpen(false);
+		onChange(nextValue);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+		disabled,
+		open,
+		onOpenChange: setOpen,
+		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _univerjs_design.clsx)("univer-max-h-72 univer-min-w-44 univer-overflow-y-auto univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900", popupClassName),
+			...popupDataAttributes,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FontFamilyItem, {
+				value,
+				onChange: handleChange
+			})
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"aria-disabled": disabled,
+			"aria-expanded": open,
+			"aria-label": ariaLabel,
+			className: (0, _univerjs_design.clsx)("univer-flex univer-h-6 univer-min-w-0 univer-cursor-default univer-items-center univer-justify-between univer-gap-1 univer-rounded-md univer-px-1.5 univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-cursor-not-allowed univer-opacity-60": disabled }, className),
+			role: "combobox",
+			tabIndex: disabled ? -1 : 0,
+			title: typeof title === "string" ? title : void 0,
+			onMouseDown,
+			onPointerDown,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FontFamily, {
+				className: (0, _univerjs_design.clsx)("univer-min-w-0 univer-flex-1", inputClassName),
+				value,
+				disabled,
+				onChange: handleChange
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-flex-shrink-0 univer-text-xs univer-text-gray-500" })]
+		})
+	});
+}
 
 //#endregion
 //#region src/views/font-size/FontSize.tsx
@@ -20834,7 +20875,9 @@ const DRAG_COMMIT_INTERVAL = 50;
 function Slider(props) {
 	var _getSliderOffset;
 	const iconManager = (0, _wendellhu_redi_react_bindings.useDependency)(IconManager);
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const { value, min = 0, max = 400, disabled = false, resetPoint = 100, shortcuts, onChange } = props;
+	const isRtl = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection()) === "rtl";
 	const sliderInnerRailRef = (0, react.useRef)(null);
 	const isEditingZoomRef = (0, react.useRef)(false);
 	const dragValueRef = (0, react.useRef)(value);
@@ -20878,6 +20921,7 @@ function Slider(props) {
 		let offsetX = clientX - railRect.x;
 		if (offsetX <= 0) offsetX = 0;
 		else if (offsetX >= railWidth) offsetX = railWidth;
+		if (isRtl) offsetX = railWidth - offsetX;
 		const ratio = offsetX / railWidth;
 		if (ratio <= .5) return min + ratio * (resetPoint - min) * 2;
 		return resetPoint + (ratio - .5) * (max - resetPoint) * 2;
@@ -20996,6 +21040,7 @@ function Slider(props) {
 	}];
 	const visualValue = isDragging ? dragValue : value;
 	const sliderOffset = Math.min(Math.max((_getSliderOffset = getSliderOffset(visualValue)) !== null && _getSliderOffset !== void 0 ? _getSliderOffset : 0, 0), 100);
+	const handleOffset = isRtl ? 100 - sliderOffset : sliderOffset;
 	const ReduceIcon = iconManager.get("ReduceIcon");
 	const IncreaseIcon = iconManager.get("IncreaseIcon");
 	const MoreDownIcon = iconManager.get("MoreDownIcon");
@@ -21022,7 +21067,7 @@ function Slider(props) {
 						onPointerDown: handlePointerDown,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-bg-primary-500/60 univer-absolute univer-left-0 univer-top-0 univer-h-full univer-rounded-full",
+								className: (0, _univerjs_design.clsx)("univer-bg-primary-500/60 univer-absolute univer-top-0 univer-h-full univer-rounded-full", isRtl ? "univer-right-0" : "univer-left-0"),
 								style: { width: `${sliderOffset}%` }
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
@@ -21041,7 +21086,7 @@ function Slider(props) {
 								"aria-valuemax": max,
 								"aria-valuenow": visualValue,
 								type: "button",
-								style: { left: `${sliderOffset}%` },
+								style: { left: `${handleOffset}%` },
 								onPointerDown: handlePointerDown
 							})
 						]
@@ -24139,6 +24184,7 @@ exports.FONT_SIZE_LIST = FONT_SIZE_LIST;
 exports.FloatDom = FloatDom;
 exports.FloatDomSingle = FloatDomSingle;
 exports.FontFamily = FontFamily;
+exports.FontFamilyDropdown = FontFamilyDropdown;
 exports.FontFamilyItem = FontFamilyItem;
 Object.defineProperty(exports, 'FontService', {
   enumerable: true,

package/lib/es/index.js

@@ -306,11 +306,11 @@ function getHeaderFooterMenuHiddenObservable(accessor) {
 	return new Observable((subscriber) => {
 		const subscription = univerInstanceService.focused$.subscribe((unitId) => {
 			if (unitId == null) return subscriber.next(true);
-			const docDataModel = univerInstanceService.getUniverDocInstance(unitId);
+			const docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
 			const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
 			subscriber.next(documentFlavor !== DocumentFlavor.TRADITIONAL);
 		});
-		const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
+		const docDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 		if (docDataModel == null) subscriber.next(true);
 		else {
 			const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
@@ -2667,14 +2667,14 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 //#endregion
 //#region src/views/components/ribbon/ToolbarItem.tsx
 const toolbarDisabledClassName = "univer-pointer-events-none univer-cursor-not-allowed univer-text-gray-300 dark:!univer-text-gray-600";
-const toolbarButtonSelectorRootVariants = cva("univer-toolbar-button-selector-root univer-animate-in univer-fade-in univer-group univer-relative univer-flex univer-h-6 univer-cursor-pointer univer-items-center univer-rounded univer-pr-5 univer-text-sm univer-transition-colors hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700", {
+const toolbarButtonSelectorRootVariants = cva("univer-toolbar-button-selector-root univer-animate-in univer-fade-in univer-group univer-relative univer-flex univer-h-6 univer-cursor-pointer univer-items-center univer-rounded univer-pr-5 univer-text-sm univer-transition-colors hover:univer-bg-gray-100 rtl:univer-pl-5 rtl:univer-pr-0 dark:hover:!univer-bg-gray-700", {
 	variants: { disabled: {
 		true: toolbarDisabledClassName,
 		false: "univer-text-gray-900 dark:!univer-text-white"
 	} },
 	defaultVariants: { disabled: false }
 });
-const toolbarButtonSelectorMainVariants = cva("univer-toolbar-button-selector-main univer-relative univer-z-[1] univer-flex univer-h-full univer-items-center univer-rounded-l univer-px-1 univer-transition-colors hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", {
+const toolbarButtonSelectorMainVariants = cva("univer-toolbar-button-selector-main univer-relative univer-z-[1] univer-flex univer-h-full univer-items-center univer-rounded-l univer-px-1 univer-transition-colors hover:univer-bg-gray-200 rtl:univer-rounded-l-none rtl:univer-rounded-r dark:hover:!univer-bg-gray-600", {
 	variants: {
 		active: {
 			true: "univer-bg-gray-200 dark:!univer-bg-gray-500",
@@ -2695,7 +2695,7 @@ const toolbarButtonSelectorMainVariants = cva("univer-toolbar-button-selector-ma
 		disabled: false
 	}
 });
-const toolbarButtonSelectorTriggerVariants = cva("univer-toolbar-button-selector-trigger univer-absolute univer-right-0 univer-top-0 univer-box-border univer-flex univer-h-6 univer-w-5 univer-items-center univer-justify-center univer-rounded-r univer-transition-colors hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", {
+const toolbarButtonSelectorTriggerVariants = cva("univer-toolbar-button-selector-trigger univer-absolute univer-right-0 univer-top-0 univer-box-border univer-flex univer-h-6 univer-w-5 univer-items-center univer-justify-center univer-rounded-r univer-transition-colors hover:univer-bg-gray-200 rtl:univer-left-0 rtl:univer-right-auto rtl:univer-rounded-l rtl:univer-rounded-r-none dark:hover:!univer-bg-gray-600", {
 	variants: {
 		disabled: {
 			true: toolbarDisabledClassName,
@@ -3027,7 +3027,7 @@ function Ribbon(props) {
 				activatedTab,
 				onSelectTab: handleSelectTab
 			}), headerMenu && headerMenuComponents && headerMenuComponents.size > 0 && /* @__PURE__ */ jsx("div", {
-				className: "univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-items-center univer-gap-2 [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded [&>*]:univer-px-1 [&>*]:univer-transition-colors hover:[&>*]:univer-bg-gray-100",
+				className: "univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-flex-row univer-items-center univer-gap-2 rtl:univer-left-2 rtl:univer-right-auto [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded [&>*]:univer-px-1 [&>*]:univer-transition-colors hover:[&>*]:univer-bg-gray-100",
 				children: /* @__PURE__ */ jsx(ComponentContainer, { components: headerMenuComponents })
 			})]
 		}),
@@ -3043,7 +3043,7 @@ function Ribbon(props) {
 			}), /* @__PURE__ */ jsxs("div", {
 				"data-u-comp": "ribbon-toolbar",
 				ref: containerRef,
-				className: clsx("univer-flex univer-overflow-hidden", divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
+				className: clsx("univer-flex univer-overflow-hidden rtl:univer-divide-x-reverse", divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
 				role: "toolbar",
 				"aria-label": localeService.t(activatedTabTitle),
 				children: [activeGroup.visibleGroups.map((groupItem) => {
@@ -4198,7 +4198,9 @@ function ContextMenuMenuItem(props) {
 			const submenuRect = submenuElement.getBoundingClientRect();
 			const rightLeft = menuItemRect.right - submenuOverlapOffset;
 			const leftLeft = menuItemRect.left - submenuRect.width + submenuOverlapOffset;
-			const useLeft = rightLeft + submenuRect.width + menuViewportPadding > window.innerWidth && leftLeft >= menuViewportPadding;
+			const hasLeftSpace = leftLeft >= menuViewportPadding;
+			const hasRightSpace = rightLeft + submenuRect.width + menuViewportPadding <= window.innerWidth;
+			const useLeft = direction === "rtl" ? hasLeftSpace || !hasRightSpace : !hasRightSpace && hasLeftSpace;
 			const left = useLeft ? leftLeft : rightLeft;
 			setSubmenuPlacement(useLeft ? "left" : "right");
 			const maxTop = window.innerHeight - menuViewportPadding - submenuRect.height;
@@ -4217,6 +4219,7 @@ function ContextMenuMenuItem(props) {
 			window.removeEventListener("scroll", updateSubmenuPosition, true);
 		};
 	}, [
+		direction,
 		submenuVisible,
 		hasSelectionSubmenu,
 		hasSubItemSubmenu
@@ -5257,7 +5260,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.2";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -20557,14 +20560,10 @@ let FontService = class FontService {
 FontService = __decorate([__decorateParam(0, IConfigService)], FontService);
 
 //#endregion
-//#region src/views/font-family/FontFamily.tsx
-const FontFamily = ({ id, value, disabled$ }) => {
-	const disabled = useObservable(disabled$);
-	const commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
+//#region src/views/font-family/use-font-list.ts
+function useFontList() {
 	const fontService = useDependency(IFontService);
-	const [inputValue, setInputValue] = useState("");
-	const [fonts, setFonts] = useState([]);
+	const [fonts, setFonts] = useState(() => fontService.getFonts());
 	useEffect(() => {
 		const subscription = fontService.fonts$.subscribe((fonts) => {
 			setFonts(fonts);
@@ -20572,7 +20571,22 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		return () => {
 			subscription.unsubscribe();
 		};
-	}, []);
+	}, [fontService]);
+	return {
+		fonts,
+		fontService
+	};
+}
+
+//#endregion
+//#region src/views/font-family/FontFamily.tsx
+const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
+const FontFamily = ({ className, disabled: disabledProp, value, disabled$, onChange }) => {
+	const disabledObservableValue = useObservable(disabled$);
+	const disabled = Boolean(disabledProp || disabledObservableValue);
+	const localeService = useDependency(LocaleService);
+	const { fonts } = useFontList();
+	const [draftValue, setDraftValue] = useState(null);
 	const viewValue = useMemo(() => {
 		if (value == null) return "";
 		const font = fonts.find((font) => {
@@ -20585,14 +20599,12 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		fonts,
 		localeService
 	]);
-	useMemo(() => {
-		setInputValue(viewValue);
-	}, [value]);
+	const inputValue = draftValue !== null && draftValue !== void 0 ? draftValue : viewValue;
 	function resetValue() {
-		setInputValue(viewValue);
+		setDraftValue(null);
 	}
 	function handleChangeSelection(e) {
-		setInputValue(e.target.value);
+		setDraftValue(e.target.value);
 	}
 	function handleKeyDown(e) {
 		e.stopPropagation();
@@ -20604,7 +20616,7 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		}
 	}
 	function handleBlur() {
-		if (inputValue !== value) resetValue();
+		if (draftValue !== null && inputValue !== viewValue) resetValue();
 	}
 	function confirm() {
 		const font = fonts.find((item) => {
@@ -20616,11 +20628,12 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		}
 		handleSelectFont(font.value);
 	}
-	function handleSelectFont(value) {
-		commandService.executeCommand(id, { value });
+	function handleSelectFont(nextValue) {
+		resetValue();
+		onChange(nextValue);
 	}
 	return /* @__PURE__ */ jsx("div", {
-		className: "univer-w-32 univer-truncate univer-text-sm",
+		className: clsx("univer-w-32 univer-truncate univer-text-sm", className),
 		style: { fontFamily: value },
 		children: /* @__PURE__ */ jsx("input", {
 			className: "univer-block univer-h-6 univer-border-none univer-bg-transparent univer-leading-6 focus:univer-outline-none dark:!univer-text-white [&_input:focus]:!univer-ring-0 [&_input]:univer-h-6 [&_input]:univer-w-7 [&_input]:univer-border-none [&_input]:!univer-bg-transparent [&_input]:univer-p-0 [&_input]:univer-text-sm",
@@ -20636,23 +20649,12 @@ const FontFamily = ({ id, value, disabled$ }) => {
 
 //#endregion
 //#region src/views/font-family/FontFamilyItem.tsx
-const FontFamilyItem = ({ id, value }) => {
-	const commandService = useDependency(ICommandService);
-	const fontService = useDependency(IFontService);
-	const layoutService = useDependency(ILayoutService);
-	const [fonts, setFonts] = useState([]);
-	useEffect(() => {
-		const subscription = fontService.fonts$.subscribe((fonts) => {
-			setFonts(fonts);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, []);
+const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
+const FontFamilyItem = ({ value, onChange }) => {
 	const localeService = useDependency(LocaleService);
-	function handleSelectFont(value) {
-		layoutService.focus();
-		commandService.executeCommand(id, { value });
+	const { fonts, fontService } = useFontList();
+	function handleSelectFont(nextValue) {
+		onChange(nextValue);
 	}
 	return /* @__PURE__ */ jsx("ul", {
 		className: "univer-m-0 univer-list-none univer-p-0 univer-text-sm",
@@ -20671,9 +20673,48 @@ const FontFamilyItem = ({ id, value }) => {
 };
 
 //#endregion
-//#region src/views/font-family/interface.ts
-const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
-const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
+//#region src/views/font-family/FontFamilyDropdown.tsx
+function FontFamilyDropdown(props) {
+	const { value, onChange, ariaLabel, className, disabled: disabledProp, disabled$, inputClassName, popupClassName, popupDataComponent, title, onMouseDown, onPointerDown } = props;
+	const disabledObservableValue = useObservable(disabled$);
+	const disabled = Boolean(disabledProp || disabledObservableValue);
+	const [open, setOpen] = useState(false);
+	const popupDataAttributes = popupDataComponent ? { "data-u-comp": popupDataComponent } : void 0;
+	function handleChange(nextValue) {
+		setOpen(false);
+		onChange(nextValue);
+	}
+	return /* @__PURE__ */ jsx(Dropdown, {
+		disabled,
+		open,
+		onOpenChange: setOpen,
+		overlay: /* @__PURE__ */ jsx("div", {
+			className: clsx("univer-max-h-72 univer-min-w-44 univer-overflow-y-auto univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900", popupClassName),
+			...popupDataAttributes,
+			children: /* @__PURE__ */ jsx(FontFamilyItem, {
+				value,
+				onChange: handleChange
+			})
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			"aria-disabled": disabled,
+			"aria-expanded": open,
+			"aria-label": ariaLabel,
+			className: clsx("univer-flex univer-h-6 univer-min-w-0 univer-cursor-default univer-items-center univer-justify-between univer-gap-1 univer-rounded-md univer-px-1.5 univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-cursor-not-allowed univer-opacity-60": disabled }, className),
+			role: "combobox",
+			tabIndex: disabled ? -1 : 0,
+			title: typeof title === "string" ? title : void 0,
+			onMouseDown,
+			onPointerDown,
+			children: [/* @__PURE__ */ jsx(FontFamily, {
+				className: clsx("univer-min-w-0 univer-flex-1", inputClassName),
+				value,
+				disabled,
+				onChange: handleChange
+			}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-flex-shrink-0 univer-text-xs univer-text-gray-500" })]
+		})
+	});
+}
 
 //#endregion
 //#region src/views/font-size/FontSize.tsx
@@ -20833,7 +20874,9 @@ const DRAG_COMMIT_INTERVAL = 50;
 function Slider(props) {
 	var _getSliderOffset;
 	const iconManager = useDependency(IconManager);
+	const localeService = useDependency(LocaleService);
 	const { value, min = 0, max = 400, disabled = false, resetPoint = 100, shortcuts, onChange } = props;
+	const isRtl = useObservable(localeService.direction$, localeService.getDirection()) === "rtl";
 	const sliderInnerRailRef = useRef(null);
 	const isEditingZoomRef = useRef(false);
 	const dragValueRef = useRef(value);
@@ -20877,6 +20920,7 @@ function Slider(props) {
 		let offsetX = clientX - railRect.x;
 		if (offsetX <= 0) offsetX = 0;
 		else if (offsetX >= railWidth) offsetX = railWidth;
+		if (isRtl) offsetX = railWidth - offsetX;
 		const ratio = offsetX / railWidth;
 		if (ratio <= .5) return min + ratio * (resetPoint - min) * 2;
 		return resetPoint + (ratio - .5) * (max - resetPoint) * 2;
@@ -20995,6 +21039,7 @@ function Slider(props) {
 	}];
 	const visualValue = isDragging ? dragValue : value;
 	const sliderOffset = Math.min(Math.max((_getSliderOffset = getSliderOffset(visualValue)) !== null && _getSliderOffset !== void 0 ? _getSliderOffset : 0, 0), 100);
+	const handleOffset = isRtl ? 100 - sliderOffset : sliderOffset;
 	const ReduceIcon = iconManager.get("ReduceIcon");
 	const IncreaseIcon = iconManager.get("IncreaseIcon");
 	const MoreDownIcon = iconManager.get("MoreDownIcon");
@@ -21021,7 +21066,7 @@ function Slider(props) {
 						onPointerDown: handlePointerDown,
 						children: [
 							/* @__PURE__ */ jsx("div", {
-								className: "univer-bg-primary-500/60 univer-absolute univer-left-0 univer-top-0 univer-h-full univer-rounded-full",
+								className: clsx("univer-bg-primary-500/60 univer-absolute univer-top-0 univer-h-full univer-rounded-full", isRtl ? "univer-right-0" : "univer-left-0"),
 								style: { width: `${sliderOffset}%` }
 							}),
 							/* @__PURE__ */ jsx("a", {
@@ -21040,7 +21085,7 @@ function Slider(props) {
 								"aria-valuemax": max,
 								"aria-valuenow": visualValue,
 								type: "button",
-								style: { left: `${sliderOffset}%` },
+								style: { left: `${handleOffset}%` },
 								onPointerDown: handlePointerDown
 							})
 						]
@@ -24026,4 +24071,4 @@ function ProgressBar(props) {
 }
 
 //#endregion
-export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyItem, FontService, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IconManager, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };
+export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyDropdown, FontFamilyItem, FontService, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IconManager, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };