@dxos/react-ui-grid 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.8.4-main.7ace549",
+  "version": "0.8.4-main.937b3ca",
   "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": {
     ".": {
@@ -28,31 +32,31 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
     "@lit/react": "^1.0.8",
-    "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-popper": "1.2.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/react-ui-editor": "0.8.4-main.7ace549",
-    "@dxos/lit-grid": "0.8.4-main.7ace549",
-    "@dxos/util": "0.8.4-main.7ace549"
+    "@dxos/react-ui-editor": "0.8.4-main.937b3ca",
+    "@dxos/ui-editor": "0.8.4-main.937b3ca",
+    "@dxos/util": "0.8.4-main.937b3ca",
+    "@dxos/lit-grid": "0.8.4-main.937b3ca"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@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/react-ui": "0.8.4-main.7ace549",
-    "@dxos/react-ui-searchlist": "0.8.4-main.7ace549",
-    "@dxos/random": "0.8.4-main.7ace549",
-    "@dxos/storybook-utils": "0.8.4-main.7ace549",
-    "@dxos/react-ui-theme": "0.8.4-main.7ace549"
+    "@dxos/random": "0.8.4-main.937b3ca",
+    "@dxos/react-ui": "0.8.4-main.937b3ca",
+    "@dxos/react-ui-searchlist": "0.8.4-main.937b3ca",
+    "@dxos/storybook-utils": "0.8.4-main.937b3ca",
+    "@dxos/ui-theme": "0.8.4-main.937b3ca"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.7ace549",
-    "@dxos/react-ui-theme": "0.8.4-main.7ace549"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.937b3ca",
+    "@dxos/ui-theme": "0.8.4-main.937b3ca"
   },
   "publishConfig": {
     "access": "public"

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 ThemeExtensionsOptions,
-  type UseTextEditorProps,
   createBasicExtensions,
   createThemeExtensions,
   filterChars,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 
 import { type GridEditBox } from '../Grid';
 
@@ -123,7 +122,7 @@ export type CellEditorProps = {
 } & Pick<UseTextEditorProps, 'autoFocus'> &
   Pick<ThemeExtensionsOptions, 'slots'>;
 
-export const CellEditor = ({ value, extensions, box, gridId, onBlur, autoFocus, slots }: CellEditorProps) => {
+export const CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, onBlur }: CellEditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     return {

package/src/Grid/Grid.stories.tsx

@@ -11,7 +11,7 @@ import { faker } 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 } from '@dxos/react-ui-searchlist';
+import { Combobox, type ComboboxRootProps, useSearchListResults } from '@dxos/react-ui-searchlist';
 
 import { Grid, type GridContentProps, type GridEditing, type GridRootProps } from './Grid';
 
@@ -87,24 +87,34 @@ const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
         onValueChange={setMultiselectValue}
       >
         <Combobox.VirtualTrigger virtualRef={triggerRef} />
-        <Combobox.Content filter={(value, search) => (value.includes(search) ? 1 : 0)}>
-          <Combobox.Input placeholder='Search...' />
-          <Combobox.List>
-            {storybookItems.map((value) => (
-              <Combobox.Item key={value}>{value}</Combobox.Item>
-            ))}
-          </Combobox.List>
-          <Combobox.Arrow />
-        </Combobox.Content>
+        <ComboboxContentWithFiltering />
       </Combobox.Root>
     </div>
   );
 };
 
+const ComboboxContentWithFiltering = () => {
+  const { results, handleSearch } = useSearchListResults({
+    items: storybookItems,
+  });
+
+  return (
+    <Combobox.Content onSearch={handleSearch}>
+      <Combobox.Input placeholder='Search...' />
+      <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, withLayout({ container: 'column' })],
+  decorators: [withTheme, withLayout({ layout: 'column' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/Grid/Grid.tsx

@@ -63,7 +63,9 @@ 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;
@@ -71,12 +73,12 @@ type GridRootProps = PropsWithChildren<
 >;
 
 const GridRoot = ({
+  __gridScope,
+  children,
   id,
   editing: propsEditing,
   defaultEditing,
   onEditingChange,
-  children,
-  __gridScope,
 }: GridScopedProps<GridRootProps>) => {
   const [editing = null, setEditing] = useControllableState({
     prop: propsEditing,