@dxos/react-ui-grid 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.8.4-main.e098934",
+  "version": "0.8.4-main.ead640a",
   "description": "React component which manages a `dx-grid` Lit web component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,35 +24,35 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.7",
+    "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.2",
-    "@lit/react": "^1.0.5",
+    "@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/lit-grid": "0.8.4-main.e098934",
-    "@dxos/react-ui-editor": "0.8.4-main.e098934",
-    "@dxos/util": "0.8.4-main.e098934"
+    "@dxos/lit-grid": "0.8.4-main.ead640a",
+    "@dxos/react-ui-editor": "0.8.4-main.ead640a",
+    "@dxos/util": "0.8.4-main.ead640a"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/react-ui-searchlist": "0.8.4-main.e098934",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/storybook-utils": "0.8.4-main.e098934",
-    "@dxos/random": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.1",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/react-ui-searchlist": "0.8.4-main.ead640a",
+    "@dxos/react-ui": "0.8.4-main.ead640a",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a",
+    "@dxos/storybook-utils": "0.8.4-main.ead640a",
+    "@dxos/random": "0.8.4-main.ead640a"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.ead640a",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a"
   },
   "publishConfig": {
     "access": "public"

package/src/CellEditor/CellEditor.stories.tsx

@@ -2,12 +2,10 @@
 // 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';
 

package/src/CellEditor/CellEditor.tsx

@@ -13,7 +13,7 @@ import {
   type UseTextEditorProps,
   createBasicExtensions,
   createThemeExtensions,
-  preventNewline,
+  filterChars,
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
@@ -132,7 +132,7 @@ export const CellEditor = ({ value, extensions, box, gridId, onBlur, autoFocus,
       selection: { anchor: value?.length ?? 0 },
       extensions: [
         extensions ?? [],
-        preventNewline,
+        filterChars(/[\n\r]+/),
         EditorView.focusChangeEffect.of((state, focusing) => {
           if (!focusing) {
             onBlur?.(state.doc.toString());

package/src/Grid/Grid.stories.tsx

@@ -2,16 +2,14 @@
 // 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 { DropdownMenu } from '@dxos/react-ui';
-import { PopoverCombobox, type PopoverComboboxRootProps } from '@dxos/react-ui-searchlist';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { Combobox, type ComboboxRootProps } from '@dxos/react-ui-searchlist';
 
 import { Grid, type GridContentProps, type GridEditing, type GridRootProps } from './Grid';
 
@@ -33,7 +31,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?
@@ -80,23 +78,23 @@ 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>
+        <Combobox.VirtualTrigger virtualRef={triggerRef} />
+        <Combobox.Content filter={(value, search) => (value.includes(search) ? 1 : 0)}>
+          <Combobox.Input placeholder='Search...' />
+          <Combobox.List>
             {storybookItems.map((value) => (
-              <PopoverCombobox.Item key={value}>{value}</PopoverCombobox.Item>
+              <Combobox.Item key={value}>{value}</Combobox.Item>
             ))}
-          </PopoverCombobox.List>
-          <PopoverCombobox.Arrow />
-        </PopoverCombobox.Content>
-      </PopoverCombobox.Root>
+          </Combobox.List>
+          <Combobox.Arrow />
+        </Combobox.Content>
+      </Combobox.Root>
     </div>
   );
 };
@@ -105,7 +103,9 @@ const meta = {
   title: 'ui/react-ui-grid/Grid',
   component: GridStory,
   decorators: [withTheme],
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof GridStory>;
 
 export default meta;

package/src/Grid/Grid.tsx

@@ -102,13 +102,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);
@@ -166,7 +166,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 };