@dxos/plugin-sheet 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

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 (136) hide show
  1. package/dist/lib/browser/{SheetContainer-UV7RMPXS.mjs → SheetContainer-GXPG3ZDN.mjs} +141 -162
  2. package/dist/lib/browser/SheetContainer-GXPG3ZDN.mjs.map +7 -0
  3. package/dist/lib/browser/anchor-sort-CUTFYIT4.mjs +24 -0
  4. package/dist/lib/browser/anchor-sort-CUTFYIT4.mjs.map +7 -0
  5. package/dist/lib/browser/{chunk-N2FOQHUH.mjs → chunk-5FLX3UGU.mjs} +8 -17
  6. package/dist/lib/browser/chunk-5FLX3UGU.mjs.map +7 -0
  7. package/dist/lib/browser/chunk-AYMJXZFS.mjs +847 -0
  8. package/dist/lib/browser/chunk-AYMJXZFS.mjs.map +7 -0
  9. package/dist/lib/browser/{chunk-AT5ZK6JD.mjs → chunk-FJRLDX7Z.mjs} +1 -1
  10. package/dist/lib/browser/chunk-FJRLDX7Z.mjs.map +7 -0
  11. package/dist/lib/browser/{chunk-EMSCNWEK.mjs → chunk-IR42IS3F.mjs} +2 -2
  12. package/dist/lib/{node-esm/chunk-76T5X4VP.mjs.map → browser/chunk-IR42IS3F.mjs.map} +1 -1
  13. package/dist/lib/browser/{compute-graph-registry-MBJKPAHX.mjs → compute-graph-registry-IXGGJJBU.mjs} +2 -2
  14. package/dist/lib/browser/index.mjs +15 -14
  15. package/dist/lib/browser/index.mjs.map +3 -3
  16. package/dist/lib/browser/{intent-resolver-DN7JXDAV.mjs → intent-resolver-UI4DHURQ.mjs} +2 -2
  17. package/dist/lib/browser/{markdown-57MKY5WB.mjs → markdown-T4TUP4BF.mjs} +3 -3
  18. package/dist/lib/browser/meta.json +1 -1
  19. package/dist/lib/browser/{react-surface-NQU63B63.mjs → react-surface-KI6T5M2X.mjs} +5 -5
  20. package/dist/lib/browser/types/index.mjs +1 -1
  21. package/dist/lib/node/SheetContainer-UUDOHLZR.cjs +351 -0
  22. package/dist/lib/node/SheetContainer-UUDOHLZR.cjs.map +7 -0
  23. package/dist/lib/node/{thread-E7YPGR5T.cjs → anchor-sort-LTLYUTUP.cjs} +17 -10
  24. package/dist/lib/node/anchor-sort-LTLYUTUP.cjs.map +7 -0
  25. package/dist/lib/node/{chunk-HLSQVT3C.cjs → chunk-76NESQLB.cjs} +10 -19
  26. package/dist/lib/node/chunk-76NESQLB.cjs.map +7 -0
  27. package/dist/lib/node/chunk-BXBNSNDK.cjs +855 -0
  28. package/dist/lib/node/chunk-BXBNSNDK.cjs.map +7 -0
  29. package/dist/lib/node/{chunk-LEV7OSTK.cjs → chunk-FIM6EZ6M.cjs} +4 -4
  30. package/dist/lib/node/chunk-FIM6EZ6M.cjs.map +7 -0
  31. package/dist/lib/node/{chunk-O2FOEUYB.cjs → chunk-LJWWS53Z.cjs} +5 -5
  32. package/dist/lib/node/{chunk-O2FOEUYB.cjs.map → chunk-LJWWS53Z.cjs.map} +1 -1
  33. package/dist/lib/node/{compute-graph-registry-EBBDN6ZX.cjs → compute-graph-registry-ARLDHPFW.cjs} +6 -6
  34. package/dist/lib/node/index.cjs +21 -20
  35. package/dist/lib/node/index.cjs.map +3 -3
  36. package/dist/lib/node/{intent-resolver-OPF56TAL.cjs → intent-resolver-EVLGL7VZ.cjs} +9 -9
  37. package/dist/lib/node/{markdown-Q3RXYPHQ.cjs → markdown-DBPOAYI7.cjs} +8 -8
  38. package/dist/lib/node/meta.json +1 -1
  39. package/dist/lib/node/{react-surface-7SAA5DX3.cjs → react-surface-QHAPOAR2.cjs} +14 -14
  40. package/dist/lib/node/types/index.cjs +29 -29
  41. package/dist/lib/node/types/index.cjs.map +1 -1
  42. package/dist/lib/node-esm/{SheetContainer-XW7B2AJI.mjs → SheetContainer-44KHKMPI.mjs} +141 -162
  43. package/dist/lib/node-esm/SheetContainer-44KHKMPI.mjs.map +7 -0
  44. package/dist/lib/node-esm/anchor-sort-3E2VGLO6.mjs +25 -0
  45. package/dist/lib/node-esm/anchor-sort-3E2VGLO6.mjs.map +7 -0
  46. package/dist/lib/node-esm/{chunk-LYZV4Q4C.mjs → chunk-DIF3IOAB.mjs} +8 -17
  47. package/dist/lib/node-esm/chunk-DIF3IOAB.mjs.map +7 -0
  48. package/dist/lib/node-esm/chunk-GCCM7R45.mjs +848 -0
  49. package/dist/lib/node-esm/chunk-GCCM7R45.mjs.map +7 -0
  50. package/dist/lib/node-esm/{chunk-76T5X4VP.mjs → chunk-IQ76YE6M.mjs} +2 -2
  51. package/dist/lib/{browser/chunk-EMSCNWEK.mjs.map → node-esm/chunk-IQ76YE6M.mjs.map} +1 -1
  52. package/dist/lib/node-esm/{chunk-HXBUY5ET.mjs → chunk-NMCVJWDT.mjs} +1 -1
  53. package/dist/lib/node-esm/chunk-NMCVJWDT.mjs.map +7 -0
  54. package/dist/lib/node-esm/{compute-graph-registry-TVG6RN2J.mjs → compute-graph-registry-7PDWXMHF.mjs} +2 -2
  55. package/dist/lib/node-esm/index.mjs +15 -14
  56. package/dist/lib/node-esm/index.mjs.map +3 -3
  57. package/dist/lib/node-esm/{intent-resolver-7AN5CN4R.mjs → intent-resolver-TPOH5JM5.mjs} +2 -2
  58. package/dist/lib/node-esm/{markdown-ACHAWUOE.mjs → markdown-WWUJ3E5F.mjs} +3 -3
  59. package/dist/lib/node-esm/meta.json +1 -1
  60. package/dist/lib/node-esm/{react-surface-BPNN7RSE.mjs → react-surface-XT2J3S67.mjs} +5 -5
  61. package/dist/lib/node-esm/types/index.mjs +1 -1
  62. package/dist/types/src/SheetPlugin.d.ts.map +1 -1
  63. package/dist/types/src/capabilities/anchor-sort.d.ts +6 -0
  64. package/dist/types/src/capabilities/anchor-sort.d.ts.map +1 -0
  65. package/dist/types/src/capabilities/index.d.ts +4 -4
  66. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  67. package/dist/types/src/components/GridSheet/util.d.ts.map +1 -1
  68. package/dist/types/src/components/SheetContainer/SheetContainer.stories.d.ts.map +1 -1
  69. package/dist/types/src/components/SheetToolbar/SheetToolbar.d.ts +2 -2
  70. package/dist/types/src/components/SheetToolbar/SheetToolbar.d.ts.map +1 -1
  71. package/dist/types/src/components/SheetToolbar/useToolbarState.d.ts +2 -3
  72. package/dist/types/src/components/SheetToolbar/useToolbarState.d.ts.map +1 -1
  73. package/dist/types/src/integrations/thread-ranges.d.ts.map +1 -1
  74. package/dist/types/src/model/sheet-model.d.ts.map +1 -1
  75. package/dist/types/src/serializer.d.ts.map +1 -1
  76. package/dist/types/src/testing/playwright/sheet-manager.d.ts.map +1 -1
  77. package/dist/types/src/types/schema.d.ts +0 -207
  78. package/dist/types/src/types/schema.d.ts.map +1 -1
  79. package/dist/types/src/types/util.d.ts.map +1 -1
  80. package/package.json +49 -48
  81. package/src/SheetPlugin.tsx +7 -5
  82. package/src/capabilities/anchor-sort.ts +22 -0
  83. package/src/capabilities/index.ts +1 -1
  84. package/src/components/FunctionEditor/FunctionEditor.tsx +1 -1
  85. package/src/components/GridSheet/util.ts +10 -9
  86. package/src/components/SheetContainer/SheetContainer.stories.tsx +2 -1
  87. package/src/components/SheetContainer/SheetContainer.tsx +1 -1
  88. package/src/components/SheetToolbar/SheetToolbar.stories.tsx +1 -1
  89. package/src/components/SheetToolbar/SheetToolbar.tsx +44 -33
  90. package/src/components/SheetToolbar/useToolbarState.ts +1 -2
  91. package/src/extensions/compute.ts +1 -1
  92. package/src/integrations/thread-ranges.ts +12 -14
  93. package/src/model/sheet-model.ts +17 -17
  94. package/src/serializer.ts +1 -2
  95. package/src/testing/playwright/sheet-manager.ts +9 -9
  96. package/src/types/schema.ts +1 -5
  97. package/src/types/util.ts +0 -1
  98. package/dist/lib/browser/SheetContainer-UV7RMPXS.mjs.map +0 -7
  99. package/dist/lib/browser/chunk-AT5ZK6JD.mjs.map +0 -7
  100. package/dist/lib/browser/chunk-N2FOQHUH.mjs.map +0 -7
  101. package/dist/lib/browser/chunk-TN7LTDHU.mjs +0 -826
  102. package/dist/lib/browser/chunk-TN7LTDHU.mjs.map +0 -7
  103. package/dist/lib/browser/thread-WU64QL2A.mjs +0 -17
  104. package/dist/lib/browser/thread-WU64QL2A.mjs.map +0 -7
  105. package/dist/lib/node/SheetContainer-GR2KDOAE.cjs +0 -368
  106. package/dist/lib/node/SheetContainer-GR2KDOAE.cjs.map +0 -7
  107. package/dist/lib/node/chunk-CN7OBGYV.cjs +0 -833
  108. package/dist/lib/node/chunk-CN7OBGYV.cjs.map +0 -7
  109. package/dist/lib/node/chunk-HLSQVT3C.cjs.map +0 -7
  110. package/dist/lib/node/chunk-LEV7OSTK.cjs.map +0 -7
  111. package/dist/lib/node/thread-E7YPGR5T.cjs.map +0 -7
  112. package/dist/lib/node-esm/SheetContainer-XW7B2AJI.mjs.map +0 -7
  113. package/dist/lib/node-esm/chunk-3JJ7ETTJ.mjs +0 -827
  114. package/dist/lib/node-esm/chunk-3JJ7ETTJ.mjs.map +0 -7
  115. package/dist/lib/node-esm/chunk-HXBUY5ET.mjs.map +0 -7
  116. package/dist/lib/node-esm/chunk-LYZV4Q4C.mjs.map +0 -7
  117. package/dist/lib/node-esm/thread-ULESW6IX.mjs +0 -18
  118. package/dist/lib/node-esm/thread-ULESW6IX.mjs.map +0 -7
  119. package/dist/types/src/capabilities/thread.d.ts +0 -6
  120. package/dist/types/src/capabilities/thread.d.ts.map +0 -1
  121. package/dist/types/src/components/SheetToolbar/comment.d.ts +0 -25
  122. package/dist/types/src/components/SheetToolbar/comment.d.ts.map +0 -1
  123. package/src/capabilities/thread.ts +0 -14
  124. package/src/components/SheetToolbar/comment.ts +0 -84
  125. /package/dist/lib/browser/{compute-graph-registry-MBJKPAHX.mjs.map → compute-graph-registry-IXGGJJBU.mjs.map} +0 -0
  126. /package/dist/lib/browser/{intent-resolver-DN7JXDAV.mjs.map → intent-resolver-UI4DHURQ.mjs.map} +0 -0
  127. /package/dist/lib/browser/{markdown-57MKY5WB.mjs.map → markdown-T4TUP4BF.mjs.map} +0 -0
  128. /package/dist/lib/browser/{react-surface-NQU63B63.mjs.map → react-surface-KI6T5M2X.mjs.map} +0 -0
  129. /package/dist/lib/node/{compute-graph-registry-EBBDN6ZX.cjs.map → compute-graph-registry-ARLDHPFW.cjs.map} +0 -0
  130. /package/dist/lib/node/{intent-resolver-OPF56TAL.cjs.map → intent-resolver-EVLGL7VZ.cjs.map} +0 -0
  131. /package/dist/lib/node/{markdown-Q3RXYPHQ.cjs.map → markdown-DBPOAYI7.cjs.map} +0 -0
  132. /package/dist/lib/node/{react-surface-7SAA5DX3.cjs.map → react-surface-QHAPOAR2.cjs.map} +0 -0
  133. /package/dist/lib/node-esm/{compute-graph-registry-TVG6RN2J.mjs.map → compute-graph-registry-7PDWXMHF.mjs.map} +0 -0
  134. /package/dist/lib/node-esm/{intent-resolver-7AN5CN4R.mjs.map → intent-resolver-TPOH5JM5.mjs.map} +0 -0
  135. /package/dist/lib/node-esm/{markdown-ACHAWUOE.mjs.map → markdown-WWUJ3E5F.mjs.map} +0 -0
  136. /package/dist/lib/node-esm/{react-surface-BPNN7RSE.mjs.map → react-surface-XT2J3S67.mjs.map} +0 -0
@@ -1,826 +0,0 @@
1
- import {
2
- rangeExtension,
3
- sheetExtension
4
- } from "./chunk-AT5ZK6JD.mjs";
5
- import {
6
- DEFAULT_COLS,
7
- DEFAULT_ROWS,
8
- Range,
9
- SheetAction,
10
- cellClassNameForRange,
11
- rangeFromIndex,
12
- useSheetModel
13
- } from "./chunk-N2FOQHUH.mjs";
14
- import {
15
- SHEET_PLUGIN
16
- } from "./chunk-D3G4UGEK.mjs";
17
-
18
- // packages/plugins/plugin-sheet/src/components/ComputeGraph/ComputeGraphContextProvider.tsx
19
- import React, { createContext, useContext } from "react";
20
- import { raise } from "@dxos/debug";
21
- import { useAsyncState } from "@dxos/react-hooks";
22
- var ComputeGraphContext = /* @__PURE__ */ createContext(void 0);
23
- var ComputeGraphContextProvider = ({ registry, children }) => {
24
- return /* @__PURE__ */ React.createElement(ComputeGraphContext.Provider, {
25
- value: {
26
- registry
27
- }
28
- }, children);
29
- };
30
- var useComputeGraph = (space) => {
31
- const { registry } = useContext(ComputeGraphContext) ?? raise(new Error("Missing ComputeGraphContext"));
32
- const [graph] = useAsyncState(async () => {
33
- if (space) {
34
- const graph2 = registry.getOrCreateGraph(space);
35
- await graph2.open();
36
- return graph2;
37
- }
38
- }, [
39
- space,
40
- registry
41
- ]);
42
- return graph;
43
- };
44
-
45
- // packages/plugins/plugin-sheet/src/components/RangeList/RangeList.tsx
46
- import { Schema } from "effect";
47
- import React2, { useCallback } from "react";
48
- import { rangeToA1Notation } from "@dxos/compute";
49
- import { useTranslation } from "@dxos/react-ui";
50
- import { List } from "@dxos/react-ui-list";
51
- import { ghostHover } from "@dxos/react-ui-theme";
52
- var RangeList = ({ sheet }) => {
53
- const { t } = useTranslation(SHEET_PLUGIN);
54
- const handleSelectRange = (range) => {
55
- };
56
- const handleDeleteRange = useCallback((range) => {
57
- const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
58
- sheet.ranges.splice(index, 1);
59
- }, [
60
- sheet
61
- ]);
62
- return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
63
- className: "p-2 text-sm font-semibold"
64
- }, t("range list heading")), /* @__PURE__ */ React2.createElement(List.Root, {
65
- items: sheet.ranges,
66
- isItem: Schema.is(Range)
67
- }, ({ items: ranges }) => ranges.map((range, i) => /* @__PURE__ */ React2.createElement(List.Item, {
68
- key: i,
69
- item: range,
70
- classNames: [
71
- "p-2",
72
- ghostHover
73
- ]
74
- }, /* @__PURE__ */ React2.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React2.createElement(List.ItemTitle, {
75
- onClick: () => handleSelectRange(range)
76
- }, t("range title", {
77
- position: rangeToA1Notation(rangeFromIndex(sheet, range.range)),
78
- key: t(`range key ${range.key} label`),
79
- value: t(`range value ${range.value} label`)
80
- })), /* @__PURE__ */ React2.createElement(List.ItemDeleteButton, {
81
- onClick: () => handleDeleteRange(range)
82
- })))));
83
- };
84
-
85
- // packages/plugins/plugin-sheet/src/components/index.ts
86
- import { lazy } from "react";
87
-
88
- // packages/plugins/plugin-sheet/src/components/GridSheet/GridSheet.tsx
89
- import React4, { useCallback as useCallback4, useMemo as useMemo2, useRef, useState as useState3 } from "react";
90
- import { createIntent as createIntent2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
91
- import { rangeToA1Notation as rangeToA1Notation2 } from "@dxos/compute";
92
- import { defaultColSize, defaultRowSize } from "@dxos/lit-grid";
93
- import { DropdownMenu, Icon, useTranslation as useTranslation2 } from "@dxos/react-ui";
94
- import { useAttention } from "@dxos/react-ui-attention";
95
- import { closestCell, editorKeys, parseCellIndex, Grid as Grid2, GridCellEditor } from "@dxos/react-ui-grid";
96
-
97
- // packages/plugins/plugin-sheet/src/components/GridSheet/util.ts
98
- import { useEffect as useEffect2, useState } from "react";
99
- import { inRange as inRange2 } from "@dxos/compute";
100
- import { createDocAccessor, fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
101
- import { parseValue, cellClassesForFieldType } from "@dxos/react-ui-form";
102
- import { colToA1Notation, rowToA1Notation, commentedClassName } from "@dxos/react-ui-grid";
103
- import { mx } from "@dxos/react-ui-theme";
104
-
105
- // packages/plugins/plugin-sheet/src/integrations/thread-ranges.ts
106
- import { Schema as Schema2, pipe } from "effect";
107
- import { useCallback as useCallback2, useEffect, useMemo } from "react";
108
- import { createIntent, createResolver, LayoutAction, useIntentResolver, useIntentDispatcher, chain } from "@dxos/app-framework";
109
- import { debounce } from "@dxos/async";
110
- import { inRange } from "@dxos/compute";
111
- import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from "@dxos/plugin-deck/types";
112
- import { ThreadAction } from "@dxos/plugin-thread/types";
113
- import { fullyQualifiedId } from "@dxos/react-client/echo";
114
- var completeCellRangeToThreadCursor = (range) => {
115
- return `${range.from.col},${range.from.row},${range.to.col},${range.to.row}`;
116
- };
117
- var parseThreadAnchorAsCellRange = (cursor) => {
118
- const coords = cursor.split(",");
119
- if (coords.length !== 4) {
120
- return null;
121
- } else {
122
- const [fromCol, fromRow, toCol, toRow] = coords;
123
- return {
124
- from: {
125
- col: parseInt(fromCol),
126
- row: parseInt(fromRow)
127
- },
128
- to: {
129
- col: parseInt(toCol),
130
- row: parseInt(toRow)
131
- }
132
- };
133
- }
134
- };
135
- var useUpdateFocusedCellOnThreadSelection = (grid) => {
136
- const { model, setActiveRefs } = useSheetContext();
137
- const scrollIntoViewResolver = useMemo(() => createResolver({
138
- intent: LayoutAction.ScrollIntoView,
139
- position: "hoist",
140
- filter: (data) => {
141
- if (!Schema2.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
142
- return false;
143
- }
144
- return data.subject === fullyQualifiedId(model.sheet) && !!data.options?.cursor;
145
- },
146
- resolve: ({ options: { cursor, ref } }) => {
147
- setActiveRefs(ref);
148
- const range = parseThreadAnchorAsCellRange(cursor);
149
- range && grid?.setFocus({
150
- ...range.to,
151
- plane: "grid"
152
- }, true);
153
- }
154
- }), [
155
- model.sheet,
156
- setActiveRefs
157
- ]);
158
- useIntentResolver(SHEET_PLUGIN, scrollIntoViewResolver);
159
- };
160
- var useSelectThreadOnCellFocus = () => {
161
- const { model, cursor } = useSheetContext();
162
- const { dispatchPromise: dispatch } = useIntentDispatcher();
163
- const threads = useMemo(() => model.sheet.threads?.filter((thread) => !!thread) ?? [], [
164
- // TODO(thure): Surely we can find a better dependency for this…
165
- JSON.stringify(model.sheet.threads)
166
- ]);
167
- const selectClosestThread = useCallback2((cellAddress) => {
168
- if (!cellAddress || !threads) {
169
- return;
170
- }
171
- const closestThread = threads?.find((ref) => {
172
- if (ref.target?.anchor) {
173
- const range = parseThreadAnchorAsCellRange(ref.target.anchor);
174
- return range ? inRange(range, cellAddress) : false;
175
- } else {
176
- return false;
177
- }
178
- });
179
- if (closestThread) {
180
- const primary = fullyQualifiedId(model.sheet);
181
- const intent = pipe(createIntent(ThreadAction.Select, {
182
- current: fullyQualifiedId(closestThread)
183
- }), chain(DeckAction.ChangeCompanion, {
184
- primary,
185
- companion: `${primary}${ATTENDABLE_PATH_SEPARATOR}comments`
186
- }));
187
- void dispatch(intent);
188
- }
189
- }, [
190
- dispatch,
191
- threads
192
- ]);
193
- const debounced = useMemo(() => {
194
- return debounce((cellCoords) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
195
- }, [
196
- selectClosestThread
197
- ]);
198
- useEffect(() => {
199
- if (!cursor) {
200
- return;
201
- }
202
- debounced(cursor);
203
- }, [
204
- cursor,
205
- debounced
206
- ]);
207
- };
208
-
209
- // packages/plugins/plugin-sheet/src/components/GridSheet/util.ts
210
- var createDxGridColumns = (model) => {
211
- return model.sheet.columns.reduce((acc, columnId, numericIndex) => {
212
- if (model.sheet.columnMeta[columnId] && model.sheet.columnMeta[columnId].size) {
213
- acc.grid[numericIndex] = {
214
- size: model.sheet.columnMeta[columnId].size,
215
- resizeable: true
216
- };
217
- }
218
- return acc;
219
- }, {
220
- grid: {}
221
- });
222
- };
223
- var createDxGridRows = (model) => {
224
- return model.sheet.rows.reduce((acc, rowId, numericIndex) => {
225
- if (model.sheet.rowMeta[rowId] && model.sheet.rowMeta[rowId].size) {
226
- acc.grid[numericIndex] = {
227
- size: model.sheet.rowMeta[rowId].size,
228
- resizeable: true
229
- };
230
- }
231
- return acc;
232
- }, {
233
- grid: {}
234
- });
235
- };
236
- var projectCellProps = (model, col, row) => {
237
- const address = {
238
- col,
239
- row
240
- };
241
- const rawValue = model.getValue(address);
242
- const ranges = model.sheet.ranges?.filter(({ range }) => inRange2(rangeFromIndex(model.sheet, range), address));
243
- const threadRefs = model.sheet.threads?.filter((thread) => {
244
- const range = thread.target?.anchor && parseThreadAnchorAsCellRange(thread.target.anchor);
245
- return thread && range ? inRange2(range, address) : false;
246
- }).map((thread) => fullyQualifiedId2(thread)).join(" ");
247
- const description = model.getValueDescription(address);
248
- const type = description?.type;
249
- const format = description?.format;
250
- const classNames = ranges?.map(cellClassNameForRange).reverse();
251
- return {
252
- value: parseValue({
253
- type,
254
- format,
255
- value: rawValue
256
- }),
257
- className: mx(cellClassesForFieldType({
258
- type,
259
- format
260
- }), threadRefs && commentedClassName, classNames),
261
- dataRefs: threadRefs
262
- };
263
- };
264
- var gridCellGetter = (model) => {
265
- const cachedGridCells = {};
266
- return (nextBounds) => {
267
- [
268
- ...Array(nextBounds.end.col - nextBounds.start.col)
269
- ].forEach((_, c0) => {
270
- return [
271
- ...Array(nextBounds.end.row - nextBounds.start.row)
272
- ].forEach((_2, r0) => {
273
- const col = nextBounds.start.col + c0;
274
- const row = nextBounds.start.row + r0;
275
- cachedGridCells[`${col},${row}`] = projectCellProps(model, col, row);
276
- });
277
- });
278
- return cachedGridCells;
279
- };
280
- };
281
- var rowLabelCell = (row) => ({
282
- value: rowToA1Notation(row),
283
- className: "!bg-toolbarSurface text-subdued text-end pie-1",
284
- resizeHandle: "row"
285
- });
286
- var colLabelCell = (col) => ({
287
- value: colToA1Notation(col),
288
- className: "!bg-toolbarSurface text-subdued",
289
- resizeHandle: "col"
290
- });
291
- var cellGetter = (model) => {
292
- const getGridCells = gridCellGetter(model);
293
- return (nextBounds, plane) => {
294
- switch (plane) {
295
- case "grid":
296
- return getGridCells(nextBounds);
297
- case "fixedStartStart": {
298
- return {
299
- "0,0": {
300
- className: "!bg-toolbarSurface"
301
- }
302
- };
303
- }
304
- case "frozenColsStart":
305
- return [
306
- ...Array(nextBounds.end.row - nextBounds.start.row)
307
- ].reduce((acc, _, r0) => {
308
- const r = nextBounds.start.row + r0;
309
- acc[`0,${r}`] = rowLabelCell(r);
310
- return acc;
311
- }, {});
312
- case "frozenRowsStart":
313
- return [
314
- ...Array(nextBounds.end.col - nextBounds.start.col)
315
- ].reduce((acc, _, c0) => {
316
- const c = nextBounds.start.col + c0;
317
- acc[`${c},0`] = colLabelCell(c);
318
- return acc;
319
- }, {});
320
- default:
321
- return {};
322
- }
323
- };
324
- };
325
- var useSheetModelDxGridProps = (dxGrid, model) => {
326
- const [columns, setColumns] = useState(createDxGridColumns(model));
327
- const [rows, setRows] = useState(createDxGridRows(model));
328
- useEffect2(() => {
329
- const cellsAccessor = createDocAccessor(model.sheet, [
330
- "cells"
331
- ]);
332
- if (dxGrid) {
333
- dxGrid.getCells = cellGetter(model);
334
- }
335
- const handleCellsUpdate = () => {
336
- dxGrid?.requestUpdate("initialCells");
337
- };
338
- cellsAccessor.handle.addListener("change", handleCellsUpdate);
339
- const unsubscribe = model.graph.update.on(handleCellsUpdate);
340
- return () => {
341
- cellsAccessor.handle.removeListener("change", handleCellsUpdate);
342
- unsubscribe();
343
- };
344
- }, [
345
- model,
346
- dxGrid
347
- ]);
348
- useEffect2(() => {
349
- const columnMetaAccessor = createDocAccessor(model.sheet, [
350
- "columnMeta"
351
- ]);
352
- const rowMetaAccessor = createDocAccessor(model.sheet, [
353
- "rowMeta"
354
- ]);
355
- const handleColumnMetaUpdate = () => {
356
- setColumns(createDxGridColumns(model));
357
- };
358
- const handleRowMetaUpdate = () => {
359
- setRows(createDxGridRows(model));
360
- };
361
- columnMetaAccessor.handle.addListener("change", handleColumnMetaUpdate);
362
- rowMetaAccessor.handle.addListener("change", handleRowMetaUpdate);
363
- return () => {
364
- columnMetaAccessor.handle.removeListener("change", handleColumnMetaUpdate);
365
- rowMetaAccessor.handle.removeListener("change", handleRowMetaUpdate);
366
- };
367
- }, [
368
- model,
369
- dxGrid
370
- ]);
371
- return {
372
- columns,
373
- rows
374
- };
375
- };
376
-
377
- // packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx
378
- import React3, { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useState as useState2 } from "react";
379
- import { invariant } from "@dxos/invariant";
380
- import { fullyQualifiedId as fullyQualifiedId3 } from "@dxos/react-client/echo";
381
- import { Grid, useGridContext } from "@dxos/react-ui-grid";
382
- var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx";
383
- var SheetContext = /* @__PURE__ */ createContext2(void 0);
384
- var useSheetContext = () => {
385
- const context = useContext2(SheetContext);
386
- invariant(context, void 0, {
387
- F: __dxlog_file,
388
- L: 54,
389
- S: void 0,
390
- A: [
391
- "context",
392
- ""
393
- ]
394
- });
395
- return context;
396
- };
397
- var SheetProviderImpl = ({ model, onInfo, ignoreAttention, children, __gridScope }) => {
398
- const { id, editing, setEditing } = useGridContext("SheetProvider", __gridScope);
399
- const [cursor, setCursorInternal] = useState2();
400
- const [range, setRangeInternal] = useState2();
401
- const [cursorFallbackRange, setCursorFallbackRange] = useState2();
402
- const [activeRefs, setActiveRefs] = useState2("");
403
- const setCursor = useCallback3((nextCursor) => {
404
- setCursorInternal(nextCursor);
405
- setCursorFallbackRange(range?.to ? range : nextCursor ? {
406
- from: nextCursor,
407
- to: nextCursor
408
- } : void 0);
409
- }, [
410
- range
411
- ]);
412
- const setRange = useCallback3((nextRange) => {
413
- setRangeInternal(nextRange);
414
- setCursorFallbackRange(nextRange?.to ? nextRange : cursor ? {
415
- from: cursor,
416
- to: cursor
417
- } : void 0);
418
- }, [
419
- cursor
420
- ]);
421
- return /* @__PURE__ */ React3.createElement(SheetContext.Provider, {
422
- value: {
423
- id,
424
- model,
425
- editing,
426
- setEditing,
427
- cursor,
428
- setCursor,
429
- range,
430
- setRange,
431
- cursorFallbackRange,
432
- activeRefs,
433
- setActiveRefs,
434
- // TODO(burdon): Change to event.
435
- onInfo,
436
- ignoreAttention
437
- }
438
- }, children);
439
- };
440
- var SheetProvider = ({ children, graph, sheet, readonly, ignoreAttention, onInfo }) => {
441
- const model = useSheetModel(graph, sheet, {
442
- readonly
443
- });
444
- return !model ? null : /* @__PURE__ */ React3.createElement(Grid.Root, {
445
- id: fullyQualifiedId3(sheet)
446
- }, /* @__PURE__ */ React3.createElement(SheetProviderImpl, {
447
- model,
448
- onInfo,
449
- ignoreAttention
450
- }, children));
451
- };
452
-
453
- // packages/plugins/plugin-sheet/src/components/GridSheet/GridSheet.tsx
454
- var inertPosition = {
455
- plane: "grid",
456
- col: 0,
457
- row: 0
458
- };
459
- var initialCells = {
460
- grid: {},
461
- frozenColsStart: [
462
- ...Array(64)
463
- ].reduce((acc, _, i) => {
464
- acc[`0,${i}`] = rowLabelCell(i);
465
- return acc;
466
- }, {}),
467
- frozenRowsStart: [
468
- ...Array(12)
469
- ].reduce((acc, _, i) => {
470
- acc[`${i},0`] = colLabelCell(i);
471
- return acc;
472
- }, {})
473
- };
474
- var frozen = {
475
- frozenColsStart: 1,
476
- frozenRowsStart: 1
477
- };
478
- var sheetColDefault = {
479
- frozenColsStart: {
480
- size: 48,
481
- readonly: true
482
- },
483
- grid: {
484
- size: defaultColSize,
485
- resizeable: true
486
- }
487
- };
488
- var sheetRowDefault = {
489
- frozenRowsStart: {
490
- size: defaultRowSize,
491
- readonly: true
492
- },
493
- grid: {
494
- size: defaultRowSize,
495
- resizeable: true
496
- }
497
- };
498
- var GridSheet = () => {
499
- const { t } = useTranslation2(SHEET_PLUGIN);
500
- const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs, ignoreAttention } = useSheetContext();
501
- const [dxGrid, setDxGrid] = useState3(null);
502
- const [extraplanarFocus, setExtraplanarFocus] = useState3(null);
503
- const { dispatchPromise: dispatch } = useIntentDispatcher2();
504
- const rangeController = useRef();
505
- const { hasAttention } = useAttention(id);
506
- const handleFocus = useCallback4((event) => {
507
- if (!editing) {
508
- const cell = closestCell(event.target);
509
- if (cell) {
510
- if (cell.plane === "grid") {
511
- setCursor({
512
- col: cell.col,
513
- row: cell.row
514
- });
515
- setExtraplanarFocus(null);
516
- } else {
517
- setExtraplanarFocus(cell);
518
- }
519
- } else {
520
- setExtraplanarFocus(null);
521
- }
522
- }
523
- }, [
524
- editing
525
- ]);
526
- const handleClose = useCallback4((_value, event) => {
527
- if (event) {
528
- const { key, shift } = event;
529
- const axis = [
530
- "Enter",
531
- "ArrowUp",
532
- "ArrowDown"
533
- ].includes(key) ? "row" : [
534
- "Tab",
535
- "ArrowLeft",
536
- "ArrowRight"
537
- ].includes(key) ? "col" : void 0;
538
- const delta = key.startsWith("Arrow") ? [
539
- "ArrowUp",
540
- "ArrowLeft"
541
- ].includes(key) ? -1 : 1 : shift ? -1 : 1;
542
- dxGrid?.refocus(axis, delta);
543
- }
544
- }, [
545
- model,
546
- editing,
547
- dxGrid
548
- ]);
549
- const handleBlur = useCallback4((value) => {
550
- if (value !== void 0) {
551
- model.setValue(parseCellIndex(editing.index), value);
552
- }
553
- }, [
554
- model,
555
- editing
556
- ]);
557
- const handleAxisResize = useCallback4(({ axis, size, index: numericIndex }) => {
558
- if (axis === "row") {
559
- const rowId = model.sheet.rows[parseInt(numericIndex)];
560
- model.sheet.rowMeta[rowId] ??= {};
561
- model.sheet.rowMeta[rowId].size = size;
562
- } else {
563
- const columnId = model.sheet.columns[parseInt(numericIndex)];
564
- model.sheet.columnMeta[columnId] ??= {};
565
- model.sheet.columnMeta[columnId].size = size;
566
- }
567
- }, [
568
- model
569
- ]);
570
- const handleSelect = useCallback4(({ minCol, maxCol, minRow, maxRow }) => {
571
- const range = {
572
- from: {
573
- col: minCol,
574
- row: minRow
575
- }
576
- };
577
- if (minCol !== maxCol || minRow !== maxRow) {
578
- range.to = {
579
- col: maxCol,
580
- row: maxRow
581
- };
582
- }
583
- if (editing) {
584
- rangeController.current?.setRange(rangeToA1Notation2(range));
585
- } else {
586
- setRange(range.to ? range : void 0);
587
- }
588
- }, [
589
- editing
590
- ]);
591
- const handleWheel = useCallback4((event) => {
592
- if (!ignoreAttention && !hasAttention) {
593
- event.stopPropagation();
594
- }
595
- }, [
596
- hasAttention,
597
- ignoreAttention
598
- ]);
599
- const selectEntireAxis = useCallback4((pos) => {
600
- switch (pos.plane) {
601
- case "frozenRowsStart":
602
- return dxGrid?.setSelection({
603
- start: {
604
- col: pos.col,
605
- row: 0,
606
- plane: "grid"
607
- },
608
- end: {
609
- col: pos.col,
610
- row: model.sheet.rows.length - 1,
611
- plane: "grid"
612
- }
613
- });
614
- case "frozenColsStart":
615
- return dxGrid?.setSelection({
616
- start: {
617
- row: pos.row,
618
- col: 0,
619
- plane: "grid"
620
- },
621
- end: {
622
- row: pos.row,
623
- col: model.sheet.columns.length - 1,
624
- plane: "grid"
625
- }
626
- });
627
- }
628
- }, [
629
- dxGrid,
630
- model.sheet
631
- ]);
632
- const handleClick = useCallback4((event) => {
633
- const cell = closestCell(event.target);
634
- if (cell) {
635
- selectEntireAxis(cell);
636
- }
637
- }, [
638
- selectEntireAxis
639
- ]);
640
- const handleKeyDown = useCallback4((event) => {
641
- switch (event.key) {
642
- case "Backspace":
643
- case "Delete":
644
- event.preventDefault();
645
- return cursorFallbackRange && model.clear(cursorFallbackRange);
646
- case "Enter":
647
- case "Space":
648
- if (dxGrid && extraplanarFocus) {
649
- switch (extraplanarFocus.plane) {
650
- case "frozenRowsStart":
651
- case "frozenColsStart":
652
- event.preventDefault();
653
- return selectEntireAxis(extraplanarFocus);
654
- }
655
- }
656
- }
657
- if (event.metaKey || event.ctrlKey) {
658
- switch (event.key) {
659
- case "x":
660
- case "X":
661
- event.preventDefault();
662
- return cursorFallbackRange && model.cut(cursorFallbackRange);
663
- case "c":
664
- case "C":
665
- event.preventDefault();
666
- return cursorFallbackRange && model.copy(cursorFallbackRange);
667
- case "v":
668
- case "V":
669
- event.preventDefault();
670
- return cursor && model.paste(cursor);
671
- case "z":
672
- event.preventDefault();
673
- return event.shiftKey ? model.redo() : model.undo();
674
- case "Z":
675
- case "y":
676
- event.preventDefault();
677
- return model.redo();
678
- }
679
- }
680
- }, [
681
- cursorFallbackRange,
682
- model,
683
- cursor,
684
- extraplanarFocus,
685
- selectEntireAxis
686
- ]);
687
- const contextMenuAnchorRef = useRef(null);
688
- const [contextMenuOpen, setContextMenuOpen] = useState3(null);
689
- const contextMenuAxis = contextMenuOpen?.plane.startsWith("frozenRows") ? "col" : "row";
690
- const handleContextMenu = useCallback4((event) => {
691
- const cell = closestCell(event.target);
692
- if (cell && cell.plane.startsWith("frozen")) {
693
- event.preventDefault();
694
- contextMenuAnchorRef.current = event.target;
695
- setContextMenuOpen(cell);
696
- }
697
- }, []);
698
- const handleAxisMenuAction = useCallback4((operation) => {
699
- switch (operation) {
700
- case "insert-before":
701
- case "insert-after":
702
- return dispatch(createIntent2(SheetAction.InsertAxis, {
703
- model,
704
- axis: contextMenuAxis,
705
- index: contextMenuOpen[contextMenuAxis] + (operation === "insert-before" ? 0 : 1)
706
- }));
707
- case "drop":
708
- return dispatch(createIntent2(SheetAction.DropAxis, {
709
- model,
710
- axis: contextMenuAxis,
711
- axisIndex: model.sheet[contextMenuAxis === "row" ? "rows" : "columns"][contextMenuOpen[contextMenuAxis]]
712
- }));
713
- }
714
- }, [
715
- contextMenuAxis,
716
- contextMenuOpen,
717
- model,
718
- dispatch
719
- ]);
720
- const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
721
- const extension = useMemo2(() => [
722
- editorKeys({
723
- onClose: handleClose,
724
- ...editing?.initialContent && {
725
- onNav: handleClose
726
- }
727
- }),
728
- sheetExtension({
729
- functions: model.graph.getFunctions()
730
- }),
731
- rangeExtension({
732
- onInit: (fn) => rangeController.current = fn,
733
- onStateChange: (state) => {
734
- if (dxGrid) {
735
- dxGrid.mode = typeof state.activeRange === "undefined" ? "edit" : "edit-select";
736
- }
737
- }
738
- })
739
- ], [
740
- model,
741
- handleClose,
742
- editing
743
- ]);
744
- const getCellContent = useCallback4((index) => {
745
- return model.getCellText(parseCellIndex(index));
746
- }, [
747
- model
748
- ]);
749
- useUpdateFocusedCellOnThreadSelection(dxGrid);
750
- useSelectThreadOnCellFocus();
751
- return (
752
- // TODO(thure): Why are Table’s and Sheet’s editor boxes off by 1px?
753
- /* @__PURE__ */ React4.createElement("div", {
754
- role: "none",
755
- className: "relative min-bs-0 [&_.cm-editor]:!border-lb [&_.cm-editor]:!border-transparent "
756
- }, /* @__PURE__ */ React4.createElement(GridCellEditor, {
757
- getCellContent,
758
- extension,
759
- onBlur: handleBlur
760
- }), /* @__PURE__ */ React4.createElement(Grid2.Content, {
761
- initialCells,
762
- limitColumns: DEFAULT_COLS,
763
- limitRows: DEFAULT_ROWS,
764
- columns,
765
- rows,
766
- // TODO(burdon): `col` vs. `column`?
767
- columnDefault: sheetColDefault,
768
- rowDefault: sheetRowDefault,
769
- frozen,
770
- onAxisResize: handleAxisResize,
771
- onSelect: handleSelect,
772
- onFocus: handleFocus,
773
- onWheelCapture: handleWheel,
774
- onKeyDown: handleKeyDown,
775
- onContextMenu: handleContextMenu,
776
- onClick: handleClick,
777
- overscroll: "trap",
778
- className: "[--dx-grid-base:var(--baseSurface)] [&_.dx-grid]:border-bs [&_.dx-grid]:border-be [&_.dx-grid]:absolute [&_.dx-grid]:inset-0 [&_.dx-grid]:border-separator",
779
- activeRefs,
780
- ref: setDxGrid
781
- }), /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
782
- modal: false,
783
- open: !!contextMenuOpen,
784
- onOpenChange: (nextOpen) => setContextMenuOpen(nextOpen ? inertPosition : null)
785
- }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
786
- virtualRef: contextMenuAnchorRef
787
- }), /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
788
- side: contextMenuAxis === "col" ? "bottom" : "right",
789
- sideOffset: 4,
790
- collisionPadding: 8
791
- }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
792
- onClick: () => handleAxisMenuAction("insert-before"),
793
- "data-testid": `grid.${contextMenuAxis}.insert-before`
794
- }, /* @__PURE__ */ React4.createElement(Icon, {
795
- size: 5,
796
- icon: contextMenuAxis === "col" ? "ph--columns-plus-left--regular" : "ph--rows-plus-top--regular"
797
- }), /* @__PURE__ */ React4.createElement("span", null, t(`add ${contextMenuAxis} before label`))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
798
- onClick: () => handleAxisMenuAction("insert-after"),
799
- "data-testid": `grid.${contextMenuAxis}.insert-after`
800
- }, /* @__PURE__ */ React4.createElement(Icon, {
801
- size: 5,
802
- icon: contextMenuAxis === "col" ? "ph--columns-plus-right--regular" : "ph--rows-plus-bottom--regular"
803
- }), /* @__PURE__ */ React4.createElement("span", null, t(`add ${contextMenuAxis} after label`))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
804
- onClick: () => handleAxisMenuAction("drop"),
805
- "data-testid": `grid.${contextMenuAxis}.drop`
806
- }, /* @__PURE__ */ React4.createElement(Icon, {
807
- size: 5,
808
- icon: "ph--backspace--regular"
809
- }), /* @__PURE__ */ React4.createElement("span", null, t(`delete ${contextMenuAxis} label`)))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))))
810
- );
811
- };
812
-
813
- // packages/plugins/plugin-sheet/src/components/index.ts
814
- var SheetContainer = lazy(() => import("./SheetContainer-UV7RMPXS.mjs"));
815
-
816
- export {
817
- ComputeGraphContextProvider,
818
- useComputeGraph,
819
- completeCellRangeToThreadCursor,
820
- useSheetContext,
821
- SheetProvider,
822
- GridSheet,
823
- RangeList,
824
- SheetContainer
825
- };
826
- //# sourceMappingURL=chunk-TN7LTDHU.mjs.map