@dxos/plugin-sheet 0.6.14-staging.9e90729 → 0.6.14-staging.a52de51

package/src/components/GridSheet/GridSheet.tsx

@@ -13,15 +13,18 @@ import React, {
   useState,
 } from 'react';
 
+import { useIntentDispatcher } from '@dxos/app-framework';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   closestCell,
+  defaultSizeRow,
   editorKeys,
   Grid,
   GridCellEditor,
   type DxGridElement,
-  type EditorKeysProps,
+  type EditorKeyHandler,
+  type EditorBlurHandler,
   type GridContentProps,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
@@ -31,6 +34,7 @@ import { DEFAULT_COLUMNS, DEFAULT_ROWS, rangeToA1Notation, type CellRange } from
 import { rangeExtension, sheetExtension, type RangeController } from '../../extensions';
 import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
 import { SHEET_PLUGIN } from '../../meta';
+import { SheetAction } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 const inertPosition: DxGridPosition = { plane: 'grid', col: 0, row: 0 };
@@ -52,14 +56,20 @@ const frozen = {
   frozenRowsStart: 1,
 };
 
-const sheetRowDefault = { frozenRowsStart: { size: 32, readonly: true }, grid: { size: 32, resizeable: true } };
+const sheetRowDefault = {
+  frozenRowsStart: { size: defaultSizeRow, readonly: true },
+  grid: { size: defaultSizeRow, resizeable: true },
+};
 const sheetColDefault = { frozenColsStart: { size: 48, readonly: true }, grid: { size: 180, resizeable: true } };
 
 export const GridSheet = () => {
   const { t } = useTranslation(SHEET_PLUGIN);
-  const { id, model, editing, setEditing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } =
-    useSheetContext();
-  const dxGrid = useRef<DxGridElement | null>(null);
+  const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } = useSheetContext();
+  // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us
+  // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
+  const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
+  const [extraplanarFocus, setExtraplanarFocus] = useState<DxGridPosition | null>(null);
+  const dispatch = useIntentDispatcher();
   const rangeController = useRef<RangeController>();
   const { hasAttention } = useAttention(id);
 
@@ -67,8 +77,15 @@ export const GridSheet = () => {
     (event: FocusEvent) => {
       if (!editing) {
         const cell = closestCell(event.target);
-        if (cell && cell.plane === 'grid') {
-          setCursor({ col: cell.col, row: cell.row });
+        if (cell) {
+          if (cell.plane === 'grid') {
+            setCursor({ col: cell.col, row: cell.row });
+            setExtraplanarFocus(null);
+          } else {
+            setExtraplanarFocus(cell);
+          }
+        } else {
+          setExtraplanarFocus(null);
         }
       }
     },
@@ -76,29 +93,27 @@ export const GridSheet = () => {
   );
 
   // TODO(burdon): Validate formula before closing: hf.validateFormula();
-  const handleClose = useCallback<NonNullable<EditorKeysProps['onClose']> | NonNullable<EditorKeysProps['onNav']>>(
-    (value, { key, shift }) => {
-      if (value !== undefined) {
-        model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
+  const handleClose = useCallback<EditorKeyHandler>(
+    (_value, event) => {
+      if (event) {
+        const { key, shift } = event;
+        const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
+          ? 'row'
+          : ['Tab', 'ArrowLeft', 'ArrowRight'].includes(key)
+            ? 'col'
+            : undefined;
+        const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
+        dxGrid?.refocus(axis, delta);
       }
-      setEditing(null);
-      const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
-        ? 'row'
-        : ['Tab', 'ArrowLeft', 'ArrowRight'].includes(key)
-          ? 'col'
-          : undefined;
-      const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
-      dxGrid.current?.refocus(axis, delta);
     },
-    [model, editing],
+    [model, editing, dxGrid],
   );
 
-  const handleBlur = useCallback(
-    (value?: string) => {
+  const handleBlur = useCallback<EditorBlurHandler>(
+    (value) => {
       if (value !== undefined) {
         model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
       }
-      setEditing(null);
     },
     [model, editing],
   );
@@ -143,6 +158,34 @@ export const GridSheet = () => {
     [hasAttention],
   );
 
+  const selectEntireAxis = useCallback(
+    (pos: DxGridPosition) => {
+      switch (pos.plane) {
+        case 'frozenRowsStart':
+          return dxGrid?.setSelection({
+            start: { col: pos.col, row: 0, plane: 'grid' },
+            end: { col: pos.col, row: model.sheet.rows.length - 1, plane: 'grid' },
+          });
+        case 'frozenColsStart':
+          return dxGrid?.setSelection({
+            start: { row: pos.row, col: 0, plane: 'grid' },
+            end: { row: pos.row, col: model.sheet.columns.length - 1, plane: 'grid' },
+          });
+      }
+    },
+    [dxGrid, model.sheet],
+  );
+
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      const cell = closestCell(event.target);
+      if (cell) {
+        selectEntireAxis(cell);
+      }
+    },
+    [selectEntireAxis],
+  );
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       switch (event.key) {
@@ -150,6 +193,16 @@ export const GridSheet = () => {
         case 'Delete':
           event.preventDefault();
           return cursorFallbackRange && model.clear(cursorFallbackRange);
+        case 'Enter':
+        case 'Space':
+          if (dxGrid && extraplanarFocus) {
+            switch (extraplanarFocus.plane) {
+              case 'frozenRowsStart':
+              case 'frozenColsStart':
+                event.preventDefault();
+                return selectEntireAxis(extraplanarFocus);
+            }
+          }
       }
       if (event.metaKey || event.ctrlKey) {
         switch (event.key) {
@@ -175,7 +228,7 @@ export const GridSheet = () => {
         }
       }
     },
-    [cursorFallbackRange, model, cursor],
+    [cursorFallbackRange, model, cursor, extraplanarFocus, selectEntireAxis],
   );
 
   const contextMenuAnchorRef = useRef<HTMLButtonElement | null>(null);
@@ -192,20 +245,31 @@ export const GridSheet = () => {
   }, []);
 
   const handleAxisMenuAction = useCallback(
-    (operation: 'add-before' | 'add-after' | 'remove') => {
+    (operation: 'insert-before' | 'insert-after' | 'drop') => {
       switch (operation) {
-        case 'add-before':
-        case 'add-after':
-          model[contextMenuAxis === 'col' ? 'insertColumns' : 'insertRows'](
-            contextMenuOpen![contextMenuAxis] + (operation === 'add-before' ? 0 : 1),
-            1,
-          );
+        case 'insert-before':
+        case 'insert-after':
+          return dispatch({
+            action: SheetAction.INSERT_AXIS,
+            data: {
+              model,
+              axis: contextMenuAxis,
+              index: contextMenuOpen![contextMenuAxis] + (operation === 'insert-before' ? 0 : 1),
+            } satisfies SheetAction.InsertAxis,
+          });
           break;
-        case 'remove':
-        // console.warn('[model does not implement]');
+        case 'drop':
+          return dispatch({
+            action: SheetAction.DROP_AXIS,
+            data: {
+              model,
+              axis: contextMenuAxis,
+              axisIndex: model.sheet[contextMenuAxis === 'row' ? 'rows' : 'columns'][contextMenuOpen![contextMenuAxis]],
+            } satisfies SheetAction.DropAxis,
+          });
       }
     },
-    [contextMenuAxis, contextMenuOpen, model],
+    [contextMenuAxis, contextMenuOpen, model, dispatch],
   );
 
   const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
@@ -217,9 +281,9 @@ export const GridSheet = () => {
       rangeExtension({
         onInit: (fn) => (rangeController.current = fn),
         onStateChange: (state) => {
-          if (dxGrid.current) {
+          if (dxGrid) {
             // This can’t dispatch a setState in this component, otherwise the cell editor remounts and loses focus.
-            dxGrid.current.mode = typeof state.activeRange === 'undefined' ? 'edit' : 'edit-select';
+            dxGrid.mode = typeof state.activeRange === 'undefined' ? 'edit' : 'edit-select';
           }
         },
       }),
@@ -256,10 +320,11 @@ export const GridSheet = () => {
         onWheelCapture={handleWheel}
         onKeyDown={handleKeyDown}
         onContextMenu={handleContextMenu}
-        overscroll='inline'
-        className='[--dx-grid-base:var(--surface-bg)]'
+        onClick={handleClick}
+        overscroll='trap'
+        className='[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:border-bs [&_.dx-grid]:border-separator'
         activeRefs={activeRefs}
-        ref={dxGrid}
+        ref={setDxGrid}
       />
       <DropdownMenu.Root
         modal={false}
@@ -269,21 +334,21 @@ export const GridSheet = () => {
         <DropdownMenu.VirtualTrigger virtualRef={contextMenuAnchorRef} />
         <DropdownMenu.Content side={contextMenuAxis === 'col' ? 'bottom' : 'right'} sideOffset={4} collisionPadding={8}>
           <DropdownMenu.Viewport>
-            <DropdownMenu.Item onClick={() => handleAxisMenuAction('add-before')}>
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('insert-before')}>
               <Icon
                 size={5}
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-left--regular' : 'ph--rows-plus-top--regular'}
               />
               <span>{t(`add ${contextMenuAxis} before label`)}</span>
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => handleAxisMenuAction('add-after')}>
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('insert-after')}>
               <Icon
                 size={5}
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-right--regular' : 'ph--rows-plus-bottom--regular'}
               />
               <span>{t(`add ${contextMenuAxis} after label`)}</span>
             </DropdownMenu.Item>
-            <DropdownMenu.Item disabled onClick={() => handleAxisMenuAction('remove')}>
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('drop')}>
               <Icon size={5} icon='ph--backspace--regular' />
               <span>{t(`delete ${contextMenuAxis} label`)}</span>
             </DropdownMenu.Item>

package/src/components/GridSheet/util.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
 import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-data';
@@ -67,16 +67,18 @@ const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCe
     })
     .map((thread) => fullyQualifiedId(thread!))
     .join(' ');
-  const type = model.getValueType(address);
+
+  const description = model.getValueDescription(address);
+  const type = description?.type;
+  const format = description?.format;
   const classNames = ranges?.map(cellClassNameForRange).reverse();
 
   return {
-    value: parseValue(type, rawValue),
-    className: mx(cellClassesForFieldType(type), threadRefs && commentedClassName, classNames),
+    value: parseValue({ type, format, value: rawValue }),
+    className: mx(cellClassesForFieldType({ type, format }), threadRefs && commentedClassName, classNames),
     dataRefs: threadRefs,
   };
 };
-
 const gridCellGetter = (model: SheetModel) => {
   // TODO(thure): Actually use the cache.
   const cachedGridCells: DxGridPlaneCells = {};
@@ -94,11 +96,15 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: 'text-end !pie-1',
+  className: 'text-end !pie-1 text-subdued',
   resizeHandle: 'row',
 });
 
-export const colLabelCell = (col: number) => ({ value: colToA1Notation(col), resizeHandle: 'col' });
+export const colLabelCell = (col: number) => ({
+  value: colToA1Notation(col),
+  className: 'text-subdued',
+  resizeHandle: 'col',
+});
 
 const cellGetter = (model: SheetModel) => {
   const getGridCells = gridCellGetter(model);
@@ -125,23 +131,27 @@ const cellGetter = (model: SheetModel) => {
 };
 
 export const useSheetModelDxGridProps = (
-  dxGridRef: MutableRefObject<DxGridElement | null>,
+  dxGrid: DxGridElement | null,
   model: SheetModel,
 ): Pick<GridContentProps, 'columns' | 'rows'> => {
   const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
-  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridRows(model));
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
-    if (dxGridRef.current) {
-      dxGridRef.current.getCells = cellGetter(model);
+    if (dxGrid) {
+      dxGrid.getCells = cellGetter(model);
     }
     const handleCellsUpdate = () => {
-      dxGridRef.current?.requestUpdate('initialCells');
+      dxGrid?.requestUpdate('initialCells');
     };
     cellsAccessor.handle.addListener('change', handleCellsUpdate);
-    return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
-  }, [model]);
+    const unsubscribe = model.graph.update.on(handleCellsUpdate);
+    return () => {
+      cellsAccessor.handle.removeListener('change', handleCellsUpdate);
+      unsubscribe();
+    };
+  }, [model, dxGrid]);
 
   useEffect(() => {
     const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);
@@ -158,7 +168,7 @@ export const useSheetModelDxGridProps = (
       columnMetaAccessor.handle.removeListener('change', handleColumnMetaUpdate);
       rowMetaAccessor.handle.removeListener('change', handleRowMetaUpdate);
     };
-  }, [model]);
+  }, [model, dxGrid]);
 
   return { columns, rows };
 };

package/src/components/RangeList/RangeList.tsx

@@ -2,37 +2,52 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { S } from '@dxos/echo-schema';
+import { useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover } from '@dxos/react-ui-theme';
 
 import { rangeFromIndex, rangeToA1Notation } from '../../defs';
+import { SHEET_PLUGIN } from '../../meta';
 import { Range, type SheetType } from '../../types';
 
 export type RangeListProps = {
   sheet: SheetType;
-  onSelect?: (range: Range) => void;
-  onDelete?: (range: Range) => void;
 };
 
-export const RangeList = ({ sheet, onSelect, onDelete }: RangeListProps) => {
+export const RangeList = ({ sheet }: RangeListProps) => {
+  const { t } = useTranslation(SHEET_PLUGIN);
+  // TODO(thure): Implement similar to comments, #8121
+  const handleSelectRange = (range: Range) => {};
+  const handleDeleteRange = useCallback(
+    (range: Range) => {
+      const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
+      sheet.ranges.splice(index, 1);
+    },
+    [sheet],
+  );
   return (
-    <div className='flex flex-col'>
+    <>
+      <h2 className='p-2 text-sm font-semibold'>{t('range list heading')}</h2>
       <List.Root<Range> items={sheet.ranges} isItem={S.is(Range)}>
-        {({ items }) =>
-          items.map((item, i) => (
-            <List.Item key={i} item={item} classNames={['p-2', ghostHover]}>
+        {({ items: ranges }) =>
+          ranges.map((range, i) => (
+            <List.Item key={i} item={range} classNames={['p-2', ghostHover]}>
               <List.ItemDragHandle />
-              <List.ItemTitle onClick={() => onSelect?.(item)}>
-                {rangeToA1Notation(rangeFromIndex(sheet, item.range))}
+              <List.ItemTitle onClick={() => handleSelectRange(range)}>
+                {t('range title', {
+                  position: rangeToA1Notation(rangeFromIndex(sheet, range.range)),
+                  key: t(`range key ${range.key} label`),
+                  value: t(`range value ${range.value} label`),
+                })}
               </List.ItemTitle>
-              {onDelete && <List.ItemDeleteButton onClick={() => onDelete(item)} />}
+              <List.ItemDeleteButton onClick={() => handleDeleteRange(range)} />
             </List.Item>
           ))
         }
       </List.Root>
-    </div>
+    </>
   );
 };

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -11,6 +11,7 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SheetContainer } from './SheetContainer';
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
+import translations from '../../translations';
 import { SheetType } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 
@@ -18,11 +19,11 @@ export const Basic = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph, { cells: createTestCells() });
-  if (!sheet || !graph) {
+  if (!sheet || !space) {
     return null;
   }
 
-  return <SheetContainer graph={graph} sheet={sheet} role='article' />;
+  return <SheetContainer space={space} sheet={sheet} role='article' />;
 };
 
 const meta: Meta = {
@@ -38,6 +39,7 @@ const meta: Meta = {
       classNames: 'grid grid-cols-1 grid-rows-[min-content_minmax(0,1fr)_min-content]',
     }),
   ],
+  parameters: { translations },
 };
 
 export default meta;

package/src/components/SheetContainer/SheetContainer.tsx

@@ -4,24 +4,31 @@
 
 import React from 'react';
 
+import { type Space } from '@dxos/react-client/echo';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { type SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
 import { FunctionEditor } from '../FunctionEditor';
 import { GridSheet } from '../GridSheet';
-import { SheetProvider, type SheetProviderProps } from '../SheetContext';
+import { SheetProvider } from '../SheetContext';
 import { Toolbar } from '../Toolbar';
 
-export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {
-  return (
+export const SheetContainer = ({ space, sheet, role }: { space: Space; sheet: SheetType; role?: string }) => {
+  const graph = useComputeGraph(space);
+
+  return graph ? (
     <SheetProvider sheet={sheet} graph={graph}>
-      <Toolbar.Root role={role}>
-        <Toolbar.Styles />
-        <Toolbar.Alignment />
-        <Toolbar.Separator />
-        <Toolbar.Actions />
-      </Toolbar.Root>
-      <div role='none' className='border-bs border-separator grid cols-1 rows-[1fr_min-content] min-bs-0'>
+      <StackItem.Content toolbar statusbar classNames='border-bs border-separator'>
+        <Toolbar.Root role={role}>
+          <Toolbar.Styles />
+          <Toolbar.Alignment />
+          <Toolbar.Separator />
+          <Toolbar.Actions />
+        </Toolbar.Root>
         <GridSheet />
         <FunctionEditor />
-      </div>
+      </StackItem.Content>
     </SheetProvider>
-  );
+  ) : null;
 };