@univerjs/sheets-ui 0.5.4 → 0.5.5-experimental.20250123-34738ff

package/lib/types/controllers/editor/formula-editor.controller.d.ts

@@ -1,8 +1,9 @@
 import { ICommandService, IContextService, IUndoRedoService, IUniverInstanceService, RxDisposable } from '@univerjs/core';
 import { DocSelectionManagerService } from '@univerjs/docs';
+import { IEditorService } from '@univerjs/docs-ui';
 import { IRenderManagerService } from '@univerjs/engine-render';
-import { IFormulaEditorManagerService } from '../../services/editor/formula-editor-manager.service';
 import { IEditorBridgeService } from '../../services/editor-bridge.service';
+import { IFormulaEditorManagerService } from '../../services/editor/formula-editor-manager.service';
 export declare class FormulaEditorController extends RxDisposable {
     private readonly _univerInstanceService;
     private readonly _renderManagerService;
@@ -12,8 +13,9 @@ export declare class FormulaEditorController extends RxDisposable {
     private readonly _formulaEditorManagerService;
     private readonly _undoRedoService;
     private readonly _textSelectionManagerService;
+    private readonly _editorService;
     private _loadedMap;
-    constructor(_univerInstanceService: IUniverInstanceService, _renderManagerService: IRenderManagerService, _editorBridgeService: IEditorBridgeService, _commandService: ICommandService, _contextService: IContextService, _formulaEditorManagerService: IFormulaEditorManagerService, _undoRedoService: IUndoRedoService, _textSelectionManagerService: DocSelectionManagerService);
+    constructor(_univerInstanceService: IUniverInstanceService, _renderManagerService: IRenderManagerService, _editorBridgeService: IEditorBridgeService, _commandService: ICommandService, _contextService: IContextService, _formulaEditorManagerService: IFormulaEditorManagerService, _undoRedoService: IUndoRedoService, _textSelectionManagerService: DocSelectionManagerService, _editorService: IEditorService);
     private _initialize;
     private _handleContentChange;
     private _create;

package/lib/types/controllers/render-controllers/freeze.render-controller.d.ts

@@ -1,8 +1,12 @@
-import { Disposable, ICommandService, Injector, InterceptorManager, ThemeService, Workbook } from '@univerjs/core';
-import { SheetInterceptorService, SheetsSelectionsService } from '@univerjs/sheets';
+import { Workbook, Disposable, ICommandService, Injector, InterceptorManager, ThemeService } from '@univerjs/core';
 import { IRenderContext, IRenderModule } from '@univerjs/engine-render';
+import { SheetInterceptorService, SheetsSelectionsService } from '@univerjs/sheets';
 import { SheetScrollManagerService } from '../../services/scroll-manager.service';
 import { SheetSkeletonManagerService } from '../../services/sheet-skeleton-manager.service';
+export declare const FREEZE_ROW_MAIN_NAME = "__SpreadsheetFreezeRowMainName__";
+export declare const FREEZE_ROW_HEADER_NAME = "__SpreadsheetFreezeRowHeaderName__";
+export declare const FREEZE_COLUMN_MAIN_NAME = "__SpreadsheetFreezeColumnMainName__";
+export declare const FREEZE_COLUMN_HEADER_NAME = "__SpreadsheetFreezeColumnHeaderName__";
 export declare const FREEZE_PERMISSION_CHECK: import('@univerjs/core').IInterceptor<boolean, null>;
 export declare class HeaderFreezeRenderController extends Disposable implements IRenderModule {
     private readonly _context;

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

@@ -1,7 +1,8 @@
-import { DeviceInputEventType } from '@univerjs/engine-render';
+import { IEventBase, IRange, RichTextValue, FEventName } from '@univerjs/core';
+import { DeviceInputEventType, SpreadsheetSkeleton } from '@univerjs/engine-render';
+import { CommandListenerSkeletonChange } from '@univerjs/sheets';
 import { FRange, FWorkbook, FWorksheet } from '@univerjs/sheets/facade';
 import { KeyCode } from '@univerjs/ui';
-import { FEventName, IEventBase, RichTextValue } from '@univerjs/core';
 /**
  * Event interface triggered when cell editing starts
  * @interface ISheetEditStartedEventParams
@@ -119,7 +120,15 @@ export declare const CellFEventName: {
     readonly CellHover: "CellHover";
     readonly DragOver: "DragOver";
     readonly Drop: "Drop";
+    readonly Scroll: "Scroll";
+    readonly SelectionMoveStart: "SelectionMoveStart";
+    readonly SelectionMoving: "SelectionMoving";
+    readonly SelectionMoveEnd: "SelectionMoveEnd";
+    readonly SelectionChanged: "SelectionChanged";
 };
+/**
+ * @ignore
+ */
 export interface IFSheetsUIEventNameMixin {
     /**
      * Trigger this event before the clipboard content changes.
@@ -153,10 +162,10 @@ export interface IFSheetsUIEventNameMixin {
      * @example
      * ```ts
      * univerAPI.addEvent(univerAPI.Event.BeforeClipboardPaste, (param) => {
-     *  const {text, html} = param;
-     *  console.log('debugger', text, html);
-     *  // if want to cancel the clipboard paste
-     *  param.cancel = true;
+     *   const {text, html} = param;
+     *   console.log('debugger', text, html);
+     *   // if want to cancel the clipboard paste
+     *   param.cancel = true;
      * })
      * ```
      */
@@ -167,8 +176,8 @@ export interface IFSheetsUIEventNameMixin {
      * @example
      * ```ts
      * univerAPI.addEvent(univerAPI.Event.ClipboardPasted, (param) => {
-     *  const {text, html} = param;
-     *  console.log('debugger', text, html); // {text: '...', html: '...'}
+     *   const {text, html} = param;
+     *   console.log('debugger', text, html); // {text: '...', html: '...'}
      * })
      * ```
      */
@@ -179,7 +188,7 @@ export interface IFSheetsUIEventNameMixin {
      * @example
      * ```ts
      * univerAPI.addEvent(univerAPI.Event.BeforeSheetEditStart, (params) => {
-     *      const { worksheet, workbook, row, column, eventType, keycode, isZenEditor } = params;
+     *   const { worksheet, workbook, row, column, eventType, keycode, isZenEditor } = params;
      * });
      * ```
      */
@@ -190,7 +199,7 @@ export interface IFSheetsUIEventNameMixin {
      * @example
      * ```ts
      * univerAPI.addEvent(univerAPI.Event.SheetEditStarted, (params) => {
-     *      const { worksheet, workbook, row, column, eventType, keycode, isZenEditor } = params;
+     *   const { worksheet, workbook, row, column, eventType, keycode, isZenEditor } = params;
      * });
      * ```
      */
@@ -201,7 +210,7 @@ export interface IFSheetsUIEventNameMixin {
      * @example
      * ```ts
      * univerAPI.addEvent(univerAPI.Event.SheetEditChanging, (params) => {
-     *      const { worksheet, workbook, row, column, value, isZenEditor } = params;
+     *   const { worksheet, workbook, row, column, value, isZenEditor } = params;
      * });
      * ```
      */
@@ -212,7 +221,7 @@ export interface IFSheetsUIEventNameMixin {
      * @example
      * ```ts
      * univerAPI.addEvent(univerAPI.Event.BeforeSheetEditEnd, (params) => {
-     *      const { worksheet, workbook, row, column, value, eventType, keycode, isZenEditor } = params;
+     *   const { worksheet, workbook, row, column, value, eventType, keycode, isZenEditor } = params;
      * });
      * ```
      */
@@ -223,67 +232,264 @@ export interface IFSheetsUIEventNameMixin {
      * @example
      * ```ts
      * univerAPI.addEvent(univerAPI.Event.SheetEditEnded, (params) => {
-     *      const { worksheet, workbook, row, column, eventType, keycode, isZenEditor } = params;
+     *   const { worksheet, workbook, row, column, eventType, keycode, isZenEditor } = params;
      * });
      * ```
      */
     readonly SheetEditEnded: 'SheetEditEnded';
     /**
      * Event fired when a cell is clicked
+     * @see {@link ICellEventParam}
      * @example
      * ```ts
-     * univerAPI.getActiveWorkbook().addEvent('CellClicked', (p)=> console.log(p));
+     * univerAPI.addEvent(univerAPI.Event.CellClicked, (params) => {
+     *      const { worksheet, workbook, row, column, value, isZenEditor } = params;
+     * });
      * ```
      */
     readonly CellClicked: 'CellClicked';
     /**
      * Event fired when a cell is pointer down
+     * @see {@link ICellEventParam}
      * @example
      * ```ts
-     * univerAPI.getActiveWorkbook().addEvent('CellPointerDown', (p)=> console.log(p));
+     * univerAPI.addEvent(univerAPI.Event.CellPointerDown, (params) => {
+     *   const { worksheet, workbook, row, column } = params;
+     * });
      * ```
      */
     readonly CellPointerDown: 'CellPointerDown';
     /**
      * Event fired when a cell is pointer up
+     * @see {@link ICellEventParam}
      * @example
      * ```ts
-     * univerAPI.getActiveWorkbook().addEvent('CellPointerUp', (p)=> console.log(p));
+     * univerAPI.addEvent(univerAPI.Event.CellPointerUp, (params) => {
+     *   const { worksheet, workbook, row, column } = params;
+     * });
      * ```
      */
     readonly CellPointerUp: 'CellPointerUp';
     /**
      * Event fired when a cell is hovered
+     * @see {@link ICellEventParam}
      * @example
      * ```ts
-     * univerAPI.getActiveWorkbook().addEvent('CellHover', (p)=> console.log(p));
+     * univerAPI.addEvent(univerAPI.Event.CellHover, (params) => {
+     *   const { worksheet, workbook, row, column } = params;
+     * });
      * ```
      */
     readonly CellHover: 'CellHover';
     /**
      * Event fired when move on spreadsheet cells
+     * @see {@link ICellEventParam}
      * @example
      * ```ts
-     * univerAPI.getActiveWorkbook().addEvent('CellPointerMove', (p)=> console.log(p));
+     * univerAPI.addEvent(univerAPI.Event.CellPointerMove, (params) => {
+     *   const { worksheet, workbook, row, column } = params;
+     * });
      * ```
      */
     readonly CellPointerMove: 'CellPointerMove';
+    /**
+     * Triggered when a row header is clicked
+     * @param {ISheetRowHeaderEvent} params - Event parameters containing unitId, subUnitId, and row index
+     * @example
+     * ```typescript
+     * univerAPI.onSheetEvent(Event.RowHeaderClick, (params) => {
+     *   console.log(`Row ${params.row} header clicked in sheet ${params.worksheet.getSheetId()}`);
+     * });
+     * ```
+     */
+    readonly RowHeaderClick: 'RowHeaderClick';
+    /**
+     * Triggered when pointer is pressed down on a row header
+     * @param {ISheetRowHeaderEvent} params - Event parameters containing unitId, subUnitId, and row index
+     * @example
+     * ```typescript
+     * univerAPI.onSheetEvent(Event.RowHeaderPointerDown, (params) => {
+     *   console.log(`Pointer down on row ${params.row} header in sheet ${params.worksheet.getSheetId()}`);
+     * });
+     * ```
+     */
+    readonly RowHeaderPointerDown: 'RowHeaderPointerDown';
+    /**
+     * Triggered when pointer is released on a row header
+     * @param {ISheetRowHeaderEvent} params - Event parameters containing unitId, subUnitId, and row index
+     * @example
+     * ```typescript
+     * univerAPI.onSheetEvent(Event.RowHeaderPointerUp, (params) => {
+     *   console.log(`Pointer up on row ${params.row} header in sheet ${params.worksheet.getSheetId()}`);
+     * });
+     * ```
+     */
+    readonly RowHeaderPointerUp: 'RowHeaderPointerUp';
+    /**
+     * Triggered when pointer hovers over a row header
+     * @param {ISheetRowHeaderEvent} params - Event parameters containing unitId, subUnitId, and row index
+     * @example
+     * ```typescript
+     * univerAPI.onSheetEvent(Event.RowHeaderHover, (params) => {
+     *   console.log(`Hovering over row ${params.row} header in sheet ${params.worksheet.getSheetId()}`);
+     * });
+     * ```
+     */
+    readonly RowHeaderHover: 'RowHeaderHover';
+    /**
+     * Triggered when a column header is clicked
+     * @param {ISheetColumnHeaderEvent} params - Event parameters containing unitId, subUnitId, and column index
+     * @example
+     * ```typescript
+     * univerAPI.onSheetEvent(Event.ColumnHeaderClick, (params) => {
+     *   console.log(`Column ${params.column} header clicked in sheet ${params.worksheet.getSheetId()}`);
+     * });
+     * ```
+     */
+    readonly ColumnHeaderClick: 'ColumnHeaderClick';
+    /**
+     * Triggered when pointer is pressed down on a column header
+     * @param {ISheetColumnHeaderEvent} params - Event parameters containing unitId, subUnitId, and column index
+     * @example
+     * ```typescript
+     * univerAPI.onSheetEvent(Event.ColumnHeaderPointerDown, (params) => {
+     *   console.log(`Pointer down on column ${params.column} header in sheet ${params.worksheet.getSheetId()}`);
+     * });
+     * ```
+     */
+    readonly ColumnHeaderPointerDown: 'ColumnHeaderPointerDown';
+    /**
+     * Triggered when pointer is released on a column header
+     * @param {ISheetColumnHeaderEvent} params - Event parameters containing unitId, subUnitId, and column index
+     * @example
+     * ```typescript
+     * univerAPI.onSheetEvent(Event.ColumnHeaderPointerUp, (params) => {
+     *   console.log(`Pointer up on column ${params.column} header in sheet ${params.worksheet.getSheetId()}`);
+     * });
+     * ```
+     */
+    readonly ColumnHeaderPointerUp: 'ColumnHeaderPointerUp';
+    /**
+     * Triggered when pointer hovers over a column header
+     * @param {ISheetColumnHeaderEvent} params - Event parameters containing unitId, subUnitId, and column index
+     * @example
+     * ```typescript
+     * univerAPI.onSheetEvent(Event.ColumnHeaderHover, (params) => {
+     *   console.log(`Hovering over column ${params.column} header in sheet ${params.worksheet.getSheetId()}`);
+     * });
+     * ```
+     */
+    readonly ColumnHeaderHover: 'ColumnHeaderHover';
     /**
      * Event fired when drag over spreadsheet cells
+     * @see {@link ICellEventParam}
      * @example
      * ```ts
-     * univerAPI.getActiveWorkbook().addEvent('DragOver', (p)=> console.log(p));
+     * univerAPI.getActiveWorkbook().addEvent(univerAPI.Event.DragOver, (params) => {
+     *   const { worksheet, workbook, row, column } = params;
+     * });
      * ```
      */
     readonly DragOver: 'DragOver';
     /**
      * Event fired when drop on spreadsheet cells
+     * @see {@link ICellEventParam}
      * @example
      * ```ts
-     * univerAPI.getActiveWorkbook().addEvent('Drop', (p)=> console.log(p));
+     * univerAPI.getActiveWorkbook().addEvent(univerAPI.Event.Drop, (params) => {
+     *      const { worksheet, workbook, row, column } = params;
+     * });
      * ```
      */
     readonly Drop: 'Drop';
+    /**
+     * Event fired when scroll spreadsheet.
+     * @see {@link IScrollEventParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.Scroll, (params) => {
+     *   const { worksheet, workbook, scrollX, scrollY } = params;
+     * });
+     * ```
+     */
+    readonly Scroll: 'Scroll';
+    /**
+     * Event fired when selection changed.
+     * @see {@link ISelectionEventParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.SelectionChanged, (p)=> {
+     *   const { worksheet, workbook, selections } = p;
+     * });
+     * ```
+     */
+    readonly SelectionChanged: 'SelectionChanged';
+    /**
+     * Event fired when selection move start
+     * @see {@link ISelectionEventParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.SelectionMoveStart, (p)=> {
+     *   const { worksheet, workbook, selections } = p;
+     * });
+     * ```
+     */
+    readonly SelectionMoveStart: 'SelectionMoveStart';
+    /**
+     * Event fired when selection move end
+     * @see {@link ISelectionEventParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.SelectionMoving, (p)=> {
+     *   const { worksheet, workbook, selections } = p;
+     * });
+     * ```
+     */
+    readonly SelectionMoving: 'SelectionMoving';
+    /**
+     * Event fired when selection move end
+     * @see {@link ISelectionEventParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.SelectionMoveEnd, (p)=> {
+     *   const { worksheet, workbook, selections } = p;
+     * });
+     * ```
+     */
+    readonly SelectionMoveEnd: 'SelectionMoveEnd';
+    /**
+     * Event fired when zoom changed
+     * @see {@link ISheetZoomEvent}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.SheetZoomChanged, (p)=> {
+     *   const { worksheet, workbook, zoom } = p;
+     * });
+     * ```
+     */
+    readonly SheetZoomChanged: 'SheetZoomChanged';
+    /**
+     * Event fired before zoom changed
+     * @see {@link ISheetZoomEvent}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.BeforeSheetZoomChange, (p)=> {
+     *   const { worksheet, workbook, zoom } = p;
+     * });
+     * ```
+     */
+    readonly BeforeSheetZoomChange: 'BeforeSheetZoomChange';
+    /**
+     * Event fired when sheet skeleton changed
+     * @see {@link ISheetSkeletonChangedEvent}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.SheetSkeletonChanged, (p)=> {
+     *   const { worksheet, workbook } = p;
+     * });
+     * ```
+     */
+    readonly SheetSkeletonChanged: 'SheetSkeletonChanged';
 }
 export declare class FSheetsUIEventName extends FEventName implements IFSheetsUIEventNameMixin {
     get BeforeClipboardChange(): 'BeforeClipboardChange';
@@ -302,8 +508,25 @@ export declare class FSheetsUIEventName extends FEventName implements IFSheetsUI
     get CellPointerMove(): 'CellPointerMove';
     get DragOver(): 'DragOver';
     get Drop(): 'Drop';
+    get Scroll(): 'Scroll';
+    get SelectionMoveStart(): 'SelectionMoveStart';
+    get SelectionChanged(): 'SelectionChanged';
+    get SelectionMoving(): 'SelectionMoving';
+    get SelectionMoveEnd(): 'SelectionMoveEnd';
+    get RowHeaderClick(): 'RowHeaderClick';
+    get RowHeaderPointerDown(): 'RowHeaderPointerDown';
+    get RowHeaderPointerUp(): 'RowHeaderPointerUp';
+    get RowHeaderHover(): 'RowHeaderHover';
+    get ColumnHeaderClick(): 'ColumnHeaderClick';
+    get ColumnHeaderPointerDown(): 'ColumnHeaderPointerDown';
+    get ColumnHeaderPointerUp(): 'ColumnHeaderPointerUp';
+    get ColumnHeaderHover(): 'ColumnHeaderHover';
+    get SheetSkeletonChanged(): 'SheetSkeletonChanged';
 }
-export interface IUIEventBase extends IEventBase {
+/**
+ * @ignore
+ */
+export interface ISheetUIEventBase extends IEventBase {
     /**
      * The workbook instance currently being operated on. {@link FWorkbook}
      */
@@ -359,10 +582,42 @@ export interface IBeforeClipboardPasteParam extends IEventBase {
     html?: string;
 }
 export type IClipboardPastedParam = IBeforeClipboardPasteParam;
-export interface ICellEventParam extends IUIEventBase {
+export interface ISheetZoomEvent extends IEventBase {
+    /**
+     * Zoom ratio
+     */
+    zoom: number;
+    /**
+     * The workbook instance currently being operated on. {@link FWorkbook}
+     */
+    workbook: FWorkbook;
+    /**
+     * The worksheet instance currently being operated on. {@link FWorkbook}
+     */
+    worksheet: FWorksheet;
+}
+export interface ICellEventParam extends ISheetUIEventBase {
     row: number;
     column: number;
 }
+export interface IScrollEventParam extends ISheetUIEventBase {
+    scrollX: number;
+    scrollY: number;
+}
+export interface ISelectionEventParam extends ISheetUIEventBase {
+    selections: IRange[];
+}
+export interface ISheetRowHeaderEvent extends ISheetUIEventBase {
+    row: number;
+}
+export interface ISheetColumnHeaderEvent extends ISheetUIEventBase {
+    column: number;
+}
+export interface ISheetSkeletonChangedEvent extends ISheetUIEventBase {
+    skeleton: SpreadsheetSkeleton;
+    payload: CommandListenerSkeletonChange;
+    effectedRanges: FRange[];
+}
 export interface IFSheetsUIEventParamConfig {
     BeforeClipboardChange: IBeforeClipboardChangeParam;
     ClipboardChanged: IClipboardChangedParam;
@@ -380,6 +635,25 @@ export interface IFSheetsUIEventParamConfig {
     CellPointerMove: ICellEventParam;
     Drop: ICellEventParam;
     DragOver: ICellEventParam;
+    RowHeaderClick: ISheetRowHeaderEvent;
+    RowHeaderDbClick: ISheetRowHeaderEvent;
+    RowHeaderHover: ISheetRowHeaderEvent;
+    RowHeaderPointerDown: ISheetRowHeaderEvent;
+    RowHeaderPointerUp: ISheetRowHeaderEvent;
+    ColumnHeaderClick: ISheetColumnHeaderEvent;
+    ColumnHeaderDbClick: ISheetColumnHeaderEvent;
+    ColumnHeaderHover: ISheetColumnHeaderEvent;
+    ColumnHeaderPointerDown: ISheetColumnHeaderEvent;
+    ColumnHeaderPointerUp: ISheetColumnHeaderEvent;
+    Scroll: IScrollEventParam;
+    SelectionChanging: ISelectionEventParam;
+    SelectionMoveStart: ISelectionEventParam;
+    SelectionMoving: ISelectionEventParam;
+    SelectionMoveEnd: ISelectionEventParam;
+    SelectionChanged: ISelectionEventParam;
+    SheetZoomChanged: ISheetZoomEvent;
+    BeforeSheetZoomChange: ISheetZoomEvent;
+    SheetSkeletonChanged: ISheetSkeletonChangedEvent;
 }
 declare module '@univerjs/core' {
     interface FEventName extends IFSheetsUIEventNameMixin {

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

@@ -1,4 +1,7 @@
 import { FPermission } from '@univerjs/sheets/facade';
+/**
+ * @ignore
+ */
 export interface IFPermissionSheetsUIMixin {
     /**
      * Set visibility of unauthorized pop-up window

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

@@ -17,6 +17,9 @@ export interface IFComponentKey {
 }
 export interface IFCanvasPopup extends Omit<ICanvasPopup, 'componentKey'>, IFComponentKey {
 }
+/**
+ * @ignore
+ */
 interface IFRangeSheetsUIMixin {
     /**
      * Return this cell information, including whether it is merged and cell coordinates
@@ -55,11 +58,21 @@ interface IFRangeSheetsUIMixin {
      * @returns The disposable object to detach the popup, if the popup is not attached, return `null`.
      * @example
     ```
+        univerAPI.getComponentManager().register(
+            'myPopup',
+            () => React.createElement('div', {
+                style: {
+                    color: 'red',
+                    fontSize: '14px'
+                }
+            }, 'Custom Popup')
+        );
+
         let sheet = univerAPI.getActiveWorkbook().getActiveSheet();
         let range = sheet.getRange(2, 2, 3, 3);
+        univerAPI.getActiveWorkbook().setActiveRange(range);
         let disposable = range.attachPopup({
-        componentKey: 'univer.sheet.cell-alert',
-        extraProps: { alert: { type: 0, title: 'This is an Info', message: 'This is an info message' } },
+            componentKey: 'myPopup'
         });
     ```
      */
@@ -76,6 +89,32 @@ interface IFRangeSheetsUIMixin {
      * ```
      */
     attachAlertPopup(alert: Omit<ICellAlert, 'location'>): IDisposable;
+    /**
+     * Attach a DOM popup to the current range.
+     * @param alert The alert to attach
+     * @returns The disposable object to detach the alert.
+     * @example
+     * ```ts
+        let sheet = univerAPI.getActiveWorkbook().getActiveSheet();
+        let range = sheet.getRange(2, 2, 3, 3);
+        univerAPI.getActiveWorkbook().setActiveRange(range);
+
+        univerAPI.getComponentManager().register(
+            'myPopup',
+            () => React.createElement('div', {
+                style: {
+                    background: 'red',
+                    fontSize: '14px'
+                }
+            }, 'Custom Popup')
+        );
+        let disposable = range.attachRangePopup({
+            componentKey: 'myPopup',
+            direction: 'top' // 'vertical' | 'horizontal' | 'top' | 'right' | 'left' | 'bottom' | 'bottom-center' | 'top-center';
+        });
+     * ```
+     */
+    attachRangePopup(popup: IFCanvasPopup): Nullable<IDisposable>;
     /**
      *  Highlight the range with the specified style and primary cell.
      * @param style - style for highlight range.
@@ -97,6 +136,7 @@ declare module '@univerjs/sheets/facade' {
  * Transform component key
  * @param {IFComponentKey} component - The component key to transform.
  * @param {ComponentManager} componentManager - The component manager to use for registration.
+ * @returns {string} The transformed component key.
  */
 export declare function transformComponentKey(component: IFComponentKey, componentManager: ComponentManager): {
     key: string;

package/lib/types/facade/f-sheet-hooks.d.ts

@@ -1,6 +1,9 @@
 import { ICellCustomRender, IDisposable, Nullable, InterceptorEffectEnum } from '@univerjs/core';
 import { IDragCellPosition, IEditorBridgeServiceVisibleParam, IHoverCellPosition } from '@univerjs/sheets-ui';
 import { FSheetHooks } from '@univerjs/sheets/facade';
+/**
+ * @ignore
+ */
 export interface IFSheetHooksUIMixin {
     /**
      * The onCellPointerMove event is fired when a pointer changes coordinates.

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

@@ -1,13 +1,16 @@
 import { IDisposable, Injector, FUniver } from '@univerjs/core';
 import { IColumnsHeaderCfgParam, IRowsHeaderCfgParam, SheetExtension } from '@univerjs/engine-render';
 import { FSheetHooks } from '@univerjs/sheets/facade';
+/**
+ * @ignore
+ */
 export interface IFUniverSheetsUIMixin {
     /**
      * Customize the column header of the spreadsheet.
      * @param {IColumnsHeaderCfgParam} cfg The configuration of the column header.
      * @example
      * ```typescript
-     * univerAPI.customizeColumnHeader({ headerStyle: { backgroundColor: 'pink', fontSize: 9 }, columnsCfg: ['MokaII', undefined, null, { text: 'Size', textAlign: 'left' }] });
+     * univerAPI.customizeColumnHeader({ headerStyle: { fontColor: '#fff', size: 40, backgroundColor: '#4e69ee', fontSize: 9 }, columnsCfg: ['MokaII', undefined, null, { text: 'Size', textAlign: 'left' }] });
      * ```
      */
     customizeColumnHeader(cfg: IColumnsHeaderCfgParam): void;
@@ -48,6 +51,13 @@ export interface IFUniverSheetsUIMixin {
 }
 export declare class FUniverSheetsUIMixin extends FUniver implements IFUniverSheetsUIMixin {
     private _initSheetUIEvent;
+    /**
+     * @ignore
+     */
+    _initObserverListener(injector: Injector): void;
+    /**
+     * @ignore
+     */
     _initialize(injector: Injector): void;
     private _generateClipboardCopyParam;
     private _beforeClipboardChange;