@dxos/plugin-sheet 0.8.1 → 0.8.2-main.10c050d

package/src/components/SheetToolbar/SheetToolbar.tsx

@@ -2,46 +2,82 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, useCallback } from 'react';
+import { Rx } from '@effect-rx/rx-react';
+import React, { type PropsWithChildren, useMemo } from 'react';
 
+import { useAppGraph } from '@dxos/app-framework';
+import { type CompleteCellRange } from '@dxos/compute';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+import {
+  type ActionGraphEdges,
+  type ActionGraphNodes,
+  type ActionGraphProps,
+  createGapSeparator,
+  MenuProvider,
+  rxFromSignal,
+  ToolbarMenu,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
 
 import { createAlign, useAlignState } from './align';
-import { createComment, useCommentState } from './comment';
 import { createStyle, useStyleState } from './style';
-import { useToolbarAction } from './useToolbarAction';
 import { type ToolbarState, useToolbarState } from './useToolbarState';
+import { type SheetModel } from '../../model';
+import { useSheetContext } from '../SheetContext';
 
 //
 // Root
 //
 
-export type SheetToolbarProps = ThemedClassName<PropsWithChildren<{ attendableId?: string }>>;
-
-const createToolbarActions = (state: ToolbarState) => {
-  const align = createAlign(state);
-  const style = createStyle(state);
-  const gap = createGapSeparator();
-  const comment = createComment(state);
-  return {
-    nodes: [...align.nodes, ...style.nodes, ...gap.nodes, ...comment.nodes],
-    edges: [...align.edges, ...style.edges, ...gap.edges, ...comment.edges],
-  };
+export type SheetToolbarProps = ThemedClassName<PropsWithChildren<{ id: string }>>;
+
+const createToolbarActions = (
+  model: SheetModel,
+  state: ToolbarState,
+  cursorFallbackRange?: CompleteCellRange,
+  customActions?: Rx.Rx<ActionGraphProps>,
+) => {
+  return Rx.make((get) => {
+    const align = get(rxFromSignal(() => createAlign(model, state, cursorFallbackRange)));
+    const style = get(rxFromSignal(() => createStyle(model, state, cursorFallbackRange)));
+    const gap = createGapSeparator();
+    const nodes: ActionGraphNodes = [...align.nodes, ...style.nodes, ...gap.nodes];
+    const edges: ActionGraphEdges = [...align.edges, ...style.edges, ...gap.edges];
+    if (customActions) {
+      const custom = get(customActions);
+      nodes.push(...custom.nodes);
+      edges.push(...custom.edges);
+    }
+    return {
+      nodes,
+      edges,
+    };
+  });
 };
 
-export const SheetToolbar = ({ attendableId, classNames }: SheetToolbarProps) => {
+export const SheetToolbar = ({ id, classNames }: SheetToolbarProps) => {
+  const { model, cursorFallbackRange } = useSheetContext();
   const state = useToolbarState({});
   useAlignState(state);
   useStyleState(state);
-  useCommentState(state);
 
-  const actionsCreator = useCallback(() => createToolbarActions(state), [state]);
+  const { graph } = useAppGraph();
+  const customActions = useMemo(() => {
+    return Rx.make((get) => {
+      const actions = get(graph.actions(id));
+      const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
+      return { nodes, edges: nodes.map((node) => ({ source: 'root', target: node.id })) };
+    });
+  }, [graph]);
+
+  const actionsCreator = useMemo(
+    () => createToolbarActions(model, state, cursorFallbackRange, customActions),
+    [model, state, cursorFallbackRange, customActions],
+  );
   const menu = useMenuActions(actionsCreator);
-  const handleAction = useToolbarAction(state);
 
   return (
-    <MenuProvider {...menu} attendableId={attendableId} onAction={handleAction}>
+    <MenuProvider {...menu} attendableId={id}>
       <ToolbarMenu classNames={classNames} />
     </MenuProvider>
   );

package/src/components/SheetToolbar/align.ts

@@ -4,11 +4,13 @@
 
 import { useEffect } from 'react';
 
-import { inRange } from '@dxos/compute';
+import { type CompleteCellRange, inRange } from '@dxos/compute';
 import { createMenuAction, createMenuItemGroup, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
+import { type ToolbarState } from './useToolbarState';
 import { SHEET_PLUGIN } from '../../meta';
-import { type AlignKey, alignKey, type AlignValue, rangeFromIndex } from '../../types';
+import { type SheetModel } from '../../model';
+import { type AlignKey, alignKey, type AlignValue, rangeFromIndex, rangeToIndex } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 export type AlignAction = { key: AlignKey; value: AlignValue };
@@ -43,21 +45,49 @@ const createAlignGroupAction = (value?: AlignValue) =>
     value: `${alignKey}--${value}`,
   } as ToolbarMenuActionGroupProperties);
 
-const createAlignActions = (value?: AlignValue) =>
+const createAlignActions = (model: SheetModel, state: ToolbarState, cursorFallbackRange?: CompleteCellRange) =>
   Object.entries(aligns).map(([alignValue, icon]) => {
-    return createMenuAction<AlignAction>(`${alignKey}--${alignValue}`, {
-      key: alignKey,
-      value: alignValue as AlignValue,
-      checked: value === alignValue,
-      label: [`range value ${alignValue} label`, { ns: SHEET_PLUGIN }],
-      icon,
-      testId: `grid.toolbar.${alignKey}.${alignValue}`,
-    });
+    return createMenuAction<AlignAction>(
+      `${alignKey}--${alignValue}`,
+      () => {
+        if (!cursorFallbackRange) {
+          return;
+        }
+        const index =
+          model.sheet.ranges?.findIndex(
+            (range) =>
+              range.key === alignKey && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+          ) ?? -1;
+        const nextRangeEntity = {
+          range: rangeToIndex(model.sheet, cursorFallbackRange),
+          key: alignKey,
+          value: alignValue as AlignValue,
+        };
+        if (index < 0) {
+          model.sheet.ranges?.push(nextRangeEntity);
+          state[alignKey] = nextRangeEntity.value;
+        } else if (model.sheet.ranges![index].value === nextRangeEntity.value) {
+          model.sheet.ranges?.splice(index, 1);
+          state[alignKey] = undefined;
+        } else {
+          model.sheet.ranges?.splice(index, 1, nextRangeEntity);
+          state[alignKey] = nextRangeEntity.value;
+        }
+      },
+      {
+        key: alignKey,
+        value: alignValue as AlignValue,
+        checked: state[alignKey] === alignValue,
+        label: [`range value ${alignValue} label`, { ns: SHEET_PLUGIN }],
+        icon,
+        testId: `grid.toolbar.${alignKey}.${alignValue}`,
+      },
+    );
   });
 
-export const createAlign = ({ [alignKey]: alignValue }: Partial<AlignState>) => {
-  const alignGroup = createAlignGroupAction(alignValue);
-  const alignActions = createAlignActions(alignValue);
+export const createAlign = (model: SheetModel, state: ToolbarState, cursorFallbackRange?: CompleteCellRange) => {
+  const alignGroup = createAlignGroupAction(state[alignKey]);
+  const alignActions = createAlignActions(model, state, cursorFallbackRange);
   return {
     nodes: [alignGroup, ...alignActions],
     edges: [

package/src/components/SheetToolbar/style.ts

@@ -4,11 +4,12 @@
 
 import { useEffect } from 'react';
 
-import { inRange } from '@dxos/compute';
+import { type CompleteCellRange, inRange } from '@dxos/compute';
 import { createMenuAction, createMenuItemGroup, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { SHEET_PLUGIN } from '../../meta';
-import { rangeFromIndex, type StyleKey, type StyleValue } from '../../types';
+import { type SheetModel } from '../../model';
+import { rangeFromIndex, rangeToIndex, type StyleKey, type StyleValue } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 export type StyleState = Partial<Record<StyleValue, boolean>>;
@@ -48,20 +49,55 @@ const createStyleGroup = (state: StyleState) => {
   } as ToolbarMenuActionGroupProperties);
 };
 
-const createStyleActions = (state: StyleState) =>
+const createStyleActions = (model: SheetModel, state: StyleState, cursorFallbackRange?: CompleteCellRange) =>
   Object.entries(styles).map(([styleValue, icon]) => {
-    return createMenuAction<StyleAction>(`style--${styleValue}`, {
-      key: 'style',
-      value: styleValue as StyleValue,
-      icon,
-      label: [`range value ${styleValue} label`, { ns: SHEET_PLUGIN }],
-      checked: !!state[styleValue as StyleValue],
-    });
+    return createMenuAction<StyleAction>(
+      `style--${styleValue}`,
+      () => {
+        if (!cursorFallbackRange) {
+          return;
+        }
+        const index =
+          model.sheet.ranges?.findIndex(
+            (range) =>
+              range.key === 'style' && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+          ) ?? -1;
+        const nextRangeEntity = {
+          range: rangeToIndex(model.sheet, cursorFallbackRange),
+          key: 'style',
+          value: styleValue as StyleValue,
+        };
+        if (
+          model.sheet.ranges
+            .filter(
+              ({ range, key: rangeKey }) =>
+                rangeKey === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
+            )
+            .some(({ value: rangeValue }) => rangeValue === styleValue)
+        ) {
+          // this value should be unset
+          if (index >= 0) {
+            model.sheet.ranges?.splice(index, 1);
+          }
+          state[nextRangeEntity.value] = false;
+        } else {
+          model.sheet.ranges?.push(nextRangeEntity);
+          state[nextRangeEntity.value] = true;
+        }
+      },
+      {
+        key: 'style',
+        value: styleValue as StyleValue,
+        icon,
+        label: [`range value ${styleValue} label`, { ns: SHEET_PLUGIN }],
+        checked: !!state[styleValue as StyleValue],
+      },
+    );
   });
 
-export const createStyle = (state: StyleState) => {
+export const createStyle = (model: SheetModel, state: StyleState, cursorFallbackRange?: CompleteCellRange) => {
   const styleGroupAction = createStyleGroup(state);
-  const styleActions = createStyleActions(state);
+  const styleActions = createStyleActions(model, state, cursorFallbackRange);
   return {
     nodes: [styleGroupAction, ...styleActions],
     edges: [

package/src/components/SheetToolbar/useToolbarState.ts

@@ -4,14 +4,13 @@
 
 import { useMemo } from 'react';
 
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 
 import { type AlignState } from './align';
-import { type CommentState } from './comment';
 import { type StyleState } from './style';
 
-export type ToolbarState = Partial<StyleState & AlignState & CommentState>;
+export type ToolbarState = Partial<StyleState & AlignState>;
 
 export const useToolbarState = (initialState: ToolbarState = {}) => {
-  return useMemo(() => create<ToolbarState>(initialState), []);
+  return useMemo(() => live<ToolbarState>(initialState), []);
 };

package/src/extensions/compute.ts

@@ -141,7 +141,7 @@ class ComputeWidget extends WidgetType {
     super();
   }
 
-  override toDOM(_view: EditorView) {
+  override toDOM(_view: EditorView): HTMLDivElement {
     const div = document.createElement('div');
     div.setAttribute('title', this.formula);
     div.innerText = String(this.value);

package/src/integrations/thread-ranges.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { Schema, pipe } from 'effect';
 import { useCallback, useEffect, useMemo } from 'react';
 
 import {
@@ -15,11 +15,12 @@ import {
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { type CellAddress, type CompleteCellRange, inRange } from '@dxos/compute';
-import { S } from '@dxos/echo-schema';
+import { isInstanceOf, RelationSourceId } from '@dxos/echo-schema';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
-import { ThreadAction } from '@dxos/plugin-thread/types';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { ThreadAction, ThreadType } from '@dxos/plugin-thread/types';
+import { Filter, fullyQualifiedId, getSpace, Query, useQuery } from '@dxos/react-client/echo';
 import { type DxGridElement, type DxGridPosition, type GridContentProps } from '@dxos/react-ui-grid';
+import { AnchoredTo } from '@dxos/schema';
 
 import { useSheetContext } from '../components';
 import { SHEET_PLUGIN } from '../meta';
@@ -55,7 +56,7 @@ export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null
           subject: string;
           options: { cursor: string; ref: GridContentProps['activeRefs'] };
         } => {
-          if (!S.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
+          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
             return false;
           }
 
@@ -78,23 +79,19 @@ export const useSelectThreadOnCellFocus = () => {
   const { model, cursor } = useSheetContext();
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
-  const threads = useMemo(
-    () => model.sheet.threads?.filter((thread): thread is NonNullable<typeof thread> => !!thread) ?? [],
-    [
-      // TODO(thure): Surely we can find a better dependency for this…
-      JSON.stringify(model.sheet.threads),
-    ],
-  );
+  const space = getSpace(model.sheet);
+  const anchors = useQuery(space, Query.select(Filter.ids(model.sheet.id)).targetOf(AnchoredTo));
 
   const selectClosestThread = useCallback(
     (cellAddress: CellAddress) => {
-      if (!cellAddress || !threads) {
+      if (!cellAddress) {
         return;
       }
 
-      const closestThread = threads?.find((ref) => {
-        if (ref.target?.anchor) {
-          const range = parseThreadAnchorAsCellRange(ref.target!.anchor);
+      const closestThread = anchors.find((anchor) => {
+        const source = anchor[RelationSourceId];
+        if (anchor.anchor && isInstanceOf(ThreadType, source)) {
+          const range = parseThreadAnchorAsCellRange(anchor.anchor);
           return range ? inRange(range, cellAddress) : false;
         } else {
           return false;
@@ -110,7 +107,7 @@ export const useSelectThreadOnCellFocus = () => {
         void dispatch(intent);
       }
     },
-    [dispatch, threads],
+    [dispatch, anchors],
   );
 
   const debounced = useMemo(() => {

package/src/model/sheet-model.test.ts

@@ -7,7 +7,7 @@ import { afterEach, beforeEach, describe, expect, onTestFinished, test } from 'v
 import { Trigger } from '@dxos/async';
 import { type CellScalarValue, addressFromA1Notation, isFormula } from '@dxos/compute';
 import { TestBuilder, testFunctionPlugins } from '@dxos/compute/testing';
-import { FunctionType } from '@dxos/functions/types';
+import { FunctionType } from '@dxos/functions';
 import { log } from '@dxos/log';
 
 import { SheetModel } from './sheet-model';

package/src/model/sheet-model.ts

@@ -119,7 +119,7 @@ export class SheetModel extends Resource {
   /**
    * Initialize sheet and engine.
    */
-  protected override async _open() {
+  protected override async _open(): Promise<void> {
     log('initialize', { id: this.id });
     initialize(this._sheet);
 
@@ -145,7 +145,7 @@ export class SheetModel extends Resource {
    * NOTE: This resets the undo history.
    * @deprecated
    */
-  reset() {
+  reset(): void {
     invariant(this._node);
     this._node.graph.hf.clearSheet(this._node.sheetId);
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
@@ -173,17 +173,17 @@ export class SheetModel extends Resource {
    * @deprecated
    */
   // TODO(burdon): Remove.
-  recalculate() {
+  recalculate(): void {
     this._node?.graph.hf.rebuildAndRecalculate();
   }
 
-  insertRows(i: number, n = 1) {
+  insertRows(i: number, n = 1): string[] {
     const idx = insertIndices(this._sheet.rows, i, n, MAX_ROWS);
     this.reset();
     return idx;
   }
 
-  insertColumns(i: number, n = 1) {
+  insertColumns(i: number, n = 1): string[] {
     const idx = insertIndices(this._sheet.columns, i, n, MAX_COLS);
     this.reset();
     return idx;
@@ -217,7 +217,7 @@ export class SheetModel extends Resource {
     return { axis: 'col', index, axisIndex: colIndex, axisMeta: this._sheet.rowMeta[colIndex], values };
   }
 
-  restoreRow({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis) {
+  restoreRow({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis): void {
     this._sheet.rows.splice(index, 0, axisIndex);
     values.forEach((value, col) => {
       if (value) {
@@ -230,7 +230,7 @@ export class SheetModel extends Resource {
     this.reset();
   }
 
-  restoreColumn({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis) {
+  restoreColumn({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis): void {
     this._sheet.columns.splice(index, 0, axisIndex);
     values.forEach((value, row) => {
       if (value) {
@@ -251,7 +251,7 @@ export class SheetModel extends Resource {
   /**
    * Clear range of values.
    */
-  clear(range: CellRange) {
+  clear(range: CellRange): void {
     invariant(this._node);
     const topLeft = getTopLeft(range);
     const values = this._iterRange(range, () => null);
@@ -262,7 +262,7 @@ export class SheetModel extends Resource {
     });
   }
 
-  cut(range: CellRange) {
+  cut(range: CellRange): void {
     invariant(this._node);
     this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
     this._iterRange(range, (cell) => {
@@ -271,12 +271,12 @@ export class SheetModel extends Resource {
     });
   }
 
-  copy(range: CellRange) {
+  copy(range: CellRange): void {
     invariant(this._node);
     this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
   }
 
-  paste(cell: CellAddress) {
+  paste(cell: CellAddress): void {
     invariant(this._node);
     if (!this._node.graph.hf.isClipboardEmpty()) {
       const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
@@ -291,7 +291,7 @@ export class SheetModel extends Resource {
   }
 
   // TODO(burdon): Display undo/redo state.
-  undo() {
+  undo(): void {
     invariant(this._node);
     if (this._node.graph.hf.isThereSomethingToUndo()) {
       this._node.graph.hf.undo();
@@ -299,7 +299,7 @@ export class SheetModel extends Resource {
     }
   }
 
-  redo() {
+  redo(): void {
     invariant(this._node);
     if (this._node.graph.hf.isThereSomethingToRedo()) {
       this._node.graph.hf.redo();
@@ -368,7 +368,7 @@ export class SheetModel extends Resource {
   /**
    * Sets the value, updating the sheet and engine.
    */
-  setValue(cell: CellAddress, value: CellScalarValue) {
+  setValue(cell: CellAddress, value: CellScalarValue): void {
     invariant(this._node);
     if (this._options.readonly) {
       throw new ReadonlyException();
@@ -411,7 +411,7 @@ export class SheetModel extends Resource {
   /**
    * Sets values from a simple map.
    */
-  setValues(values: Record<string, CellValue>) {
+  setValues(values: Record<string, CellValue>): void {
     Object.entries(values).forEach(([key, { value }]) => {
       this.setValue(addressFromA1Notation(key), value);
     });
@@ -441,12 +441,12 @@ export class SheetModel extends Resource {
   }
 
   // TODO(burdon): Delete index.
-  private _deleteIndices(indices: string[], i: number, n: number) {
+  private _deleteIndices(indices: string[], i: number, n: number): void {
     throw new Error('Not implemented');
   }
 
   // TODO(burdon): Move. Cannot use fractional without changing. Switch back to using unique IDs?
-  private _moveIndices(indices: string[], i: number, j: number, n: number) {
+  private _moveIndices(indices: string[], i: number, j: number, n: number): void {
     throw new Error('Not implemented');
   }
 

package/src/sanity.test.ts

@@ -11,8 +11,8 @@ import { describe, test, expect } from 'vitest';
 //    - throws "process.nextTick is not a function" (if browser)
 
 import { Client } from '@dxos/client';
-import { create } from '@dxos/client/echo';
-import { FunctionType } from '@dxos/functions/types';
+import { live } from '@dxos/client/echo';
+import { FunctionType } from '@dxos/functions';
 
 // TODO(burdon): Fix test infrastructure:
 //  - Need docs? esp. needed for config. need pristine example package?
@@ -34,7 +34,7 @@ describe('test', () => {
     //  - ERROR "process.nextTick is not a function"
     //  - ERROR "Identifier 'Buffer' has already been declared" if { nodeExternal: true }
     const space = await client.spaces.create();
-    const fn = space.db.add(create(FunctionType, { name: 'test', version: '0.0.1', binding: 'HELLO' }));
+    const fn = space.db.add(live(FunctionType, { name: 'test', version: '0.0.1', binding: 'HELLO' }));
     expect(fn).to.exist;
   });
 });

package/src/serializer.ts

@@ -3,19 +3,18 @@
 //
 
 import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
-import { create, getObjectCore } from '@dxos/react-client/echo';
+import { live, getObjectCore } from '@dxos/react-client/echo';
 
 import { SheetType } from './types';
 
 export const serializer: TypedObjectSerializer<SheetType> = {
   serialize: async ({ object }): Promise<string> => {
-    const { threads: _threads, ...sheet } = object;
-    return JSON.stringify(sheet, null, 2);
+    return JSON.stringify(object, null, 2);
   },
 
   deserialize: async ({ content, newId }) => {
     const { id, ...parsed } = JSON.parse(content);
-    const sheet = create(SheetType, parsed);
+    const sheet = live(SheetType, parsed);
 
     if (!newId) {
       const core = getObjectCore(sheet);

package/src/testing/playwright/sheet-manager.ts

@@ -25,21 +25,21 @@ export class SheetManager {
     return this.cellByText('Ready').waitFor({ state: 'visible' });
   }
 
-  async fill(text: string) {
+  async fill(text: string): Promise<void> {
     // TODO(thure): Do these timeouts help with test flakiness?
     await this.page.waitForTimeout(200);
     await this.cellEditor().fill(text);
     await this.page.waitForTimeout(200);
   }
 
-  async press(key: string) {
+  async press(key: string): Promise<void> {
     // TODO(thure): Does these timeouts help with test flakiness?
     await this.page.waitForTimeout(200);
     await this.page.keyboard.press(key);
     await this.page.waitForTimeout(200);
   }
 
-  async commit(key: string) {
+  async commit(key: string): Promise<void> {
     // TODO(thure): Why do we need to wait? Enter is ignored otherwise…
     await this.page.waitForTimeout(500);
     await this.press(key);
@@ -49,7 +49,7 @@ export class SheetManager {
     return this.grid.grid.getByText(text);
   }
 
-  async setFocusedCellValue(text: string, commitKey: string) {
+  async setFocusedCellValue(text: string, commitKey: string): Promise<void> {
     const mode = await this.grid.mode();
     if (mode === 'browse') {
       await this.commit('Enter');
@@ -58,7 +58,7 @@ export class SheetManager {
     await this.commit(commitKey);
   }
 
-  async selectRange(start: DxGridPosition, end: DxGridPosition) {
+  async selectRange(start: DxGridPosition, end: DxGridPosition): Promise<void> {
     const startCell = this.grid.cell(start.col, start.row, start.plane);
     const endCell = this.grid.cell(end.col, end.row, end.plane);
     const startBox = await startCell.boundingBox();
@@ -69,7 +69,7 @@ export class SheetManager {
     });
   }
 
-  async deleteAxis(axis: DxGridAxis, position: number) {
+  async deleteAxis(axis: DxGridAxis, position: number): Promise<void> {
     const col = axis === 'row' ? 0 : position;
     const row = axis === 'row' ? position : 0;
     const plane = axis === 'row' ? 'frozenColsStart' : 'frozenRowsStart';
@@ -77,15 +77,15 @@ export class SheetManager {
     await this.page.getByTestId(`grid.${axis}.drop`).click();
   }
 
-  toolbarAction(key: string, value: string) {
+  toolbarAction(key: string, value: string): Locator {
     return this.page.getByTestId(`grid.toolbar.${key}.${value}`);
   }
 
-  cellEditor() {
+  cellEditor(): Locator {
     return this.page.getByTestId('grid.cell-editor').getByRole('textbox');
   }
 
-  rangeInList(a1Coords: string) {
+  rangeInList(a1Coords: string): Locator {
     return this.page.getByTestId('grid.range-list').getByText(a1Coords);
   }
 }