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

package/lib/index.css

@@ -284,6 +284,10 @@
   height: 100%;
 }
 
+.univer-max-h-72 {
+  max-height: 18rem;
+}
+
 .univer-max-h-\[80vh\] {
   max-height: 80vh;
 }
@@ -388,6 +392,10 @@
   min-width: 0;
 }
 
+.univer-min-w-44 {
+  min-width: 11rem;
+}
+
 .univer-min-w-52 {
   min-width: 13rem;
 }
@@ -566,6 +574,10 @@
   grid-template-rows: auto 1fr auto;
 }
 
+.univer-flex-row {
+  flex-direction: row;
+}
+
 .univer-flex-col {
   flex-direction: column;
 }
@@ -1386,10 +1398,50 @@
   }
 }
 
+.rtl\:univer-left-0:where([dir="rtl"], [dir="rtl"] *) {
+  left: 0;
+}
+
+.rtl\:univer-left-2:where([dir="rtl"], [dir="rtl"] *) {
+  left: .5rem;
+}
+
+.rtl\:univer-right-auto:where([dir="rtl"], [dir="rtl"] *) {
+  right: auto;
+}
+
+.rtl\:univer-divide-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
+  --univer-tw-divide-x-reverse: 1;
+}
+
+.rtl\:univer-rounded-l:where([dir="rtl"], [dir="rtl"] *) {
+  border-top-left-radius: .25rem;
+  border-bottom-left-radius: .25rem;
+}
+
+.rtl\:univer-rounded-l-none:where([dir="rtl"], [dir="rtl"] *) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rtl\:univer-rounded-r:where([dir="rtl"], [dir="rtl"] *) {
+  border-top-right-radius: .25rem;
+  border-bottom-right-radius: .25rem;
+}
+
+.rtl\:univer-rounded-r-none:where([dir="rtl"], [dir="rtl"] *) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .rtl\:univer-pl-1\.5:where([dir="rtl"], [dir="rtl"] *) {
   padding-left: .375rem;
 }
 
+.rtl\:univer-pl-5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 1.25rem;
+}
+
 .rtl\:univer-pr-0:where([dir="rtl"], [dir="rtl"] *) {
   padding-right: 0;
 }

package/lib/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 };

package/lib/types/common/menu-hidden-observable.d.ts

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { IAccessor, UniverInstanceType } from '@univerjs/core';
+import type { IAccessor } from '@univerjs/core';
+import { UniverInstanceType } from '@univerjs/core';
 import { Observable } from 'rxjs';
 export declare function getMenuHiddenObservable(accessor: IAccessor, targetUniverType: UniverInstanceType, matchUnitId?: string, needHideUnitId?: string | string[]): Observable<boolean>;
 export declare function getHeaderFooterMenuHiddenObservable(accessor: IAccessor): Observable<boolean>;

package/lib/types/index.d.ts

@@ -100,10 +100,12 @@ export { ToolbarButton } from './views/components/ribbon/ToolbarButton';
 export { ToolbarItem } from './views/components/ribbon/ToolbarItem';
 export { Sidebar } from './views/components/sidebar/Sidebar';
 export type { ISidebarMethodOptions } from './views/components/sidebar/Sidebar';
-export { FontFamily } from './views/font-family/FontFamily';
-export { FontFamilyItem } from './views/font-family/FontFamilyItem';
-export { FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT } from './views/font-family/interface';
-export type { IFontFamilyProps } from './views/font-family/interface';
+export { FONT_FAMILY_COMPONENT, FontFamily } from './views/font-family/FontFamily';
+export type { IFontFamilyProps } from './views/font-family/FontFamily';
+export { FontFamilyDropdown } from './views/font-family/FontFamilyDropdown';
+export type { IFontFamilyDropdownProps } from './views/font-family/FontFamilyDropdown';
+export { FONT_FAMILY_ITEM_COMPONENT, FontFamilyItem } from './views/font-family/FontFamilyItem';
+export type { IFontFamilyItemProps } from './views/font-family/FontFamilyItem';
 export { FontSize } from './views/font-size/FontSize';
 export { FONT_SIZE_COMPONENT, FONT_SIZE_LIST, HEADING_LIST } from './views/font-size/interface';
 export * from './views/hooks/index';

package/lib/types/views/font-family/FontFamily.d.ts

@@ -13,5 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { IFontFamilyProps } from './interface';
-export declare const FontFamily: ({ id, value, disabled$ }: IFontFamilyProps) => import("react").JSX.Element;
+import type { Observable } from 'rxjs';
+import type { ICustomComponentProps } from '../../services/menu/menu';
+export interface IFontFamilyProps extends ICustomComponentProps<string> {
+    className?: string;
+    disabled?: boolean;
+    value: string;
+    disabled$?: Observable<boolean>;
+}
+export declare const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
+export declare const FontFamily: ({ className, disabled: disabledProp, value, disabled$, onChange }: IFontFamilyProps) => import("react").JSX.Element;

package/lib/types/views/font-family/FontFamilyDropdown.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { MouseEvent, PointerEvent, ReactNode } from 'react';
+import type { Observable } from 'rxjs';
+export interface IFontFamilyDropdownProps {
+    value: string;
+    onChange: (value: string) => void;
+    ariaLabel?: string;
+    className?: string;
+    disabled?: boolean;
+    disabled$?: Observable<boolean>;
+    inputClassName?: string;
+    popupClassName?: string;
+    popupDataComponent?: string;
+    title?: ReactNode;
+    onMouseDown?: (event: MouseEvent<HTMLElement>) => void;
+    onPointerDown?: (event: PointerEvent<HTMLElement>) => void;
+}
+export declare function FontFamilyDropdown(props: IFontFamilyDropdownProps): import("react").JSX.Element;

package/lib/types/views/font-family/FontFamilyItem.d.ts

@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const FontFamilyItem: ({ id, value }: {
-    id: string;
+import type { ICustomComponentProps } from '../../services/menu/menu';
+export interface IFontFamilyItemProps extends ICustomComponentProps<string> {
     value: string;
-}) => import("react").JSX.Element;
+}
+export declare const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
+export declare const FontFamilyItem: ({ value, onChange }: IFontFamilyItemProps) => import("react").JSX.Element;

package/lib/types/views/font-family/index.d.ts

@@ -13,5 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { FontFamily } from './FontFamily';
-export { FontFamilyItem } from './FontFamilyItem';
+export { FONT_FAMILY_COMPONENT, FontFamily } from './FontFamily';
+export type { IFontFamilyProps } from './FontFamily';
+export { FontFamilyDropdown } from './FontFamilyDropdown';
+export type { IFontFamilyDropdownProps } from './FontFamilyDropdown';
+export { FONT_FAMILY_ITEM_COMPONENT, FontFamilyItem } from './FontFamilyItem';
+export type { IFontFamilyItemProps } from './FontFamilyItem';

package/lib/types/views/font-family/{interface.d.ts → use-font-list.d.ts}

@@ -13,12 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { Observable } from 'rxjs';
-import type { ICustomComponentProps } from '../../services/menu/menu';
-export interface IFontFamilyProps extends ICustomComponentProps<string> {
-    id: string;
-    value: string;
-    disabled$?: Observable<boolean>;
-}
-export declare const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
-export declare const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
+import type { IFontConfig } from '../../services/font.service';
+import { IFontService } from '../../services/font.service';
+export declare function useFontList(): {
+    fonts: IFontConfig[];
+    fontService: IFontService;
+};