@dxos/react-ui-table 0.8.2 → 0.8.3-main.7f5a14c
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.
- package/dist/lib/browser/index.mjs +26 -26
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +10 -10
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +26 -26
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/Table/CreateRefPanel.d.ts.map +1 -1
- package/dist/types/src/components/Table/Table.stories.d.ts.map +1 -1
- package/dist/types/src/components/TableCellEditor/FormCellEditor.d.ts.map +1 -1
- package/package.json +34 -33
- package/src/components/Table/ColumnSettings.tsx +11 -11
- package/src/components/Table/CreateRefPanel.tsx +5 -3
- package/src/components/Table/Table.stories.tsx +6 -11
- package/src/components/Table/relations.stories.tsx +1 -1
- package/src/components/TableCellEditor/FormCellEditor.tsx +3 -1
- package/src/model/table-presentation.ts +2 -2
|
@@ -91,7 +91,7 @@ var ColumnActionsMenu = ({ model, modals }) => {
|
|
|
91
91
|
// packages/ui/react-ui-table/src/components/Table/ColumnSettings.tsx
|
|
92
92
|
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
93
93
|
import React2, { useCallback, useEffect, useMemo, useState } from "react";
|
|
94
|
-
import {
|
|
94
|
+
import { Popover } from "@dxos/react-ui";
|
|
95
95
|
import { FieldEditor } from "@dxos/react-ui-form";
|
|
96
96
|
var ColumnSettings = ({ model, modals, onNewColumn }) => {
|
|
97
97
|
var _effect = _useSignals2();
|
|
@@ -142,21 +142,21 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
|
|
|
142
142
|
if (!model?.view || !model.projection || !field) {
|
|
143
143
|
return null;
|
|
144
144
|
}
|
|
145
|
-
return /* @__PURE__ */ React2.createElement(
|
|
145
|
+
return /* @__PURE__ */ React2.createElement(Popover.Root, {
|
|
146
146
|
modal: false,
|
|
147
147
|
open: state?.type === "columnSettings"
|
|
148
|
-
}, /* @__PURE__ */ React2.createElement(
|
|
148
|
+
}, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
|
|
149
149
|
virtualRef: modals.trigger
|
|
150
|
-
}), /* @__PURE__ */ React2.createElement(
|
|
150
|
+
}), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
|
|
151
151
|
classNames: "md:is-64"
|
|
152
|
-
}, /* @__PURE__ */ React2.createElement(
|
|
152
|
+
}, /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(FieldEditor, {
|
|
153
153
|
view: model.view,
|
|
154
154
|
projection: model.projection,
|
|
155
155
|
field,
|
|
156
156
|
registry: space?.db.schemaRegistry,
|
|
157
157
|
onSave: handleSave,
|
|
158
158
|
onCancel: handleCancel
|
|
159
|
-
})), /* @__PURE__ */ React2.createElement(
|
|
159
|
+
})), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))));
|
|
160
160
|
} finally {
|
|
161
161
|
_effect.f();
|
|
162
162
|
}
|
|
@@ -167,7 +167,7 @@ import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking"
|
|
|
167
167
|
import { Schema } from "effect";
|
|
168
168
|
import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
|
|
169
169
|
import { live } from "@dxos/react-client/echo";
|
|
170
|
-
import { Popover } from "@dxos/react-ui";
|
|
170
|
+
import { Popover as Popover2 } from "@dxos/react-ui";
|
|
171
171
|
import { Form } from "@dxos/react-ui-form";
|
|
172
172
|
import { useGridContext } from "@dxos/react-ui-grid";
|
|
173
173
|
var CreateRefPanel = ({ model, modals, __gridScope }) => {
|
|
@@ -218,7 +218,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
|
|
|
218
218
|
if (!model?.view || !model.projection) {
|
|
219
219
|
return null;
|
|
220
220
|
}
|
|
221
|
-
return /* @__PURE__ */ React3.createElement(
|
|
221
|
+
return /* @__PURE__ */ React3.createElement(Popover2.Root, {
|
|
222
222
|
modal: false,
|
|
223
223
|
open: state?.type === "createRefPanel" && !!schema,
|
|
224
224
|
onOpenChange: (nextOpen) => {
|
|
@@ -226,17 +226,17 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
|
|
|
226
226
|
return modals.close();
|
|
227
227
|
}
|
|
228
228
|
}
|
|
229
|
-
}, /* @__PURE__ */ React3.createElement(
|
|
229
|
+
}, /* @__PURE__ */ React3.createElement(Popover2.VirtualTrigger, {
|
|
230
230
|
virtualRef: modals.trigger
|
|
231
|
-
}), /* @__PURE__ */ React3.createElement(
|
|
231
|
+
}), /* @__PURE__ */ React3.createElement(Popover2.Portal, null, /* @__PURE__ */ React3.createElement(Popover2.Content, {
|
|
232
232
|
classNames: "md:is-64",
|
|
233
233
|
"data-grid": gridId
|
|
234
|
-
}, state?.type === "createRefPanel" && schema && /* @__PURE__ */ React3.createElement(Form, {
|
|
234
|
+
}, /* @__PURE__ */ React3.createElement(Popover2.Viewport, null, state?.type === "createRefPanel" && schema && /* @__PURE__ */ React3.createElement(Form, {
|
|
235
235
|
schema,
|
|
236
236
|
values: state.initialValues ?? {},
|
|
237
237
|
onSave: handleSave,
|
|
238
238
|
onCancel: handleCancel
|
|
239
|
-
}), /* @__PURE__ */ React3.createElement(
|
|
239
|
+
})), /* @__PURE__ */ React3.createElement(Popover2.Arrow, null))));
|
|
240
240
|
} finally {
|
|
241
241
|
_effect.f();
|
|
242
242
|
}
|
|
@@ -245,7 +245,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
|
|
|
245
245
|
// packages/ui/react-ui-table/src/components/Table/RowActionsMenu.tsx
|
|
246
246
|
import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
|
|
247
247
|
import React4 from "react";
|
|
248
|
-
import { DropdownMenu as
|
|
248
|
+
import { DropdownMenu as DropdownMenu2, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
249
249
|
var RowActionsMenu = ({ model, modals }) => {
|
|
250
250
|
var _effect = _useSignals4();
|
|
251
251
|
try {
|
|
@@ -255,23 +255,23 @@ var RowActionsMenu = ({ model, modals }) => {
|
|
|
255
255
|
if (state?.type !== "row") {
|
|
256
256
|
return null;
|
|
257
257
|
}
|
|
258
|
-
return /* @__PURE__ */ React4.createElement(
|
|
258
|
+
return /* @__PURE__ */ React4.createElement(DropdownMenu2.Root, {
|
|
259
259
|
modal: false,
|
|
260
260
|
open: true,
|
|
261
261
|
onOpenChange: modals.close
|
|
262
|
-
}, /* @__PURE__ */ React4.createElement(
|
|
262
|
+
}, /* @__PURE__ */ React4.createElement(DropdownMenu2.VirtualTrigger, {
|
|
263
263
|
virtualRef: modals.trigger
|
|
264
|
-
}), /* @__PURE__ */ React4.createElement(
|
|
264
|
+
}), /* @__PURE__ */ React4.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu2.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React4.createElement(DropdownMenu2.Item, {
|
|
265
265
|
"data-testid": "row-menu-delete",
|
|
266
266
|
onClick: () => model.deleteRow(state.rowIndex)
|
|
267
|
-
}, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React4.createElement(
|
|
267
|
+
}, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React4.createElement(DropdownMenu2.Item, {
|
|
268
268
|
key: action.id,
|
|
269
269
|
"data-testid": `row-action-${action.id}`,
|
|
270
270
|
onClick: () => {
|
|
271
271
|
modals.close();
|
|
272
272
|
model.handleRowAction(action.id, state.rowIndex);
|
|
273
273
|
}
|
|
274
|
-
}, t(action.translationKey)))), /* @__PURE__ */ React4.createElement(
|
|
274
|
+
}, t(action.translationKey)))), /* @__PURE__ */ React4.createElement(DropdownMenu2.Arrow, null)));
|
|
275
275
|
} finally {
|
|
276
276
|
_effect.f();
|
|
277
277
|
}
|
|
@@ -1305,7 +1305,7 @@ var ModalController = class {
|
|
|
1305
1305
|
// packages/ui/react-ui-table/src/model/table-presentation.ts
|
|
1306
1306
|
import { signal as signal5 } from "@preact/signals-core";
|
|
1307
1307
|
import { isNotNullable } from "effect/Predicate";
|
|
1308
|
-
import { FormatEnum as FormatEnum4,
|
|
1308
|
+
import { FormatEnum as FormatEnum4, getObjectDXN, getValue as getValue3, TypeEnum as TypeEnum3 } from "@dxos/echo-schema";
|
|
1309
1309
|
import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
|
|
1310
1310
|
import { toPlaneCellIndex } from "@dxos/react-ui-grid";
|
|
1311
1311
|
import { mx } from "@dxos/react-ui-theme";
|
|
@@ -1437,7 +1437,7 @@ var TablePresentation = class {
|
|
|
1437
1437
|
if (props.format === FormatEnum4.Ref && props.referenceSchema) {
|
|
1438
1438
|
const targetObj = getValue3(obj, field.path)?.target;
|
|
1439
1439
|
if (targetObj) {
|
|
1440
|
-
const dxn =
|
|
1440
|
+
const dxn = getObjectDXN(targetObj)?.toString();
|
|
1441
1441
|
cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
|
|
1442
1442
|
}
|
|
1443
1443
|
}
|
|
@@ -1644,7 +1644,7 @@ import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking"
|
|
|
1644
1644
|
import React5, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef } from "react";
|
|
1645
1645
|
import { getSnapshot } from "@dxos/echo-schema";
|
|
1646
1646
|
import { invariant as invariant2 } from "@dxos/invariant";
|
|
1647
|
-
import { Popover as
|
|
1647
|
+
import { Popover as Popover3 } from "@dxos/react-ui";
|
|
1648
1648
|
import { Form as Form2 } from "@dxos/react-ui-form";
|
|
1649
1649
|
import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
|
|
1650
1650
|
import { getDeep, setDeep } from "@dxos/util";
|
|
@@ -1722,19 +1722,19 @@ var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
|
|
|
1722
1722
|
if (!editing) {
|
|
1723
1723
|
return null;
|
|
1724
1724
|
}
|
|
1725
|
-
return /* @__PURE__ */ React5.createElement(
|
|
1725
|
+
return /* @__PURE__ */ React5.createElement(Popover3.Root, {
|
|
1726
1726
|
open: editing !== null,
|
|
1727
1727
|
onOpenChange: handleOpenChange
|
|
1728
|
-
}, /* @__PURE__ */ React5.createElement(
|
|
1728
|
+
}, /* @__PURE__ */ React5.createElement(Popover3.VirtualTrigger, {
|
|
1729
1729
|
virtualRef: cellRef
|
|
1730
|
-
}), /* @__PURE__ */ React5.createElement(
|
|
1730
|
+
}), /* @__PURE__ */ React5.createElement(Popover3.Content, {
|
|
1731
1731
|
tabIndex: -1,
|
|
1732
1732
|
classNames: "popover-card-width"
|
|
1733
|
-
}, /* @__PURE__ */ React5.createElement(
|
|
1733
|
+
}, /* @__PURE__ */ React5.createElement(Popover3.Arrow, null), /* @__PURE__ */ React5.createElement(Popover3.Viewport, null, /* @__PURE__ */ React5.createElement(Form2, {
|
|
1734
1734
|
values: formValues,
|
|
1735
1735
|
schema: narrowedSchema,
|
|
1736
1736
|
onSave: handleSave
|
|
1737
|
-
})));
|
|
1737
|
+
}))));
|
|
1738
1738
|
} finally {
|
|
1739
1739
|
_effect.f();
|
|
1740
1740
|
}
|