@dxos/plugin-sheet 0.6.12-main.5cc132e → 0.6.12-main.7907542

package/src/components/Sheet/Sheet.tsx

@@ -25,6 +25,7 @@ import { Resizable, type ResizeCallback, type ResizeStartCallback } from 're-res
 import React, {
   type CSSProperties,
   type DOMAttributes,
+  type KeyboardEventHandler,
   type PropsWithChildren,
   forwardRef,
   useEffect,
@@ -40,7 +41,7 @@ import { debounce } from '@dxos/async';
 import { fullyQualifiedId, createDocAccessor } from '@dxos/client/echo';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';
+import { ATTENABLE_ATTRIBUTE, useAttendableAttributes, useAttention, useAttentionPath } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
 import {
@@ -71,7 +72,7 @@ import {
   rangeToA1Notation,
   addressToIndex,
   addressFromIndex,
-} from '../../model';
+} from '../../defs';
 import {
   CellEditor,
   type CellRangeNotifier,
@@ -138,7 +139,7 @@ const SheetRoot = ({ children, ...props }: PropsWithChildren<SheetContextProps>)
 
 type SheetMainProps = ThemedClassName<Partial<GridSize>>;
 
-const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numColumns }, forwardRef) => {
+const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numCols }, forwardRef) => {
   const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
 
   // Scrolling.
@@ -263,8 +264,8 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         ref={columnsRef}
         columns={columns}
         sizes={columnSizes}
-        selected={cursor?.column}
-        onSelect={(column) => setCursor(cursor?.column === column ? undefined : { row: -1, column })}
+        selected={cursor?.col}
+        onSelect={(col) => setCursor(cursor?.col === col ? undefined : { row: -1, col })}
         onResize={handleResizeColumn}
         onMove={handleMoveColumns}
       />
@@ -274,13 +275,13 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         rows={rows}
         sizes={rowSizes}
         selected={cursor?.row}
-        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, column: -1 })}
+        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, col: -1 })}
         onResize={handleResizeRow}
         onMove={handleMoveRows}
       />
       <SheetGrid
         ref={contentRef}
-        size={{ numRows: numRows ?? rows.length, numColumns: numColumns ?? columns.length }}
+        size={{ numRows: numRows ?? rows.length, numCols: numCols ?? columns.length }}
         rows={rows}
         columns={columns}
         rowSizes={rowSizes}
@@ -861,10 +862,8 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
       columnSizes,
     });
 
-    // TODO(burdon): Prevent scroll if not attended.
     const id = fullyQualifiedId(model.sheet);
-    const attendableAttrs = createAttendableAttributes(id);
-    const hasAttention = useHasAttention(id);
+    const { hasAttention } = useAttention(id);
 
     return (
       <div ref={containerRef} role='grid' className='relative flex grow overflow-hidden'>
@@ -872,6 +871,7 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
         <div className={mx('z-20 absolute inset-0 border border-gridLine pointer-events-none')} />
 
         {/* Grid scroll container. */}
+        {/* NOTE: Prevents scroll if not attended. */}
         <div ref={scrollerRef} className={mx('grow', hasAttention && 'overflow-auto scrollbar-thin')}>
           {/* Scroll content. */}
           <div
@@ -885,9 +885,9 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
 
             {/* Grid cells. */}
             {rowRange.map(({ row, top, height }) => {
-              return columnRange.map(({ column, left, width }) => {
+              return columnRange.map(({ col, left, width }) => {
                 const style: CSSProperties = { position: 'absolute', top, left, width, height };
-                const cell = { row, column };
+                const cell: CellAddress = { row, col };
                 const id = addressToA1Notation(cell);
                 const idx = addressToIndex(model.sheet, cell);
                 const active = posEquals(cursor, cell);
@@ -952,21 +952,37 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
         </div>
 
         {/* Hidden input for key navigation. */}
-        {createPortal(
-          <input
-            ref={inputRef}
-            autoFocus
-            className='absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent'
-            onKeyDown={handleKeyDown}
-            {...attendableAttrs}
-          />,
-          document.body,
-        )}
+        {createPortal(<SheetInput ref={inputRef} id={id} onKeyDown={handleKeyDown} />, document.body)}
       </div>
     );
   },
 );
 
+type SheetInputProps = {
+  id: string;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+
+const SheetInput = forwardRef<HTMLInputElement, SheetInputProps>(({ id, onKeyDown }, forwardedRef) => {
+  const path = useAttentionPath();
+  const attendableAttrs = useAttendableAttributes(id);
+
+  // TODO(wittjosiah): Consider factoring out as an attention util.
+  // Wrap input in attendable divs for each part of the path.
+  // This ensures that the sheet stays attended when the input is focused.
+  return path.toReversed().reduce(
+    (acc, part) => {
+      return <div {...{ [ATTENABLE_ATTRIBUTE]: part }}>{acc}</div>;
+    },
+    <input
+      ref={forwardedRef}
+      className='absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent'
+      onKeyDown={onKeyDown}
+      {...attendableAttrs}
+    />,
+  );
+});
+
 //
 // Selection
 //
@@ -1082,10 +1098,11 @@ const GridCellEditor = ({ style, value, onNav, onClose }: GridCellEditorProps) =
       notifier.current?.(rangeToA1Notation(range));
     }
   }, [range]);
+
   const extension = useMemo(
     () => [
       editorKeys({ onNav, onClose }),
-      sheetExtension({ functions: model.functions }),
+      sheetExtension({ functions: model.graph.getFunctions() }),
       rangeExtension((fn) => (notifier.current = fn)),
     ],
     [model],
@@ -1109,12 +1126,13 @@ const GridCellEditor = ({ style, value, onNav, onClose }: GridCellEditorProps) =
 
 const SheetStatusBar = () => {
   const { model, cursor, range } = useSheetContext();
+
   let value;
   let isFormula = false;
   if (cursor) {
     value = model.getCellValue(cursor);
     if (typeof value === 'string' && value.charAt(0) === '=') {
-      value = model.mapFormulaBindingFromId(model.mapFormulaIndicesToRefs(value));
+      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
       isFormula = true;
     } else if (value != null) {
       value = String(value);

package/src/components/Sheet/grid.ts

@@ -4,7 +4,7 @@
 
 import { type MouseEvent, useEffect, useState } from 'react';
 
-import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../model';
+import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../defs';
 
 // export type Bounds = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
 // export type Dimension = Pick<DOMRect, 'width' | 'height'>;
@@ -12,7 +12,7 @@ import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Not
 export type SizeMap = Record<string, number>;
 
 export type RowPosition = { row: number } & Pick<DOMRect, 'top' | 'height'>;
-export type ColumnPosition = { column: number } & Pick<DOMRect, 'left' | 'width'>;
+export type ColumnPosition = { col: number } & Pick<DOMRect, 'left' | 'width'>;
 
 export const axisWidth = 'calc(var(--rail-size)-2px)';
 export const axisHeight = 34;
@@ -88,7 +88,7 @@ export const useGridLayout = ({
         const width = columnSizes?.[idx] ?? defaultWidth;
         const left = x;
         x += width - 1;
-        return { column: i, left, width };
+        return { col: i, left, width };
       }),
     );
   }, [columns, columnSizes]);

package/src/components/Sheet/nav.ts

@@ -5,11 +5,11 @@
 import { type KeyboardEvent, type MouseEventHandler, useState } from 'react';
 
 import { getCellAtPointer } from './grid';
-import { type CellAddress, type CellRange, posEquals } from '../../model';
+import { type CellAddress, type CellRange, posEquals } from '../../defs';
 
 export type GridSize = {
   numRows: number;
-  numColumns: number;
+  numCols: number;
 };
 
 /**
@@ -38,14 +38,14 @@ export const handleNav = (
         break;
       }
       case 'ArrowLeft': {
-        if (opposite.column > 0) {
-          opposite.column -= 1;
+        if (opposite.col > 0) {
+          opposite.col -= 1;
         }
         break;
       }
       case 'ArrowRight': {
-        if (opposite.column < size.numColumns - 1) {
-          opposite.column += 1;
+        if (opposite.col < size.numCols - 1) {
+          opposite.col += 1;
         }
         break;
       }
@@ -64,41 +64,41 @@ export const handleNav = (
 export const handleArrowNav = (
   ev: Pick<KeyboardEvent<HTMLInputElement>, 'key' | 'metaKey'>,
   cursor: CellAddress | undefined,
-  { numRows, numColumns }: GridSize,
+  { numRows, numCols }: GridSize,
 ): CellAddress | undefined => {
   switch (ev.key) {
     case 'ArrowUp':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
+        return { row: 0, col: 0 };
       } else if (cursor.row > 0) {
-        return { row: ev.metaKey ? 0 : cursor.row - 1, column: cursor.column };
+        return { row: ev.metaKey ? 0 : cursor.row - 1, col: cursor.col };
       }
       break;
     case 'ArrowDown':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
+        return { row: 0, col: 0 };
       } else if (cursor.row < numRows - 1) {
-        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, column: cursor.column };
+        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, col: cursor.col };
       }
       break;
     case 'ArrowLeft':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.column > 0) {
-        return { row: cursor.row, column: ev.metaKey ? 0 : cursor.column - 1 };
+        return { row: 0, col: 0 };
+      } else if (cursor.col > 0) {
+        return { row: cursor.row, col: ev.metaKey ? 0 : cursor.col - 1 };
       }
       break;
     case 'ArrowRight':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.column < numColumns - 1) {
-        return { row: cursor.row, column: ev.metaKey ? numColumns - 1 : cursor.column + 1 };
+        return { row: 0, col: 0 };
+      } else if (cursor.col < numCols - 1) {
+        return { row: cursor.row, col: ev.metaKey ? numCols - 1 : cursor.col + 1 };
       }
       break;
     case 'Home':
-      return { row: 0, column: 0 };
+      return { row: 0, col: 0 };
     case 'End':
-      return { row: numRows - 1, column: numColumns - 1 };
+      return { row: numRows - 1, col: numCols - 1 };
   }
 };
 

package/src/components/Sheet/sheet-context.tsx

@@ -2,22 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useState, useEffect, useMemo } from 'react';
+import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { type FunctionType } from '@dxos/plugin-script';
-import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
 
 import { createDecorations } from './decorations';
-import { FormattingModel } from './formatting';
-import { type CellAddress, type CellRange, defaultFunctions, SheetModel } from '../../model';
+import { type CellAddress, type CellRange } from '../../defs';
+import { type ComputeGraph } from '../../graph';
+import { useSheetModel, useFormattingModel } from '../../hooks';
+import { type FormattingModel, type SheetModel } from '../../model';
 import { type SheetType } from '../../types';
-import { type FunctionContextOptions } from '../ComputeGraph';
-// TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
-import { useComputeGraph } from '../ComputeGraph/graph-context';
-
-// TODO(wittjosiah): Factor out.
-const OBJECT_ID_LENGTH = 60; // 33 (space id) + 26 (object id) + 1 (separator).
 
 export type SheetContextType = {
   model: SheetModel;
@@ -51,92 +45,28 @@ export const useSheetContext = (): SheetContextType => {
 };
 
 export type SheetContextProps = {
+  graph: ComputeGraph;
   sheet: SheetType;
-  space: Space;
   readonly?: boolean;
-} & Pick<SheetContextType, 'onInfo'> &
-  Partial<FunctionContextOptions>;
-
-/**
- * Map from binding to fully qualified ECHO ID.
- */
-const mapFormulaBindingToId =
-  (functions: FunctionType[]) =>
-  (formula: string): string => {
-    return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
-      if (defaultFunctions.find((fn) => fn.name === binding) || binding === 'EDGE') {
-        return match;
-      }
-
-      const fn = functions.find((fn) => fn.binding === binding);
-      if (fn) {
-        return `${fullyQualifiedId(fn)}(${args})`;
-      } else {
-        return match;
-      }
-    });
-  };
-
-/**
- * Map from fully qualified ECHO ID to binding.
- */
-const mapFormulaBindingFromId =
-  (functions: FunctionType[]) =>
-  (formula: string): string => {
-    return formula.replace(/([a-zA-Z0-9]+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
-      const id = `${spaceId}:${objectId}`;
-      if (id.length !== OBJECT_ID_LENGTH) {
-        return match;
-      }
-
-      const fn = functions.find((fn) => fullyQualifiedId(fn) === id);
-      if (fn?.binding) {
-        return `${fn.binding}(${args})`;
-      } else {
-        return match;
-      }
-    });
-  };
+} & Pick<SheetContextType, 'onInfo'>;
 
 export const SheetContextProvider = ({
   children,
+  graph,
   sheet,
-  space,
   readonly,
   onInfo,
-  ...options
 }: PropsWithChildren<SheetContextProps>) => {
-  const graph = useComputeGraph(space, options);
+  const model = useSheetModel(graph, sheet, { readonly });
+  const formatting = useFormattingModel(model);
 
-  // TODO(Zan): We should offer a version of set range and set cursor that scrolls to
-  // that cell or range if it is not visible.
+  // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
   const [cursor, setCursor] = useState<CellAddress>();
   const [range, setRange] = useState<CellRange>();
   const [editing, setEditing] = useState<boolean>(false);
   const decorations = useMemo(() => createDecorations(), []);
 
-  const [[model, formatting] = [], setModels] = useState<[SheetModel, FormattingModel] | undefined>(undefined);
-  useEffect(() => {
-    let model: SheetModel | undefined;
-    let formatting;
-    const t = setTimeout(async () => {
-      model = new SheetModel(graph, sheet, space, { readonly, mapFormulaBindingToId, mapFormulaBindingFromId });
-      await model.initialize();
-      formatting = new FormattingModel(model);
-      setModels([model, formatting]);
-    });
-
-    return () => {
-      clearTimeout(t);
-      void model?.destroy();
-    };
-  }, [graph, readonly]);
-
-  if (!model || !formatting) {
-    return null;
-  }
-
-  return (
+  return !model || !formatting ? null : (
     <SheetContext.Provider
       value={{
         model,

package/src/components/Sheet/threads.tsx

@@ -3,18 +3,19 @@
 //
 
 import { effect } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
 
 import { type IntentResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { Icon, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 
 import { type Decoration } from './decorations';
 import { useSheetContext } from './sheet-context';
+import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
-import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../../model';
+
+// TODO(burdon): Move into folder; split hooks.
 
 const CommentIndicator = () => {
   return (
@@ -25,9 +26,9 @@ const CommentIndicator = () => {
   );
 };
 
-const ThreadedCellWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const ThreadedCellWrapper = ({ children }: PropsWithChildren) => {
   const dispatch = useIntentDispatcher();
-  const [isHovered, setIsHovered] = React.useState(true);
+  const [isHovered, setIsHovered] = React.useState(false);
   const { t } = useTranslation(SHEET_PLUGIN);
 
   const handleClick = React.useCallback(
@@ -40,7 +41,7 @@ const ThreadedCellWrapper: React.FC<{ children: React.ReactNode }> = ({ children
   return (
     <div
       role='none'
-      className={mx('relative h-full is-full')}
+      className='relative h-full is-full'
       onMouseEnter={() => {
         setIsHovered(true);
       }}
@@ -73,6 +74,8 @@ const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: st
   };
 };
 
+// TODO(burdon): Factor out hooks.
+
 const useUpdateCursorOnThreadSelection = () => {
   const { setCursor, model } = useSheetContext();
 
@@ -190,6 +193,7 @@ const useThreadDecorations = () => {
         }
       }
     });
+
     return () => unsubscribe();
   });
 };

package/src/components/SheetContainer.tsx

@@ -6,27 +6,22 @@ import React, { useCallback } from 'react';
 
 import { useIntentDispatcher } from '@dxos/app-framework';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { useIsDirectlyAttended } from '@dxos/react-ui-attention';
+import { useAttendableAttributes, useAttention } from '@dxos/react-ui-attention';
 import { focusRing, mx } from '@dxos/react-ui-theme';
 
 import { Sheet, type SheetRootProps } from './Sheet';
 import { Toolbar, type ToolbarAction } from './Toolbar';
 
-// TODO(Zan): Factor out, copied this from MarkdownPlugin.
-const attentionFragment = mx(
-  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
-  'group-focus-within/editor:border-separator',
-);
-
 // TODO(Zan): Factor out, copied this from MarkdownPlugin.
 export const sectionToolbarLayout =
   'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
 
-const SheetContainer = ({ sheet, space, role, remoteFunctionUrl }: SheetRootProps & { role?: string }) => {
+const SheetContainer = ({ graph, sheet, role }: SheetRootProps & { role?: string }) => {
   const dispatch = useIntentDispatcher();
 
   const id = fullyQualifiedId(sheet);
-  const isDirectlyAttended = useIsDirectlyAttended(id);
+  const attendableAttrs = useAttendableAttributes(id);
+  const { hasAttention } = useAttention(id);
 
   // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
   const handleAction = useCallback(
@@ -49,15 +44,19 @@ const SheetContainer = ({ sheet, space, role, remoteFunctionUrl }: SheetRootProp
   );
 
   return (
-    <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
-      <Sheet.Root sheet={sheet} space={space} remoteFunctionUrl={remoteFunctionUrl}>
+    <div
+      role='none'
+      className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}
+      {...(role === 'article' && attendableAttrs)}
+    >
+      <Sheet.Root graph={graph} sheet={sheet}>
         <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>
           <Toolbar.Root
             onAction={handleAction}
             classNames={mx(
               role === 'section'
-                ? ['z-[2] group-focus-within/section:visible', !isDirectlyAttended && 'invisible', sectionToolbarLayout]
-                : 'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',
+                ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
+                : 'attention-surface',
             )}
           >
             {/* TODO(Zan): Restore some of this functionality */}
@@ -73,9 +72,8 @@ const SheetContainer = ({ sheet, space, role, remoteFunctionUrl }: SheetRootProp
           className={mx(
             role === 'section' && 'aspect-square border-is border-bs border-be border-separator',
             role === 'article' &&
-              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator',
+              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator attention-surface',
             focusRing,
-            attentionFragment,
           )}
         >
           <Sheet.Main />

package/src/components/Toolbar/Toolbar.tsx

@@ -26,8 +26,8 @@ import {
 import { nonNullable } from '@dxos/util';
 
 import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
+import { addressToIndex } from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
-import { addressToIndex } from '../../model';
 import { type Formatting } from '../../types';
 import { useSheetContext } from '../Sheet/sheet-context';
 
@@ -179,7 +179,6 @@ const Styles = () => {
 // Actions
 //
 
-// TODO(Zan): Instead of taking props, can we access the state from sheet context?
 const Actions = () => {
   const { onAction } = useToolbarContext('Actions');
   const { cursor, range, model } = useSheetContext();

package/src/components/index.ts

@@ -5,6 +5,7 @@
 import React from 'react';
 
 export * from './ComputeGraph';
+export * from './Sheet';
 
 // Lazily load components for content surfaces.
 export const SheetContainer = React.lazy(() => import('./SheetContainer'));

package/src/defs/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './types';
+export * from './util';

package/src/{model → defs}/types.test.ts

@@ -9,8 +9,8 @@ import { inRange, addressFromA1Notation, addressToA1Notation, rangeFromA1Notatio
 
 describe('cell', () => {
   test('posToA1Notation', () => {
-    expect(addressToA1Notation({ column: 0, row: 0 })).to.eq('A1');
-    expect(addressFromA1Notation('C2')).to.deep.eq({ column: 2, row: 1 });
+    expect(addressToA1Notation({ col: 0, row: 0 })).to.eq('A1');
+    expect(addressFromA1Notation('C2')).to.deep.eq({ col: 2, row: 1 });
   });
 
   test('rangeToA1Notation', () => {
@@ -55,19 +55,19 @@ describe('cell', () => {
     // Values.
     const cells: Record<string, any> = {};
     const setCell = (cell: string, value: any) => {
-      const { column, row } = addressFromA1Notation(cell);
+      const { col, row } = addressFromA1Notation(cell);
       // Reallocate if > current bounds.
-      if (column >= columns.length) {
-        insertIndex(columns, column);
+      if (col >= columns.length) {
+        insertIndex(columns, col);
       }
       if (row >= rows.length) {
         insertIndex(rows, row);
       }
-      const index = `${columns[column]}@${rows[row]}`;
+      const index = `${columns[col]}@${rows[row]}`;
       cells[index] = value;
     };
 
-    expect(addressFromA1Notation('A1')).to.deep.eq({ column: 0, row: 0 });
+    expect(addressFromA1Notation('A1')).to.deep.eq({ col: 0, row: 0 });
 
     expect(columns).to.deep.eq(['a1', 'a2', 'a3', 'a4', 'a5']);
     insertIndex(columns, 7);