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

package/lib/es/locale/it-IT.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Copiato"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Visualizzazione foglio",
+		"sheet-edit": "Modifica foglio",
 		sheet: {
 			"zoom-in": "Aumenta zoom",
 			"zoom-out": "Diminuisci zoom",

package/lib/es/locale/pl-PL.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Skopiowano"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Widok arkusza",
+		"sheet-edit": "Edycja arkusza",
 		sheet: {
 			"zoom-in": "Powiększ",
 			"zoom-out": "Pomniejsz",

package/lib/es/locale/pt-BR.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Copiado"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Visualização da planilha",
+		"sheet-edit": "Edição da planilha",
 		sheet: {
 			"zoom-in": "Aumentar zoom",
 			"zoom-out": "Diminuir zoom",

package/lib/es/locale/ru-RU.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Скопировано"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Просмотр листа",
+		"sheet-edit": "Редактирование листа",
 		sheet: {
 			"zoom-in": "Увеличить",
 			"zoom-out": "Уменьшить",

package/lib/es/locale/sk-SK.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Skopírované"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Zobrazenie hárka",
+		"sheet-edit": "Úprava hárka",
 		sheet: {
 			"zoom-in": "Priblížiť",
 			"zoom-out": "Oddialiť",

package/lib/es/locale/vi-VN.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Đã sao chép"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Xem trang tính",
+		"sheet-edit": "Chỉnh sửa trang tính",
 		sheet: {
 			"zoom-in": "Phóng to",
 			"zoom-out": "Thu nhỏ",

package/lib/facade.js

@@ -1275,13 +1275,14 @@ FRange.extend(FRangeSheetsUIMixin);
 * @returns {string} The transformed component key.
 */
 function transformComponentKey(component, componentManager) {
-	const { componentKey, isVue3 } = component;
+	const { componentKey, framework } = component;
 	let key;
 	const disposableCollection = new DisposableCollection();
 	if (typeof componentKey === "string") key = componentKey;
 	else {
-		key = `External_${generateRandomId(6)}`;
-		disposableCollection.add(componentManager.register(key, componentKey, { framework: isVue3 ? "vue3" : "react" }));
+		const resolvedFramework = framework !== null && framework !== void 0 ? framework : "react";
+		key = resolvedFramework === "web-component" ? `external-${generateRandomId(6).toLowerCase()}` : `External_${generateRandomId(6)}`;
+		disposableCollection.add(componentManager.register(key, componentKey, { framework: resolvedFramework }));
 	}
 	return {
 		key,

package/lib/index.css

@@ -350,10 +350,6 @@
   width: 300px;
 }
 
-.univer-w-\[50\%\] {
-  width: 50%;
-}
-
 .univer-w-fit {
   width: fit-content;
 }
@@ -418,6 +414,10 @@
   flex-grow: 0;
 }
 
+.univer-basis-0 {
+  flex-basis: 0;
+}
+
 .-univer-translate-y-1\/2 {
   --univer-tw-translate-y: -50%;
   transform: translate(var(--univer-tw-translate-x), -50%) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
@@ -1116,6 +1116,40 @@
   background-color: var(--univer-gray-100);
 }
 
+.rtl\:univer-left-0:where([dir="rtl"], [dir="rtl"] *) {
+  left: 0;
+}
+
+.rtl\:univer-right-auto:where([dir="rtl"], [dir="rtl"] *) {
+  right: auto;
+}
+
+.rtl\:univer-flex-row-reverse:where([dir="rtl"], [dir="rtl"] *) {
+  flex-direction: row-reverse;
+}
+
+.rtl\:univer-pl-5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 1.25rem;
+}
+
+.rtl\:univer-pr-1\.5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: .375rem;
+}
+
+.rtl\:univer-text-right:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: right;
+}
+
+.rtl\:after\:univer-left-0:where([dir="rtl"], [dir="rtl"] *):after {
+  content: var(--univer-tw-content);
+  left: 0;
+}
+
+.rtl\:after\:univer-right-auto:where([dir="rtl"], [dir="rtl"] *):after {
+  content: var(--univer-tw-content);
+  right: auto;
+}
+
 .dark\:\!univer-divide-gray-600:where(.univer-dark, .univer-dark *) > :not([hidden]) ~ :not([hidden]) {
   border-color: var(--univer-gray-600) !important;
 }

package/lib/index.js

@@ -6,9 +6,9 @@ import { AUTO_FILL_APPLY_TYPE, AUTO_FILL_HOOK_TYPE, AddMergeUndoMutationFactory,
 import { BehaviorSubject, EMPTY, Observable, Subject, Subscription, combineLatest, combineLatestWith, distinctUntilChanged, filter, map, merge as merge$1, of, shareReplay, startWith, switchMap, takeUntil, throttleTime, withLatestFrom } from "rxjs";
 import { DocSelectionManagerService, DocSkeletonManagerService, InsertTextCommand, RichTextEditingMutation, SetTextSelectionsOperation } from "@univerjs/docs";
 import { ObjectScope, UnitAction, UnitObject, UnitRole } from "@univerjs/protocol";
-import { Avatar, Button, Calendar, CascaderList, ColorPicker, Confirm, Dropdown, DropdownMenu, FormLayout, Input, InputNumber, MessageType, Radio, RadioGroup, Select, Separator, Switch, TimeInput, Tooltip, borderBottomClassName, borderClassName, borderRightClassName, borderTopClassName, clsx, scrollbarClassName } from "@univerjs/design";
-import { AddImageIcon, AdjustHeightDoubleIcon, AdjustWidthDoubleIcon, AlignBottomIcon, AlignTopIcon, AllBorderIcon, AutoHeightDoubleIcon, AutoWidthDoubleIcon, AutofillDoubleIcon, AutowrapIcon, BackSlashDoubleIcon, BoldIcon, BrushIcon, CancelFreezeIcon, CancelMergeIcon, CheckMarkIcon, ClearFormatDoubleIcon, CloseIcon, CodeIcon, ConvertIcon, CopyDoubleIcon, CutIcon, DeleteCellShiftLeftDoubleIcon, DeleteCellShiftUpDoubleIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DownBorderDoubleIcon, DownloadImageIcon, DropdownIcon, ErrorIcon, EyeOutlineIcon, EyelashIcon, FontColorDoubleIcon, FontSizeIncreaseIcon, FontSizeReduceIcon, FreezeColumnIcon, FreezeRowIcon, FreezeToSelectedIcon, FxIcon, HideDoubleIcon, HideGridlinesDoubleIcon, HorizontalBorderDoubleIcon, HorizontalMergeIcon, HorizontallyIcon, IncreaseIcon, InfoIcon, InnerBorderDoubleIcon, InsertCellDownDoubleIcon, InsertCellShiftRightDoubleIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, LeftBorderDoubleIcon, LeftDoubleDiagonalDoubleIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LeftRotationFortyFiveDegreesIcon, LeftRotationNinetyDegreesIcon, LeftTridiagonalDoubleIcon, LockIcon, MergeAllIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, NoBorderIcon, NoColorDoubleIcon, NoRotationIcon, OuterBorderDoubleIcon, OverflowIcon, PaintBucketDoubleIcon, PasteSpecialDoubleIcon, PenIcon, PipingIcon, ProtectIcon, ReduceDoubleIcon, RightBorderDoubleIcon, RightDoubleDiagonalDoubleIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, RightRotationFortyFiveDegreesIcon, RightRotationNinetyDegreesIcon, SlashDoubleIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, TruncationIcon, UnderlineIcon, UpBorderDoubleIcon, VerticalBorderDoubleIcon, VerticalCenterIcon, VerticalIntegrationIcon, VerticalTextIcon, WarningIcon, WriteIcon } from "@univerjs/icons";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Avatar, Button, Calendar, CascaderList, ColorPicker, ConfigContext, Confirm, Dropdown, DropdownMenu, FormLayout, Input, InputNumber, MessageType, Radio, RadioGroup, Select, Separator, Switch, TimeInput, Tooltip, borderBottomClassName, borderClassName, borderRightClassName, borderTopClassName, clsx, scrollbarClassName } from "@univerjs/design";
+import { AddImageIcon, AdjustHeightDoubleIcon, AdjustWidthDoubleIcon, AlignBottomIcon, AlignTopIcon, AllBorderIcon, AutoHeightDoubleIcon, AutoWidthDoubleIcon, AutofillDoubleIcon, AutowrapIcon, BackSlashDoubleIcon, BoldIcon, BrushIcon, CancelFreezeIcon, CancelMergeIcon, CheckMarkIcon, ClearFormatDoubleIcon, CloseIcon, CodeIcon, ConvertIcon, CopyDoubleIcon, CutIcon, DeleteCellShiftLeftDoubleIcon, DeleteCellShiftUpDoubleIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DownBorderDoubleIcon, DownloadImageIcon, DropdownIcon, ErrorIcon, EyeIcon, EyelashIcon, FontColorDoubleIcon, FontSizeIncreaseIcon, FontSizeReduceIcon, FreezeColumnIcon, FreezeRowIcon, FreezeToSelectedIcon, FxIcon, HideDoubleIcon, HideGridlinesDoubleIcon, HorizontalBorderDoubleIcon, HorizontalMergeIcon, HorizontallyIcon, IncreaseIcon, InfoIcon, InnerBorderDoubleIcon, InsertCellDownDoubleIcon, InsertCellShiftRightDoubleIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, LeftBorderDoubleIcon, LeftDoubleDiagonalDoubleIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LeftRotationFortyFiveDegreesIcon, LeftRotationNinetyDegreesIcon, LeftTridiagonalDoubleIcon, LockIcon, MergeAllIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, NoBorderIcon, NoColorDoubleIcon, NoRotationIcon, OuterBorderDoubleIcon, OverflowIcon, PaintBucketDoubleIcon, PasteSpecialDoubleIcon, PenIcon, PipingIcon, ProtectIcon, ReduceDoubleIcon, RightBorderDoubleIcon, RightDoubleDiagonalDoubleIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, RightRotationFortyFiveDegreesIcon, RightRotationNinetyDegreesIcon, SlashDoubleIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, TruncationIcon, UnderlineIcon, UpBorderDoubleIcon, VerticalBorderDoubleIcon, VerticalCenterIcon, VerticalIntegrationIcon, VerticalTextIcon, WarningIcon, WriteIcon } from "@univerjs/icons";
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { FUNCTION_NAMES_MATH, FUNCTION_NAMES_STATISTICAL, FUNCTION_NAMES_TEXT, FormulaDataModel, IDefinedNamesService, IFunctionService, ISuperTableService, LexerTreeBuilder, NullValueObject, SetFormulaCalculationNotificationMutation, deserializeRangeWithSheet, isReferenceStringWithEffectiveColumn, isReferenceStrings, matchToken, operatorToken, sequenceNodeType, serializeRange, serializeRangeWithSheet } from "@univerjs/engine-formula";
 import { ITelemetryService } from "@univerjs/telemetry";
@@ -12207,7 +12207,7 @@ let FormulaEditorController = class FormulaEditorController extends RxDisposable
 			if (this._contextService.getContextValue(FOCUSING_EDITOR_BUT_HIDDEN) && !this._contextService.getContextValue(EDITOR_ACTIVATED)) {
 				var _formulaEditorDataMod;
 				this._univerInstanceService.setCurrentUnitForType(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
-				const formulaEditorDataModel = this._univerInstanceService.getUniverDocInstance(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+				const formulaEditorDataModel = this._univerInstanceService.getUnit(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, UniverInstanceType.UNIVER_DOC);
 				if (this._editorBridgeService.isVisible().visible === false) this._commandService.syncExecuteCommand(SetCellEditVisibleOperation.id, {
 					visible: true,
 					eventType: DeviceInputEventType.PointerDown,
@@ -12247,7 +12247,7 @@ let FormulaEditorController = class FormulaEditorController extends RxDisposable
 		this.disposeWithMe(combineLatest([this._formulaEditorManagerService.position$, addFormulaBar$]).subscribe(([position]) => {
 			if (!position) return this._clearScheduledCallback();
 			const editorObject = getEditorObject(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, this._renderManagerService);
-			const formulaEditorDataModel = this._univerInstanceService.getUniverDocInstance(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+			const formulaEditorDataModel = this._univerInstanceService.getUnit(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, UniverInstanceType.UNIVER_DOC);
 			if (editorObject == null || formulaEditorDataModel == null) return this._clearScheduledCallback();
 			const { width, height } = position;
 			if (width === 0 || height === 0) return this._clearScheduledCallback();
@@ -12266,7 +12266,7 @@ let FormulaEditorController = class FormulaEditorController extends RxDisposable
 		const position = this._formulaEditorManagerService.getPosition();
 		const skeleton = (_this$_renderManagerS = this._renderManagerService.getRenderById(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocSkeletonManagerService).getSkeleton();
 		const editorObject = this._renderManagerService.getRenderById(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
-		const formulaEditorDataModel = this._univerInstanceService.getUniverDocInstance(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		const formulaEditorDataModel = this._univerInstanceService.getUnit(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, UniverInstanceType.UNIVER_DOC);
 		if (skeleton == null || position == null || editorObject == null || formulaEditorDataModel == null) return;
 		const { marginTop = 0, marginBottom = 0 } = formulaEditorDataModel.getSnapshot().documentStyle;
 		const { scene, mainComponent } = editorObject;
@@ -18060,7 +18060,7 @@ function ShowRowMenuItemFactory(accessor) {
 	return {
 		id: SetSelectedRowsVisibleCommand.id,
 		type: MenuItemType.BUTTON,
-		icon: "EyeOutlineIcon",
+		icon: "EyeIcon",
 		title: "sheets-ui.rightClick.showHideRow",
 		hidden$: deriveStateFromActiveSheet$(univerInstanceService, true, ({ worksheet }) => new Observable((subscriber) => {
 			function hasHiddenRowsInSelections() {
@@ -18096,7 +18096,7 @@ function ShowColMenuItemFactory(accessor) {
 	return {
 		id: SetSelectedColsVisibleCommand.id,
 		type: MenuItemType.BUTTON,
-		icon: "EyeOutlineIcon",
+		icon: "EyeIcon",
 		title: "sheets-ui.rightClick.showHideColumn",
 		hidden$: deriveStateFromActiveSheet$(univerInstanceService, true, ({ worksheet }) => new Observable((subscriber) => {
 			function hasHiddenColsInSelections() {
@@ -19764,6 +19764,7 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 	const definedNamesService = useDependency(IDefinedNamesService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const sidebarService = useDependency(ISidebarService);
+	const direction = localeService.getDirection();
 	const unitId = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET).getUnitId();
 	const getDefinedNameMap = () => {
 		const definedNameMap = definedNamesService.getDefinedNameMap(unitId);
@@ -19818,7 +19819,9 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 		definedNamesService.focusRange(unitId, id);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "univer-w-[300px]",
+		"data-u-comp": "defined-name-overlay",
+		dir: direction,
+		className: "univer-w-[300px] rtl:univer-text-right",
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: listContainerRef,
 			className: clsx("univer-max-h-[360px] univer-min-h-0 univer-overflow-y-auto", scrollbarClassName, { "univer-min-h-[30px]": filteredDefinedNames.length > 0 }),
@@ -19832,13 +19835,16 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 							focusDefinedName(definedName);
 						},
 						children: /* @__PURE__ */ jsxs("div", {
-							className: clsx("univer-flex univer-items-center univer-justify-between univer-gap-2 univer-py-1", borderBottomClassName),
+							"data-u-comp": "defined-name-overlay-row",
+							className: clsx("univer-flex univer-items-center univer-gap-2 univer-py-1 rtl:univer-flex-row-reverse", borderBottomClassName),
 							children: [/* @__PURE__ */ jsx("div", {
-								className: "univer-w-[50%] univer-flex-shrink-0 univer-truncate univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
+								"data-u-comp": "defined-name-overlay-name",
+								className: "univer-min-w-0 univer-flex-1 univer-basis-0 univer-truncate univer-text-sm univer-text-gray-600 rtl:univer-text-right dark:!univer-text-gray-200",
 								title: definedName.name,
 								children: definedName.name
 							}), /* @__PURE__ */ jsx("div", {
-								className: "univer-w-[50%] univer-flex-shrink-0 univer-truncate univer-text-xs univer-text-gray-400",
+								"data-u-comp": "defined-name-overlay-reference",
+								className: "univer-min-w-0 univer-flex-1 univer-basis-0 univer-truncate univer-text-xs univer-text-gray-400 rtl:univer-text-right",
 								title: definedName.formulaOrRefString,
 								children: definedName.formulaOrRefString
 							})]
@@ -19847,7 +19853,8 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 				})
 			})
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "univer-cursor-pointer univer-p-2 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-600",
+			"data-u-comp": "defined-name-overlay-footer",
+			className: "univer-cursor-pointer univer-p-2 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 rtl:univer-text-right dark:hover:!univer-bg-gray-600",
 			onClick: openSlider,
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "univer-mb-2 univer-text-sm univer-font-semibold univer-text-gray-600 dark:!univer-text-gray-200",
@@ -20035,7 +20042,7 @@ function DefinedName({ disable }) {
 		className: "univer-relative univer-box-border univer-flex univer-h-full univer-w-24 univer-border-r-gray-200 univer-py-1.5 univer-transition-all",
 		children: [/* @__PURE__ */ jsx("input", {
 			ref: inputRef,
-			className: clsx("univer-box-border univer-size-full univer-appearance-none univer-pl-1.5 univer-pr-5 univer-text-gray-900 focus:univer-outline-none dark:!univer-border-r-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-white", borderRightClassName, { "univer-cursor-not-allowed": disable }),
+			className: clsx("univer-box-border univer-size-full univer-appearance-none univer-pl-1.5 univer-pr-5 univer-text-gray-900 focus:univer-outline-none rtl:univer-pl-5 rtl:univer-pr-1.5 dark:!univer-border-r-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-white", borderRightClassName, { "univer-cursor-not-allowed": disable }),
 			type: "text",
 			value: inputValue,
 			onChange: handleChangeSelection,
@@ -20054,7 +20061,7 @@ function DefinedName({ disable }) {
 			onOpenChange: setOpen,
 			onOpenAutoFocus: (e) => e.preventDefault(),
 			children: /* @__PURE__ */ jsx("a", {
-				className: clsx("univer-absolute univer-right-0 univer-top-0 univer-flex univer-h-full univer-cursor-pointer univer-items-center univer-justify-center univer-px-1 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-800", { "univer-cursor-not-allowed univer-text-gray-300 hover:univer-bg-transparent dark:!univer-text-gray-700": disable }),
+				className: clsx("univer-absolute univer-right-0 univer-top-0 univer-flex univer-h-full univer-cursor-pointer univer-items-center univer-justify-center univer-px-1 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 rtl:univer-left-0 rtl:univer-right-auto dark:!univer-text-white dark:hover:!univer-bg-gray-800", { "univer-cursor-not-allowed univer-text-gray-300 hover:univer-bg-transparent dark:!univer-text-gray-700": disable }),
 				children: /* @__PURE__ */ jsx(MoreDownIcon, {})
 			})
 		})]
@@ -21836,7 +21843,8 @@ const SheetBar = () => {
 			}),
 			/* @__PURE__ */ jsx(SheetBarTabs, {}),
 			(!leftScrollState || !rightScrollState) && /* @__PURE__ */ jsxs("div", {
-				className: "univer-relative univer-flex univer-items-center univer-px-2 after:univer-absolute after:univer-right-0 after:univer-top-1/2 after:univer-h-4 after:univer-w-px after:-univer-translate-y-1/2 after:univer-bg-gray-200 after:univer-content-[\"\"]",
+				"data-u-comp": "sheet-bar-scroll-buttons",
+				className: "univer-relative univer-flex univer-items-center univer-px-2 after:univer-absolute after:univer-right-0 after:univer-top-1/2 after:univer-h-4 after:univer-w-px after:-univer-translate-y-1/2 after:univer-bg-gray-200 after:univer-content-[\"\"] rtl:univer-flex-row-reverse rtl:after:univer-left-0 rtl:after:univer-right-auto",
 				children: [/* @__PURE__ */ jsx(SheetBarButton, {
 					disabled: leftScrollState,
 					onClick: handleScrollLeft,
@@ -22742,7 +22750,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.2";
 
 //#endregion
 //#region src/controllers/cell-alert.controller.ts
@@ -24153,7 +24161,9 @@ function BorderPanel(props) {
 	var _value$color;
 	const iconManager = useDependency(IconManager);
 	const borderStyleManagerService = useDependency(BorderStyleManagerService);
-	const { isAllValuesSame, value: currentValue } = useDependency(SheetsSelectionsService).getCellStylesProperty("bd");
+	const selectionManagerService = useDependency(SheetsSelectionsService);
+	const { direction } = useContext(ConfigContext);
+	const { isAllValuesSame, value: currentValue } = selectionManagerService.getCellStylesProperty("bd");
 	const color = isAllValuesSame ? getBorderColor(currentValue) : void 0;
 	const type = isAllValuesSame ? getBorderStyle(currentValue) : void 0;
 	const { onChange, value } = props;
@@ -24168,6 +24178,7 @@ function BorderPanel(props) {
 		return Icon && /* @__PURE__ */ jsx(Icon, { className: "univer-fill-primary-600" });
 	}
 	return /* @__PURE__ */ jsxs("section", {
+		dir: direction,
 		className: "univer-box-border univer-grid univer-gap-2 univer-p-1.5",
 		children: [
 			/* @__PURE__ */ jsx("div", {
@@ -26043,7 +26054,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 			DeleteRowDoubleIcon,
 			DownBorderDoubleIcon,
 			DownloadImageIcon,
-			EyeOutlineIcon,
+			EyeIcon,
 			FontColorDoubleIcon,
 			FontSizeIncreaseIcon,
 			FontSizeReduceIcon,

package/lib/locale/ar-SA.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "تم النسخ"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "عرض الورقة",
+		"sheet-edit": "تحرير الورقة",
 		sheet: {
 			"zoom-in": "تكبير",
 			"zoom-out": "تصغير",

package/lib/locale/ca-ES.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Copiat"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Vista del full",
+		"sheet-edit": "Edició del full",
 		sheet: {
 			"zoom-in": "Apropar",
 			"zoom-out": "Allunyar",

package/lib/locale/de-DE.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Kopiert"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Tabellenblattansicht",
+		"sheet-edit": "Tabellenblattbearbeitung",
 		sheet: {
 			"zoom-in": "Vergrößern",
 			"zoom-out": "Verkleinern",

package/lib/locale/es-ES.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Copiado"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Vista de hoja",
+		"sheet-edit": "Edición de hoja",
 		sheet: {
 			"zoom-in": "Acercar",
 			"zoom-out": "Alejar",

package/lib/locale/fa-IR.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "کپی شد"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "نمایش برگه",
+		"sheet-edit": "ویرایش برگه",
 		sheet: {
 			"zoom-in": "بزرگنمایی",
 			"zoom-out": "کوچکنمایی",

package/lib/locale/fr-FR.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Copié"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Affichage de la feuille",
+		"sheet-edit": "Modification de la feuille",
 		sheet: {
 			"zoom-in": "Zoom avant",
 			"zoom-out": "Zoom arrière",

package/lib/locale/id-ID.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Tersalin"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Tampilan lembar",
+		"sheet-edit": "Pengeditan lembar",
 		sheet: {
 			"zoom-in": "Perbesar",
 			"zoom-out": "Perkecil",

package/lib/locale/it-IT.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Copiato"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Visualizzazione foglio",
+		"sheet-edit": "Modifica foglio",
 		sheet: {
 			"zoom-in": "Aumenta zoom",
 			"zoom-out": "Diminuisci zoom",

package/lib/locale/pl-PL.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Skopiowano"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Widok arkusza",
+		"sheet-edit": "Edycja arkusza",
 		sheet: {
 			"zoom-in": "Powiększ",
 			"zoom-out": "Pomniejsz",

package/lib/locale/pt-BR.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Copiado"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Visualização da planilha",
+		"sheet-edit": "Edição da planilha",
 		sheet: {
 			"zoom-in": "Aumentar zoom",
 			"zoom-out": "Diminuir zoom",

package/lib/locale/ru-RU.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Скопировано"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Просмотр листа",
+		"sheet-edit": "Редактирование листа",
 		sheet: {
 			"zoom-in": "Увеличить",
 			"zoom-out": "Уменьшить",

package/lib/locale/sk-SK.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Skopírované"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Zobrazenie hárka",
+		"sheet-edit": "Úprava hárka",
 		sheet: {
 			"zoom-in": "Priblížiť",
 			"zoom-out": "Oddialiť",

package/lib/locale/vi-VN.js

@@ -269,8 +269,8 @@ const locale = { "sheets-ui": {
 		copied: "Đã sao chép"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "Xem trang tính",
+		"sheet-edit": "Chỉnh sửa trang tính",
 		sheet: {
 			"zoom-in": "Phóng to",
 			"zoom-out": "Thu nhỏ",

package/lib/types/facade/f-range.d.ts

@@ -23,14 +23,15 @@ import { ComponentManager } from '@univerjs/ui';
 export interface IFComponentKey {
     /**
      * The key of the component to be rendered in the popup.
-     * if key is a string, it will be query from the component registry.
-     * if key is a React or Vue3 component, it will be rendered directly.
+     * If key is a string, it will be queried from the component registry.
+     * If key is a component, it will be registered temporarily with the specified framework.
      */
     componentKey: string | ComponentType;
     /**
-     * If componentKey is a Vue3 component, this must be set to true
+     * The framework adapter used to render a direct component.
+     * Defaults to `react`.
      */
-    isVue3?: boolean;
+    framework?: string;
 }
 export interface IFCanvasPopup extends Omit<ICanvasPopup, 'componentKey'>, IFComponentKey {
 }