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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.8.4-main.3eb6e50203",
+  "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",
@@ -16,13 +16,11 @@
     ".": {
       "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"
@@ -30,33 +28,34 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.4",
+    "@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.3eb6e50203",
-    "@dxos/react-ui-editor": "0.8.4-main.3eb6e50203",
-    "@dxos/util": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-editor": "0.8.4-main.3eb6e50203"
+    "@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": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-searchlist": "0.8.4-main.3eb6e50203",
-    "@dxos/storybook-utils": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "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": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "@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

@@ -47,7 +47,7 @@ const DefaultStory = (props: CellEditorProps) => {
       <div className='text-sm'>
         Last action: <span className='font-mono'>{lastAction}</span>
       </div>
-      <div className='relative border border-separator bs-[100px] is-[300px]'>
+      <div className='relative border border-separator h-[100px] w-[300px]'>
         <CellEditor
           value={value}
           extensions={extensions}

package/src/CellEditor/CellEditor.tsx

@@ -144,18 +144,18 @@ export const CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, o
           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,
               ),
             },
-            scroll: {
+            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?.scroll?.className,
+                '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),
+              className: mx('break-normal!', slots?.content?.className),
             },
           },
         }),
@@ -173,7 +173,7 @@ export const CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, o
         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

@@ -5,7 +5,6 @@
 import React, { useCallback } from 'react';
 
 import { type DxGridCellIndex, type GridScopedProps, useGridContext } from '../Grid';
-
 import { CellEditor, type CellEditorProps } from './CellEditor';
 
 export type GridCellEditorProps = GridScopedProps<

package/src/Grid/Grid.stories.tsx

@@ -7,15 +7,16 @@ import React, { type MouseEvent, type MutableRefObject, useCallback, useRef, use
 
 import { defaultRowSize } from '@dxos/lit-grid';
 import { type DxGridPlaneCells } from '@dxos/lit-grid';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { DropdownMenu } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { toPlaneCellIndex } from '@dxos/react-ui-grid';
-import { Combobox, type ComboboxRootProps, useSearchListResults } from '@dxos/react-ui-searchlist';
+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 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'>;
 
@@ -64,7 +65,7 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
   }, []);
 
   return (
-    <div role='none' className='contents'>
+    <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} />
@@ -94,13 +95,13 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
 };
 
 const ComboboxContentWithFiltering = () => {
-  const { results, handleSearch } = useSearchListResults({
+  const { results, query, handleSearch } = useSearchListResults({
     items: storybookItems,
   });
 
   return (
-    <Combobox.Content onSearch={handleSearch}>
-      <Combobox.Input placeholder='Search...' />
+    <Combobox.Content>
+      <Combobox.Input placeholder='Search...' value={query} onValueChange={handleSearch} />
       <Combobox.List>
         {results.map((value) => (
           <Combobox.Item key={value} value={value} label={value} />
@@ -155,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>
           `,
@@ -199,7 +200,7 @@ export const Calendar: Story = {
             // TODO(burdon): Formatting changes when cell is selected.
             cells[toPlaneCellIndex({ col, row })] = {
               readonly: true,
-              accessoryHtml: '<div class="flex bs-full is-full justify-center items-center overflow-hidden">0</div>',
+              accessoryHtml: '<div class="flex h-full w-full justify-center items-center overflow-hidden">0</div>',
               className: '',
             };
           }
@@ -209,8 +210,8 @@ export const Calendar: Story = {
     },
   },
   render: (args) => (
-    <div className='bs-full flex justify-center'>
-      <div className='bs-full is-[288px] border-x border-separator'>
+    <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,8 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos/lit-grid/dx-grid.pcss';
-
 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';
@@ -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;
@@ -72,6 +71,7 @@ type GridRootProps = PropsWithChildren<
   }>
 >;
 
+// TODO(burdon): Make headless.
 const GridRoot = ({
   __gridScope,
   children,
@@ -152,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