@dxos/react-ui-grid 0.6.11 → 0.6.12-main.5a87ad5

package/dist/lib/browser/index.mjs

@@ -1,20 +1,84 @@
 // packages/ui/react-ui-grid/src/Grid.tsx
 import "@dxos/lit-grid/dx-grid.pcss";
 import { createComponent } from "@lit/react";
-import React from "react";
+import { createContextScope } from "@radix-ui/react-context";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React, { forwardRef, useCallback, useLayoutEffect, useState } from "react";
 import { DxGrid as NaturalDxGrid } from "@dxos/lit-grid";
+import { useForwardedRef } from "@dxos/react-ui";
 var DxGrid = createComponent({
   tagName: "dx-grid",
   elementClass: NaturalDxGrid,
   react: React,
   events: {
-    onAxisResize: "dx-axis-resize"
+    onAxisResize: "dx-axis-resize",
+    onEdit: "dx-edit-request",
+    onSelect: "dx-grid-cells-select"
   }
 });
-var Grid = (props) => {
-  return /* @__PURE__ */ React.createElement(DxGrid, props);
+var initialBox = {
+  insetInlineStart: 0,
+  insetBlockStart: 0,
+  inlineSize: 0,
+  blockSize: 0
+};
+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);
+  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 dxGrid = useForwardedRef(forwardedRef);
+  useLayoutEffect(() => {
+    if (dxGrid.current && props.getCells) {
+      dxGrid.current.getCells = props.getCells;
+      dxGrid.current.requestUpdate("initialCells");
+    }
+  }, [
+    props.getCells
+  ]);
+  const handleEdit = useCallback((event) => {
+    setEditBox(event.cellBox);
+    setEditing({
+      index: event.cellIndex,
+      initialContent: event.initialContent
+    });
+  }, []);
+  return /* @__PURE__ */ React.createElement(DxGrid, {
+    ...props,
+    gridId: id,
+    mode: editing ? "edit" : "browse",
+    onEdit: handleEdit,
+    ref: dxGrid
+  });
+});
+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//\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport React from 'react';\n\nimport { type DxAxisResize, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';\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  },\n});\n\nexport type GridProps = DxGridProps & {\n  onAxisResize: (event: DxAxisResize) => void;\n};\n\nexport const Grid = (props: GridProps) => {\n  return <DxGrid {...props} />;\n};\n"],
-  "mappings": ";AAGA,OAAO;AAEP,SAASA,uBAAuC;AAChD,OAAOC,WAAW;AAElB,SAA4BC,UAAUC,qBAAuC;AAE7E,IAAMC,SAASC,gBAAgB;EAC7BC,SAAS;EACTC,cAAcC;EACdC,OAAOC;EACPC,QAAQ;IACNC,cAAc;EAChB;AACF,CAAA;AAMO,IAAMC,OAAO,CAACC,UAAAA;AACnB,SAAO,sBAAA,cAACV,QAAWU,KAAAA;AACrB;",
-  "names": ["createComponent", "React", "DxGrid", "NaturalDxGrid", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "Grid", "props"]
+  "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, {\n  type ComponentProps,\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useLayoutEffect,\n  useState,\n} from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\nimport { useForwardedRef } from '@dxos/react-ui';\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  getCells?: NonNullable<NaturalDxGrid['getCells']>;\n};\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  const dxGrid = useForwardedRef(forwardedRef);\n\n  // Needed instead of `useEffect` to ensure the DxGrid ref is defined.\n  useLayoutEffect(() => {\n    if (dxGrid.current && props.getCells) {\n      dxGrid.current.getCells = props.getCells;\n      dxGrid.current.requestUpdate('initialCells');\n    }\n  }, [props.getCells]);\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={dxGrid} />;\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\nexport type { DxGridRange, DxGridAxisMeta, DxGridCells } from '@dxos/lit-grid';\n"],
+  "mappings": ";AAIA,OAAO;AAEP,SAASA,uBAAuC;AAChD,SAASC,0BAAsC;AAC/C,SAASC,4BAA4B;AACrC,OAAOC,SAELC,YAEAC,aACAC,iBACAC,gBACK;AAEP,SAAwEC,UAAUC,qBAAqB;AACvG,SAASC,uBAAuB;AAIhC,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;AAMvB,IAAMwB,oBAAoB;AAE1B,IAAMC,cAAcC,2BAA6D,CAACC,OAAOC,iBAAAA;AACvF,QAAM,EAAErB,IAAIC,SAASY,YAAYN,WAAU,IAAKT,eAAemB,mBAAmBG,MAAMd,WAAW;AACnG,QAAMgB,SAASC,gBAAgBF,YAAAA;AAG/BG,kBAAgB,MAAA;AACd,QAAIF,OAAOG,WAAWL,MAAMM,UAAU;AACpCJ,aAAOG,QAAQC,WAAWN,MAAMM;AAChCJ,aAAOG,QAAQE,cAAc,cAAA;IAC/B;EACF,GAAG;IAACP,MAAMM;GAAS;AAEnB,QAAME,aAAaC,YAAY,CAACC,UAAAA;AAC9BjB,eAAWiB,MAAMC,OAAO;AACxBxB,eAAW;MAAEyB,OAAOF,MAAMG;MAAWC,gBAAgBJ,MAAMI;IAAe,CAAA;EAC5E,GAAG,CAAA,CAAE;AAEL,SAAO,sBAAA,cAACzD,QAAAA;IAAQ,GAAG2C;IAAOe,QAAQnC;IAAIoC,MAAMnC,UAAU,SAAS;IAAUf,QAAQ0C;IAAYS,KAAKf;;AACpG,CAAA;AAEAJ,YAAYF,cAAcC;AAEnB,IAAMqB,OAAO;EAClBC,MAAMxC;EACNyC,SAAStB;AACX;",
+  "names": ["createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useLayoutEffect", "useState", "DxGrid", "NaturalDxGrid", "useForwardedRef", "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", "dxGrid", "useForwardedRef", "useLayoutEffect", "current", "getCells", "requestUpdate", "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":2180,"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}],"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":1186},"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}],"exports":["Grid"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytesInOutput":412},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0}},"bytes":508}}}
+{"inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytes":11861,"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},{"path":"@dxos/react-ui","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":6653},"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},{"path":"@dxos/react-ui","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":2360},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0}},"bytes":2520}}}

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

@@ -1,8 +1,54 @@
 import '@dxos/lit-grid/dx-grid.pcss';
-import React from 'react';
-import { type DxAxisResize, type DxGridProps } from '@dxos/lit-grid';
-export type GridProps = DxGridProps & {
-    onAxisResize: (event: DxAxisResize) => void;
+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;
+    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'> & {
+    getCells?: NonNullable<NaturalDxGrid['getCells']>;
+};
+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 };
+export type { DxGridRange, DxGridAxisMeta, DxGridCells } from '@dxos/lit-grid';
 //# 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":"AAGA,OAAO,6BAA6B,CAAC;AAGrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,YAAY,EAA2B,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAW9F,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG;IACpC,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,IAAI,UAAW,SAAS,sBAEpC,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,EACZ,KAAK,cAAc,EAEnB,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGxH,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,GAAG;IACtE,QAAQ,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;CACnD,CAAC;AAIF,QAAA,MAAM,WAAW,sHAkBf,CAAC;AAIH,eAAO,MAAM,IAAI;;iGAnDd,eAAe,CAAC,aAAa,CAAC;;;;CAsDhC,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;AAE1G,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -1,13 +1,20 @@
-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;
+    };
 };
 export default _default;
 export declare const Basic: {
     args: {
-        cells: {
+        id: string;
+        initialCells: {
             '1,1': {
                 value: string;
             };
@@ -38,6 +45,7 @@ export declare const Basic: {
             };
         };
         onAxisResize: (event: import("packages/ui/lit-grid/dist/types/src").DxAxisResize) => 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,wBAIE;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BjB,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.11",
+  "version": "0.6.12-main.5a87ad5",
   "description": "React component which manages a `dx-grid` Lit web component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -22,22 +22,24 @@
   ],
   "dependencies": {
     "@lit/react": "^1.0.5",
-    "@dxos/react-ui": "0.6.11",
-    "@dxos/lit-grid": "0.6.11",
-    "@dxos/react-ui-theme": "0.6.11",
-    "@dxos/util": "0.6.11"
+    "@radix-ui/react-context": "^1.0.0",
+    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@dxos/lit-grid": "0.6.12-main.5a87ad5",
+    "@dxos/react-ui": "0.6.12-main.5a87ad5",
+    "@dxos/react-ui-theme": "0.6.12-main.5a87ad5",
+    "@dxos/util": "0.6.12-main.5a87ad5"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/storybook-utils": "0.6.11"
+    "vite": "5.4.7",
+    "@dxos/storybook-utils": "0.6.12-main.5a87ad5"
   },
   "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,19 +2,35 @@
 // 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' },
 };
 
 export const Basic = {
   args: {
-    cells: {
+    id: 'story',
+    initialCells: {
       '1,1': {
         // end: '8,1',
         value: 'Weekly sales report',
@@ -38,5 +54,8 @@ export const Basic = {
     onAxisResize: (event) => {
       console.log('[axis resize]', event);
     },
-  } satisfies GridProps,
+    onEditingChange: (event) => {
+      console.log('[edit]', event);
+    },
+  } satisfies StoryGridProps,
 };

package/src/Grid.tsx

@@ -1,12 +1,25 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import '@dxos/lit-grid/dx-grid.pcss';
 
 import { createComponent, type EventName } from '@lit/react';
-import React 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,
+  useLayoutEffect,
+  useState,
+} from 'react';
+
+import { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';
+import { useForwardedRef } from '@dxos/react-ui';
 
-import { type DxAxisResize, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';
+type DxGridElement = NaturalDxGrid;
 
 const DxGrid = createComponent({
   tagName: 'dx-grid',
@@ -14,13 +27,111 @@ const DxGrid = createComponent({
   react: React,
   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 & {
-  onAxisResize: (event: DxAxisResize) => void;
+type GridEditBox = DxEditRequest['cellBox'];
+
+const initialBox = {
+  insetInlineStart: 0,
+  insetBlockStart: 0,
+  inlineSize: 0,
+  blockSize: 0,
+} 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;
 };
 
-export const Grid = (props: GridProps) => {
-  return <DxGrid {...props} />;
+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'> & {
+  getCells?: NonNullable<NaturalDxGrid['getCells']>;
 };
+
+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 = useForwardedRef(forwardedRef);
+
+  // Needed instead of `useEffect` to ensure the DxGrid ref is defined.
+  useLayoutEffect(() => {
+    if (dxGrid.current && props.getCells) {
+      dxGrid.current.getCells = props.getCells;
+      dxGrid.current.requestUpdate('initialCells');
+    }
+  }, [props.getCells]);
+
+  const handleEdit = useCallback((event: DxEditRequest) => {
+    setEditBox(event.cellBox);
+    setEditing({ index: event.cellIndex, initialContent: event.initialContent });
+  }, []);
+
+  return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={dxGrid} />;
+});
+
+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 };
+
+export type { DxGridRange, DxGridAxisMeta, DxGridCells } from '@dxos/lit-grid';