@dxos/react-ui-grid 0.6.12-main.5cc132e → 0.6.12-main.c974201

package/dist/lib/browser/index.mjs

@@ -1,17 +1,18 @@
 // packages/ui/react-ui-grid/src/Grid.tsx
 import "@dxos/lit-grid/dx-grid.pcss";
 import { createComponent } from "@lit/react";
-import React, { useCallback, useRef, useState } from "react";
+import { createContextScope } from "@radix-ui/react-context";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React, { forwardRef, useCallback, useState } from "react";
 import { DxGrid as NaturalDxGrid } from "@dxos/lit-grid";
-import { listener, useTextEditor } from "@dxos/react-ui-editor";
-import { isNotFalsy } from "@dxos/util";
 var DxGrid = createComponent({
   tagName: "dx-grid",
   elementClass: NaturalDxGrid,
   react: React,
   events: {
     onAxisResize: "dx-axis-resize",
-    onEdit: "dx-edit-request"
+    onEdit: "dx-edit-request",
+    onSelect: "dx-grid-cells-select"
   }
 });
 var initialBox = {
@@ -20,63 +21,54 @@ var initialBox = {
   inlineSize: 0,
   blockSize: 0
 };
-var Grid = (props) => {
-  const gridRef = useRef(null);
+var GRID_NAME = "Grid";
+var [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);
+var [GridProvider, useGridContext] = createGridContext(GRID_NAME);
+var GridRoot = ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope }) => {
+  const [editing = null, setEditing] = useControllableState({
+    prop: propsEditing,
+    defaultProp: defaultEditing,
+    onChange: onEditingChange
+  });
   const [editBox, setEditBox] = useState(initialBox);
-  const [editing, setEditing] = useState(null);
-  const { parentRef: textboxRef, focusAttributes, view } = useTextEditor(() => ({
-    id: props.id,
-    autoFocus: !!editing,
-    extensions: [
-      listener({
-        onFocus: (focusing) => {
-          if (!focusing && editing) {
-            setEditing(null);
-          }
-        }
-      })
-    ].filter(isNotFalsy)
-  }), [
-    editing
-  ]);
+  return /* @__PURE__ */ React.createElement(GridProvider, {
+    id,
+    editing,
+    setEditing,
+    editBox,
+    setEditBox,
+    scope: __gridScope
+  }, children);
+};
+GridRoot.displayName = GRID_NAME;
+var GRID_CONTENT_NAME = "GridContent";
+var GridContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+  const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
   const handleEdit = useCallback((event) => {
     setEditBox(event.cellBox);
-    setEditing(event.cellIndex);
-    props?.onEdit?.(event);
+    setEditing({
+      index: event.cellIndex,
+      initialContent: event.initialContent
+    });
   }, []);
-  const handleEditorKeyDown = useCallback((event) => {
-    if (editing) {
-      switch (event.key) {
-        case "Enter":
-          setEditing(null);
-          gridRef.current?.refocus("down");
-          break;
-        case "Escape":
-          setEditing(null);
-          gridRef.current?.refocus();
-          break;
-      }
-    }
-  }, [
-    editing,
-    view
-  ]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "absolute z-[1] hidden data-[editing=true]:block border p-px border-accentSurface",
-    "data-editing": !!editing,
-    ...focusAttributes,
-    style: editBox,
-    tabIndex: editing ? 0 : -1,
-    onKeyDown: handleEditorKeyDown,
-    ref: textboxRef
-  }), /* @__PURE__ */ React.createElement(DxGrid, {
+  return /* @__PURE__ */ React.createElement(DxGrid, {
     ...props,
+    gridId: id,
     mode: editing ? "edit" : "browse",
     onEdit: handleEdit,
-    ref: gridRef
-  }));
+    ref: forwardedRef
+  });
+});
+GridContent.displayName = GRID_CONTENT_NAME;
+var Grid = {
+  Root: GridRoot,
+  Content: GridContent
 };
 export {
-  Grid
+  Grid,
+  GridContent,
+  GridRoot,
+  createGridScope,
+  useGridContext
 };
 //# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Grid.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport React, { type KeyboardEvent, useCallback, useRef, useState } from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';\nimport { listener, useTextEditor } from '@dxos/react-ui-editor';\nimport { isNotFalsy } from '@dxos/util';\n\nconst DxGrid = createComponent({\n  tagName: 'dx-grid',\n  elementClass: NaturalDxGrid,\n  react: React,\n  events: {\n    onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n    onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n  },\n});\n\nexport type GridProps = DxGridProps & {\n  id: string;\n  onAxisResize: (event: DxAxisResize) => void;\n  onEdit: (event: DxEditRequest) => void;\n};\n\nconst initialBox = {\n  insetInlineStart: 0,\n  insetBlockStart: 0,\n  inlineSize: 0,\n  blockSize: 0,\n} satisfies DxEditRequest['cellBox'];\n\nexport const Grid = (props: GridProps) => {\n  const gridRef = useRef<NaturalDxGrid | null>(null);\n  const [editBox, setEditBox] = useState<DxEditRequest['cellBox']>(initialBox);\n  const [editing, setEditing] = useState<DxEditRequest['cellIndex'] | null>(null);\n\n  const {\n    parentRef: textboxRef,\n    focusAttributes,\n    view,\n  } = useTextEditor(\n    () => ({\n      id: props.id,\n      autoFocus: !!editing,\n      extensions: [\n        listener({\n          onFocus: (focusing: boolean) => {\n            if (!focusing && editing) {\n              setEditing(null);\n            }\n          },\n        }),\n      ].filter(isNotFalsy),\n    }),\n    [editing],\n  );\n\n  const handleEdit = useCallback((event: DxEditRequest) => {\n    setEditBox(event.cellBox);\n    setEditing(event.cellIndex);\n    props?.onEdit?.(event);\n  }, []);\n\n  const handleEditorKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (editing) {\n        switch (event.key) {\n          case 'Enter':\n            // console.warn('to do: save content');\n            setEditing(null);\n            gridRef.current?.refocus('down');\n            break;\n          case 'Escape':\n            setEditing(null);\n            gridRef.current?.refocus();\n            break;\n        }\n      }\n    },\n    [editing, view],\n  );\n\n  return (\n    <>\n      <div\n        className='absolute z-[1] hidden data-[editing=true]:block border p-px border-accentSurface'\n        data-editing={!!editing}\n        {...focusAttributes}\n        style={editBox}\n        tabIndex={editing ? 0 : -1}\n        onKeyDown={handleEditorKeyDown}\n        ref={textboxRef}\n      />\n      <DxGrid {...props} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={gridRef} />\n    </>\n  );\n};\n"],
-  "mappings": ";AAIA,OAAO;AAEP,SAASA,uBAAuC;AAChD,OAAOC,SAA6BC,aAAaC,QAAQC,gBAAgB;AAEzE,SAAgDC,UAAUC,qBAAuC;AACjG,SAASC,UAAUC,qBAAqB;AACxC,SAASC,kBAAkB;AAE3B,IAAMC,SAASC,gBAAgB;EAC7BC,SAAS;EACTC,cAAcC;EACdC,OAAOC;EACPC,QAAQ;IACNC,cAAc;IACdC,QAAQ;EACV;AACF,CAAA;AAQA,IAAMC,aAAa;EACjBC,kBAAkB;EAClBC,iBAAiB;EACjBC,YAAY;EACZC,WAAW;AACb;AAEO,IAAMC,OAAO,CAACC,UAAAA;AACnB,QAAMC,UAAUC,OAA6B,IAAA;AAC7C,QAAM,CAACC,SAASC,UAAAA,IAAcC,SAAmCX,UAAAA;AACjE,QAAM,CAACY,SAASC,UAAAA,IAAcF,SAA4C,IAAA;AAE1E,QAAM,EACJG,WAAWC,YACXC,iBACAC,KAAI,IACFC,cACF,OAAO;IACLC,IAAIb,MAAMa;IACVC,WAAW,CAAC,CAACR;IACbS,YAAY;MACVC,SAAS;QACPC,SAAS,CAACC,aAAAA;AACR,cAAI,CAACA,YAAYZ,SAAS;AACxBC,uBAAW,IAAA;UACb;QACF;MACF,CAAA;MACAY,OAAOC,UAAAA;EACX,IACA;IAACd;GAAQ;AAGX,QAAMe,aAAaC,YAAY,CAACC,UAAAA;AAC9BnB,eAAWmB,MAAMC,OAAO;AACxBjB,eAAWgB,MAAME,SAAS;AAC1BzB,WAAOP,SAAS8B,KAAAA;EAClB,GAAG,CAAA,CAAE;AAEL,QAAMG,sBAAsBJ,YAC1B,CAACC,UAAAA;AACC,QAAIjB,SAAS;AACX,cAAQiB,MAAMI,KAAG;QACf,KAAK;AAEHpB,qBAAW,IAAA;AACXN,kBAAQ2B,SAASC,QAAQ,MAAA;AACzB;QACF,KAAK;AACHtB,qBAAW,IAAA;AACXN,kBAAQ2B,SAASC,QAAAA;AACjB;MACJ;IACF;EACF,GACA;IAACvB;IAASK;GAAK;AAGjB,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACmB,OAAAA;IACCC,WAAU;IACVC,gBAAc,CAAC,CAAC1B;IACf,GAAGI;IACJuB,OAAO9B;IACP+B,UAAU5B,UAAU,IAAI;IACxB6B,WAAWT;IACXU,KAAK3B;MAEP,sBAAA,cAACzB,QAAAA;IAAQ,GAAGgB;IAAOqC,MAAM/B,UAAU,SAAS;IAAUb,QAAQ4B;IAAYe,KAAKnC;;AAGrF;",
-  "names": ["createComponent", "React", "useCallback", "useRef", "useState", "DxGrid", "NaturalDxGrid", "listener", "useTextEditor", "isNotFalsy", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "onEdit", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "Grid", "props", "gridRef", "useRef", "editBox", "setEditBox", "useState", "editing", "setEditing", "parentRef", "textboxRef", "focusAttributes", "view", "useTextEditor", "id", "autoFocus", "extensions", "listener", "onFocus", "focusing", "filter", "isNotFalsy", "handleEdit", "useCallback", "event", "cellBox", "cellIndex", "handleEditorKeyDown", "key", "current", "refocus", "div", "className", "data-editing", "style", "tabIndex", "onKeyDown", "ref", "mode"]
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentProps, forwardRef, type PropsWithChildren, useCallback, useState } from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n  tagName: 'dx-grid',\n  elementClass: NaturalDxGrid,\n  react: React,\n  events: {\n    onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n    onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n    onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n  },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n  insetInlineStart: 0,\n  insetBlockStart: 0,\n  inlineSize: 0,\n  blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = { index: DxEditRequest['cellIndex']; initialContent: DxEditRequest['initialContent'] } | null;\n\ntype GridContextValue = {\n  id: string;\n  editing: GridEditing;\n  setEditing: (nextEditing: GridEditing) => void;\n  editBox: GridEditBox;\n  setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n  { id: string } & Partial<{\n    editing: GridEditing;\n    defaultEditing: GridEditing;\n    onEditingChange: (nextEditing: GridEditing) => void;\n  }>\n>;\n\nconst GridRoot = ({\n  id,\n  editing: propsEditing,\n  defaultEditing,\n  onEditingChange,\n  children,\n  __gridScope,\n}: GridScopedProps<GridRootProps>) => {\n  const [editing = null, setEditing] = useControllableState({\n    prop: propsEditing,\n    defaultProp: defaultEditing,\n    onChange: onEditingChange,\n  });\n  const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n  return (\n    <GridProvider\n      id={id}\n      editing={editing}\n      setEditing={setEditing}\n      editBox={editBox}\n      setEditBox={setEditBox}\n      scope={__gridScope}\n    >\n      {children}\n    </GridProvider>\n  );\n};\n\nGridRoot.displayName = GRID_NAME;\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'>;\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n  const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n\n  const handleEdit = useCallback((event: DxEditRequest) => {\n    setEditBox(event.cellBox);\n    setEditing({ index: event.cellIndex, initialContent: event.initialContent });\n  }, []);\n\n  return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={forwardedRef} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\nexport const Grid = {\n  Root: GridRoot,\n  Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n"],
+  "mappings": ";AAIA,OAAO;AAEP,SAASA,uBAAuC;AAChD,SAASC,0BAAsC;AAC/C,SAASC,4BAA4B;AACrC,OAAOC,SAA8BC,YAAoCC,aAAaC,gBAAgB;AAEtG,SAAwEC,UAAUC,qBAAqB;AAIvG,IAAMC,SAASC,gBAAgB;EAC7BC,SAAS;EACTC,cAAcC;EACdC,OAAOC;EACPC,QAAQ;IACNC,cAAc;IACdC,QAAQ;IACRC,UAAU;EACZ;AACF,CAAA;AAIA,IAAMC,aAAa;EACjBC,kBAAkB;EAClBC,iBAAiB;EACjBC,YAAY;EACZC,WAAW;AACb;AAcA,IAAMC,YAAY;AAElB,IAAM,CAACC,mBAAmBC,eAAAA,IAAmBC,mBAAmBH,WAAW,CAAA,CAAE;AAE7E,IAAM,CAACI,cAAcC,cAAAA,IAAkBJ,kBAAoCD,SAAAA;AAU3E,IAAMM,WAAW,CAAC,EAChBC,IACAC,SAASC,cACTC,gBACAC,iBACAC,UACAC,YAAW,MACoB;AAC/B,QAAM,CAACL,UAAU,MAAMM,UAAAA,IAAcC,qBAAqB;IACxDC,MAAMP;IACNQ,aAAaP;IACbQ,UAAUP;EACZ,CAAA;AACA,QAAM,CAACQ,SAASC,UAAAA,IAAcC,SAAsB1B,UAAAA;AACpD,SACE,sBAAA,cAACS,cAAAA;IACCG;IACAC;IACAM;IACAK;IACAC;IACAE,OAAOT;KAEND,QAAAA;AAGP;AAEAN,SAASiB,cAAcvB;AAIvB,IAAMwB,oBAAoB;AAE1B,IAAMC,cAAcC,2BAA6D,CAACC,OAAOC,iBAAAA;AACvF,QAAM,EAAErB,IAAIC,SAASY,YAAYN,WAAU,IAAKT,eAAemB,mBAAmBG,MAAMd,WAAW;AAEnG,QAAMgB,aAAaC,YAAY,CAACC,UAAAA;AAC9BX,eAAWW,MAAMC,OAAO;AACxBlB,eAAW;MAAEmB,OAAOF,MAAMG;MAAWC,gBAAgBJ,MAAMI;IAAe,CAAA;EAC5E,GAAG,CAAA,CAAE;AAEL,SAAO,sBAAA,cAACnD,QAAAA;IAAQ,GAAG2C;IAAOS,QAAQ7B;IAAI8B,MAAM7B,UAAU,SAAS;IAAUf,QAAQoC;IAAYS,KAAKV;;AACpG,CAAA;AAEAH,YAAYF,cAAcC;AAEnB,IAAMe,OAAO;EAClBC,MAAMlC;EACNmC,SAAShB;AACX;",
+  "names": ["createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useState", "DxGrid", "NaturalDxGrid", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "onEdit", "onSelect", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "GRID_NAME", "createGridContext", "createGridScope", "createContextScope", "GridProvider", "useGridContext", "GridRoot", "id", "editing", "propsEditing", "defaultEditing", "onEditingChange", "children", "__gridScope", "setEditing", "useControllableState", "prop", "defaultProp", "onChange", "editBox", "setEditBox", "useState", "scope", "displayName", "GRID_CONTENT_NAME", "GridContent", "forwardRef", "props", "forwardedRef", "handleEdit", "useCallback", "event", "cellBox", "index", "cellIndex", "initialContent", "gridId", "mode", "ref", "Grid", "Root", "Content"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytes":9408,"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/index.ts":{"bytes":489,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":5069},"packages/ui/react-ui-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["Grid"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytesInOutput":2142},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0}},"bytes":2238}}}
+{"inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytes":10228,"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/index.ts":{"bytes":489,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":5768},"packages/ui/react-ui-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"exports":["Grid","GridContent","GridRoot","createGridScope","useGridContext"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytesInOutput":2043},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0}},"bytes":2203}}}

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

@@ -1,10 +1,51 @@
 import '@dxos/lit-grid/dx-grid.pcss';
-import React from 'react';
-import { type DxAxisResize, type DxEditRequest, type DxGridProps } from '@dxos/lit-grid';
-export type GridProps = DxGridProps & {
+import { type EventName } from '@lit/react';
+import { type Scope } from '@radix-ui/react-context';
+import React, { type ComponentProps, type PropsWithChildren } from 'react';
+import { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';
+type DxGridElement = NaturalDxGrid;
+declare const DxGrid: import("@lit/react").ReactWebComponent<NaturalDxGrid, {
+    onAxisResize: EventName<DxAxisResize>;
+    onEdit: EventName<DxEditRequest>;
+    onSelect: EventName<DxGridCellsSelect>;
+}>;
+type GridEditBox = DxEditRequest['cellBox'];
+type GridEditing = {
+    index: DxEditRequest['cellIndex'];
+    initialContent: DxEditRequest['initialContent'];
+} | null;
+type GridContextValue = {
     id: string;
-    onAxisResize: (event: DxAxisResize) => void;
-    onEdit: (event: DxEditRequest) => void;
+    editing: GridEditing;
+    setEditing: (nextEditing: GridEditing) => void;
+    editBox: GridEditBox;
+    setEditBox: (nextEditBox: GridEditBox) => void;
 };
-export declare const Grid: (props: GridProps) => React.JSX.Element;
+type GridScopedProps<P> = P & {
+    __gridScope?: Scope;
+};
+declare const createGridScope: import("@radix-ui/react-context").CreateScope;
+declare const useGridContext: (consumerName: string, scope: Scope<GridContextValue | undefined>) => GridContextValue;
+type GridRootProps = PropsWithChildren<{
+    id: string;
+} & Partial<{
+    editing: GridEditing;
+    defaultEditing: GridEditing;
+    onEditingChange: (nextEditing: GridEditing) => void;
+}>>;
+declare const GridRoot: {
+    ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): React.JSX.Element;
+    displayName: string;
+};
+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>): React.JSX.Element;
+        displayName: string;
+    };
+    Content: React.ForwardRefExoticComponent<Omit<GridScopedProps<GridContentProps>, "ref"> & React.RefAttributes<NaturalDxGrid>>;
+};
+export { GridRoot, GridContent, useGridContext, createGridScope };
+export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
 //# sourceMappingURL=Grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,6BAA6B,CAAC;AAGrC,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAA2B,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAclH,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,MAAM,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC,CAAC;AASF,eAAO,MAAM,IAAI,UAAW,SAAS,sBAiEpC,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAc,KAAK,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE9G,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAExH,KAAK,aAAa,GAAG,aAAa,CAAC;AAEnC,QAAA,MAAM,MAAM;kBAK0B,SAAS,CAAC,YAAY,CAAC;YAC5B,SAAS,CAAC,aAAa,CAAC;cACjB,SAAS,CAAC,iBAAiB,CAAC;EAElE,CAAC;AAEH,KAAK,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAS5C,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAAC,cAAc,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAA;CAAE,GAAG,IAAI,CAAC;AAEjH,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAItD,QAAA,MAA0B,eAAe,+CAAqC,CAAC;AAE/E,QAAA,MAAqB,cAAc,wFAAkD,CAAC;AAEtF,KAAK,aAAa,GAAG,iBAAiB,CACpC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,eAAe,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CACrD,CAAC,CACH,CAAC;AAEF,QAAA,MAAM,QAAQ;6FAOX,eAAe,CAAC,aAAa,CAAC;;CAmBhC,CAAC;AAIF,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAItE,QAAA,MAAM,WAAW,sHASf,CAAC;AAIH,eAAO,MAAM,IAAI;;iGAxCd,eAAe,CAAC,aAAa,CAAC;;;;CA2ChC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAElE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC"}

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

@@ -1,7 +1,10 @@
-import { type GridProps } from './Grid';
+import '@dxos-theme';
+import React from 'react';
+import { type GridContentProps, type GridRootProps } from './Grid';
+type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
 declare const _default: {
     title: string;
-    component: (props: GridProps) => import("react").JSX.Element;
+    component: ({ onEditingChange, ...props }: StoryGridProps) => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         layout: string;
@@ -42,7 +45,7 @@ export declare const Basic: {
             };
         };
         onAxisResize: (event: import("packages/ui/lit-grid/dist/types/src").DxAxisResize) => void;
-        onEdit: (event: import("packages/ui/lit-grid/dist/types/src").DxEditRequest) => void;
+        onEditingChange: (event: import("./Grid").GridEditing) => void;
     };
 };
 //# sourceMappingURL=Grid.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/Grid.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;AAE9C,wBAKE;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BjB,CAAC"}
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/Grid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAQ,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEzE,KAAK,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;;;+CAE9B,cAAc;;;;;;AAQhE,wBAKE;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-grid",
-  "version": "0.6.12-main.5cc132e",
+  "version": "0.6.12-main.c974201",
   "description": "React component which manages a `dx-grid` Lit web component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -22,11 +22,12 @@
   ],
   "dependencies": {
     "@lit/react": "^1.0.5",
-    "@dxos/lit-grid": "0.6.12-main.5cc132e",
-    "@dxos/react-ui": "0.6.12-main.5cc132e",
-    "@dxos/react-ui-theme": "0.6.12-main.5cc132e",
-    "@dxos/react-ui-editor": "0.6.12-main.5cc132e",
-    "@dxos/util": "0.6.12-main.5cc132e"
+    "@radix-ui/react-context": "^1.0.0",
+    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@dxos/lit-grid": "0.6.12-main.c974201",
+    "@dxos/react-ui": "0.6.12-main.c974201",
+    "@dxos/react-ui-theme": "0.6.12-main.c974201",
+    "@dxos/util": "0.6.12-main.c974201"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -34,11 +35,11 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/storybook-utils": "0.6.12-main.5cc132e"
+    "@dxos/storybook-utils": "0.6.12-main.c974201"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0"
   },
   "publishConfig": {
     "access": "public"

package/src/Grid.stories.tsx

@@ -2,13 +2,27 @@
 // Copyright 2024 DXOS.org
 //
 
+import '@dxos-theme';
+
+import React from 'react';
+
 import { withTheme } from '@dxos/storybook-utils';
 
-import { Grid, type GridProps } from './Grid';
+import { Grid, type GridContentProps, type GridRootProps } from './Grid';
+
+type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
+
+const StoryGrid = ({ onEditingChange, ...props }: StoryGridProps) => {
+  return (
+    <Grid.Root id='story' onEditingChange={onEditingChange}>
+      <Grid.Content {...props} />
+    </Grid.Root>
+  );
+};
 
 export default {
   title: 'react-ui-grid/Grid',
-  component: Grid,
+  component: StoryGrid,
   decorators: [withTheme],
   parameters: { layout: 'fullscreen' },
 };
@@ -40,8 +54,8 @@ export const Basic = {
     onAxisResize: (event) => {
       console.log('[axis resize]', event);
     },
-    onEdit: (event) => {
+    onEditingChange: (event) => {
       console.log('[edit]', event);
     },
-  } satisfies GridProps,
+  } satisfies StoryGridProps,
 };

package/src/Grid.tsx

@@ -5,11 +5,13 @@
 import '@dxos/lit-grid/dx-grid.pcss';
 
 import { createComponent, type EventName } from '@lit/react';
-import React, { type KeyboardEvent, useCallback, useRef, useState } from 'react';
+import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { type ComponentProps, forwardRef, type PropsWithChildren, useCallback, useState } from 'react';
 
-import { type DxAxisResize, type DxEditRequest, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';
-import { listener, useTextEditor } from '@dxos/react-ui-editor';
-import { isNotFalsy } from '@dxos/util';
+import { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';
+
+type DxGridElement = NaturalDxGrid;
 
 const DxGrid = createComponent({
   tagName: 'dx-grid',
@@ -18,85 +20,97 @@ const DxGrid = createComponent({
   events: {
     onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,
     onEdit: 'dx-edit-request' as EventName<DxEditRequest>,
+    onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,
   },
 });
 
-export type GridProps = DxGridProps & {
-  id: string;
-  onAxisResize: (event: DxAxisResize) => void;
-  onEdit: (event: DxEditRequest) => void;
-};
+type GridEditBox = DxEditRequest['cellBox'];
 
 const initialBox = {
   insetInlineStart: 0,
   insetBlockStart: 0,
   inlineSize: 0,
   blockSize: 0,
-} satisfies DxEditRequest['cellBox'];
-
-export const Grid = (props: GridProps) => {
-  const gridRef = useRef<NaturalDxGrid | null>(null);
-  const [editBox, setEditBox] = useState<DxEditRequest['cellBox']>(initialBox);
-  const [editing, setEditing] = useState<DxEditRequest['cellIndex'] | null>(null);
-
-  const {
-    parentRef: textboxRef,
-    focusAttributes,
-    view,
-  } = useTextEditor(
-    () => ({
-      id: props.id,
-      autoFocus: !!editing,
-      extensions: [
-        listener({
-          onFocus: (focusing: boolean) => {
-            if (!focusing && editing) {
-              setEditing(null);
-            }
-          },
-        }),
-      ].filter(isNotFalsy),
-    }),
-    [editing],
+} satisfies GridEditBox;
+
+type GridEditing = { index: DxEditRequest['cellIndex']; initialContent: DxEditRequest['initialContent'] } | null;
+
+type GridContextValue = {
+  id: string;
+  editing: GridEditing;
+  setEditing: (nextEditing: GridEditing) => void;
+  editBox: GridEditBox;
+  setEditBox: (nextEditBox: GridEditBox) => void;
+};
+
+type GridScopedProps<P> = P & { __gridScope?: Scope };
+
+const GRID_NAME = 'Grid';
+
+const [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);
+
+const [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);
+
+type GridRootProps = PropsWithChildren<
+  { id: string } & Partial<{
+    editing: GridEditing;
+    defaultEditing: GridEditing;
+    onEditingChange: (nextEditing: GridEditing) => void;
+  }>
+>;
+
+const GridRoot = ({
+  id,
+  editing: propsEditing,
+  defaultEditing,
+  onEditingChange,
+  children,
+  __gridScope,
+}: GridScopedProps<GridRootProps>) => {
+  const [editing = null, setEditing] = useControllableState({
+    prop: propsEditing,
+    defaultProp: defaultEditing,
+    onChange: onEditingChange,
+  });
+  const [editBox, setEditBox] = useState<GridEditBox>(initialBox);
+  return (
+    <GridProvider
+      id={id}
+      editing={editing}
+      setEditing={setEditing}
+      editBox={editBox}
+      setEditBox={setEditBox}
+      scope={__gridScope}
+    >
+      {children}
+    </GridProvider>
   );
+};
+
+GridRoot.displayName = GRID_NAME;
+
+type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'>;
+
+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 handleEdit = useCallback((event: DxEditRequest) => {
     setEditBox(event.cellBox);
-    setEditing(event.cellIndex);
-    props?.onEdit?.(event);
+    setEditing({ index: event.cellIndex, initialContent: event.initialContent });
   }, []);
 
-  const handleEditorKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (editing) {
-        switch (event.key) {
-          case 'Enter':
-            // console.warn('to do: save content');
-            setEditing(null);
-            gridRef.current?.refocus('down');
-            break;
-          case 'Escape':
-            setEditing(null);
-            gridRef.current?.refocus();
-            break;
-        }
-      }
-    },
-    [editing, view],
-  );
+  return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={forwardedRef} />;
+});
 
-  return (
-    <>
-      <div
-        className='absolute z-[1] hidden data-[editing=true]:block border p-px border-accentSurface'
-        data-editing={!!editing}
-        {...focusAttributes}
-        style={editBox}
-        tabIndex={editing ? 0 : -1}
-        onKeyDown={handleEditorKeyDown}
-        ref={textboxRef}
-      />
-      <DxGrid {...props} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={gridRef} />
-    </>
-  );
+GridContent.displayName = GRID_CONTENT_NAME;
+
+export const Grid = {
+  Root: GridRoot,
+  Content: GridContent,
 };
+
+export { GridRoot, GridContent, useGridContext, createGridScope };
+
+export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };