@dxos/react-ui-grid 0.8.4-main.3f58842 → 0.8.4-main.3fbcb4aa9b

package/package.json

@@ -1,57 +1,61 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.8.4-main.3f58842",
+  "version": "0.8.4-main.3fbcb4aa9b",
   "description": "React component which manages a `dx-grid` Lit web component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs"
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/browser/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.1",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.34.1",
-    "@lit/react": "^1.0.5",
-    "@preact-signals/safe-react": "^0.9.0",
+    "@codemirror/autocomplete": "^6.19.0",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.5",
+    "@lit/react": "^1.0.8",
     "@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.4-main.3f58842",
-    "@dxos/react-ui-editor": "0.8.4-main.3f58842",
-    "@dxos/util": "0.8.4-main.3f58842"
+    "@dxos/lit-grid": "0.8.4-main.3fbcb4aa9b",
+    "@dxos/react-ui-editor": "0.8.4-main.3fbcb4aa9b",
+    "@dxos/util": "0.8.4-main.3fbcb4aa9b",
+    "@dxos/ui-editor": "0.8.4-main.3fbcb4aa9b"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.4-main.3f58842",
-    "@dxos/random": "0.8.4-main.3f58842",
-    "@dxos/react-ui-searchlist": "0.8.4-main.3f58842",
-    "@dxos/react-ui-theme": "0.8.4-main.3f58842",
-    "@dxos/storybook-utils": "0.8.4-main.3f58842"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.10",
+    "@dxos/random": "0.8.4-main.3fbcb4aa9b",
+    "@dxos/react-ui": "0.8.4-main.3fbcb4aa9b",
+    "@dxos/react-ui-search": "0.8.4-main.3fbcb4aa9b",
+    "@dxos/react-ui-list": "0.8.4-main.3fbcb4aa9b",
+    "@dxos/ui-theme": "0.8.4-main.3fbcb4aa9b",
+    "@dxos/storybook-utils": "0.8.4-main.3fbcb4aa9b"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.3f58842",
-    "@dxos/react-ui-theme": "0.8.4-main.3f58842"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.3fbcb4aa9b",
+    "@dxos/ui-theme": "0.8.4-main.3fbcb4aa9b"
   },
   "publishConfig": {
     "access": "public"

package/src/CellEditor/CellEditor.stories.tsx

@@ -2,17 +2,15 @@
 // 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 { withTheme } from '@dxos/react-ui/testing';
 
 import { CellEditor, type CellEditorProps, type EditorKeyEvent, editorKeys } from './CellEditor';
 
-const DefaultStory = (args: CellEditorProps) => {
-  const [value, setValue] = useState(args.value || 'Edit me');
+const DefaultStory = (props: CellEditorProps) => {
+  const [value, setValue] = useState(props.value || 'Edit me');
   const [lastAction, setLastAction] = useState<string>('');
 
   const handleBlur = (newValue?: string) => {
@@ -32,7 +30,7 @@ const DefaultStory = (args: CellEditorProps) => {
   };
 
   // Create an extension with editor keys
-  const extension = args.extension || [
+  const extensions = props.extensions || [
     editorKeys({
       onClose: handleKeyEvent,
       onNav: (value, event) => {
@@ -52,8 +50,8 @@ const DefaultStory = (args: CellEditorProps) => {
       <div className='relative border border-separator h-[100px] w-[300px]'>
         <CellEditor
           value={value}
-          extension={extension}
-          autoFocus={args.autoFocus}
+          extensions={extensions}
+          autoFocus={props.autoFocus}
           onBlur={handleBlur}
           box={{
             insetInlineStart: 10,
@@ -68,19 +66,19 @@ const DefaultStory = (args: CellEditorProps) => {
   );
 };
 
-const meta: Meta<CellEditorProps> = {
+const meta = {
   title: 'ui/react-ui-grid/CellEditor',
   component: CellEditor,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof CellEditor>;
 
 export default meta;
 
-type Story = StoryObj<CellEditorProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/CellEditor/CellEditor.tsx

@@ -8,15 +8,14 @@ import { EditorView, keymap } from '@codemirror/view';
 import React, { type KeyboardEvent } from 'react';
 
 import { useThemeContext } from '@dxos/react-ui';
+import { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';
 import {
-  type UseTextEditorProps,
+  type ThemeExtensionsOptions,
   createBasicExtensions,
   createThemeExtensions,
-  preventNewline,
-  useTextEditor,
-  type ThemeExtensionsOptions,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+  filterChars,
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 
 import { type GridEditBox } from '../Grid';
 
@@ -116,14 +115,14 @@ export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
 
 export type CellEditorProps = {
   value?: string;
-  extension?: Extension;
+  extensions?: Extension;
   box?: GridEditBox;
   gridId?: string;
   onBlur?: EditorBlurHandler;
 } & Pick<UseTextEditorProps, 'autoFocus'> &
   Pick<ThemeExtensionsOptions, 'slots'>;
 
-export const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId, slots }: CellEditorProps) => {
+export const CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, onBlur }: CellEditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     return {
@@ -131,8 +130,8 @@ export const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId, s
       initialValue: value,
       selection: { anchor: value?.length ?? 0 },
       extensions: [
-        extension ?? [],
-        preventNewline,
+        extensions ?? [],
+        filterChars(/[\n\r]+/),
         EditorView.focusChangeEffect.of((state, focusing) => {
           if (!focusing) {
             onBlur?.(state.doc.toString());
@@ -145,22 +144,24 @@ export const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId, s
           slots: {
             editor: {
               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]',
+                'min-w-full! w-min! !max-w-(--dx-grid-cell-editor-max-w-size) min-h-full! !max-h-(--dx-grid-cell-editor-max-h-size)',
                 slots?.editor?.className,
               ),
             },
             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]',
+                'overflow-x-hidden! !py-[max(0,calc(var(--dx-grid-cell-editor-padding-block)-1px))] pe-0! !pl-(--dx-grid-cell-editor-padding-inline)',
                 slots?.scroller?.className,
               ),
             },
-            content: { className: mx('!break-normal', slots?.content?.className) },
+            content: {
+              className: mx('break-normal!', slots?.content?.className),
+            },
           },
         }),
       ],
     };
-  }, [extension, autoFocus, value, onBlur, themeMode, slots]);
+  }, [extensions, autoFocus, value, onBlur, themeMode, slots]);
 
   return (
     <div
@@ -172,7 +173,7 @@ export const CellEditor = ({ value, extension, autoFocus, onBlur, box, gridId, s
         insetBlockStart: box?.insetBlockStart ?? '0px',
         minInlineSize: box?.inlineSize ?? '180px',
         minBlockSize: box?.blockSize ?? '30px',
-        ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
+        ...{ '--dx-grid-cell-width': `${box?.inlineSize ?? 200}px` },
       }}
       {...(gridId && { 'data-grid': gridId })}
     />

package/src/CellEditor/GridCellEditor.tsx

@@ -4,16 +4,16 @@
 
 import React, { useCallback } from 'react';
 
+import { type DxGridCellIndex, type GridScopedProps, useGridContext } from '../Grid';
 import { CellEditor, type CellEditorProps } from './CellEditor';
-import { type GridScopedProps, useGridContext, type DxGridCellIndex } from '../Grid';
 
 export type GridCellEditorProps = GridScopedProps<
-  Pick<CellEditorProps, 'extension' | 'onBlur' | 'slots'> & {
+  Pick<CellEditorProps, 'extensions' | 'onBlur' | 'slots'> & {
     getCellContent: (index: DxGridCellIndex) => string | undefined;
   }
 >;
 
-export const GridCellEditor = ({ extension, getCellContent, onBlur, slots, __gridScope }: GridCellEditorProps) => {
+export const GridCellEditor = ({ extensions, getCellContent, onBlur, slots, __gridScope }: GridCellEditorProps) => {
   const { id, editing, setEditing, editBox } = useGridContext('GridCellEditor', __gridScope);
 
   const handleBlur = useCallback(
@@ -30,7 +30,7 @@ export const GridCellEditor = ({ extension, getCellContent, onBlur, slots, __gri
       autoFocus
       box={editBox}
       onBlur={handleBlur}
-      extension={extension}
+      extensions={extensions}
       gridId={id}
       slots={slots}
     />

package/src/Grid/Grid.stories.tsx

@@ -2,20 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 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';
-import { faker } from '@dxos/random';
+import { type DxGridPlaneCells } from '@dxos/lit-grid';
+import { random } from '@dxos/random';
 import { DropdownMenu } from '@dxos/react-ui';
-import { PopoverCombobox, type PopoverComboboxRootProps } from '@dxos/react-ui-searchlist';
-import { withTheme } from '@dxos/storybook-utils';
+import { toPlaneCellIndex } from '@dxos/react-ui-grid';
+import { Combobox, type ComboboxRootProps } from '@dxos/react-ui-list';
+import { useSearchListResults } from '@dxos/react-ui-search';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { Grid, type GridEditing, type GridContentProps, type GridRootProps } from './Grid';
+import { Grid, type GridContentProps, type GridEditing, type GridRootProps } from './Grid';
 
-const storybookItems = faker.helpers.uniqueArray(faker.commerce.productName, 16);
+const storybookItems = random.helpers.uniqueArray(random.commerce.productName, 16);
 
 type GridStoryProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
 
@@ -33,7 +34,7 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
   // Multiselect
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [multiSelectValue, setInternalMultiselectValue] = useState('');
-  const setMultiselectValue = useCallback<NonNullable<PopoverComboboxRootProps['onValueChange']>>((nextValue) => {
+  const setMultiselectValue = useCallback<NonNullable<ComboboxRootProps['onValueChange']>>((nextValue) => {
     setInternalMultiselectValue(nextValue);
     setCells((cells) => {
       // TODO(burdon): How can we get the cell address to update?
@@ -64,7 +65,7 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
   }, []);
 
   return (
-    <div role='none' className='fixed inset-0 grid'>
+    <div className='contents'>
       <Grid.Root id='story' editing={editing} onEditingChange={handleEditingChange}>
         {/* TODO(burdon): Why is this property not just "cells" or "values" */}
         <Grid.Content {...props} initialCells={cells} onClick={handleClick} />
@@ -80,38 +81,52 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
       </DropdownMenu.Root>
 
       {/* Multiselect */}
-      <PopoverCombobox.Root
+      <Combobox.Root
         open={popoverOpen}
         onOpenChange={setPopoverOpen}
         value={multiSelectValue}
         onValueChange={setMultiselectValue}
       >
-        <PopoverCombobox.VirtualTrigger virtualRef={triggerRef} />
-        <PopoverCombobox.Content filter={(value, search) => (value.includes(search) ? 1 : 0)}>
-          <PopoverCombobox.Input placeholder='Search...' />
-          <PopoverCombobox.List>
-            {storybookItems.map((value) => (
-              <PopoverCombobox.Item key={value}>{value}</PopoverCombobox.Item>
-            ))}
-          </PopoverCombobox.List>
-          <PopoverCombobox.Arrow />
-        </PopoverCombobox.Content>
-      </PopoverCombobox.Root>
+        <Combobox.VirtualTrigger virtualRef={triggerRef} />
+        <ComboboxContentWithFiltering />
+      </Combobox.Root>
     </div>
   );
 };
 
-const meta: Meta<GridStoryProps> = {
+const ComboboxContentWithFiltering = () => {
+  const { results, query, handleSearch } = useSearchListResults({
+    items: storybookItems,
+  });
+
+  return (
+    <Combobox.Content>
+      <Combobox.Input placeholder='Search...' value={query} onValueChange={handleSearch} />
+      <Combobox.List>
+        {results.map((value) => (
+          <Combobox.Item key={value} value={value} label={value} />
+        ))}
+      </Combobox.List>
+      <Combobox.Arrow />
+    </Combobox.Content>
+  );
+};
+
+const meta = {
   title: 'ui/react-ui-grid/Grid',
   component: GridStory,
-  decorators: [withTheme],
-  parameters: { layout: 'fullscreen' },
-};
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof GridStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default: Story = {};
+
 export const Basic: Story = {
   args: {
     id: 'story',
@@ -141,7 +156,7 @@ export const Basic: Story = {
         '1,1': {
           value: 'Demo decoration',
           accessoryHtml: `
-            <button class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-1" data-story-action="menu">
+            <button class="dx-button w-6 px-0.5 min-h-0 absolute inset-y-1 right-1" data-story-action="menu">
               <svg><use href="/icons.svg#ph--arrow-right--regular"/></svg>
             </button>
           `,
@@ -158,26 +173,47 @@ export const Basic: Story = {
   },
 };
 
-// TODO(burdon): How to make single-column?
-export const SingleColumn: Story = {
+const cellSize = 40;
+
+// TODO(burdon): Calendar.
+export const Calendar: Story = {
   args: {
     id: 'story',
-    limitColumns: 1,
+    limitColumns: 7,
     columnDefault: {
       grid: {
-        size: 180,
+        size: cellSize,
+        resizeable: false,
       },
     },
     rowDefault: {
       grid: {
-        size: defaultRowSize,
+        size: cellSize,
         resizeable: false,
       },
     },
-    columns: {
-      grid: {
-        0: { size: 200 },
-      },
+    getCells: (range, plane) => {
+      const cells: DxGridPlaneCells = {};
+      if (plane === 'grid') {
+        for (let col = range.start.col; col <= range.end.col; col++) {
+          for (let row = range.start.row; row <= range.end.row; row++) {
+            // TODO(burdon): Formatting changes when cell is selected.
+            cells[toPlaneCellIndex({ col, row })] = {
+              readonly: true,
+              accessoryHtml: '<div class="flex h-full w-full justify-center items-center overflow-hidden">0</div>',
+              className: '',
+            };
+          }
+        }
+      }
+      return cells;
     },
   },
+  render: (args) => (
+    <div className='h-full flex justify-center'>
+      <div className='h-full w-[288px] border-x border-separator'>
+        <GridStory {...args} />
+      </div>
+    </div>
+  ),
 };

package/src/Grid/Grid.tsx

@@ -2,10 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos/lit-grid/dx-grid.pcss';
-
-import { createComponent, type EventName } from '@lit/react';
-import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { type EventName, createComponent } from '@lit/react';
+import { type Scope, createContextScope } from '@radix-ui/react-context';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentProps,
@@ -16,6 +14,7 @@ import React, {
   useState,
 } from 'react';
 
+import '@dxos/lit-grid/dx-grid.pcss';
 import { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';
 
 type DxGridElement = NaturalDxGrid;
@@ -63,20 +62,23 @@ const [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);
 const [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);
 
 type GridRootProps = PropsWithChildren<
-  { id: string } & Partial<{
+  {
+    id: string;
+  } & Partial<{
     editing: GridEditing;
     defaultEditing: GridEditing;
     onEditingChange: (nextEditing: GridEditing) => void;
   }>
 >;
 
+// TODO(burdon): Make headless.
 const GridRoot = ({
+  __gridScope,
+  children,
   id,
   editing: propsEditing,
   defaultEditing,
   onEditingChange,
-  children,
-  __gridScope,
 }: GridScopedProps<GridRootProps>) => {
   const [editing = null, setEditing] = useControllableState({
     prop: propsEditing,
@@ -102,13 +104,13 @@ const GridRoot = ({
 
 GridRoot.displayName = GRID_NAME;
 
+const GRID_CONTENT_NAME = 'GridContent';
+
 type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {
   getCells?: NaturalDxGrid['getCells'];
   activeRefs?: string;
 };
 
-const GRID_CONTENT_NAME = 'GridContent';
-
 const GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {
   const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
   const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);
@@ -150,12 +152,12 @@ GridContent.displayName = GRID_CONTENT_NAME;
 // Fragments
 //
 
-// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.
+// NOTE(Zan): These fragments add border to w-end and h-end of the grid using pseudo-elements.
 // These are offset by 1px to avoid double borders in planks.
 const gridSeparatorInlineEnd =
-  '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-subduedSeparator';
+  '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-y-0 [&>.dx-grid]:after:-right-px [&>.dx-grid]:after:w-px [&>.dx-grid]:after:bg-subdued-separator';
 const gridSeparatorBlockEnd =
-  '[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-subduedSeparator';
+  '[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-x-0 [&>.dx-grid]:before:-bottom-px [&>.dx-grid]:before:h-px [&>.dx-grid]:before:bg-subdued-separator';
 
 //
 // Exports
@@ -166,7 +168,7 @@ export const Grid = {
   Content: GridContent,
 };
 
-export { GridRoot, GridContent, useGridContext, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd };
+export { GridRoot, GridContent, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd, useGridContext };
 
 export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
 
@@ -178,6 +180,7 @@ export {
   toPlaneCellIndex,
   parseCellIndex,
   cellQuery,
+  DxEditRequest,
 } from '@dxos/lit-grid';
 
 export type {