@dxos/react-ui-grid 0.6.11 → 0.6.12-main.568932b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/lib/browser/index.mjs +72 -5
  2. package/dist/lib/browser/index.mjs.map +3 -3
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/types/src/Grid.d.ts +52 -5
  5. package/dist/types/src/Grid.d.ts.map +1 -1
  6. package/dist/types/src/Grid.stories.d.ts +39 -23
  7. package/dist/types/src/Grid.stories.d.ts.map +1 -1
  8. package/package.json +11 -9
  9. package/src/Grid.stories.tsx +43 -16
  10. package/src/Grid.tsx +126 -6
package/dist/lib/browser/index.mjs CHANGED
@@ -1,20 +1,87 @@
1
1
  // packages/ui/react-ui-grid/src/Grid.tsx
2
2
  import "@dxos/lit-grid/dx-grid.pcss";
3
3
  import { createComponent } from "@lit/react";
4
- import React from "react";
4
+ import { createContextScope } from "@radix-ui/react-context";
5
+ import { useControllableState } from "@radix-ui/react-use-controllable-state";
6
+ import React, { forwardRef, useCallback, useLayoutEffect, useState } from "react";
5
7
  import { DxGrid as NaturalDxGrid } from "@dxos/lit-grid";
8
+ import { useForwardedRef } from "@dxos/react-ui";
9
+ import { colToA1Notation, rowToA1Notation } from "@dxos/lit-grid";
6
10
  var DxGrid = createComponent({
7
11
  tagName: "dx-grid",
8
12
  elementClass: NaturalDxGrid,
9
13
  react: React,
10
14
  events: {
11
- onAxisResize: "dx-axis-resize"
15
+ onAxisResize: "dx-axis-resize",
16
+ onEdit: "dx-edit-request",
17
+ onSelect: "dx-grid-cells-select"
12
18
  }
13
19
  });
14
- var Grid = (props) => {
15
- return /* @__PURE__ */ React.createElement(DxGrid, props);
20
+ var initialBox = {
21
+ insetInlineStart: 0,
22
+ insetBlockStart: 0,
23
+ inlineSize: 0,
24
+ blockSize: 0
25
+ };
26
+ var GRID_NAME = "Grid";
27
+ var [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);
28
+ var [GridProvider, useGridContext] = createGridContext(GRID_NAME);
29
+ var GridRoot = ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope }) => {
30
+ const [editing = null, setEditing] = useControllableState({
31
+ prop: propsEditing,
32
+ defaultProp: defaultEditing,
33
+ onChange: onEditingChange
34
+ });
35
+ const [editBox, setEditBox] = useState(initialBox);
36
+ return /* @__PURE__ */ React.createElement(GridProvider, {
37
+ id,
38
+ editing,
39
+ setEditing,
40
+ editBox,
41
+ setEditBox,
42
+ scope: __gridScope
43
+ }, children);
44
+ };
45
+ GridRoot.displayName = GRID_NAME;
46
+ var GRID_CONTENT_NAME = "GridContent";
47
+ var GridContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
48
+ const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
49
+ const dxGrid = useForwardedRef(forwardedRef);
50
+ useLayoutEffect(() => {
51
+ if (dxGrid.current && props.getCells) {
52
+ dxGrid.current.getCells = props.getCells;
53
+ dxGrid.current.requestUpdate("initialCells");
54
+ }
55
+ }, [
56
+ props.getCells
57
+ ]);
58
+ const handleEdit = useCallback((event) => {
59
+ setEditBox(event.cellBox);
60
+ setEditing({
61
+ index: event.cellIndex,
62
+ initialContent: event.initialContent
63
+ });
64
+ }, []);
65
+ return /* @__PURE__ */ React.createElement(DxGrid, {
66
+ ...props,
67
+ gridId: id,
68
+ mode: editing ? "edit" : "browse",
69
+ onEdit: handleEdit,
70
+ ref: dxGrid
71
+ });
72
+ });
73
+ GridContent.displayName = GRID_CONTENT_NAME;
74
+ var Grid = {
75
+ Root: GridRoot,
76
+ Content: GridContent
16
77
  };
17
78
  export {
18
- Grid
79
+ Grid,
80
+ GridContent,
81
+ GridRoot,
82
+ colToA1Notation,
83
+ createGridScope,
84
+ rowToA1Notation,
85
+ useGridContext
19
86
  };
20
87
  //# sourceMappingURL=index.mjs.map
package/dist/lib/browser/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/Grid.tsx"],
4
- "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"],
5
- "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;",
6
- "names": ["createComponent", "React", "DxGrid", "NaturalDxGrid", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "Grid", "props"]
4
+ "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 { colToA1Notation, rowToA1Notation } from '@dxos/lit-grid';\n\nexport type {\n DxGridRange,\n DxGridAxisMeta,\n DxGridCells,\n DxGridPlaneRange,\n DxGridPlaneCells,\n DxGridPlane,\n} from '@dxos/lit-grid';\n"],
5
+ "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;AAqHhC,SAASC,iBAAiBC,uBAAuB;AAjHjD,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;",
6
+ "names": ["createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useLayoutEffect", "useState", "DxGrid", "NaturalDxGrid", "useForwardedRef", "colToA1Notation", "rowToA1Notation", "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"]
7
7
  }
package/dist/lib/browser/meta.json CHANGED
@@ -1 +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}}}
1
+ {"inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytes":12216,"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},{"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":6859},"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},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"exports":["Grid","GridContent","GridRoot","colToA1Notation","createGridScope","rowToA1Notation","useGridContext"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytesInOutput":2427},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0}},"bytes":2625}}}
package/dist/types/src/Grid.d.ts CHANGED
@@ -1,8 +1,55 @@
1
1
  import '@dxos/lit-grid/dx-grid.pcss';
2
- import React from 'react';
3
- import { type DxAxisResize, type DxGridProps } from '@dxos/lit-grid';
4
- export type GridProps = DxGridProps & {
5
- onAxisResize: (event: DxAxisResize) => void;
2
+ import { type EventName } from '@lit/react';
3
+ import { type Scope } from '@radix-ui/react-context';
4
+ import React, { type ComponentProps, type PropsWithChildren } from 'react';
5
+ import { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';
6
+ type DxGridElement = NaturalDxGrid;
7
+ declare const DxGrid: import("@lit/react").ReactWebComponent<NaturalDxGrid, {
8
+ onAxisResize: EventName<DxAxisResize>;
9
+ onEdit: EventName<DxEditRequest>;
10
+ onSelect: EventName<DxGridCellsSelect>;
11
+ }>;
12
+ type GridEditBox = DxEditRequest['cellBox'];
13
+ type GridEditing = {
14
+ index: DxEditRequest['cellIndex'];
15
+ initialContent: DxEditRequest['initialContent'];
16
+ } | null;
17
+ type GridContextValue = {
18
+ id: string;
19
+ editing: GridEditing;
20
+ setEditing: (nextEditing: GridEditing) => void;
21
+ editBox: GridEditBox;
22
+ setEditBox: (nextEditBox: GridEditBox) => void;
6
23
  };
7
- export declare const Grid: (props: GridProps) => React.JSX.Element;
24
+ type GridScopedProps<P> = P & {
25
+ __gridScope?: Scope;
26
+ };
27
+ declare const createGridScope: import("@radix-ui/react-context").CreateScope;
28
+ declare const useGridContext: (consumerName: string, scope: Scope<GridContextValue | undefined>) => GridContextValue;
29
+ type GridRootProps = PropsWithChildren<{
30
+ id: string;
31
+ } & Partial<{
32
+ editing: GridEditing;
33
+ defaultEditing: GridEditing;
34
+ onEditingChange: (nextEditing: GridEditing) => void;
35
+ }>>;
36
+ declare const GridRoot: {
37
+ ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): React.JSX.Element;
38
+ displayName: string;
39
+ };
40
+ type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {
41
+ getCells?: NonNullable<NaturalDxGrid['getCells']>;
42
+ };
43
+ declare const GridContent: React.ForwardRefExoticComponent<Omit<GridScopedProps<GridContentProps>, "ref"> & React.RefAttributes<NaturalDxGrid>>;
44
+ export declare const Grid: {
45
+ Root: {
46
+ ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): React.JSX.Element;
47
+ displayName: string;
48
+ };
49
+ Content: React.ForwardRefExoticComponent<Omit<GridScopedProps<GridContentProps>, "ref"> & React.RefAttributes<NaturalDxGrid>>;
50
+ };
51
+ export { GridRoot, GridContent, useGridContext, createGridScope };
52
+ export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
53
+ export { colToA1Notation, rowToA1Notation } from '@dxos/lit-grid';
54
+ export type { DxGridRange, DxGridAxisMeta, DxGridCells, DxGridPlaneRange, DxGridPlaneCells, DxGridPlane, } from '@dxos/lit-grid';
8
55
  //# sourceMappingURL=Grid.d.ts.map
package/dist/types/src/Grid.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAElE,YAAY,EACV,WAAW,EACX,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,GACZ,MAAM,gBAAgB,CAAC"}
package/dist/types/src/Grid.stories.d.ts CHANGED
@@ -1,43 +1,59 @@
1
- import { type GridProps } from './Grid';
1
+ import '@dxos-theme';
2
+ import React from 'react';
3
+ import { type GridContentProps, type GridRootProps } from './Grid';
4
+ type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
2
5
  declare const _default: {
3
6
  title: string;
4
- component: (props: GridProps) => import("react").JSX.Element;
7
+ component: ({ onEditingChange, ...props }: StoryGridProps) => React.JSX.Element;
5
8
  decorators: import("@storybook/react/*").Decorator[];
9
+ parameters: {
10
+ layout: string;
11
+ };
6
12
  };
7
13
  export default _default;
8
14
  export declare const Basic: {
9
15
  args: {
10
- cells: {
11
- '1,1': {
12
- value: string;
16
+ id: string;
17
+ initialCells: {
18
+ grid: {
19
+ '1,1': {
20
+ value: string;
21
+ };
13
22
  };
14
23
  };
15
24
  columnDefault: {
16
- size: number;
17
- resizeable: true;
18
- };
19
- rowDefault: {
20
- size: number;
21
- resizeable: true;
22
- };
23
- columns: {
24
- 0: {
25
- size: number;
26
- };
27
- 1: {
25
+ grid: {
28
26
  size: number;
27
+ resizeable: true;
29
28
  };
30
- 2: {
31
- size: number;
32
- };
33
- 3: {
29
+ };
30
+ rowDefault: {
31
+ grid: {
34
32
  size: number;
33
+ resizeable: true;
35
34
  };
36
- 4: {
37
- size: number;
35
+ };
36
+ columns: {
37
+ grid: {
38
+ 0: {
39
+ size: number;
40
+ };
41
+ 1: {
42
+ size: number;
43
+ };
44
+ 2: {
45
+ size: number;
46
+ };
47
+ 3: {
48
+ size: number;
49
+ };
50
+ 4: {
51
+ size: number;
52
+ };
38
53
  };
39
54
  };
40
55
  onAxisResize: (event: import("packages/ui/lit-grid/dist/types/src").DxAxisResize) => void;
56
+ onEditingChange: (event: import("./Grid").GridEditing) => void;
41
57
  };
42
58
  };
43
59
  //# sourceMappingURL=Grid.stories.d.ts.map
package/dist/types/src/Grid.stories.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCjB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-grid",
3
- "version": "0.6.11",
3
+ "version": "0.6.12-main.568932b",
4
4
  "description": "React component which manages a `dx-grid` Lit web component.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -22,22 +22,24 @@
22
22
  ],
23
23
  "dependencies": {
24
24
  "@lit/react": "^1.0.5",
25
- "@dxos/react-ui": "0.6.11",
26
- "@dxos/lit-grid": "0.6.11",
27
- "@dxos/react-ui-theme": "0.6.11",
28
- "@dxos/util": "0.6.11"
25
+ "@radix-ui/react-context": "^1.0.0",
26
+ "@radix-ui/react-use-controllable-state": "^1.0.0",
27
+ "@dxos/lit-grid": "0.6.12-main.568932b",
28
+ "@dxos/react-ui": "0.6.12-main.568932b",
29
+ "@dxos/react-ui-theme": "0.6.12-main.568932b",
30
+ "@dxos/util": "0.6.12-main.568932b"
29
31
  },
30
32
  "devDependencies": {
31
33
  "@types/react": "~18.2.0",
32
34
  "@types/react-dom": "~18.2.0",
33
35
  "react": "~18.2.0",
34
36
  "react-dom": "~18.2.0",
35
- "vite": "^5.3.4",
36
- "@dxos/storybook-utils": "0.6.11"
37
+ "vite": "5.4.7",
38
+ "@dxos/storybook-utils": "0.6.12-main.568932b"
37
39
  },
38
40
  "peerDependencies": {
39
- "react": "^18.0.0",
40
- "react-dom": "^18.0.0"
41
+ "react": "~18.2.0",
42
+ "react-dom": "~18.2.0"
41
43
  },
42
44
  "publishConfig": {
43
45
  "access": "public"
package/src/Grid.stories.tsx CHANGED
@@ -2,41 +2,68 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
+ import '@dxos-theme';
6
+
7
+ import React from 'react';
8
+
5
9
  import { withTheme } from '@dxos/storybook-utils';
6
10
 
7
- import { Grid, type GridProps } from './Grid';
11
+ import { Grid, type GridContentProps, type GridRootProps } from './Grid';
12
+
13
+ type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
14
+
15
+ const StoryGrid = ({ onEditingChange, ...props }: StoryGridProps) => {
16
+ return (
17
+ <Grid.Root id='story' onEditingChange={onEditingChange}>
18
+ <Grid.Content {...props} />
19
+ </Grid.Root>
20
+ );
21
+ };
8
22
 
9
23
  export default {
10
24
  title: 'react-ui-grid/Grid',
11
- component: Grid,
25
+ component: StoryGrid,
12
26
  decorators: [withTheme],
27
+ parameters: { layout: 'fullscreen' },
13
28
  };
14
29
 
15
30
  export const Basic = {
16
31
  args: {
17
- cells: {
18
- '1,1': {
19
- // end: '8,1',
20
- value: 'Weekly sales report',
32
+ id: 'story',
33
+ initialCells: {
34
+ grid: {
35
+ '1,1': {
36
+ // end: '8,1',
37
+ value: 'Weekly sales report',
38
+ },
21
39
  },
22
40
  },
23
41
  columnDefault: {
24
- size: 180,
25
- resizeable: true,
42
+ grid: {
43
+ size: 180,
44
+ resizeable: true,
45
+ },
26
46
  },
27
47
  rowDefault: {
28
- size: 32,
29
- resizeable: true,
48
+ grid: {
49
+ size: 32,
50
+ resizeable: true,
51
+ },
30
52
  },
31
53
  columns: {
32
- 0: { size: 200 },
33
- 1: { size: 210 },
34
- 2: { size: 230 },
35
- 3: { size: 250 },
36
- 4: { size: 270 },
54
+ grid: {
55
+ 0: { size: 200 },
56
+ 1: { size: 210 },
57
+ 2: { size: 230 },
58
+ 3: { size: 250 },
59
+ 4: { size: 270 },
60
+ },
37
61
  },
38
62
  onAxisResize: (event) => {
39
63
  console.log('[axis resize]', event);
40
64
  },
41
- } satisfies GridProps,
65
+ onEditingChange: (event) => {
66
+ console.log('[edit]', event);
67
+ },
68
+ } satisfies StoryGridProps,
42
69
  };
package/src/Grid.tsx CHANGED
@@ -1,12 +1,25 @@
1
1
  //
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
+
4
5
  import '@dxos/lit-grid/dx-grid.pcss';
5
6
 
6
7
  import { createComponent, type EventName } from '@lit/react';
7
- import React from 'react';
8
+ import { createContextScope, type Scope } from '@radix-ui/react-context';
9
+ import { useControllableState } from '@radix-ui/react-use-controllable-state';
10
+ import React, {
11
+ type ComponentProps,
12
+ forwardRef,
13
+ type PropsWithChildren,
14
+ useCallback,
15
+ useLayoutEffect,
16
+ useState,
17
+ } from 'react';
18
+
19
+ import { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';
20
+ import { useForwardedRef } from '@dxos/react-ui';
8
21
 
9
- import { type DxAxisResize, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';
22
+ type DxGridElement = NaturalDxGrid;
10
23
 
11
24
  const DxGrid = createComponent({
12
25
  tagName: 'dx-grid',
@@ -14,13 +27,120 @@ const DxGrid = createComponent({
14
27
  react: React,
15
28
  events: {
16
29
  onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,
30
+ onEdit: 'dx-edit-request' as EventName<DxEditRequest>,
31
+ onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,
17
32
  },
18
33
  });
19
34
 
20
- export type GridProps = DxGridProps & {
21
- onAxisResize: (event: DxAxisResize) => void;
35
+ type GridEditBox = DxEditRequest['cellBox'];
36
+
37
+ const initialBox = {
38
+ insetInlineStart: 0,
39
+ insetBlockStart: 0,
40
+ inlineSize: 0,
41
+ blockSize: 0,
42
+ } satisfies GridEditBox;
43
+
44
+ type GridEditing = { index: DxEditRequest['cellIndex']; initialContent: DxEditRequest['initialContent'] } | null;
45
+
46
+ type GridContextValue = {
47
+ id: string;
48
+ editing: GridEditing;
49
+ setEditing: (nextEditing: GridEditing) => void;
50
+ editBox: GridEditBox;
51
+ setEditBox: (nextEditBox: GridEditBox) => void;
52
+ };
53
+
54
+ type GridScopedProps<P> = P & { __gridScope?: Scope };
55
+
56
+ const GRID_NAME = 'Grid';
57
+
58
+ const [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);
59
+
60
+ const [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);
61
+
62
+ type GridRootProps = PropsWithChildren<
63
+ { id: string } & Partial<{
64
+ editing: GridEditing;
65
+ defaultEditing: GridEditing;
66
+ onEditingChange: (nextEditing: GridEditing) => void;
67
+ }>
68
+ >;
69
+
70
+ const GridRoot = ({
71
+ id,
72
+ editing: propsEditing,
73
+ defaultEditing,
74
+ onEditingChange,
75
+ children,
76
+ __gridScope,
77
+ }: GridScopedProps<GridRootProps>) => {
78
+ const [editing = null, setEditing] = useControllableState({
79
+ prop: propsEditing,
80
+ defaultProp: defaultEditing,
81
+ onChange: onEditingChange,
82
+ });
83
+ const [editBox, setEditBox] = useState<GridEditBox>(initialBox);
84
+ return (
85
+ <GridProvider
86
+ id={id}
87
+ editing={editing}
88
+ setEditing={setEditing}
89
+ editBox={editBox}
90
+ setEditBox={setEditBox}
91
+ scope={__gridScope}
92
+ >
93
+ {children}
94
+ </GridProvider>
95
+ );
96
+ };
97
+
98
+ GridRoot.displayName = GRID_NAME;
99
+
100
+ type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {
101
+ getCells?: NonNullable<NaturalDxGrid['getCells']>;
22
102
  };
23
103
 
24
- export const Grid = (props: GridProps) => {
25
- return <DxGrid {...props} />;
104
+ const GRID_CONTENT_NAME = 'GridContent';
105
+
106
+ const GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {
107
+ const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
108
+ const dxGrid = useForwardedRef(forwardedRef);
109
+
110
+ // Needed instead of `useEffect` to ensure the DxGrid ref is defined.
111
+ useLayoutEffect(() => {
112
+ if (dxGrid.current && props.getCells) {
113
+ dxGrid.current.getCells = props.getCells;
114
+ dxGrid.current.requestUpdate('initialCells');
115
+ }
116
+ }, [props.getCells]);
117
+
118
+ const handleEdit = useCallback((event: DxEditRequest) => {
119
+ setEditBox(event.cellBox);
120
+ setEditing({ index: event.cellIndex, initialContent: event.initialContent });
121
+ }, []);
122
+
123
+ return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={dxGrid} />;
124
+ });
125
+
126
+ GridContent.displayName = GRID_CONTENT_NAME;
127
+
128
+ export const Grid = {
129
+ Root: GridRoot,
130
+ Content: GridContent,
26
131
  };
132
+
133
+ export { GridRoot, GridContent, useGridContext, createGridScope };
134
+
135
+ export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
136
+
137
+ export { colToA1Notation, rowToA1Notation } from '@dxos/lit-grid';
138
+
139
+ export type {
140
+ DxGridRange,
141
+ DxGridAxisMeta,
142
+ DxGridCells,
143
+ DxGridPlaneRange,
144
+ DxGridPlaneCells,
145
+ DxGridPlane,
146
+ } from '@dxos/lit-grid';