@dxos/react-ui-grid 0.8.3 → 0.8.4-main.f9ba587

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.8.3",
+  "version": "0.8.4-main.f9ba587",
   "description": "React component which manages a `dx-grid` Lit web component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,9 +31,9 @@
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-popper": "1.2.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/lit-grid": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/react-ui-editor": "0.8.3"
+    "@dxos/lit-grid": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-editor": "0.8.4-main.f9ba587",
+    "@dxos/util": "0.8.4-main.f9ba587"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -41,17 +41,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-searchlist": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@dxos/random": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-searchlist": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587",
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/storybook-utils": "0.8.4-main.f9ba587"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
   },
   "publishConfig": {
     "access": "public"

package/src/CellEditor/CellEditor.stories.tsx

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { CellEditor, type CellEditorProps, type EditorKeyEvent, editorKeys } from './CellEditor';
+
+const DefaultStory = (args: CellEditorProps) => {
+  const [value, setValue] = useState(args.value || 'Edit me');
+  const [lastAction, setLastAction] = useState<string>('');
+
+  const handleBlur = (newValue?: string) => {
+    if (newValue !== undefined) {
+      setValue(newValue);
+      setLastAction(`Blur: ${newValue}`);
+    }
+  };
+
+  const handleKeyEvent = (newValue: string | undefined, event: EditorKeyEvent) => {
+    if (newValue !== undefined) {
+      setValue(newValue);
+      setLastAction(`Key: ${event.key}${event.shift ? ' + Shift' : ''}, Value: ${newValue}`);
+    } else {
+      setLastAction(`Key: ${event.key}${event.shift ? ' + Shift' : ''}, Cancelled`);
+    }
+  };
+
+  // Create an extension with editor keys
+  const extension = args.extension || [
+    editorKeys({
+      onClose: handleKeyEvent,
+      onNav: (value, event) => {
+        setLastAction(`Navigation: ${event.key}, Value: ${value}`);
+      },
+    }),
+  ];
+
+  return (
+    <div className='flex flex-col gap-4 p-4'>
+      <div className='text-sm'>
+        Current value: <span className='font-mono'>{value}</span>
+      </div>
+      <div className='text-sm'>
+        Last action: <span className='font-mono'>{lastAction}</span>
+      </div>
+      <div className='relative border border-separator h-[100px] w-[300px]'>
+        <CellEditor
+          value={value}
+          extension={extension}
+          autoFocus={args.autoFocus}
+          onBlur={handleBlur}
+          box={{
+            insetInlineStart: 10,
+            insetBlockStart: 10,
+            inlineSize: 280,
+            blockSize: 30,
+          }}
+          gridId='demo-grid'
+        />
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<CellEditorProps> = {
+  title: 'ui/react-ui-grid/CellEditor',
+  component: CellEditor,
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<CellEditorProps>;
+
+export const Default: Story = {
+  args: {
+    value: 'Edit me',
+    autoFocus: true,
+  },
+};

package/src/CellEditor/CellEditor.tsx

@@ -14,7 +14,9 @@ import {
   createThemeExtensions,
   preventNewline,
   useTextEditor,
+  type ThemeExtensionsOptions,
 } from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
 
 import { type GridEditBox } from '../Grid';
 
@@ -117,9 +119,11 @@ export type CellEditorProps = {
   extension?: Extension;
   box?: GridEditBox;
   gridId?: string;
-} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: EditorBlurHandler };
+  onBlur?: EditorBlurHandler;
+} & Pick<UseTextEditorProps, 'autoFocus'> &
+  Pick<ThemeExtensionsOptions, 'slots'>;
 
-export const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }: CellEditorProps) => {
+export const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId, slots }: CellEditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     return {
@@ -135,30 +139,39 @@ export const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId }:
           }
           return null;
         }),
-        createBasicExtensions({ lineWrapping: false }),
+        createBasicExtensions({ lineWrapping: true }),
         createThemeExtensions({
           themeMode,
           slots: {
             editor: {
-              className: '[&>.cm-scroller]:scrollbar-none tabular-nums',
+              className: mx(
+                '!min-is-full !is-min !max-is-[--dx-grid-cell-editor-max-inline-size] !min-bs-full !max-bs-[--dx-grid-cell-editor-max-block-size]',
+                slots?.editor?.className,
+              ),
             },
-            content: {
-              className:
-                '!border !border-transparent !pli-[var(--dx-grid-cell-padding-inline)] !plb-[var(--dx-grid-cell-padding-block)]',
+            scroller: {
+              className: mx(
+                '!overflow-x-hidden !plb-[max(0,calc(var(--dx-grid-cell-editor-padding-block)-1px))] !pie-0 !pis-[--dx-grid-cell-editor-padding-inline]',
+                slots?.scroller?.className,
+              ),
             },
+            content: { className: mx('!break-normal', slots?.content?.className) },
           },
         }),
       ],
     };
-  }, [extension, autoFocus, value, onBlur]);
+  }, [extension, autoFocus, value, onBlur, themeMode, slots]);
 
   return (
     <div
       data-testid='grid.cell-editor'
       ref={parentRef}
-      className='absolute z-[1]'
+      className='absolute z-[1] dx-grid__cell-editor'
       style={{
-        ...box,
+        insetInlineStart: box?.insetInlineStart ?? '0px',
+        insetBlockStart: box?.insetBlockStart ?? '0px',
+        minInlineSize: box?.inlineSize ?? '180px',
+        minBlockSize: box?.blockSize ?? '30px',
         ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
       }}
       {...(gridId && { 'data-grid': gridId })}

package/src/CellEditor/GridCellEditor.tsx

@@ -8,11 +8,13 @@ import { CellEditor, type CellEditorProps } from './CellEditor';
 import { type GridScopedProps, useGridContext, type DxGridCellIndex } from '../Grid';
 
 export type GridCellEditorProps = GridScopedProps<
-  Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: DxGridCellIndex) => string | undefined }
+  Pick<CellEditorProps, 'extension' | 'onBlur' | 'slots'> & {
+    getCellContent: (index: DxGridCellIndex) => string | undefined;
+  }
 >;
 
-export const GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => {
-  const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);
+export const GridCellEditor = ({ extension, getCellContent, onBlur, slots, __gridScope }: GridCellEditorProps) => {
+  const { id, editing, setEditing, editBox } = useGridContext('GridCellEditor', __gridScope);
 
   const handleBlur = useCallback(
     (value?: string) => {
@@ -30,6 +32,7 @@ export const GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope
       onBlur={handleBlur}
       extension={extension}
       gridId={id}
+      slots={slots}
     />
   ) : null;
 };

package/src/Grid/Grid.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type MouseEvent, type MutableRefObject, useCallback, useRef, useState } from 'react';
 
 import { defaultRowSize } from '@dxos/lit-grid';

package/src/Grid/Grid.tsx

@@ -9,8 +9,8 @@ import { createContextScope, type Scope } from '@radix-ui/react-context';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentProps,
-  forwardRef,
   type PropsWithChildren,
+  forwardRef,
   useCallback,
   useEffect,
   useState,