@dxos/react-ui-grid 0.8.0 → 0.8.1-main.013e445

package/dist/types/src/CellEditor/CellEditor.d.ts

@@ -1,5 +1,5 @@
 import { type Extension } from '@codemirror/state';
-import { type KeyboardEvent } from 'react';
+import React, { type KeyboardEvent } from 'react';
 import { type UseTextEditorProps } from '@dxos/react-ui-editor';
 import { type GridEditBox } from '../Grid';
 export type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & {
@@ -21,5 +21,5 @@ export type CellEditorProps = {
 } & Pick<UseTextEditorProps, 'autoFocus'> & {
     onBlur?: EditorBlurHandler;
 };
-export declare const CellEditor: ({ value, extension, autoFocus, onBlur, box, gridId }: CellEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CellEditor: ({ value, extension, autoFocus, onBlur, box, gridId }: CellEditorProps) => React.JSX.Element;
 //# sourceMappingURL=CellEditor.d.ts.map

package/dist/types/src/CellEditor/CellEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAc,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAC1F,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;AACpE,MAAM,MAAM,sBAAsB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AAEjG,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,UAAU,uBAAwB,eAAe,KAAG,SAgFhE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAE3E,eAAO,MAAM,UAAU,yDAA0D,eAAe,4CA4C/F,CAAC"}
+{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAC1F,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;AACpE,MAAM,MAAM,sBAAsB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AAEjG,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,UAAU,uBAAwB,eAAe,KAAG,SAgFhE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAE3E,eAAO,MAAM,UAAU,yDAA0D,eAAe,sBA4C/F,CAAC"}

package/dist/types/src/CellEditor/GridCellEditor.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { type CellEditorProps } from './CellEditor';
 import { type GridScopedProps, type DxGridCellIndex } from '../Grid';
 export type GridCellEditorProps = GridScopedProps<Pick<CellEditorProps, 'extension' | 'onBlur'> & {
     getCellContent: (index: DxGridCellIndex) => string | undefined;
 }>;
-export declare const GridCellEditor: ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const GridCellEditor: ({ extension, getCellContent, onBlur, __gridScope }: GridCellEditorProps) => React.JSX.Element | null;
 //# sourceMappingURL=GridCellEditor.d.ts.map

package/dist/types/src/CellEditor/GridCellEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,eAAe,EAAkB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAErF,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAC/C,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IAAE,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAA;CAAE,CACnH,CAAC;AAEF,eAAO,MAAM,cAAc,uDAAwD,mBAAmB,mDAqBrG,CAAC"}
+{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,eAAe,EAAkB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAErF,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAC/C,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IAAE,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAA;CAAE,CACnH,CAAC;AAEF,eAAO,MAAM,cAAc,uDAAwD,mBAAmB,6BAqBrG,CAAC"}

package/dist/types/src/Grid/Grid.d.ts

@@ -34,7 +34,7 @@ type GridRootProps = PropsWithChildren<{
     onEditingChange: (nextEditing: GridEditing) => void;
 }>>;
 declare const GridRoot: {
-    ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): import("react/jsx-runtime").JSX.Element;
+    ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): React.JSX.Element;
     displayName: string;
 };
 type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {
@@ -44,7 +44,7 @@ type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {
 declare const GridContent: React.ForwardRefExoticComponent<Omit<GridScopedProps<GridContentProps>, "ref"> & React.RefAttributes<NaturalDxGrid>>;
 export declare const Grid: {
     Root: {
-        ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): import("react/jsx-runtime").JSX.Element;
+        ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): React.JSX.Element;
         displayName: string;
     };
     Content: React.ForwardRefExoticComponent<Omit<GridScopedProps<GridContentProps>, "ref"> & React.RefAttributes<NaturalDxGrid>>;

package/dist/types/src/Grid/Grid.stories.d.ts

@@ -1,16 +1,10 @@
 import '@dxos-theme';
-import { type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { type GridContentProps, type GridRootProps } from './Grid';
-export { defaultSizeCol, defaultSizeRow } from '@dxos/lit-grid';
-type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
-declare const _default: {
-    title: string;
-    component: ({ onEditingChange, ...props }: StoryGridProps) => import("react/jsx-runtime").JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const Basic: StoryObj<StoryGridProps>;
+type GridStoryProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
+declare const meta: Meta<GridStoryProps>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const SingleColumn: Story;
 //# sourceMappingURL=Grid.stories.d.ts.map

package/dist/types/src/Grid/Grid.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASjD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhE,KAAK,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;;;+CAiB9B,cAAc;;;;;;AAiEhE,wBAKE;AAEF,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,cAAc,CA+B1C,CAAC"}
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAS5D,OAAO,EAA0B,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI3F,KAAK,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;AAoFhF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAK9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KA4CnB,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.8.0",
+  "version": "0.8.1-main.013e445",
   "description": "React component which manages a `dx-grid` Lit web component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,9 +30,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.0",
-    "@dxos/react-ui-editor": "0.8.0",
-    "@dxos/util": "0.8.0"
+    "@dxos/lit-grid": "0.8.1-main.013e445",
+    "@dxos/util": "0.8.1-main.013e445",
+    "@dxos/react-ui-editor": "0.8.1-main.013e445"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -40,17 +40,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.0",
-    "@dxos/react-ui": "0.8.0",
-    "@dxos/react-ui-searchlist": "0.8.0",
-    "@dxos/react-ui-theme": "0.8.0",
-    "@dxos/storybook-utils": "0.8.0"
+    "@dxos/random": "0.8.1-main.013e445",
+    "@dxos/react-ui": "0.8.1-main.013e445",
+    "@dxos/react-ui-searchlist": "0.8.1-main.013e445",
+    "@dxos/react-ui-theme": "0.8.1-main.013e445",
+    "@dxos/storybook-utils": "0.8.1-main.013e445"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.0",
-    "@dxos/react-ui-theme": "0.8.0"
+    "@dxos/react-ui-theme": "0.8.1-main.013e445",
+    "@dxos/react-ui": "0.8.1-main.013e445"
   },
   "publishConfig": {
     "access": "public"

package/src/Grid/Grid.stories.tsx

@@ -4,41 +4,46 @@
 
 import '@dxos-theme';
 
-import { type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import React, { type MouseEvent, type MutableRefObject, useCallback, useRef, useState } from 'react';
 
 import { defaultSizeRow } from '@dxos/lit-grid';
 import { faker } from '@dxos/random';
 import { DropdownMenu } from '@dxos/react-ui';
-import { PopoverCombobox } from '@dxos/react-ui-searchlist';
+import { PopoverCombobox, type PopoverComboboxRootProps } from '@dxos/react-ui-searchlist';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { Grid, type GridContentProps, type GridRootProps } from './Grid';
+import { Grid, type GridEditing, type GridContentProps, type GridRootProps } from './Grid';
 
-export { defaultSizeCol, defaultSizeRow } from '@dxos/lit-grid';
+const storybookItems = faker.helpers.uniqueArray(faker.commerce.productName, 16);
 
-type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
+type GridStoryProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
 
-const storybookItems = faker.helpers.uniqueArray(faker.commerce.productName, 16);
+const GridStory = ({ initialCells, ...props }: GridStoryProps) => {
+  const triggerRef = useRef<HTMLButtonElement>(null) as MutableRefObject<HTMLButtonElement>;
 
-const storybookInitialCells = (value?: string) => ({
-  grid: {
-    '1,1': {
-      accessoryHtml:
-        '<button class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-1" data-story-action="menu"><svg><use href="/icons.svg#ph--arrow-right--regular"/></svg></button>',
-      value: 'Weekly sales report',
-    },
-    '2,2': {
-      accessoryHtml: `<dx-grid-multiselect-cell ${value ? `values='${JSON.stringify([{ label: value }])}'` : ''} placeholder="Select…"></dx-grid-multiselect-cell>`,
-    },
-  },
-});
+  const [cells, setCells] = useState<GridContentProps['initialCells']>(initialCells);
 
-const StoryGrid = ({ onEditingChange, ...props }: StoryGridProps) => {
-  const [menuOpen, setMenuOpen] = useState(false);
+  const [editing, setEditing] = useState<GridEditing>(null);
+  const handleEditingChange = useCallback<NonNullable<GridRootProps['onEditingChange']>>((event) => {
+    // TODO(burdon): Not working?
+    setEditing(event ? { index: event.index, initialContent: '' } : null);
+  }, []);
+
+  // Multiselect
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [multiSelectValue, setInternalMultiselectValue] = useState('');
-  const triggerRef = useRef<HTMLButtonElement>(null) as MutableRefObject<HTMLButtonElement>;
+  const setMultiselectValue = useCallback<NonNullable<PopoverComboboxRootProps['onValueChange']>>((nextValue) => {
+    setInternalMultiselectValue(nextValue);
+    setCells((cells) => {
+      // TODO(burdon): How can we get the cell address to update?
+      console.log('[setMultiselectValue]', nextValue);
+      return cells;
+    });
+  }, []);
+
+  // Menu
+  const [menuOpen, setMenuOpen] = useState(false);
 
   const handleClick = useCallback((event: MouseEvent) => {
     const closestStoryAction = (event.target as HTMLElement).closest('button[data-story-action]');
@@ -50,27 +55,22 @@ const StoryGrid = ({ onEditingChange, ...props }: StoryGridProps) => {
     if (closestAccessory) {
       const action = closestAccessory.getAttribute('data-dx-grid-accessory');
       switch (action) {
-        case 'invoke-multiselect':
+        case 'invoke-multiselect': {
           triggerRef.current = closestAccessory as HTMLButtonElement;
           return setPopoverOpen(true);
+        }
       }
     }
   }, []);
 
-  const [initialCells, setInitialCells] = useState<GridContentProps['initialCells']>(storybookInitialCells());
-
-  const setMultiselectValue = useCallback((nextValue: string) => {
-    const nextInitialCells = storybookInitialCells(nextValue);
-    console.log('[set initial cells]', nextInitialCells);
-    setInitialCells(nextInitialCells);
-    setInternalMultiselectValue(nextValue);
-  }, []);
-
   return (
-    <>
-      <Grid.Root id='story' onEditingChange={onEditingChange}>
-        <Grid.Content {...props} initialCells={initialCells} onClick={handleClick} />
+    <div role='none' className='fixed inset-0 grid'>
+      <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} />
       </Grid.Root>
+
+      {/* Menu */}
       <DropdownMenu.Root open={menuOpen} onOpenChange={setMenuOpen}>
         <DropdownMenu.VirtualTrigger virtualRef={triggerRef} />
         <DropdownMenu.Content>
@@ -78,6 +78,8 @@ const StoryGrid = ({ onEditingChange, ...props }: StoryGridProps) => {
           <DropdownMenu.Arrow />
         </DropdownMenu.Content>
       </DropdownMenu.Root>
+
+      {/* Multiselect */}
       <PopoverCombobox.Root
         open={popoverOpen}
         onOpenChange={setPopoverOpen}
@@ -95,18 +97,22 @@ const StoryGrid = ({ onEditingChange, ...props }: StoryGridProps) => {
           <PopoverCombobox.Arrow />
         </PopoverCombobox.Content>
       </PopoverCombobox.Root>
-    </>
+    </div>
   );
 };
 
-export default {
+const meta: Meta<GridStoryProps> = {
   title: 'ui/react-ui-grid/Grid',
-  component: StoryGrid,
+  component: GridStory,
   decorators: [withTheme],
   parameters: { layout: 'fullscreen' },
 };
 
-export const Basic: StoryObj<StoryGridProps> = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   args: {
     id: 'story',
     columnDefault: {
@@ -130,11 +136,48 @@ export const Basic: StoryObj<StoryGridProps> = {
         4: { size: 270 },
       },
     },
+    initialCells: {
+      grid: {
+        '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">
+              <svg><use href="/icons.svg#ph--arrow-right--regular"/></svg>
+            </button>
+          `,
+        },
+        '2,1': {
+          // accessoryHtml: `<dx-grid-multiselect-cell ${value ? `values='${JSON.stringify([{ label: value }])}'` : ''} placeholder="Select…"></dx-grid-multiselect-cell>`,
+          accessoryHtml: '<dx-grid-multiselect-cell placeholder="Select…"></dx-grid-multiselect-cell>',
+        },
+      },
+    },
     onAxisResize: (event) => {
       console.log('[axis resize]', event);
     },
-    onEditingChange: (event) => {
-      console.log('[edit]', event);
+  },
+};
+
+// TODO(burdon): How to make single-column?
+export const SingleColumn: Story = {
+  args: {
+    id: 'story',
+    limitColumns: 1,
+    columnDefault: {
+      grid: {
+        size: 180,
+      },
+    },
+    rowDefault: {
+      grid: {
+        size: defaultSizeRow,
+        resizeable: false,
+      },
+    },
+    columns: {
+      grid: {
+        0: { size: 200 },
+      },
     },
   },
 };