@ai-matrx/design-system 0.21.2 → 0.21.4
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/CHANGELOG.md +6 -0
- package/dist/content-transfer.cjs +20 -6
- package/dist/content-transfer.cjs.map +1 -1
- package/dist/content-transfer.d.cts +38 -4
- package/dist/content-transfer.d.ts +38 -4
- package/dist/content-transfer.js +20 -6
- package/dist/content-transfer.js.map +1 -1
- package/dist/data-table/copy-helpers.d.cts +4 -3
- package/dist/data-table/copy-helpers.d.ts +4 -3
- package/dist/data-table/copy-types.cjs.map +1 -1
- package/dist/data-table/copy-types.d.cts +7 -2
- package/dist/data-table/copy-types.d.ts +7 -2
- package/dist/data-table/data-row-inspector.cjs +26 -6
- package/dist/data-table/data-row-inspector.cjs.map +1 -1
- package/dist/data-table/data-row-inspector.js +26 -6
- package/dist/data-table/data-row-inspector.js.map +1 -1
- package/dist/data-table/data-row-window.cjs +26 -6
- package/dist/data-table/data-row-window.cjs.map +1 -1
- package/dist/data-table/data-row-window.js +26 -6
- package/dist/data-table/data-row-window.js.map +1 -1
- package/dist/data-table/filter-engine.d.cts +4 -3
- package/dist/data-table/filter-engine.d.ts +4 -3
- package/dist/data-table/host.cjs +23 -1
- package/dist/data-table/host.cjs.map +1 -1
- package/dist/data-table/host.d.cts +33 -4
- package/dist/data-table/host.d.ts +33 -4
- package/dist/data-table/host.js +23 -1
- package/dist/data-table/host.js.map +1 -1
- package/dist/data-table/index.cjs +890 -751
- package/dist/data-table/index.cjs.map +1 -1
- package/dist/data-table/index.d.cts +16 -6
- package/dist/data-table/index.d.ts +16 -6
- package/dist/data-table/index.js +846 -707
- package/dist/data-table/index.js.map +1 -1
- package/dist/data-table/infer-filter.d.cts +4 -3
- package/dist/data-table/infer-filter.d.ts +4 -3
- package/dist/data-table/layered-filters.d.cts +4 -3
- package/dist/data-table/layered-filters.d.ts +4 -3
- package/dist/data-table/pagination.cjs +6 -0
- package/dist/data-table/pagination.cjs.map +1 -1
- package/dist/data-table/pagination.js +6 -0
- package/dist/data-table/pagination.js.map +1 -1
- package/dist/data-table/query-control.d.cts +4 -3
- package/dist/data-table/query-control.d.ts +4 -3
- package/dist/data-table/types.cjs.map +1 -1
- package/dist/data-table/types.d.cts +3 -2
- package/dist/data-table/types.d.ts +3 -2
- package/dist/data-table/url-state.d.cts +4 -3
- package/dist/data-table/url-state.d.ts +4 -3
- package/dist/data-table/uuid-cell.cjs +6 -0
- package/dist/data-table/uuid-cell.cjs.map +1 -1
- package/dist/data-table/uuid-cell.js +6 -0
- package/dist/data-table/uuid-cell.js.map +1 -1
- package/dist/data-table/xlsx.d.cts +4 -3
- package/dist/data-table/xlsx.d.ts +4 -3
- package/dist/{types-DnnvjGV4.d.ts → types-CbGNfo7r.d.ts} +13 -2
- package/dist/{types-Bt-0UhEw.d.cts → types-DRusLYrU.d.cts} +13 -2
- package/package.json +1 -1
- package/dist/extensions-DCHtNwG3.d.cts +0 -32
- package/dist/extensions-DCHtNwG3.d.ts +0 -32
|
@@ -36,6 +36,7 @@ __export(data_table_exports, {
|
|
|
36
36
|
GenericTablePagination: () => GenericTablePagination,
|
|
37
37
|
MatrxDataTable: () => MatrxDataTable,
|
|
38
38
|
MatrxDataTableProvider: () => MatrxDataTableProvider,
|
|
39
|
+
MatrxTableRowAlchemyProvider: () => MatrxTableRowAlchemyProvider,
|
|
39
40
|
MatrxUuidCell: () => MatrxUuidCell,
|
|
40
41
|
SavedViewsControl: () => SavedViewsControl,
|
|
41
42
|
TableTitleRow: () => TableTitleRow,
|
|
@@ -54,13 +55,14 @@ __export(data_table_exports, {
|
|
|
54
55
|
shortUuid: () => shortUuid,
|
|
55
56
|
tableUrlParamPrefix: () => tableUrlParamPrefix,
|
|
56
57
|
useMatrxDataTableHost: () => useMatrxDataTableHost,
|
|
58
|
+
useMatrxTableRowAlchemy: () => useMatrxTableRowAlchemy,
|
|
57
59
|
useScrollPagination: () => useScrollPagination,
|
|
58
60
|
useTableUrlState: () => useTableUrlState
|
|
59
61
|
});
|
|
60
62
|
module.exports = __toCommonJS(data_table_exports);
|
|
61
63
|
|
|
62
64
|
// src/data-table/MatrxDataTable.tsx
|
|
63
|
-
var
|
|
65
|
+
var import_react20 = require("react");
|
|
64
66
|
var import_core3 = require("@dnd-kit/core");
|
|
65
67
|
|
|
66
68
|
// src/data-table/icons.tsx
|
|
@@ -1914,6 +1916,21 @@ function MatrxDataTableProvider({ value, children }) {
|
|
|
1914
1916
|
function useMatrxDataTableHost() {
|
|
1915
1917
|
return (0, import_react5.useContext)(HostContext);
|
|
1916
1918
|
}
|
|
1919
|
+
var ROW_ALCHEMY_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.table-row-alchemy-context");
|
|
1920
|
+
var rowAlchemyRegistry = globalThis;
|
|
1921
|
+
var RowAlchemyContext = rowAlchemyRegistry[ROW_ALCHEMY_SLOT] ??= (0, import_react5.createContext)(null);
|
|
1922
|
+
function MatrxTableRowAlchemyScope({ value, children }) {
|
|
1923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RowAlchemyContext.Provider, { value, children });
|
|
1924
|
+
}
|
|
1925
|
+
function useMatrxTableRowAlchemy() {
|
|
1926
|
+
return (0, import_react5.useContext)(RowAlchemyContext);
|
|
1927
|
+
}
|
|
1928
|
+
var ROW_CONTROLS_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.table-row-controls-context");
|
|
1929
|
+
var rowControlsRegistry = globalThis;
|
|
1930
|
+
var RowControlsContext = rowControlsRegistry[ROW_CONTROLS_SLOT] ??= (0, import_react5.createContext)(null);
|
|
1931
|
+
function MatrxTableRowControlsScope({ value, children }) {
|
|
1932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RowControlsContext.Provider, { value, children });
|
|
1933
|
+
}
|
|
1917
1934
|
|
|
1918
1935
|
// src/data-table/useTableNotice.tsx
|
|
1919
1936
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
@@ -3216,8 +3233,9 @@ function ContentTransferMenu(props) {
|
|
|
3216
3233
|
const identityKey = props.capabilities?.identityKey ?? inherited.identityKey;
|
|
3217
3234
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ContentTransferMenuSession, { ...props }, identityKey ?? "anonymous");
|
|
3218
3235
|
}
|
|
3219
|
-
function ContentTransferMenuSession({ references = [], referenceActions = [], source, surface, label, projection, sections, preferences, table, formatSources, sourceFormats = true, variants = EMPTY_VARIANTS, actions = [], capabilities: local, disabled, enabled = true, className, stopPropagation = true, hide = [], controllerRef, icon = "portal", triggerVariant = "transparent", triggerSize = "default" }) {
|
|
3236
|
+
function ContentTransferMenuSession({ references = [], referenceActions = [], source, surface, label, projection, sections, preferences, table, formatSources, sourceFormats = true, variants = EMPTY_VARIANTS, actions = [], capabilities: local, disabled, enabled = true, className, stopPropagation = true, hide = [], controllerRef, icon = "portal", triggerVariant = "transparent", triggerSize = "default", triggerHidden = false }) {
|
|
3220
3237
|
const triggerRef = React14.useRef(null);
|
|
3238
|
+
const restoreFocusRef = React14.useRef(null);
|
|
3221
3239
|
const inherited = React14.useContext(CapabilityContext);
|
|
3222
3240
|
const nearestSurface = React14.useContext(SurfaceContext);
|
|
3223
3241
|
const fence = useFence();
|
|
@@ -3467,13 +3485,21 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
|
|
|
3467
3485
|
);
|
|
3468
3486
|
React14.useImperativeHandle(controllerRef, () => ({
|
|
3469
3487
|
focusTrigger: () => triggerRef.current?.focus(),
|
|
3488
|
+
preparePrimary: async (options) => {
|
|
3489
|
+
if (!enabled) throw new Error("Alchemy is not enabled for this record.");
|
|
3490
|
+
if (disabled) throw new Error("Alchemy is disabled for this record.");
|
|
3491
|
+
if (hide.includes("prepare")) throw new Error("Alchemy preparation is unavailable for this record.");
|
|
3492
|
+
if (!primary) throw new Error("Alchemy has no source to prepare.");
|
|
3493
|
+
restoreFocusRef.current = options?.restoreFocus ?? null;
|
|
3494
|
+
await openWorkspace(primaryWorkspaceKey, { source: primary, label: sourceLabel });
|
|
3495
|
+
},
|
|
3470
3496
|
prepare: async (requestedSource, options) => {
|
|
3471
3497
|
const requestedLabel = options?.label ?? ("label" in requestedSource ? requestedSource.label : "content");
|
|
3472
3498
|
const requestedKey = `controller:${options?.id ?? "source"}:${materialIdentity(requestedSource)}`;
|
|
3473
3499
|
externalWorkspaceKeys.current.add(requestedKey);
|
|
3474
3500
|
await openWorkspace(requestedKey, { source: requestedSource, label: requestedLabel });
|
|
3475
3501
|
}
|
|
3476
|
-
}), [openWorkspace]);
|
|
3502
|
+
}), [disabled, enabled, hide, openWorkspace, primary, primaryWorkspaceKey, sourceLabel]);
|
|
3477
3503
|
const runAction = React14.useCallback(async (action) => {
|
|
3478
3504
|
const { controller, id } = fence.begin();
|
|
3479
3505
|
try {
|
|
@@ -3556,7 +3582,7 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
|
|
|
3556
3582
|
] }, id);
|
|
3557
3583
|
};
|
|
3558
3584
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cn("matrx-alchemy", className), onClick: stopPropagation ? (event) => event.stopPropagation() : void 0, children: [
|
|
3559
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Popover, { open: paletteOpen, onOpenChange: (open) => {
|
|
3585
|
+
!triggerHidden ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Popover, { open: paletteOpen, onOpenChange: (open) => {
|
|
3560
3586
|
setPaletteOpen(open);
|
|
3561
3587
|
if (open) {
|
|
3562
3588
|
setMode("copy");
|
|
@@ -3665,13 +3691,13 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
|
|
|
3665
3691
|
] }, group) : null;
|
|
3666
3692
|
})
|
|
3667
3693
|
] })
|
|
3668
|
-
] }),
|
|
3694
|
+
] }) : null,
|
|
3669
3695
|
notice && triggerRef.current ? (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "matrx-alchemy-feedback", children: [
|
|
3670
3696
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { role: "status", children: notice }),
|
|
3671
3697
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReceiptLink, { target: receiptTarget }),
|
|
3672
3698
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", "aria-label": "Dismiss Alchemy feedback", onClick: () => setNotice(null), children: "\xD7" })
|
|
3673
3699
|
] }), triggerRef.current.ownerDocument.body) : null,
|
|
3674
|
-
Object.values(workspaces).map((saved) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PreparationWorkspace, { restoreFocus: () => triggerRef.current?.focus(), open: workspaceOpen && workspaceKey === saved.key, state: saved, scopes, scopeLabels: table?.scopeLabels, onClose: () => setWorkspaceOpen(false), onChange: (next) => setWorkspaces((current) => ({ ...current, [saved.key]: next })), transport, adapters, actions: preparedActions, captureScope: workspaceCaptures.current.get(saved.key) ?? capturePrimary, ...ai ? { ai } : {}, onOutcome: report }, saved.key)),
|
|
3700
|
+
Object.values(workspaces).map((saved) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PreparationWorkspace, { restoreFocus: () => restoreFocusRef.current?.() ?? triggerRef.current?.focus(), open: workspaceOpen && workspaceKey === saved.key, state: saved, scopes, scopeLabels: table?.scopeLabels, onClose: () => setWorkspaceOpen(false), onChange: (next) => setWorkspaces((current) => ({ ...current, [saved.key]: next })), transport, adapters, actions: preparedActions, captureScope: workspaceCaptures.current.get(saved.key) ?? capturePrimary, ...ai ? { ai } : {}, onOutcome: report }, saved.key)),
|
|
3675
3701
|
emailReview
|
|
3676
3702
|
] });
|
|
3677
3703
|
}
|
|
@@ -4478,7 +4504,12 @@ function MatrxCopyMenuSession(props) {
|
|
|
4478
4504
|
...props.referenceActions ? { referenceActions: props.referenceActions } : {},
|
|
4479
4505
|
...props.icon !== void 0 ? { icon: props.icon } : {},
|
|
4480
4506
|
...props.triggerVariant !== void 0 ? { triggerVariant: props.triggerVariant } : {},
|
|
4481
|
-
controllerRef:
|
|
4507
|
+
controllerRef: (value) => {
|
|
4508
|
+
controller.current = value;
|
|
4509
|
+
if (typeof props.controllerRef === "function") props.controllerRef(value);
|
|
4510
|
+
else if (props.controllerRef) props.controllerRef.current = value;
|
|
4511
|
+
},
|
|
4512
|
+
...props.triggerHidden ? { triggerHidden: true } : {},
|
|
4482
4513
|
label: props.label,
|
|
4483
4514
|
variants,
|
|
4484
4515
|
actions,
|
|
@@ -5560,16 +5591,52 @@ function useTableUrlState(options) {
|
|
|
5560
5591
|
// src/data-table/MatrxDataTable.tsx
|
|
5561
5592
|
var import_url_state3 = require("@ai-matrx/kit/url-state");
|
|
5562
5593
|
|
|
5563
|
-
// src/data-table/
|
|
5594
|
+
// src/data-table/RowAlchemyLauncher.tsx
|
|
5564
5595
|
var import_react12 = require("react");
|
|
5596
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
5597
|
+
function MatrxTableRowAlchemyProvider({ copy, placement, controls, children }) {
|
|
5598
|
+
const controller = (0, import_react12.useRef)(null);
|
|
5599
|
+
const { CopyControls } = useMatrxDataTableHost();
|
|
5600
|
+
const [active, setActive] = (0, import_react12.useState)(false);
|
|
5601
|
+
const [fallback, setFallback] = (0, import_react12.useState)(false);
|
|
5602
|
+
(0, import_react12.useEffect)(() => {
|
|
5603
|
+
if (placement !== "menu" || active) return;
|
|
5604
|
+
const timer = window.setTimeout(() => {
|
|
5605
|
+
if (!active) {
|
|
5606
|
+
console.warn("MatrxDataTable rowCopyPlacement='menu' requires an ItemMenu in rowActions; showing inline Alchemy instead.");
|
|
5607
|
+
setFallback(true);
|
|
5608
|
+
}
|
|
5609
|
+
}, 0);
|
|
5610
|
+
return () => window.clearTimeout(timer);
|
|
5611
|
+
}, [active, placement]);
|
|
5612
|
+
const value = {
|
|
5613
|
+
copy,
|
|
5614
|
+
controls,
|
|
5615
|
+
placement,
|
|
5616
|
+
ready: active,
|
|
5617
|
+
activate: () => setActive(true),
|
|
5618
|
+
prepare: async (restoreFocus) => {
|
|
5619
|
+
if (copy.disabled) throw new Error("Alchemy is disabled for this record.");
|
|
5620
|
+
if (!controller.current) throw new Error("Alchemy is unavailable because its launcher did not mount.");
|
|
5621
|
+
await controller.current.preparePrimary(restoreFocus ? { restoreFocus } : void 0);
|
|
5622
|
+
}
|
|
5623
|
+
};
|
|
5624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(MatrxTableRowAlchemyScope, { value, children: [
|
|
5625
|
+
active || fallback ? CopyControls ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CopyControls, { ...copy, triggerHidden: active, controllerRef: controller }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MatrxCopyMenu, { ...copy, triggerHidden: active, controllerRef: controller }) : null,
|
|
5626
|
+
children
|
|
5627
|
+
] });
|
|
5628
|
+
}
|
|
5629
|
+
|
|
5630
|
+
// src/data-table/ColumnHeaderCell.tsx
|
|
5631
|
+
var import_react13 = require("react");
|
|
5565
5632
|
var import_core = require("@dnd-kit/core");
|
|
5566
5633
|
|
|
5567
5634
|
// src/command.tsx
|
|
5568
5635
|
var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
5569
5636
|
var import_cmdk = require("cmdk");
|
|
5570
5637
|
var React16 = __toESM(require("react"), 1);
|
|
5571
|
-
var
|
|
5572
|
-
var Command = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5638
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
5639
|
+
var Command = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5573
5640
|
import_cmdk.Command,
|
|
5574
5641
|
{
|
|
5575
5642
|
ref,
|
|
@@ -5588,8 +5655,8 @@ var CommandDialogContent = React16.forwardRef(({ className, children, container,
|
|
|
5588
5655
|
const isMobile = useIsMobile();
|
|
5589
5656
|
const isModal = useRadixDialogModal();
|
|
5590
5657
|
const portalContainer = usePortalContainer(container);
|
|
5591
|
-
return /* @__PURE__ */ (0,
|
|
5592
|
-
isModal ? /* @__PURE__ */ (0,
|
|
5658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DialogPrimitive2.Portal, { container: portalContainer, children: [
|
|
5659
|
+
isModal ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5593
5660
|
DialogPrimitive2.Overlay,
|
|
5594
5661
|
{
|
|
5595
5662
|
className: cn(
|
|
@@ -5598,7 +5665,7 @@ var CommandDialogContent = React16.forwardRef(({ className, children, container,
|
|
|
5598
5665
|
)
|
|
5599
5666
|
}
|
|
5600
5667
|
) : null,
|
|
5601
|
-
/* @__PURE__ */ (0,
|
|
5668
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
5602
5669
|
DialogPrimitive2.Content,
|
|
5603
5670
|
{
|
|
5604
5671
|
ref,
|
|
@@ -5614,9 +5681,9 @@ var CommandDialogContent = React16.forwardRef(({ className, children, container,
|
|
|
5614
5681
|
...props,
|
|
5615
5682
|
children: [
|
|
5616
5683
|
children,
|
|
5617
|
-
/* @__PURE__ */ (0,
|
|
5618
|
-
/* @__PURE__ */ (0,
|
|
5619
|
-
/* @__PURE__ */ (0,
|
|
5684
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DialogPrimitive2.Close, { className: "absolute right-2 top-4 flex h-10 w-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4", children: [
|
|
5685
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(XIcon, { className: "h-4 w-4" }),
|
|
5686
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "sr-only", children: "Close" })
|
|
5620
5687
|
] })
|
|
5621
5688
|
]
|
|
5622
5689
|
}
|
|
@@ -5624,9 +5691,9 @@ var CommandDialogContent = React16.forwardRef(({ className, children, container,
|
|
|
5624
5691
|
] });
|
|
5625
5692
|
});
|
|
5626
5693
|
CommandDialogContent.displayName = "CommandDialogContent";
|
|
5627
|
-
var CommandInput = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5628
|
-
/* @__PURE__ */ (0,
|
|
5629
|
-
/* @__PURE__ */ (0,
|
|
5694
|
+
var CommandInput = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
|
|
5695
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
|
|
5696
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5630
5697
|
import_cmdk.Command.Input,
|
|
5631
5698
|
{
|
|
5632
5699
|
ref,
|
|
@@ -5639,7 +5706,7 @@ var CommandInput = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
5639
5706
|
)
|
|
5640
5707
|
] }));
|
|
5641
5708
|
CommandInput.displayName = import_cmdk.Command.Input.displayName;
|
|
5642
|
-
var CommandList = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5709
|
+
var CommandList = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5643
5710
|
import_cmdk.Command.List,
|
|
5644
5711
|
{
|
|
5645
5712
|
ref,
|
|
@@ -5648,7 +5715,7 @@ var CommandList = React16.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
5648
5715
|
}
|
|
5649
5716
|
));
|
|
5650
5717
|
CommandList.displayName = import_cmdk.Command.List.displayName;
|
|
5651
|
-
var CommandEmpty = React16.forwardRef((props, ref) => /* @__PURE__ */ (0,
|
|
5718
|
+
var CommandEmpty = React16.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5652
5719
|
import_cmdk.Command.Empty,
|
|
5653
5720
|
{
|
|
5654
5721
|
ref,
|
|
@@ -5657,7 +5724,7 @@ var CommandEmpty = React16.forwardRef((props, ref) => /* @__PURE__ */ (0, import
|
|
|
5657
5724
|
}
|
|
5658
5725
|
));
|
|
5659
5726
|
CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
|
|
5660
|
-
var CommandGroup = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5727
|
+
var CommandGroup = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5661
5728
|
import_cmdk.Command.Group,
|
|
5662
5729
|
{
|
|
5663
5730
|
ref,
|
|
@@ -5669,7 +5736,7 @@ var CommandGroup = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
5669
5736
|
}
|
|
5670
5737
|
));
|
|
5671
5738
|
CommandGroup.displayName = import_cmdk.Command.Group.displayName;
|
|
5672
|
-
var CommandSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5739
|
+
var CommandSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5673
5740
|
import_cmdk.Command.Separator,
|
|
5674
5741
|
{
|
|
5675
5742
|
ref,
|
|
@@ -5678,7 +5745,7 @@ var CommandSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
5678
5745
|
}
|
|
5679
5746
|
));
|
|
5680
5747
|
CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
|
|
5681
|
-
var CommandItem = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5748
|
+
var CommandItem = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5682
5749
|
import_cmdk.Command.Item,
|
|
5683
5750
|
{
|
|
5684
5751
|
ref,
|
|
@@ -5694,7 +5761,7 @@ var CommandShortcut = ({
|
|
|
5694
5761
|
className,
|
|
5695
5762
|
...props
|
|
5696
5763
|
}) => {
|
|
5697
|
-
return /* @__PURE__ */ (0,
|
|
5764
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
5698
5765
|
"span",
|
|
5699
5766
|
{
|
|
5700
5767
|
className: cn(
|
|
@@ -5708,10 +5775,10 @@ var CommandShortcut = ({
|
|
|
5708
5775
|
CommandShortcut.displayName = "CommandShortcut";
|
|
5709
5776
|
|
|
5710
5777
|
// src/data-table/ColumnHeaderCell.tsx
|
|
5711
|
-
var
|
|
5712
|
-
var HeaderButton = (0,
|
|
5778
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
5779
|
+
var HeaderButton = (0, import_react13.forwardRef)(({ dragDescription, "aria-describedby": tooltipDescription, ...props }, ref) => {
|
|
5713
5780
|
const descriptions = [tooltipDescription, dragDescription].filter((value) => Boolean(value)).join(" ");
|
|
5714
|
-
return /* @__PURE__ */ (0,
|
|
5781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
5715
5782
|
"button",
|
|
5716
5783
|
{
|
|
5717
5784
|
ref,
|
|
@@ -5769,9 +5836,9 @@ function ColumnHeaderCell({
|
|
|
5769
5836
|
const reorderClass = reorderEnabled ? "touch-none cursor-grab active:cursor-grabbing" : void 0;
|
|
5770
5837
|
const filterActive = isColumnFilterActive(filterValue);
|
|
5771
5838
|
const deferredFilter = filterApplyLabel !== void 0 || filterShowCancel || filterFooterHint !== void 0;
|
|
5772
|
-
const [filterOpen, setFilterOpen] = (0,
|
|
5773
|
-
const [draftFilter, setDraftFilter] = (0,
|
|
5774
|
-
(0,
|
|
5839
|
+
const [filterOpen, setFilterOpen] = (0, import_react13.useState)(false);
|
|
5840
|
+
const [draftFilter, setDraftFilter] = (0, import_react13.useState)(filterValue);
|
|
5841
|
+
(0, import_react13.useEffect)(() => {
|
|
5775
5842
|
if (!filterOpen) setDraftFilter(filterValue);
|
|
5776
5843
|
}, [filterOpen, filterValue]);
|
|
5777
5844
|
const applyFilter = () => {
|
|
@@ -5791,7 +5858,7 @@ function ColumnHeaderCell({
|
|
|
5791
5858
|
else onFilterChange(next);
|
|
5792
5859
|
};
|
|
5793
5860
|
const menuLabel = labelText ? `Sort or filter ${labelText}` : "Sort or filter column";
|
|
5794
|
-
const menuContent = /* @__PURE__ */ (0,
|
|
5861
|
+
const menuContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
5795
5862
|
PopoverContent,
|
|
5796
5863
|
{
|
|
5797
5864
|
align: "start",
|
|
@@ -5808,9 +5875,9 @@ function ColumnHeaderCell({
|
|
|
5808
5875
|
input.focus();
|
|
5809
5876
|
},
|
|
5810
5877
|
children: [
|
|
5811
|
-
sortable ? /* @__PURE__ */ (0,
|
|
5812
|
-
/* @__PURE__ */ (0,
|
|
5813
|
-
/* @__PURE__ */ (0,
|
|
5878
|
+
sortable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
|
|
5879
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-0.5 pb-2", children: [
|
|
5880
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
5814
5881
|
Button,
|
|
5815
5882
|
{
|
|
5816
5883
|
variant: isSorted && sortDirection === "asc" ? "secondary" : "ghost",
|
|
@@ -5818,12 +5885,12 @@ function ColumnHeaderCell({
|
|
|
5818
5885
|
className: "h-8 justify-start gap-2 px-2 text-xs font-normal",
|
|
5819
5886
|
onClick: onSortAsc,
|
|
5820
5887
|
children: [
|
|
5821
|
-
/* @__PURE__ */ (0,
|
|
5888
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowUp, { className: "h-3.5 w-3.5" }),
|
|
5822
5889
|
"Sort ascending"
|
|
5823
5890
|
]
|
|
5824
5891
|
}
|
|
5825
5892
|
),
|
|
5826
|
-
/* @__PURE__ */ (0,
|
|
5893
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
5827
5894
|
Button,
|
|
5828
5895
|
{
|
|
5829
5896
|
variant: isSorted && sortDirection === "desc" ? "secondary" : "ghost",
|
|
@@ -5831,12 +5898,12 @@ function ColumnHeaderCell({
|
|
|
5831
5898
|
className: "h-8 justify-start gap-2 px-2 text-xs font-normal",
|
|
5832
5899
|
onClick: onSortDesc,
|
|
5833
5900
|
children: [
|
|
5834
|
-
/* @__PURE__ */ (0,
|
|
5901
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowDown, { className: "h-3.5 w-3.5" }),
|
|
5835
5902
|
"Sort descending"
|
|
5836
5903
|
]
|
|
5837
5904
|
}
|
|
5838
5905
|
),
|
|
5839
|
-
isSorted ? /* @__PURE__ */ (0,
|
|
5906
|
+
isSorted ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
5840
5907
|
Button,
|
|
5841
5908
|
{
|
|
5842
5909
|
variant: "ghost",
|
|
@@ -5844,15 +5911,15 @@ function ColumnHeaderCell({
|
|
|
5844
5911
|
className: "h-8 justify-start gap-2 px-2 text-xs font-normal text-muted-foreground",
|
|
5845
5912
|
onClick: onClearSort,
|
|
5846
5913
|
children: [
|
|
5847
|
-
/* @__PURE__ */ (0,
|
|
5914
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ListX, { className: "h-3.5 w-3.5" }),
|
|
5848
5915
|
"Clear sort"
|
|
5849
5916
|
]
|
|
5850
5917
|
}
|
|
5851
5918
|
) : null
|
|
5852
5919
|
] }),
|
|
5853
|
-
filterKind ? /* @__PURE__ */ (0,
|
|
5920
|
+
filterKind ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mb-2 h-px bg-border" }) : null
|
|
5854
5921
|
] }) : null,
|
|
5855
|
-
filterKind ? /* @__PURE__ */ (0,
|
|
5922
|
+
filterKind ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
5856
5923
|
FilterBody,
|
|
5857
5924
|
{
|
|
5858
5925
|
kind: filterKind,
|
|
@@ -5867,10 +5934,10 @@ function ColumnHeaderCell({
|
|
|
5867
5934
|
allowNullModes
|
|
5868
5935
|
}
|
|
5869
5936
|
) : null,
|
|
5870
|
-
filterKind && visibleFilter && allowNegation ? /* @__PURE__ */ (0,
|
|
5871
|
-
/* @__PURE__ */ (0,
|
|
5872
|
-
/* @__PURE__ */ (0,
|
|
5873
|
-
/* @__PURE__ */ (0,
|
|
5937
|
+
filterKind && visibleFilter && allowNegation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
|
|
5938
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Match mode" }),
|
|
5939
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-md border p-0.5", children: [
|
|
5940
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
5874
5941
|
"button",
|
|
5875
5942
|
{
|
|
5876
5943
|
type: "button",
|
|
@@ -5883,7 +5950,7 @@ function ColumnHeaderCell({
|
|
|
5883
5950
|
children: "Include"
|
|
5884
5951
|
}
|
|
5885
5952
|
),
|
|
5886
|
-
/* @__PURE__ */ (0,
|
|
5953
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
5887
5954
|
"button",
|
|
5888
5955
|
{
|
|
5889
5956
|
type: "button",
|
|
@@ -5898,11 +5965,11 @@ function ColumnHeaderCell({
|
|
|
5898
5965
|
)
|
|
5899
5966
|
] })
|
|
5900
5967
|
] }) : null,
|
|
5901
|
-
filterKind && deferredFilter ? /* @__PURE__ */ (0,
|
|
5902
|
-
filterFooterHint ? /* @__PURE__ */ (0,
|
|
5903
|
-
/* @__PURE__ */ (0,
|
|
5904
|
-
filterShowCancel ? /* @__PURE__ */ (0,
|
|
5905
|
-
/* @__PURE__ */ (0,
|
|
5968
|
+
filterKind && deferredFilter ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
|
|
5969
|
+
filterFooterHint ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mb-2 text-xs text-muted-foreground", children: filterFooterHint }) : null,
|
|
5970
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-end gap-2", children: [
|
|
5971
|
+
filterShowCancel ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { type: "button", variant: "ghost", size: "sm", onClick: cancelFilter, children: "Cancel" }) : null,
|
|
5972
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { type: "button", size: "sm", onClick: applyFilter, children: filterApplyLabel ?? "Apply" })
|
|
5906
5973
|
] })
|
|
5907
5974
|
] }) : null
|
|
5908
5975
|
]
|
|
@@ -5911,10 +5978,10 @@ function ColumnHeaderCell({
|
|
|
5911
5978
|
if (compact) {
|
|
5912
5979
|
if (!sortable && !filterKind) {
|
|
5913
5980
|
if (!reorderEnabled) {
|
|
5914
|
-
return /* @__PURE__ */ (0,
|
|
5981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("flex items-center justify-center", className), children: label });
|
|
5915
5982
|
}
|
|
5916
|
-
return /* @__PURE__ */ (0,
|
|
5917
|
-
/* @__PURE__ */ (0,
|
|
5983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
5984
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
5918
5985
|
HeaderButton,
|
|
5919
5986
|
{
|
|
5920
5987
|
type: "button",
|
|
@@ -5926,14 +5993,14 @@ function ColumnHeaderCell({
|
|
|
5926
5993
|
children: label
|
|
5927
5994
|
}
|
|
5928
5995
|
) }),
|
|
5929
|
-
/* @__PURE__ */ (0,
|
|
5996
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TooltipContent, { children: [
|
|
5930
5997
|
"Drag to reorder ",
|
|
5931
5998
|
reorderLabel,
|
|
5932
5999
|
"."
|
|
5933
6000
|
] })
|
|
5934
6001
|
] }) });
|
|
5935
6002
|
}
|
|
5936
|
-
return /* @__PURE__ */ (0,
|
|
6003
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
5937
6004
|
"div",
|
|
5938
6005
|
{
|
|
5939
6006
|
className: cn(
|
|
@@ -5941,9 +6008,9 @@ function ColumnHeaderCell({
|
|
|
5941
6008
|
align === "right" ? "justify-end" : "justify-center",
|
|
5942
6009
|
className
|
|
5943
6010
|
),
|
|
5944
|
-
children: /* @__PURE__ */ (0,
|
|
5945
|
-
/* @__PURE__ */ (0,
|
|
5946
|
-
/* @__PURE__ */ (0,
|
|
6011
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
|
|
6012
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
6013
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
5947
6014
|
HeaderButton,
|
|
5948
6015
|
{
|
|
5949
6016
|
type: "button",
|
|
@@ -5961,8 +6028,8 @@ function ColumnHeaderCell({
|
|
|
5961
6028
|
),
|
|
5962
6029
|
children: [
|
|
5963
6030
|
label,
|
|
5964
|
-
isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0,
|
|
5965
|
-
filterActive ? /* @__PURE__ */ (0,
|
|
6031
|
+
isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowUp, { className: "absolute -top-1 right-0 h-2 w-2 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowDown, { className: "absolute -top-1 right-0 h-2 w-2 text-primary" }) : null,
|
|
6032
|
+
filterActive ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
5966
6033
|
"span",
|
|
5967
6034
|
{
|
|
5968
6035
|
"aria-hidden": true,
|
|
@@ -5972,7 +6039,7 @@ function ColumnHeaderCell({
|
|
|
5972
6039
|
]
|
|
5973
6040
|
}
|
|
5974
6041
|
) }) }),
|
|
5975
|
-
/* @__PURE__ */ (0,
|
|
6042
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TooltipContent, { children: [
|
|
5976
6043
|
"Canonical Matrx table \xB7 ",
|
|
5977
6044
|
menuLabel
|
|
5978
6045
|
] })
|
|
@@ -5982,7 +6049,7 @@ function ColumnHeaderCell({
|
|
|
5982
6049
|
}
|
|
5983
6050
|
);
|
|
5984
6051
|
}
|
|
5985
|
-
return /* @__PURE__ */ (0,
|
|
6052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
5986
6053
|
"div",
|
|
5987
6054
|
{
|
|
5988
6055
|
className: cn(
|
|
@@ -5992,8 +6059,8 @@ function ColumnHeaderCell({
|
|
|
5992
6059
|
className
|
|
5993
6060
|
),
|
|
5994
6061
|
children: [
|
|
5995
|
-
sortable ? /* @__PURE__ */ (0,
|
|
5996
|
-
/* @__PURE__ */ (0,
|
|
6062
|
+
sortable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
6063
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
5997
6064
|
HeaderButton,
|
|
5998
6065
|
{
|
|
5999
6066
|
type: "button",
|
|
@@ -6005,14 +6072,14 @@ function ColumnHeaderCell({
|
|
|
6005
6072
|
isSorted ? "text-foreground" : "text-muted-foreground hover:text-foreground"
|
|
6006
6073
|
),
|
|
6007
6074
|
children: [
|
|
6008
|
-
/* @__PURE__ */ (0,
|
|
6009
|
-
isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0,
|
|
6075
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate", children: label }),
|
|
6076
|
+
isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowUp, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowDown, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowUpDown, { className: "h-3 w-3 shrink-0 opacity-40" })
|
|
6010
6077
|
]
|
|
6011
6078
|
}
|
|
6012
6079
|
) }),
|
|
6013
|
-
/* @__PURE__ */ (0,
|
|
6014
|
-
] }) : reorderEnabled ? /* @__PURE__ */ (0,
|
|
6015
|
-
/* @__PURE__ */ (0,
|
|
6080
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { children: reorderEnabled ? `Drag to reorder ${reorderLabel}.` : labelText ?? "Sort column" })
|
|
6081
|
+
] }) : reorderEnabled ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
6082
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6016
6083
|
HeaderButton,
|
|
6017
6084
|
{
|
|
6018
6085
|
type: "button",
|
|
@@ -6024,16 +6091,16 @@ function ColumnHeaderCell({
|
|
|
6024
6091
|
children: label
|
|
6025
6092
|
}
|
|
6026
6093
|
) }),
|
|
6027
|
-
/* @__PURE__ */ (0,
|
|
6094
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TooltipContent, { children: [
|
|
6028
6095
|
"Drag to reorder ",
|
|
6029
6096
|
reorderLabel,
|
|
6030
6097
|
"."
|
|
6031
6098
|
] })
|
|
6032
|
-
] }) : /* @__PURE__ */ (0,
|
|
6033
|
-
filterKind || sortable ? /* @__PURE__ */ (0,
|
|
6034
|
-
/* @__PURE__ */ (0,
|
|
6035
|
-
/* @__PURE__ */ (0,
|
|
6036
|
-
/* @__PURE__ */ (0,
|
|
6099
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
|
|
6100
|
+
filterKind || sortable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "inline-flex items-center", children: [
|
|
6101
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
|
|
6102
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
6103
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6037
6104
|
"button",
|
|
6038
6105
|
{
|
|
6039
6106
|
type: "button",
|
|
@@ -6045,15 +6112,15 @@ function ColumnHeaderCell({
|
|
|
6045
6112
|
"rounded p-0.5 transition-colors",
|
|
6046
6113
|
filterActive ? "text-primary hover:text-primary/80" : "text-muted-foreground/40 hover:text-muted-foreground"
|
|
6047
6114
|
),
|
|
6048
|
-
children: filterKind ? /* @__PURE__ */ (0,
|
|
6115
|
+
children: filterKind ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ListFilter, { className: cn("h-3 w-3", filterActive && "fill-primary/20") }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowUpDown, { className: "h-3 w-3" })
|
|
6049
6116
|
}
|
|
6050
6117
|
) }) }),
|
|
6051
|
-
/* @__PURE__ */ (0,
|
|
6118
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { children: menuLabel })
|
|
6052
6119
|
] }),
|
|
6053
6120
|
menuContent
|
|
6054
6121
|
] }),
|
|
6055
|
-
filterActive ? /* @__PURE__ */ (0,
|
|
6056
|
-
/* @__PURE__ */ (0,
|
|
6122
|
+
filterActive ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
6123
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6057
6124
|
"button",
|
|
6058
6125
|
{
|
|
6059
6126
|
type: "button",
|
|
@@ -6063,10 +6130,10 @@ function ColumnHeaderCell({
|
|
|
6063
6130
|
onFilterChange(void 0);
|
|
6064
6131
|
},
|
|
6065
6132
|
className: "rounded p-0.5 text-primary hover:bg-muted hover:text-foreground",
|
|
6066
|
-
children: /* @__PURE__ */ (0,
|
|
6133
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(X, { className: "h-3 w-3" })
|
|
6067
6134
|
}
|
|
6068
6135
|
) }),
|
|
6069
|
-
/* @__PURE__ */ (0,
|
|
6136
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { children: labelText ? `Clear ${labelText} filter` : "Clear this filter" })
|
|
6070
6137
|
] }) : null
|
|
6071
6138
|
] }) : null
|
|
6072
6139
|
]
|
|
@@ -6091,14 +6158,14 @@ function FilterBody({
|
|
|
6091
6158
|
onChange({ kind: "text", value: "", mode: next });
|
|
6092
6159
|
}
|
|
6093
6160
|
};
|
|
6094
|
-
return /* @__PURE__ */ (0,
|
|
6095
|
-
/* @__PURE__ */ (0,
|
|
6096
|
-
/* @__PURE__ */ (0,
|
|
6161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-1.5 px-1", children: [
|
|
6162
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Filter" }),
|
|
6163
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex gap-1", children: [
|
|
6097
6164
|
["contains", "Contains"],
|
|
6098
6165
|
["empty", "(empty)"],
|
|
6099
6166
|
["not_empty", "(not empty)"],
|
|
6100
6167
|
...allowNullModes ? [["null", "(null)"], ["not_null", "(not null)"]] : []
|
|
6101
|
-
].map(([m, label]) => /* @__PURE__ */ (0,
|
|
6168
|
+
].map(([m, label]) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6102
6169
|
"button",
|
|
6103
6170
|
{
|
|
6104
6171
|
type: "button",
|
|
@@ -6112,8 +6179,8 @@ function FilterBody({
|
|
|
6112
6179
|
},
|
|
6113
6180
|
m
|
|
6114
6181
|
)) }),
|
|
6115
|
-
mode === "contains" && /* @__PURE__ */ (0,
|
|
6116
|
-
/* @__PURE__ */ (0,
|
|
6182
|
+
mode === "contains" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
|
|
6183
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6117
6184
|
Input,
|
|
6118
6185
|
{
|
|
6119
6186
|
"data-matrx-filter-autofocus": true,
|
|
@@ -6126,14 +6193,14 @@ function FilterBody({
|
|
|
6126
6193
|
style: { fontSize: "16px" }
|
|
6127
6194
|
}
|
|
6128
6195
|
),
|
|
6129
|
-
text ? /* @__PURE__ */ (0,
|
|
6196
|
+
text ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6130
6197
|
"button",
|
|
6131
6198
|
{
|
|
6132
6199
|
type: "button",
|
|
6133
6200
|
"aria-label": "Clear filter text",
|
|
6134
6201
|
className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
|
|
6135
6202
|
onClick: () => onChange(void 0),
|
|
6136
|
-
children: /* @__PURE__ */ (0,
|
|
6203
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(X, { className: "h-3.5 w-3.5" })
|
|
6137
6204
|
}
|
|
6138
6205
|
) : null
|
|
6139
6206
|
] })
|
|
@@ -6141,7 +6208,7 @@ function FilterBody({
|
|
|
6141
6208
|
}
|
|
6142
6209
|
if (kind === "select") {
|
|
6143
6210
|
const selected = value?.kind === "select" ? value.values ?? (value.value && value.value !== "__all__" ? [value.value] : []) : [];
|
|
6144
|
-
return /* @__PURE__ */ (0,
|
|
6211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6145
6212
|
SearchableSelectFilter,
|
|
6146
6213
|
{
|
|
6147
6214
|
selected,
|
|
@@ -6153,9 +6220,9 @@ function FilterBody({
|
|
|
6153
6220
|
}
|
|
6154
6221
|
if (kind === "boolean") {
|
|
6155
6222
|
const current = value?.kind === "boolean" ? value.value : "__all__";
|
|
6156
|
-
return /* @__PURE__ */ (0,
|
|
6157
|
-
/* @__PURE__ */ (0,
|
|
6158
|
-
/* @__PURE__ */ (0,
|
|
6223
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-1.5 px-1", children: [
|
|
6224
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Filter" }),
|
|
6225
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
6159
6226
|
Select,
|
|
6160
6227
|
{
|
|
6161
6228
|
value: current === "__all__" ? "__all__" : current ? "true" : "false",
|
|
@@ -6164,18 +6231,18 @@ function FilterBody({
|
|
|
6164
6231
|
else onChange({ kind: "boolean", value: v === "true" });
|
|
6165
6232
|
},
|
|
6166
6233
|
children: [
|
|
6167
|
-
/* @__PURE__ */ (0,
|
|
6168
|
-
/* @__PURE__ */ (0,
|
|
6169
|
-
/* @__PURE__ */ (0,
|
|
6170
|
-
/* @__PURE__ */ (0,
|
|
6171
|
-
/* @__PURE__ */ (0,
|
|
6234
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectValue, {}) }),
|
|
6235
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(SelectContent, { children: [
|
|
6236
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "__all__", children: "All" }),
|
|
6237
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "true", children: "Yes" }),
|
|
6238
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "false", children: "No" })
|
|
6172
6239
|
] })
|
|
6173
6240
|
]
|
|
6174
6241
|
}
|
|
6175
6242
|
)
|
|
6176
6243
|
] });
|
|
6177
6244
|
}
|
|
6178
|
-
return /* @__PURE__ */ (0,
|
|
6245
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(NumberFilterBody, { value, onChange });
|
|
6179
6246
|
}
|
|
6180
6247
|
function SearchableSelectFilter({
|
|
6181
6248
|
selected,
|
|
@@ -6183,8 +6250,8 @@ function SearchableSelectFilter({
|
|
|
6183
6250
|
onChange,
|
|
6184
6251
|
single = false
|
|
6185
6252
|
}) {
|
|
6186
|
-
const [query, setQuery] = (0,
|
|
6187
|
-
const filtered = (0,
|
|
6253
|
+
const [query, setQuery] = (0, import_react13.useState)("");
|
|
6254
|
+
const filtered = (0, import_react13.useMemo)(() => {
|
|
6188
6255
|
const q = query.trim().toLowerCase();
|
|
6189
6256
|
if (!q) return options;
|
|
6190
6257
|
return options.filter(
|
|
@@ -6203,13 +6270,13 @@ function SearchableSelectFilter({
|
|
|
6203
6270
|
next.length === 0 ? void 0 : { kind: "select", value: next[0] ?? "", values: next }
|
|
6204
6271
|
);
|
|
6205
6272
|
};
|
|
6206
|
-
return /* @__PURE__ */ (0,
|
|
6207
|
-
/* @__PURE__ */ (0,
|
|
6208
|
-
/* @__PURE__ */ (0,
|
|
6273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-1 px-0", children: [
|
|
6274
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between px-1 pb-1", children: [
|
|
6275
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: [
|
|
6209
6276
|
"Filter",
|
|
6210
6277
|
selected.length > 1 ? ` (any of ${selected.length})` : ""
|
|
6211
6278
|
] }),
|
|
6212
|
-
selected.length > 0 ? /* @__PURE__ */ (0,
|
|
6279
|
+
selected.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6213
6280
|
"button",
|
|
6214
6281
|
{
|
|
6215
6282
|
type: "button",
|
|
@@ -6219,8 +6286,8 @@ function SearchableSelectFilter({
|
|
|
6219
6286
|
}
|
|
6220
6287
|
) : null
|
|
6221
6288
|
] }),
|
|
6222
|
-
/* @__PURE__ */ (0,
|
|
6223
|
-
/* @__PURE__ */ (0,
|
|
6289
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Command, { className: "rounded-md border border-border", shouldFilter: false, children: [
|
|
6290
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6224
6291
|
CommandInput,
|
|
6225
6292
|
{
|
|
6226
6293
|
"data-matrx-filter-autofocus": true,
|
|
@@ -6230,10 +6297,10 @@ function SearchableSelectFilter({
|
|
|
6230
6297
|
className: "h-8 text-sm"
|
|
6231
6298
|
}
|
|
6232
6299
|
),
|
|
6233
|
-
/* @__PURE__ */ (0,
|
|
6234
|
-
/* @__PURE__ */ (0,
|
|
6235
|
-
/* @__PURE__ */ (0,
|
|
6236
|
-
/* @__PURE__ */ (0,
|
|
6300
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandList, { className: "max-h-48", children: [
|
|
6301
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CommandEmpty, { className: "py-3 text-xs text-muted-foreground", children: "No matches" }),
|
|
6302
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandGroup, { children: [
|
|
6303
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6237
6304
|
CommandItem,
|
|
6238
6305
|
{
|
|
6239
6306
|
value: "__all__",
|
|
@@ -6244,7 +6311,7 @@ function SearchableSelectFilter({
|
|
|
6244
6311
|
),
|
|
6245
6312
|
filtered.map((o) => {
|
|
6246
6313
|
const active = selected.includes(o.value);
|
|
6247
|
-
return /* @__PURE__ */ (0,
|
|
6314
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
6248
6315
|
CommandItem,
|
|
6249
6316
|
{
|
|
6250
6317
|
value: o.value,
|
|
@@ -6254,7 +6321,7 @@ function SearchableSelectFilter({
|
|
|
6254
6321
|
active && "bg-accent text-accent-foreground"
|
|
6255
6322
|
),
|
|
6256
6323
|
children: [
|
|
6257
|
-
/* @__PURE__ */ (0,
|
|
6324
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6258
6325
|
"span",
|
|
6259
6326
|
{
|
|
6260
6327
|
className: cn(
|
|
@@ -6262,7 +6329,7 @@ function SearchableSelectFilter({
|
|
|
6262
6329
|
single ? "rounded-full" : "rounded-sm",
|
|
6263
6330
|
active ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground/40"
|
|
6264
6331
|
),
|
|
6265
|
-
children: active && /* @__PURE__ */ (0,
|
|
6332
|
+
children: active && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Check, { className: "h-2.5 w-2.5" })
|
|
6266
6333
|
}
|
|
6267
6334
|
),
|
|
6268
6335
|
o.label
|
|
@@ -6282,8 +6349,8 @@ function NumberFilterBody({
|
|
|
6282
6349
|
}) {
|
|
6283
6350
|
const min = value?.kind === "number" ? value.min : void 0;
|
|
6284
6351
|
const max = value?.kind === "number" ? value.max : void 0;
|
|
6285
|
-
const [minText, setMinText] = (0,
|
|
6286
|
-
const [maxText, setMaxText] = (0,
|
|
6352
|
+
const [minText, setMinText] = (0, import_react13.useState)(min !== void 0 ? String(min) : "");
|
|
6353
|
+
const [maxText, setMaxText] = (0, import_react13.useState)(max !== void 0 ? String(max) : "");
|
|
6287
6354
|
const commit = (raw, which) => {
|
|
6288
6355
|
const nextMin = which === "min" ? parseOptionalNumber(raw) : min;
|
|
6289
6356
|
const nextMax = which === "max" ? parseOptionalNumber(raw) : max;
|
|
@@ -6293,10 +6360,10 @@ function NumberFilterBody({
|
|
|
6293
6360
|
}
|
|
6294
6361
|
onChange({ kind: "number", min: nextMin, max: nextMax });
|
|
6295
6362
|
};
|
|
6296
|
-
return /* @__PURE__ */ (0,
|
|
6297
|
-
/* @__PURE__ */ (0,
|
|
6298
|
-
/* @__PURE__ */ (0,
|
|
6299
|
-
(min !== void 0 || max !== void 0) && /* @__PURE__ */ (0,
|
|
6363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-1.5 px-1", children: [
|
|
6364
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
6365
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Range" }),
|
|
6366
|
+
(min !== void 0 || max !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6300
6367
|
"button",
|
|
6301
6368
|
{
|
|
6302
6369
|
type: "button",
|
|
@@ -6310,8 +6377,8 @@ function NumberFilterBody({
|
|
|
6310
6377
|
}
|
|
6311
6378
|
)
|
|
6312
6379
|
] }),
|
|
6313
|
-
/* @__PURE__ */ (0,
|
|
6314
|
-
/* @__PURE__ */ (0,
|
|
6380
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
6381
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6315
6382
|
Input,
|
|
6316
6383
|
{
|
|
6317
6384
|
"data-matrx-filter-autofocus": true,
|
|
@@ -6326,8 +6393,8 @@ function NumberFilterBody({
|
|
|
6326
6393
|
style: { fontSize: "16px" }
|
|
6327
6394
|
}
|
|
6328
6395
|
),
|
|
6329
|
-
/* @__PURE__ */ (0,
|
|
6330
|
-
/* @__PURE__ */ (0,
|
|
6396
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-xs text-muted-foreground", children: "\u2013" }),
|
|
6397
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6331
6398
|
Input,
|
|
6332
6399
|
{
|
|
6333
6400
|
value: maxText,
|
|
@@ -6351,7 +6418,7 @@ function parseOptionalNumber(raw) {
|
|
|
6351
6418
|
}
|
|
6352
6419
|
|
|
6353
6420
|
// src/data-table/ColumnResizeHandle.tsx
|
|
6354
|
-
var
|
|
6421
|
+
var import_react14 = require("react");
|
|
6355
6422
|
|
|
6356
6423
|
// src/data-table/column-resize.ts
|
|
6357
6424
|
var DEFAULT_COLUMN_MIN_WIDTH = 80;
|
|
@@ -6379,7 +6446,7 @@ function normalizeColumnWidthMap(widths, knownColumnIds) {
|
|
|
6379
6446
|
}
|
|
6380
6447
|
|
|
6381
6448
|
// src/data-table/ColumnResizeHandle.tsx
|
|
6382
|
-
var
|
|
6449
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
6383
6450
|
var KEYBOARD_STEP = 8;
|
|
6384
6451
|
var KEYBOARD_LARGE_STEP = 24;
|
|
6385
6452
|
function ColumnResizeHandle({
|
|
@@ -6393,24 +6460,24 @@ function ColumnResizeHandle({
|
|
|
6393
6460
|
onResizeCancel,
|
|
6394
6461
|
onResizeCommit
|
|
6395
6462
|
}) {
|
|
6396
|
-
const handleRef = (0,
|
|
6397
|
-
const activeResizeRef = (0,
|
|
6398
|
-
const previewRafRef = (0,
|
|
6399
|
-
const queuedWidthRef = (0,
|
|
6400
|
-
const keyboardWidthRef = (0,
|
|
6401
|
-
const [announcedWidth, setAnnouncedWidth] = (0,
|
|
6463
|
+
const handleRef = (0, import_react14.useRef)(null);
|
|
6464
|
+
const activeResizeRef = (0, import_react14.useRef)(null);
|
|
6465
|
+
const previewRafRef = (0, import_react14.useRef)(null);
|
|
6466
|
+
const queuedWidthRef = (0, import_react14.useRef)(null);
|
|
6467
|
+
const keyboardWidthRef = (0, import_react14.useRef)(null);
|
|
6468
|
+
const [announcedWidth, setAnnouncedWidth] = (0, import_react14.useState)(null);
|
|
6402
6469
|
const bounds = resolveColumnResizeBounds(minWidth, maxWidth);
|
|
6403
6470
|
const cssVar = columnResizeCssVar(columnId2);
|
|
6404
|
-
const readWidth = (0,
|
|
6471
|
+
const readWidth = (0, import_react14.useCallback)(() => {
|
|
6405
6472
|
const header = handleRef.current?.closest("th");
|
|
6406
6473
|
const measured = header?.getBoundingClientRect().width ?? 0;
|
|
6407
6474
|
const computed = header ? Number.parseFloat(getComputedStyle(header).width) : 0;
|
|
6408
6475
|
return clampColumnWidth(measured || computed || keyboardWidthRef.current || bounds.minWidth, bounds);
|
|
6409
6476
|
}, [bounds]);
|
|
6410
|
-
const writePreview = (0,
|
|
6477
|
+
const writePreview = (0, import_react14.useCallback)((width) => {
|
|
6411
6478
|
tableRef.current?.style.setProperty(cssVar, `${width}px`);
|
|
6412
6479
|
}, [cssVar, tableRef]);
|
|
6413
|
-
const queuePreview = (0,
|
|
6480
|
+
const queuePreview = (0, import_react14.useCallback)((width) => {
|
|
6414
6481
|
queuedWidthRef.current = width;
|
|
6415
6482
|
if (previewRafRef.current !== null) return;
|
|
6416
6483
|
previewRafRef.current = requestAnimationFrame(() => {
|
|
@@ -6420,12 +6487,12 @@ function ColumnResizeHandle({
|
|
|
6420
6487
|
if (nextWidth !== null) writePreview(nextWidth);
|
|
6421
6488
|
});
|
|
6422
6489
|
}, [writePreview]);
|
|
6423
|
-
const clearQueuedPreview = (0,
|
|
6490
|
+
const clearQueuedPreview = (0, import_react14.useCallback)(() => {
|
|
6424
6491
|
if (previewRafRef.current !== null) cancelAnimationFrame(previewRafRef.current);
|
|
6425
6492
|
previewRafRef.current = null;
|
|
6426
6493
|
queuedWidthRef.current = null;
|
|
6427
6494
|
}, []);
|
|
6428
|
-
const finishPointerResize = (0,
|
|
6495
|
+
const finishPointerResize = (0, import_react14.useCallback)((commit) => {
|
|
6429
6496
|
const active = activeResizeRef.current;
|
|
6430
6497
|
if (!active) return;
|
|
6431
6498
|
activeResizeRef.current = null;
|
|
@@ -6445,7 +6512,7 @@ function ColumnResizeHandle({
|
|
|
6445
6512
|
handleRef.current.releasePointerCapture(active.pointerId);
|
|
6446
6513
|
}
|
|
6447
6514
|
}, [clearQueuedPreview, columnId2, cssVar, onResizeCancel, onResizeCommit, tableRef, writePreview]);
|
|
6448
|
-
(0,
|
|
6515
|
+
(0, import_react14.useEffect)(() => () => clearQueuedPreview(), [clearQueuedPreview]);
|
|
6449
6516
|
const onPointerDown = (event) => {
|
|
6450
6517
|
if (disabled || event.button !== 0 || !event.isPrimary) return;
|
|
6451
6518
|
event.preventDefault();
|
|
@@ -6498,7 +6565,7 @@ function ColumnResizeHandle({
|
|
|
6498
6565
|
onResizeCommit(columnId2, nextWidth);
|
|
6499
6566
|
};
|
|
6500
6567
|
const currentWidth = announcedWidth ?? keyboardWidthRef.current ?? bounds.minWidth;
|
|
6501
|
-
return /* @__PURE__ */ (0,
|
|
6568
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6502
6569
|
"button",
|
|
6503
6570
|
{
|
|
6504
6571
|
ref: handleRef,
|
|
@@ -6600,9 +6667,9 @@ function rankTableSearchRows(rows, columns, query, options = {}, extraText) {
|
|
|
6600
6667
|
}
|
|
6601
6668
|
|
|
6602
6669
|
// src/data-table/ColumnManager.tsx
|
|
6603
|
-
var
|
|
6670
|
+
var import_react15 = require("react");
|
|
6604
6671
|
var import_core2 = require("@dnd-kit/core");
|
|
6605
|
-
var
|
|
6672
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
6606
6673
|
function ColumnManager({
|
|
6607
6674
|
open,
|
|
6608
6675
|
onOpenChange,
|
|
@@ -6611,15 +6678,15 @@ function ColumnManager({
|
|
|
6611
6678
|
hidden,
|
|
6612
6679
|
onApply
|
|
6613
6680
|
}) {
|
|
6614
|
-
const byId = (0,
|
|
6681
|
+
const byId = (0, import_react15.useMemo)(
|
|
6615
6682
|
() => new Map(columns.map((column) => [columnId(column), column])),
|
|
6616
6683
|
[columns]
|
|
6617
6684
|
);
|
|
6618
|
-
const [draftOrder, setDraftOrder] = (0,
|
|
6619
|
-
const [draftHidden, setDraftHidden] = (0,
|
|
6620
|
-
const [draggedColumnId, setDraggedColumnId] = (0,
|
|
6621
|
-
const [dropTarget, setDropTarget] = (0,
|
|
6622
|
-
(0,
|
|
6685
|
+
const [draftOrder, setDraftOrder] = (0, import_react15.useState)(order);
|
|
6686
|
+
const [draftHidden, setDraftHidden] = (0, import_react15.useState)(() => new Set(hidden));
|
|
6687
|
+
const [draggedColumnId, setDraggedColumnId] = (0, import_react15.useState)(null);
|
|
6688
|
+
const [dropTarget, setDropTarget] = (0, import_react15.useState)(null);
|
|
6689
|
+
(0, import_react15.useEffect)(() => {
|
|
6623
6690
|
if (!open) return;
|
|
6624
6691
|
setDraftOrder(order);
|
|
6625
6692
|
setDraftHidden(new Set(hidden));
|
|
@@ -6676,18 +6743,18 @@ function ColumnManager({
|
|
|
6676
6743
|
if (target) moveTo(dragged, String(target));
|
|
6677
6744
|
}
|
|
6678
6745
|
});
|
|
6679
|
-
return /* @__PURE__ */ (0,
|
|
6680
|
-
/* @__PURE__ */ (0,
|
|
6681
|
-
/* @__PURE__ */ (0,
|
|
6682
|
-
/* @__PURE__ */ (0,
|
|
6746
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DialogContent, { className: "max-w-md", children: [
|
|
6747
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DialogHeader, { children: [
|
|
6748
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DialogTitle, { children: "Columns" }),
|
|
6749
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DialogDescription, { children: "Choose the columns to show and set their order." })
|
|
6683
6750
|
] }),
|
|
6684
|
-
/* @__PURE__ */ (0,
|
|
6751
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "max-h-[55dvh] divide-y overflow-y-auto rounded-md border", children: draftOrder.map((id, index) => {
|
|
6685
6752
|
const column = byId.get(id);
|
|
6686
6753
|
if (!column) return null;
|
|
6687
6754
|
const label = typeof column.header === "string" ? column.header : id;
|
|
6688
6755
|
const hideable = column.hideable !== false;
|
|
6689
6756
|
const visible = !draftHidden.has(id);
|
|
6690
|
-
return /* @__PURE__ */ (0,
|
|
6757
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
6691
6758
|
ColumnManagerDropTarget,
|
|
6692
6759
|
{
|
|
6693
6760
|
id,
|
|
@@ -6697,8 +6764,8 @@ function ColumnManager({
|
|
|
6697
6764
|
dropTarget === id && draggedColumnId !== id && "border-t-2 border-primary"
|
|
6698
6765
|
),
|
|
6699
6766
|
children: [
|
|
6700
|
-
/* @__PURE__ */ (0,
|
|
6701
|
-
/* @__PURE__ */ (0,
|
|
6767
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColumnManagerDragHandle, { id, label }),
|
|
6768
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6702
6769
|
Checkbox,
|
|
6703
6770
|
{
|
|
6704
6771
|
checked: visible,
|
|
@@ -6715,8 +6782,8 @@ function ColumnManager({
|
|
|
6715
6782
|
}
|
|
6716
6783
|
}
|
|
6717
6784
|
),
|
|
6718
|
-
/* @__PURE__ */ (0,
|
|
6719
|
-
/* @__PURE__ */ (0,
|
|
6785
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm", children: label }),
|
|
6786
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6720
6787
|
Button,
|
|
6721
6788
|
{
|
|
6722
6789
|
type: "button",
|
|
@@ -6726,10 +6793,10 @@ function ColumnManager({
|
|
|
6726
6793
|
"aria-label": `Move ${label} earlier`,
|
|
6727
6794
|
disabled: index === 0,
|
|
6728
6795
|
onClick: () => move(id, -1),
|
|
6729
|
-
children: /* @__PURE__ */ (0,
|
|
6796
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ArrowUp, { className: "h-4 w-4" })
|
|
6730
6797
|
}
|
|
6731
6798
|
),
|
|
6732
|
-
/* @__PURE__ */ (0,
|
|
6799
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6733
6800
|
Button,
|
|
6734
6801
|
{
|
|
6735
6802
|
type: "button",
|
|
@@ -6739,7 +6806,7 @@ function ColumnManager({
|
|
|
6739
6806
|
"aria-label": `Move ${label} later`,
|
|
6740
6807
|
disabled: index === draftOrder.length - 1,
|
|
6741
6808
|
onClick: () => move(id, 1),
|
|
6742
|
-
children: /* @__PURE__ */ (0,
|
|
6809
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ArrowDown, { className: "h-4 w-4" })
|
|
6743
6810
|
}
|
|
6744
6811
|
)
|
|
6745
6812
|
]
|
|
@@ -6747,9 +6814,9 @@ function ColumnManager({
|
|
|
6747
6814
|
id
|
|
6748
6815
|
);
|
|
6749
6816
|
}) }),
|
|
6750
|
-
/* @__PURE__ */ (0,
|
|
6751
|
-
/* @__PURE__ */ (0,
|
|
6752
|
-
/* @__PURE__ */ (0,
|
|
6817
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DialogFooter, { children: [
|
|
6818
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
|
|
6819
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6753
6820
|
Button,
|
|
6754
6821
|
{
|
|
6755
6822
|
type: "button",
|
|
@@ -6772,14 +6839,14 @@ function ColumnManagerDropTarget({
|
|
|
6772
6839
|
id: `matrx-column-manager:${id}`,
|
|
6773
6840
|
data: { matrxDragKind: "column-manager", columnId: id }
|
|
6774
6841
|
});
|
|
6775
|
-
return /* @__PURE__ */ (0,
|
|
6842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: setNodeRef, "data-matrx-column-manager-drop-target": id, className, children });
|
|
6776
6843
|
}
|
|
6777
6844
|
function ColumnManagerDragHandle({ id, label }) {
|
|
6778
6845
|
const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
|
|
6779
6846
|
id: `matrx-column-manager:${id}`,
|
|
6780
6847
|
data: { matrxDragKind: "column-manager", columnId: id }
|
|
6781
6848
|
});
|
|
6782
|
-
return /* @__PURE__ */ (0,
|
|
6849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6783
6850
|
"button",
|
|
6784
6851
|
{
|
|
6785
6852
|
ref: setNodeRef,
|
|
@@ -6789,7 +6856,7 @@ function ColumnManagerDragHandle({ id, label }) {
|
|
|
6789
6856
|
title: `Drag to reorder ${label}`,
|
|
6790
6857
|
...attributes,
|
|
6791
6858
|
...listeners,
|
|
6792
|
-
children: /* @__PURE__ */ (0,
|
|
6859
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GripVertical, { className: "h-4 w-4" })
|
|
6793
6860
|
}
|
|
6794
6861
|
);
|
|
6795
6862
|
}
|
|
@@ -6852,8 +6919,8 @@ function parseTableViewSnapshot(raw) {
|
|
|
6852
6919
|
}
|
|
6853
6920
|
|
|
6854
6921
|
// src/data-table/MatrxUuidCell.tsx
|
|
6855
|
-
var
|
|
6856
|
-
var
|
|
6922
|
+
var import_react16 = require("react");
|
|
6923
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
6857
6924
|
var SHORT_LEN = 8;
|
|
6858
6925
|
function shortUuid(id, len = SHORT_LEN) {
|
|
6859
6926
|
return id.slice(0, len);
|
|
@@ -6892,18 +6959,18 @@ function MatrxUuidCell({
|
|
|
6892
6959
|
}) {
|
|
6893
6960
|
const { resolveEntityDoors, ResourcePeek } = useMatrxDataTableHost();
|
|
6894
6961
|
const { notify, notice } = useTableNotice();
|
|
6895
|
-
const [copied, setCopied] = (0,
|
|
6896
|
-
const [opening, setOpening] = (0,
|
|
6897
|
-
const [peekOpen, setPeekOpen] = (0,
|
|
6898
|
-
const timer = (0,
|
|
6899
|
-
(0,
|
|
6962
|
+
const [copied, setCopied] = (0, import_react16.useState)(false);
|
|
6963
|
+
const [opening, setOpening] = (0, import_react16.useState)(false);
|
|
6964
|
+
const [peekOpen, setPeekOpen] = (0, import_react16.useState)(false);
|
|
6965
|
+
const timer = (0, import_react16.useRef)(null);
|
|
6966
|
+
(0, import_react16.useEffect)(
|
|
6900
6967
|
() => () => {
|
|
6901
6968
|
if (timer.current) clearTimeout(timer.current);
|
|
6902
6969
|
},
|
|
6903
6970
|
[]
|
|
6904
6971
|
);
|
|
6905
6972
|
if (!value) {
|
|
6906
|
-
return /* @__PURE__ */ (0,
|
|
6973
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-muted-foreground/40", children: "\u2014" });
|
|
6907
6974
|
}
|
|
6908
6975
|
const doors = token ? resolveEntityDoors?.(token, value, href) ?? null : null;
|
|
6909
6976
|
const resolvedHref = doors?.href ?? href ?? null;
|
|
@@ -6946,13 +7013,13 @@ function MatrxUuidCell({
|
|
|
6946
7013
|
};
|
|
6947
7014
|
const idNode = (() => {
|
|
6948
7015
|
if (forbidden) {
|
|
6949
|
-
return /* @__PURE__ */ (0,
|
|
6950
|
-
/* @__PURE__ */ (0,
|
|
6951
|
-
/* @__PURE__ */ (0,
|
|
7016
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-muted-foreground/70 tabular-nums", children: [
|
|
7017
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "min-w-0 truncate", children: display }),
|
|
7018
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ShieldOff, { className: "h-3 w-3 shrink-0 opacity-60", "aria-hidden": true })
|
|
6952
7019
|
] });
|
|
6953
7020
|
}
|
|
6954
7021
|
if (onOpen) {
|
|
6955
|
-
return /* @__PURE__ */ (0,
|
|
7022
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6956
7023
|
"button",
|
|
6957
7024
|
{
|
|
6958
7025
|
type: "button",
|
|
@@ -6961,14 +7028,14 @@ function MatrxUuidCell({
|
|
|
6961
7028
|
disabled: opening,
|
|
6962
7029
|
className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-sky-600 hover:underline dark:text-sky-400 disabled:opacity-60",
|
|
6963
7030
|
children: [
|
|
6964
|
-
/* @__PURE__ */ (0,
|
|
6965
|
-
/* @__PURE__ */ (0,
|
|
7031
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "min-w-0 truncate tabular-nums", children: display }),
|
|
7032
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { className: "h-3 w-3 shrink-0 opacity-50" })
|
|
6966
7033
|
]
|
|
6967
7034
|
}
|
|
6968
7035
|
);
|
|
6969
7036
|
}
|
|
6970
7037
|
if (resolvedHref) {
|
|
6971
|
-
return /* @__PURE__ */ (0,
|
|
7038
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6972
7039
|
"a",
|
|
6973
7040
|
{
|
|
6974
7041
|
href: resolvedHref,
|
|
@@ -6978,15 +7045,15 @@ function MatrxUuidCell({
|
|
|
6978
7045
|
onClick: stop,
|
|
6979
7046
|
className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-sky-600 hover:underline dark:text-sky-400",
|
|
6980
7047
|
children: [
|
|
6981
|
-
/* @__PURE__ */ (0,
|
|
6982
|
-
/* @__PURE__ */ (0,
|
|
7048
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "min-w-0 truncate tabular-nums", children: display }),
|
|
7049
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50" })
|
|
6983
7050
|
]
|
|
6984
7051
|
}
|
|
6985
7052
|
);
|
|
6986
7053
|
}
|
|
6987
|
-
return /* @__PURE__ */ (0,
|
|
7054
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "min-w-0 truncate font-mono text-xs text-muted-foreground tabular-nums select-all", children: display });
|
|
6988
7055
|
})();
|
|
6989
|
-
return /* @__PURE__ */ (0,
|
|
7056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6990
7057
|
"span",
|
|
6991
7058
|
{
|
|
6992
7059
|
"data-matrx-cell-control": true,
|
|
@@ -6996,12 +7063,12 @@ function MatrxUuidCell({
|
|
|
6996
7063
|
),
|
|
6997
7064
|
onClick: stop,
|
|
6998
7065
|
children: [
|
|
6999
|
-
/* @__PURE__ */ (0,
|
|
7000
|
-
/* @__PURE__ */ (0,
|
|
7001
|
-
/* @__PURE__ */ (0,
|
|
7066
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { children: [
|
|
7067
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "inline-flex min-w-0 max-w-full items-center", children: idNode }) }),
|
|
7068
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipContent, { side: "top", className: "max-w-sm break-all font-mono", children: forbidden ? `No access \xB7 ${tip}` : tip })
|
|
7002
7069
|
] }),
|
|
7003
|
-
/* @__PURE__ */ (0,
|
|
7004
|
-
/* @__PURE__ */ (0,
|
|
7070
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { children: [
|
|
7071
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7005
7072
|
"button",
|
|
7006
7073
|
{
|
|
7007
7074
|
type: "button",
|
|
@@ -7011,13 +7078,13 @@ function MatrxUuidCell({
|
|
|
7011
7078
|
"inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus:outline-none",
|
|
7012
7079
|
copied && "text-primary"
|
|
7013
7080
|
),
|
|
7014
|
-
children: copied ? /* @__PURE__ */ (0,
|
|
7081
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Copy, { className: "h-3 w-3" })
|
|
7015
7082
|
}
|
|
7016
7083
|
) }),
|
|
7017
|
-
/* @__PURE__ */ (0,
|
|
7084
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipContent, { side: "top", children: copied ? "Copied" : `Copy ${label ?? "id"}: ${value}` })
|
|
7018
7085
|
] }),
|
|
7019
|
-
canPeek ? /* @__PURE__ */ (0,
|
|
7020
|
-
/* @__PURE__ */ (0,
|
|
7086
|
+
canPeek ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { children: [
|
|
7087
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7021
7088
|
"button",
|
|
7022
7089
|
{
|
|
7023
7090
|
type: "button",
|
|
@@ -7027,16 +7094,16 @@ function MatrxUuidCell({
|
|
|
7027
7094
|
},
|
|
7028
7095
|
"aria-label": `Quick look at ${label ?? "record"}`,
|
|
7029
7096
|
className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus:outline-none",
|
|
7030
|
-
children: /* @__PURE__ */ (0,
|
|
7097
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Lightbulb, { className: "h-3 w-3" })
|
|
7031
7098
|
}
|
|
7032
7099
|
) }),
|
|
7033
|
-
/* @__PURE__ */ (0,
|
|
7100
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(TooltipContent, { side: "top", children: [
|
|
7034
7101
|
"Quick look at ",
|
|
7035
7102
|
label ?? "record"
|
|
7036
7103
|
] })
|
|
7037
7104
|
] }) : null,
|
|
7038
|
-
onOpen && resolvedHref && !forbidden ? /* @__PURE__ */ (0,
|
|
7039
|
-
/* @__PURE__ */ (0,
|
|
7105
|
+
onOpen && resolvedHref && !forbidden ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { children: [
|
|
7106
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7040
7107
|
"a",
|
|
7041
7108
|
{
|
|
7042
7109
|
href: resolvedHref,
|
|
@@ -7045,10 +7112,10 @@ function MatrxUuidCell({
|
|
|
7045
7112
|
onClick: stop,
|
|
7046
7113
|
"aria-label": `Open ${label ?? "record"} in a new tab`,
|
|
7047
7114
|
className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus:outline-none",
|
|
7048
|
-
children: /* @__PURE__ */ (0,
|
|
7115
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ExternalLink, { className: "h-3 w-3" })
|
|
7049
7116
|
}
|
|
7050
7117
|
) }),
|
|
7051
|
-
/* @__PURE__ */ (0,
|
|
7118
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(TooltipContent, { side: "top", children: [
|
|
7052
7119
|
"Open ",
|
|
7053
7120
|
label ?? "record",
|
|
7054
7121
|
" in a new tab"
|
|
@@ -7056,7 +7123,7 @@ function MatrxUuidCell({
|
|
|
7056
7123
|
] }) : null,
|
|
7057
7124
|
trailing,
|
|
7058
7125
|
notice,
|
|
7059
|
-
canPeek && peekOpen && ResourcePeek ? /* @__PURE__ */ (0,
|
|
7126
|
+
canPeek && peekOpen && ResourcePeek ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7060
7127
|
ResourcePeek,
|
|
7061
7128
|
{
|
|
7062
7129
|
kind: doors?.peekKind ?? token ?? "record",
|
|
@@ -7090,7 +7157,7 @@ function formatTableDisplayValue(value) {
|
|
|
7090
7157
|
}
|
|
7091
7158
|
|
|
7092
7159
|
// src/data-table/DataRowInspector.tsx
|
|
7093
|
-
var
|
|
7160
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
7094
7161
|
var noFieldToken = () => null;
|
|
7095
7162
|
function formatValue(value) {
|
|
7096
7163
|
if (value == null) return "\u2014";
|
|
@@ -7119,7 +7186,7 @@ function DataRowInspector({
|
|
|
7119
7186
|
tokenForField = noFieldToken
|
|
7120
7187
|
}) {
|
|
7121
7188
|
const entries = isPlainObject(row) ? Object.entries(row) : [["value", row]];
|
|
7122
|
-
const fieldButtons = (key, value) => fieldCopy ? /* @__PURE__ */ (0,
|
|
7189
|
+
const fieldButtons = (key, value) => fieldCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute right-1 top-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover/field:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
7123
7190
|
CopyButtons,
|
|
7124
7191
|
{
|
|
7125
7192
|
size: "xs",
|
|
@@ -7134,21 +7201,21 @@ function DataRowInspector({
|
|
|
7134
7201
|
})
|
|
7135
7202
|
}
|
|
7136
7203
|
) }) : null;
|
|
7137
|
-
return /* @__PURE__ */ (0,
|
|
7204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
7138
7205
|
"div",
|
|
7139
7206
|
{
|
|
7140
7207
|
className: cn("flex h-full min-h-0 flex-col overflow-hidden", className),
|
|
7141
7208
|
children: [
|
|
7142
|
-
title ? /* @__PURE__ */ (0,
|
|
7143
|
-
/* @__PURE__ */ (0,
|
|
7209
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "shrink-0 border-b border-border px-3 py-2 text-sm font-medium", children: title }) : null,
|
|
7210
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dl", { className: "space-y-2", children: entries.map(([key, value]) => {
|
|
7144
7211
|
if (isUuidValue(value)) {
|
|
7145
|
-
return /* @__PURE__ */ (0,
|
|
7212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
7146
7213
|
"div",
|
|
7147
7214
|
{
|
|
7148
7215
|
className: "group/field relative grid grid-cols-[minmax(7rem,9rem)_1fr] gap-2 rounded-md border border-border/60 bg-muted/20 px-2.5 py-2",
|
|
7149
7216
|
children: [
|
|
7150
|
-
/* @__PURE__ */ (0,
|
|
7151
|
-
/* @__PURE__ */ (0,
|
|
7217
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dt", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: key }),
|
|
7218
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dd", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
7152
7219
|
MatrxUuidCell,
|
|
7153
7220
|
{
|
|
7154
7221
|
value,
|
|
@@ -7163,13 +7230,13 @@ function DataRowInspector({
|
|
|
7163
7230
|
}
|
|
7164
7231
|
const formatted = value !== null && typeof value === "object" && !(value instanceof Date) ? formatValue(value) : formatTableDisplayValue(value);
|
|
7165
7232
|
const multiline = formatted.includes("\n") || formatted.length > 80;
|
|
7166
|
-
return /* @__PURE__ */ (0,
|
|
7233
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
7167
7234
|
"div",
|
|
7168
7235
|
{
|
|
7169
7236
|
className: "group/field relative grid grid-cols-[minmax(7rem,9rem)_1fr] gap-2 rounded-md border border-border/60 bg-muted/20 py-2 pl-2.5 pr-12",
|
|
7170
7237
|
children: [
|
|
7171
|
-
/* @__PURE__ */ (0,
|
|
7172
|
-
/* @__PURE__ */ (0,
|
|
7238
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dt", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: key }),
|
|
7239
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
7173
7240
|
"dd",
|
|
7174
7241
|
{
|
|
7175
7242
|
className: cn(
|
|
@@ -7191,8 +7258,8 @@ function DataRowInspector({
|
|
|
7191
7258
|
}
|
|
7192
7259
|
|
|
7193
7260
|
// src/data-table/DataRowWindow.tsx
|
|
7194
|
-
var
|
|
7195
|
-
var
|
|
7261
|
+
var import_react17 = require("react");
|
|
7262
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
7196
7263
|
function DataRowWindow({
|
|
7197
7264
|
isOpen,
|
|
7198
7265
|
onClose,
|
|
@@ -7212,15 +7279,15 @@ function DataRowWindow({
|
|
|
7212
7279
|
const hasEdit = editContent != null;
|
|
7213
7280
|
const hasTabs = hasEdit && children == null;
|
|
7214
7281
|
const initialTab = defaultTab ?? (hasEdit ? "edit" : "view");
|
|
7215
|
-
const [tab, setTab] = (0,
|
|
7216
|
-
(0,
|
|
7282
|
+
const [tab, setTab] = (0, import_react17.useState)(initialTab);
|
|
7283
|
+
(0, import_react17.useEffect)(() => {
|
|
7217
7284
|
if (!isOpen) return;
|
|
7218
7285
|
setTab(defaultTab ?? (hasEdit ? "edit" : "view"));
|
|
7219
7286
|
}, [isOpen, windowId, hasEdit, defaultTab]);
|
|
7220
7287
|
if (!isOpen) return null;
|
|
7221
|
-
const viewBody = viewContent ?? /* @__PURE__ */ (0,
|
|
7222
|
-
const body = children ?? /* @__PURE__ */ (0,
|
|
7223
|
-
return /* @__PURE__ */ (0,
|
|
7288
|
+
const viewBody = viewContent ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DataRowInspector, { row });
|
|
7289
|
+
const body = children ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden", children: hasTabs ? tab === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: editContent }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: viewBody }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: viewBody }) });
|
|
7290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7224
7291
|
WindowPanel,
|
|
7225
7292
|
{
|
|
7226
7293
|
id: windowId,
|
|
@@ -7234,26 +7301,26 @@ function DataRowWindow({
|
|
|
7234
7301
|
bodyClassName: "flex min-h-0 flex-1 flex-col overflow-hidden p-0",
|
|
7235
7302
|
sidebarDefaultSize: 140,
|
|
7236
7303
|
sidebarMinSize: 110,
|
|
7237
|
-
sidebar: hasTabs ? /* @__PURE__ */ (0,
|
|
7304
|
+
sidebar: hasTabs ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7238
7305
|
"nav",
|
|
7239
7306
|
{
|
|
7240
7307
|
"aria-label": "Row window tabs",
|
|
7241
7308
|
className: "flex h-full flex-col gap-0.5 overflow-y-auto p-1.5",
|
|
7242
7309
|
children: [
|
|
7243
|
-
/* @__PURE__ */ (0,
|
|
7310
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7244
7311
|
TabButton,
|
|
7245
7312
|
{
|
|
7246
7313
|
active: tab === "view",
|
|
7247
|
-
icon: /* @__PURE__ */ (0,
|
|
7314
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Eye, { className: "h-4 w-4 shrink-0" }),
|
|
7248
7315
|
label: "View",
|
|
7249
7316
|
onClick: () => setTab("view")
|
|
7250
7317
|
}
|
|
7251
7318
|
),
|
|
7252
|
-
/* @__PURE__ */ (0,
|
|
7319
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7253
7320
|
TabButton,
|
|
7254
7321
|
{
|
|
7255
7322
|
active: tab === "edit",
|
|
7256
|
-
icon: /* @__PURE__ */ (0,
|
|
7323
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Pencil, { className: "h-4 w-4 shrink-0" }),
|
|
7257
7324
|
label: "Edit",
|
|
7258
7325
|
onClick: () => setTab("edit")
|
|
7259
7326
|
}
|
|
@@ -7271,7 +7338,7 @@ function TabButton({
|
|
|
7271
7338
|
label,
|
|
7272
7339
|
onClick
|
|
7273
7340
|
}) {
|
|
7274
|
-
return /* @__PURE__ */ (0,
|
|
7341
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7275
7342
|
"button",
|
|
7276
7343
|
{
|
|
7277
7344
|
type: "button",
|
|
@@ -7284,7 +7351,7 @@ function TabButton({
|
|
|
7284
7351
|
),
|
|
7285
7352
|
children: [
|
|
7286
7353
|
icon,
|
|
7287
|
-
/* @__PURE__ */ (0,
|
|
7354
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "min-w-0 flex-1 truncate", children: label })
|
|
7288
7355
|
]
|
|
7289
7356
|
}
|
|
7290
7357
|
);
|
|
@@ -7307,7 +7374,7 @@ function defaultRowTitle(row, columns) {
|
|
|
7307
7374
|
}
|
|
7308
7375
|
|
|
7309
7376
|
// src/data-table/DirtySavePill.tsx
|
|
7310
|
-
var
|
|
7377
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
7311
7378
|
function DirtySavePill({
|
|
7312
7379
|
changeCount,
|
|
7313
7380
|
saving,
|
|
@@ -7316,20 +7383,20 @@ function DirtySavePill({
|
|
|
7316
7383
|
className
|
|
7317
7384
|
}) {
|
|
7318
7385
|
if (changeCount <= 0) return null;
|
|
7319
|
-
return /* @__PURE__ */ (0,
|
|
7386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7320
7387
|
"div",
|
|
7321
7388
|
{
|
|
7322
7389
|
className: cn(
|
|
7323
7390
|
"pointer-events-none fixed inset-x-0 bottom-6 z-50 flex justify-center pb-safe",
|
|
7324
7391
|
className
|
|
7325
7392
|
),
|
|
7326
|
-
children: /* @__PURE__ */ (0,
|
|
7327
|
-
/* @__PURE__ */ (0,
|
|
7393
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "pointer-events-auto flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 shadow-lg elevation-2", children: [
|
|
7394
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "px-1 text-xs font-medium text-muted-foreground", children: [
|
|
7328
7395
|
changeCount,
|
|
7329
7396
|
" unsaved change",
|
|
7330
7397
|
changeCount === 1 ? "" : "s"
|
|
7331
7398
|
] }),
|
|
7332
|
-
/* @__PURE__ */ (0,
|
|
7399
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
7333
7400
|
Button,
|
|
7334
7401
|
{
|
|
7335
7402
|
type: "button",
|
|
@@ -7339,12 +7406,12 @@ function DirtySavePill({
|
|
|
7339
7406
|
disabled: saving,
|
|
7340
7407
|
onClick: onCancel,
|
|
7341
7408
|
children: [
|
|
7342
|
-
/* @__PURE__ */ (0,
|
|
7409
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(X, { className: "h-3.5 w-3.5" }),
|
|
7343
7410
|
"Cancel"
|
|
7344
7411
|
]
|
|
7345
7412
|
}
|
|
7346
7413
|
),
|
|
7347
|
-
/* @__PURE__ */ (0,
|
|
7414
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
7348
7415
|
Button,
|
|
7349
7416
|
{
|
|
7350
7417
|
type: "button",
|
|
@@ -7353,7 +7420,7 @@ function DirtySavePill({
|
|
|
7353
7420
|
disabled: saving,
|
|
7354
7421
|
onClick: onSave,
|
|
7355
7422
|
children: [
|
|
7356
|
-
saving ? /* @__PURE__ */ (0,
|
|
7423
|
+
saving ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Save, { className: "h-3.5 w-3.5" }),
|
|
7357
7424
|
"Save"
|
|
7358
7425
|
]
|
|
7359
7426
|
}
|
|
@@ -7364,8 +7431,8 @@ function DirtySavePill({
|
|
|
7364
7431
|
}
|
|
7365
7432
|
|
|
7366
7433
|
// src/data-table/EditableTableCell.tsx
|
|
7367
|
-
var
|
|
7368
|
-
var
|
|
7434
|
+
var import_react18 = require("react");
|
|
7435
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
7369
7436
|
function CellEditShell({
|
|
7370
7437
|
href,
|
|
7371
7438
|
display,
|
|
@@ -7374,8 +7441,8 @@ function CellEditShell({
|
|
|
7374
7441
|
editButton
|
|
7375
7442
|
}) {
|
|
7376
7443
|
const { Link: HostLink } = useMatrxDataTableHost();
|
|
7377
|
-
const Link = HostLink ?? ((props) => /* @__PURE__ */ (0,
|
|
7378
|
-
return /* @__PURE__ */ (0,
|
|
7444
|
+
const Link = HostLink ?? ((props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("a", { ...props }));
|
|
7445
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
7379
7446
|
"span",
|
|
7380
7447
|
{
|
|
7381
7448
|
className: cn(
|
|
@@ -7387,7 +7454,7 @@ function CellEditShell({
|
|
|
7387
7454
|
className
|
|
7388
7455
|
),
|
|
7389
7456
|
children: [
|
|
7390
|
-
href ? /* @__PURE__ */ (0,
|
|
7457
|
+
href ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7391
7458
|
Link,
|
|
7392
7459
|
{
|
|
7393
7460
|
href,
|
|
@@ -7395,7 +7462,7 @@ function CellEditShell({
|
|
|
7395
7462
|
className: "min-w-0 flex-1 overflow-hidden truncate rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
7396
7463
|
children: display
|
|
7397
7464
|
}
|
|
7398
|
-
) : /* @__PURE__ */ (0,
|
|
7465
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "block min-w-0 flex-1 overflow-hidden", children: display }),
|
|
7399
7466
|
editButton
|
|
7400
7467
|
]
|
|
7401
7468
|
}
|
|
@@ -7411,12 +7478,16 @@ function EditableTableCell({
|
|
|
7411
7478
|
onCommit,
|
|
7412
7479
|
className,
|
|
7413
7480
|
href,
|
|
7414
|
-
editTrigger = "click"
|
|
7481
|
+
editTrigger = "click",
|
|
7482
|
+
editRequest
|
|
7415
7483
|
}) {
|
|
7416
|
-
const [open, setOpen] = (0,
|
|
7484
|
+
const [open, setOpen] = (0, import_react18.useState)(false);
|
|
7485
|
+
(0, import_react18.useEffect)(() => {
|
|
7486
|
+
if (editRequest !== void 0) setOpen(true);
|
|
7487
|
+
}, [editRequest]);
|
|
7417
7488
|
const usePencil = Boolean(href) || editTrigger === "pencil";
|
|
7418
7489
|
if (editType === "string") {
|
|
7419
|
-
return /* @__PURE__ */ (0,
|
|
7490
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7420
7491
|
InlineStringEditor,
|
|
7421
7492
|
{
|
|
7422
7493
|
value: stringifyCellValue(value),
|
|
@@ -7425,34 +7496,35 @@ function EditableTableCell({
|
|
|
7425
7496
|
onCommit,
|
|
7426
7497
|
...className === void 0 ? {} : { className },
|
|
7427
7498
|
...href === void 0 ? {} : { href },
|
|
7428
|
-
usePencil
|
|
7499
|
+
usePencil,
|
|
7500
|
+
...editRequest === void 0 ? {} : { editRequest }
|
|
7429
7501
|
}
|
|
7430
7502
|
);
|
|
7431
7503
|
}
|
|
7432
|
-
return /* @__PURE__ */ (0,
|
|
7433
|
-
usePencil ? /* @__PURE__ */ (0,
|
|
7504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
|
|
7505
|
+
usePencil ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7434
7506
|
CellEditShell,
|
|
7435
7507
|
{
|
|
7436
7508
|
...href === void 0 ? {} : { href },
|
|
7437
7509
|
display,
|
|
7438
7510
|
...dirty === void 0 ? {} : { dirty },
|
|
7439
7511
|
...className === void 0 ? {} : { className },
|
|
7440
|
-
editButton: /* @__PURE__ */ (0,
|
|
7441
|
-
/* @__PURE__ */ (0,
|
|
7512
|
+
editButton: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
|
|
7513
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7442
7514
|
"button",
|
|
7443
7515
|
{
|
|
7444
7516
|
type: "button",
|
|
7445
7517
|
"aria-label": "Edit",
|
|
7446
7518
|
onClick: (e) => e.stopPropagation(),
|
|
7447
7519
|
className: CELL_PENCIL_CLASS,
|
|
7448
|
-
children: /* @__PURE__ */ (0,
|
|
7520
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Pencil, { className: "h-3 w-3" })
|
|
7449
7521
|
}
|
|
7450
7522
|
) }) }),
|
|
7451
|
-
/* @__PURE__ */ (0,
|
|
7523
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Edit" })
|
|
7452
7524
|
] })
|
|
7453
7525
|
}
|
|
7454
|
-
) : /* @__PURE__ */ (0,
|
|
7455
|
-
/* @__PURE__ */ (0,
|
|
7526
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
|
|
7527
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
7456
7528
|
"button",
|
|
7457
7529
|
{
|
|
7458
7530
|
type: "button",
|
|
@@ -7463,20 +7535,20 @@ function EditableTableCell({
|
|
|
7463
7535
|
className
|
|
7464
7536
|
),
|
|
7465
7537
|
children: [
|
|
7466
|
-
/* @__PURE__ */ (0,
|
|
7467
|
-
editType === "select" ? /* @__PURE__ */ (0,
|
|
7538
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex-1 overflow-hidden", children: display }),
|
|
7539
|
+
editType === "select" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground/70 transition-colors group-hover/cell-select:text-foreground" }) : null
|
|
7468
7540
|
]
|
|
7469
7541
|
}
|
|
7470
7542
|
) }) }),
|
|
7471
|
-
/* @__PURE__ */ (0,
|
|
7543
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Edit value" })
|
|
7472
7544
|
] }),
|
|
7473
|
-
/* @__PURE__ */ (0,
|
|
7545
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7474
7546
|
PopoverContent,
|
|
7475
7547
|
{
|
|
7476
7548
|
align: "start",
|
|
7477
7549
|
className: "w-56 p-2",
|
|
7478
7550
|
onClick: (e) => e.stopPropagation(),
|
|
7479
|
-
children: /* @__PURE__ */ (0,
|
|
7551
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7480
7552
|
TypedEditor,
|
|
7481
7553
|
{
|
|
7482
7554
|
editType,
|
|
@@ -7500,21 +7572,29 @@ function InlineStringEditor({
|
|
|
7500
7572
|
onCommit,
|
|
7501
7573
|
className,
|
|
7502
7574
|
href,
|
|
7503
|
-
usePencil
|
|
7575
|
+
usePencil,
|
|
7576
|
+
editRequest
|
|
7504
7577
|
}) {
|
|
7505
|
-
const [editing, setEditing] = (0,
|
|
7506
|
-
const [draft, setDraft] = (0,
|
|
7578
|
+
const [editing, setEditing] = (0, import_react18.useState)(false);
|
|
7579
|
+
const [draft, setDraft] = (0, import_react18.useState)(value);
|
|
7580
|
+
const handledEditRequest = (0, import_react18.useRef)(void 0);
|
|
7581
|
+
(0, import_react18.useEffect)(() => {
|
|
7582
|
+
if (editRequest === void 0 || handledEditRequest.current === editRequest) return;
|
|
7583
|
+
handledEditRequest.current = editRequest;
|
|
7584
|
+
setDraft(value);
|
|
7585
|
+
setEditing(true);
|
|
7586
|
+
}, [editRequest, value]);
|
|
7507
7587
|
if (!editing) {
|
|
7508
7588
|
if (usePencil) {
|
|
7509
|
-
return /* @__PURE__ */ (0,
|
|
7589
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7510
7590
|
CellEditShell,
|
|
7511
7591
|
{
|
|
7512
7592
|
...href === void 0 ? {} : { href },
|
|
7513
7593
|
display,
|
|
7514
7594
|
...dirty === void 0 ? {} : { dirty },
|
|
7515
7595
|
...className === void 0 ? {} : { className },
|
|
7516
|
-
editButton: /* @__PURE__ */ (0,
|
|
7517
|
-
/* @__PURE__ */ (0,
|
|
7596
|
+
editButton: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
|
|
7597
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7518
7598
|
"button",
|
|
7519
7599
|
{
|
|
7520
7600
|
type: "button",
|
|
@@ -7525,16 +7605,16 @@ function InlineStringEditor({
|
|
|
7525
7605
|
setEditing(true);
|
|
7526
7606
|
},
|
|
7527
7607
|
className: CELL_PENCIL_CLASS,
|
|
7528
|
-
children: /* @__PURE__ */ (0,
|
|
7608
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Pencil, { className: "h-3 w-3" })
|
|
7529
7609
|
}
|
|
7530
7610
|
) }),
|
|
7531
|
-
/* @__PURE__ */ (0,
|
|
7611
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Edit" })
|
|
7532
7612
|
] })
|
|
7533
7613
|
}
|
|
7534
7614
|
);
|
|
7535
7615
|
}
|
|
7536
|
-
return /* @__PURE__ */ (0,
|
|
7537
|
-
/* @__PURE__ */ (0,
|
|
7616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
|
|
7617
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7538
7618
|
"button",
|
|
7539
7619
|
{
|
|
7540
7620
|
type: "button",
|
|
@@ -7551,10 +7631,10 @@ function InlineStringEditor({
|
|
|
7551
7631
|
children: display
|
|
7552
7632
|
}
|
|
7553
7633
|
) }),
|
|
7554
|
-
/* @__PURE__ */ (0,
|
|
7634
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Click to edit" })
|
|
7555
7635
|
] });
|
|
7556
7636
|
}
|
|
7557
|
-
return /* @__PURE__ */ (0,
|
|
7637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7558
7638
|
Input,
|
|
7559
7639
|
{
|
|
7560
7640
|
autoFocus: true,
|
|
@@ -7590,9 +7670,9 @@ function TypedEditor({
|
|
|
7590
7670
|
}) {
|
|
7591
7671
|
if (editType === "boolean") {
|
|
7592
7672
|
const checked = Boolean(value);
|
|
7593
|
-
return /* @__PURE__ */ (0,
|
|
7594
|
-
/* @__PURE__ */ (0,
|
|
7595
|
-
/* @__PURE__ */ (0,
|
|
7673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
7674
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs font-medium", children: "Value" }),
|
|
7675
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7596
7676
|
Checkbox,
|
|
7597
7677
|
{
|
|
7598
7678
|
checked,
|
|
@@ -7602,7 +7682,7 @@ function TypedEditor({
|
|
|
7602
7682
|
] });
|
|
7603
7683
|
}
|
|
7604
7684
|
if (editType === "number") {
|
|
7605
|
-
return /* @__PURE__ */ (0,
|
|
7685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7606
7686
|
NumberEditor,
|
|
7607
7687
|
{
|
|
7608
7688
|
value: typeof value === "number" ? value : Number(value) || 0,
|
|
@@ -7612,7 +7692,7 @@ function TypedEditor({
|
|
|
7612
7692
|
);
|
|
7613
7693
|
}
|
|
7614
7694
|
if (editType === "tags") {
|
|
7615
|
-
return /* @__PURE__ */ (0,
|
|
7695
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7616
7696
|
TagsEditor,
|
|
7617
7697
|
{
|
|
7618
7698
|
value: Array.isArray(value) ? value.map(String) : [],
|
|
@@ -7623,19 +7703,19 @@ function TypedEditor({
|
|
|
7623
7703
|
);
|
|
7624
7704
|
}
|
|
7625
7705
|
if (editType === "select") {
|
|
7626
|
-
return /* @__PURE__ */ (0,
|
|
7706
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
7627
7707
|
Select,
|
|
7628
7708
|
{
|
|
7629
7709
|
value: stringifyCellValue(value),
|
|
7630
7710
|
onValueChange: (v) => onCommit(v),
|
|
7631
7711
|
children: [
|
|
7632
|
-
/* @__PURE__ */ (0,
|
|
7633
|
-
/* @__PURE__ */ (0,
|
|
7712
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectValue, {}) }),
|
|
7713
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectContent, { children: editOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectItem, { value: o.value, children: o.label }, o.value)) })
|
|
7634
7714
|
]
|
|
7635
7715
|
}
|
|
7636
7716
|
);
|
|
7637
7717
|
}
|
|
7638
|
-
return /* @__PURE__ */ (0,
|
|
7718
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7639
7719
|
Input,
|
|
7640
7720
|
{
|
|
7641
7721
|
type: "date",
|
|
@@ -7654,8 +7734,8 @@ function TagsEditor({
|
|
|
7654
7734
|
onCommit,
|
|
7655
7735
|
onCancel
|
|
7656
7736
|
}) {
|
|
7657
|
-
const [tags, setTags] = (0,
|
|
7658
|
-
const [draft, setDraft] = (0,
|
|
7737
|
+
const [tags, setTags] = (0, import_react18.useState)(value);
|
|
7738
|
+
const [draft, setDraft] = (0, import_react18.useState)("");
|
|
7659
7739
|
const add = (raw) => {
|
|
7660
7740
|
const next = raw.trim();
|
|
7661
7741
|
if (!next || tags.includes(next)) return;
|
|
@@ -7665,11 +7745,11 @@ function TagsEditor({
|
|
|
7665
7745
|
const matches = suggestions.filter(
|
|
7666
7746
|
(s) => !tags.includes(s.value) && s.value !== "__none__" && (!draft || s.label.toLowerCase().includes(draft.trim().toLowerCase()))
|
|
7667
7747
|
).slice(0, 6);
|
|
7668
|
-
return /* @__PURE__ */ (0,
|
|
7669
|
-
/* @__PURE__ */ (0,
|
|
7670
|
-
tags.length === 0 && /* @__PURE__ */ (0,
|
|
7671
|
-
tags.map((tag) => /* @__PURE__ */ (0,
|
|
7672
|
-
/* @__PURE__ */ (0,
|
|
7748
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "space-y-2", onClick: (e) => e.stopPropagation(), children: [
|
|
7749
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
|
|
7750
|
+
tags.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs text-muted-foreground", children: "No tags" }),
|
|
7751
|
+
tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
|
|
7752
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
7673
7753
|
"button",
|
|
7674
7754
|
{
|
|
7675
7755
|
type: "button",
|
|
@@ -7678,17 +7758,17 @@ function TagsEditor({
|
|
|
7678
7758
|
className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-[11px] hover:border-destructive hover:text-destructive",
|
|
7679
7759
|
children: [
|
|
7680
7760
|
tag,
|
|
7681
|
-
/* @__PURE__ */ (0,
|
|
7761
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-2.5 w-2.5" })
|
|
7682
7762
|
]
|
|
7683
7763
|
}
|
|
7684
7764
|
) }),
|
|
7685
|
-
/* @__PURE__ */ (0,
|
|
7765
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(TooltipContent, { children: [
|
|
7686
7766
|
"Remove ",
|
|
7687
7767
|
tag
|
|
7688
7768
|
] })
|
|
7689
7769
|
] }, tag))
|
|
7690
7770
|
] }),
|
|
7691
|
-
/* @__PURE__ */ (0,
|
|
7771
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7692
7772
|
Input,
|
|
7693
7773
|
{
|
|
7694
7774
|
autoFocus: true,
|
|
@@ -7709,7 +7789,7 @@ function TagsEditor({
|
|
|
7709
7789
|
className: "h-8 text-xs"
|
|
7710
7790
|
}
|
|
7711
7791
|
),
|
|
7712
|
-
matches.length > 0 && /* @__PURE__ */ (0,
|
|
7792
|
+
matches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-wrap gap-1", children: matches.map((s) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
7713
7793
|
"button",
|
|
7714
7794
|
{
|
|
7715
7795
|
type: "button",
|
|
@@ -7722,8 +7802,8 @@ function TagsEditor({
|
|
|
7722
7802
|
},
|
|
7723
7803
|
s.value
|
|
7724
7804
|
)) }),
|
|
7725
|
-
/* @__PURE__ */ (0,
|
|
7726
|
-
/* @__PURE__ */ (0,
|
|
7805
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex justify-end gap-1 pt-1", children: [
|
|
7806
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7727
7807
|
Button,
|
|
7728
7808
|
{
|
|
7729
7809
|
size: "sm",
|
|
@@ -7731,17 +7811,17 @@ function TagsEditor({
|
|
|
7731
7811
|
className: "h-7 px-2",
|
|
7732
7812
|
"aria-label": "Cancel edit",
|
|
7733
7813
|
onClick: onCancel,
|
|
7734
|
-
children: /* @__PURE__ */ (0,
|
|
7814
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-3.5 w-3.5" })
|
|
7735
7815
|
}
|
|
7736
7816
|
),
|
|
7737
|
-
/* @__PURE__ */ (0,
|
|
7817
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7738
7818
|
Button,
|
|
7739
7819
|
{
|
|
7740
7820
|
size: "sm",
|
|
7741
7821
|
className: "h-7 px-2",
|
|
7742
7822
|
"aria-label": "Apply tags",
|
|
7743
7823
|
onClick: () => onCommit(tags),
|
|
7744
|
-
children: /* @__PURE__ */ (0,
|
|
7824
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Check, { className: "h-3.5 w-3.5" })
|
|
7745
7825
|
}
|
|
7746
7826
|
)
|
|
7747
7827
|
] })
|
|
@@ -7752,9 +7832,9 @@ function NumberEditor({
|
|
|
7752
7832
|
onCommit,
|
|
7753
7833
|
onCancel
|
|
7754
7834
|
}) {
|
|
7755
|
-
const [draft, setDraft] = (0,
|
|
7756
|
-
return /* @__PURE__ */ (0,
|
|
7757
|
-
/* @__PURE__ */ (0,
|
|
7835
|
+
const [draft, setDraft] = (0, import_react18.useState)(String(value));
|
|
7836
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
|
|
7837
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7758
7838
|
Input,
|
|
7759
7839
|
{
|
|
7760
7840
|
autoFocus: true,
|
|
@@ -7771,8 +7851,8 @@ function NumberEditor({
|
|
|
7771
7851
|
}
|
|
7772
7852
|
}
|
|
7773
7853
|
),
|
|
7774
|
-
/* @__PURE__ */ (0,
|
|
7775
|
-
/* @__PURE__ */ (0,
|
|
7854
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex justify-end gap-1", children: [
|
|
7855
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7776
7856
|
Button,
|
|
7777
7857
|
{
|
|
7778
7858
|
type: "button",
|
|
@@ -7781,10 +7861,10 @@ function NumberEditor({
|
|
|
7781
7861
|
className: "h-7",
|
|
7782
7862
|
"aria-label": "Cancel edit",
|
|
7783
7863
|
onClick: onCancel,
|
|
7784
|
-
children: /* @__PURE__ */ (0,
|
|
7864
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-3.5 w-3.5" })
|
|
7785
7865
|
}
|
|
7786
7866
|
),
|
|
7787
|
-
/* @__PURE__ */ (0,
|
|
7867
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7788
7868
|
Button,
|
|
7789
7869
|
{
|
|
7790
7870
|
type: "button",
|
|
@@ -7795,7 +7875,7 @@ function NumberEditor({
|
|
|
7795
7875
|
const n = Number(draft);
|
|
7796
7876
|
if (Number.isFinite(n)) onCommit(n);
|
|
7797
7877
|
},
|
|
7798
|
-
children: /* @__PURE__ */ (0,
|
|
7878
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Check, { className: "h-3.5 w-3.5" })
|
|
7799
7879
|
}
|
|
7800
7880
|
)
|
|
7801
7881
|
] })
|
|
@@ -7803,24 +7883,24 @@ function NumberEditor({
|
|
|
7803
7883
|
}
|
|
7804
7884
|
|
|
7805
7885
|
// src/data-table/ToolbarFacets.tsx
|
|
7806
|
-
var
|
|
7886
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
7807
7887
|
function ToolbarFacets({ facets }) {
|
|
7808
7888
|
if (facets.length === 0) return null;
|
|
7809
|
-
return /* @__PURE__ */ (0,
|
|
7889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: facets.map((facet) => {
|
|
7810
7890
|
if (facet.type === "custom") {
|
|
7811
|
-
return /* @__PURE__ */ (0,
|
|
7891
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: facet.render() }, facet.id);
|
|
7812
7892
|
}
|
|
7813
7893
|
const defaultValue = facet.defaultValue ?? facet.options[0]?.value ?? "";
|
|
7814
7894
|
const isNonDefault = facet.value !== defaultValue;
|
|
7815
|
-
return /* @__PURE__ */ (0,
|
|
7895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
7816
7896
|
"div",
|
|
7817
7897
|
{
|
|
7818
7898
|
className: "flex flex-wrap items-center gap-1.5 max-sm:grid max-sm:w-full max-sm:grid-cols-3",
|
|
7819
7899
|
children: [
|
|
7820
|
-
facet.label ? /* @__PURE__ */ (0,
|
|
7900
|
+
facet.label ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "mr-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: facet.label }) : null,
|
|
7821
7901
|
facet.options.map((opt) => {
|
|
7822
7902
|
const active = facet.value === opt.value;
|
|
7823
|
-
return /* @__PURE__ */ (0,
|
|
7903
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
7824
7904
|
Button,
|
|
7825
7905
|
{
|
|
7826
7906
|
type: "button",
|
|
@@ -7834,8 +7914,8 @@ function ToolbarFacets({ facets }) {
|
|
|
7834
7914
|
children: [
|
|
7835
7915
|
opt.icon,
|
|
7836
7916
|
opt.label,
|
|
7837
|
-
active && isNonDefault ? /* @__PURE__ */ (0,
|
|
7838
|
-
/* @__PURE__ */ (0,
|
|
7917
|
+
active && isNonDefault ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
|
|
7918
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
7839
7919
|
"span",
|
|
7840
7920
|
{
|
|
7841
7921
|
role: "button",
|
|
@@ -7853,10 +7933,10 @@ function ToolbarFacets({ facets }) {
|
|
|
7853
7933
|
facet.onChange(defaultValue);
|
|
7854
7934
|
}
|
|
7855
7935
|
},
|
|
7856
|
-
children: /* @__PURE__ */ (0,
|
|
7936
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(X, { className: "h-3 w-3" })
|
|
7857
7937
|
}
|
|
7858
7938
|
) }),
|
|
7859
|
-
/* @__PURE__ */ (0,
|
|
7939
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { side: "top", children: "Clear this filter" })
|
|
7860
7940
|
] }) }) : null
|
|
7861
7941
|
]
|
|
7862
7942
|
},
|
|
@@ -7882,8 +7962,8 @@ function resetToolbarFacets(facets) {
|
|
|
7882
7962
|
}
|
|
7883
7963
|
|
|
7884
7964
|
// src/data-table/LayeredFilterBuilder.tsx
|
|
7885
|
-
var
|
|
7886
|
-
var
|
|
7965
|
+
var import_react19 = require("react");
|
|
7966
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
7887
7967
|
function moveRule(rules, from, to) {
|
|
7888
7968
|
if (from === to || to < 0 || to >= rules.length) return [...rules];
|
|
7889
7969
|
const next = [...rules];
|
|
@@ -7899,8 +7979,8 @@ function LayeredFilterBuilder({
|
|
|
7899
7979
|
maxRules = 20,
|
|
7900
7980
|
label = "Advanced filters"
|
|
7901
7981
|
}) {
|
|
7902
|
-
const [open, setOpen] = (0,
|
|
7903
|
-
const [draggedIndex, setDraggedIndex] = (0,
|
|
7982
|
+
const [open, setOpen] = (0, import_react19.useState)(false);
|
|
7983
|
+
const [draggedIndex, setDraggedIndex] = (0, import_react19.useState)(null);
|
|
7904
7984
|
if (fields.length === 0) return null;
|
|
7905
7985
|
const updateRule = (index, patch) => {
|
|
7906
7986
|
onChange(
|
|
@@ -7929,8 +8009,8 @@ function LayeredFilterBuilder({
|
|
|
7929
8009
|
const reorder = (from, to) => {
|
|
7930
8010
|
onChange(moveRule(rules, from, to));
|
|
7931
8011
|
};
|
|
7932
|
-
return /* @__PURE__ */ (0,
|
|
7933
|
-
/* @__PURE__ */ (0,
|
|
8012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [
|
|
8013
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
7934
8014
|
Popover,
|
|
7935
8015
|
{
|
|
7936
8016
|
open,
|
|
@@ -7942,7 +8022,7 @@ function LayeredFilterBuilder({
|
|
|
7942
8022
|
}
|
|
7943
8023
|
},
|
|
7944
8024
|
children: [
|
|
7945
|
-
/* @__PURE__ */ (0,
|
|
8025
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
7946
8026
|
Button,
|
|
7947
8027
|
{
|
|
7948
8028
|
type: "button",
|
|
@@ -7951,25 +8031,25 @@ function LayeredFilterBuilder({
|
|
|
7951
8031
|
className: "h-8 gap-1.5 px-2 text-xs",
|
|
7952
8032
|
"aria-label": label,
|
|
7953
8033
|
children: [
|
|
7954
|
-
/* @__PURE__ */ (0,
|
|
7955
|
-
/* @__PURE__ */ (0,
|
|
7956
|
-
rules.length > 0 ? /* @__PURE__ */ (0,
|
|
8034
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
|
|
8035
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "hidden sm:inline", children: rules.length > 0 ? `${rules.length} layers` : "Advanced" }),
|
|
8036
|
+
rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "sm:hidden", children: rules.length }) : null
|
|
7957
8037
|
]
|
|
7958
8038
|
}
|
|
7959
8039
|
) }),
|
|
7960
|
-
/* @__PURE__ */ (0,
|
|
8040
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
7961
8041
|
PopoverContent,
|
|
7962
8042
|
{
|
|
7963
8043
|
align: "start",
|
|
7964
8044
|
sideOffset: 6,
|
|
7965
8045
|
className: "w-[min(46rem,calc(100vw-1rem))] p-0",
|
|
7966
8046
|
children: [
|
|
7967
|
-
/* @__PURE__ */ (0,
|
|
7968
|
-
/* @__PURE__ */ (0,
|
|
7969
|
-
/* @__PURE__ */ (0,
|
|
7970
|
-
/* @__PURE__ */ (0,
|
|
8047
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-start justify-between gap-3 border-b border-border px-3 py-2.5", children: [
|
|
8048
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
|
|
8049
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-semibold text-foreground", children: "Narrow these results" }),
|
|
8050
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xs text-muted-foreground", children: "Every layer must match. Drag layers to put them in the order that makes sense to you." })
|
|
7971
8051
|
] }),
|
|
7972
|
-
rules.length > 0 ? /* @__PURE__ */ (0,
|
|
8052
|
+
rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7973
8053
|
Button,
|
|
7974
8054
|
{
|
|
7975
8055
|
type: "button",
|
|
@@ -7981,10 +8061,10 @@ function LayeredFilterBuilder({
|
|
|
7981
8061
|
}
|
|
7982
8062
|
) : null
|
|
7983
8063
|
] }),
|
|
7984
|
-
/* @__PURE__ */ (0,
|
|
7985
|
-
/* @__PURE__ */ (0,
|
|
7986
|
-
/* @__PURE__ */ (0,
|
|
7987
|
-
] }) : rules.map((rule, index) => /* @__PURE__ */ (0,
|
|
8064
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "max-h-[min(28rem,65dvh)] space-y-1.5 overflow-y-auto p-2.5 scrollbar-thin", children: rules.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "rounded-md border border-dashed border-border px-3 py-5 text-center", children: [
|
|
8065
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Start with one simple layer" }),
|
|
8066
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: "For example: Keyword contains ITAD, then Keyword doesn't have the word \u201Cwhat\u201D." })
|
|
8067
|
+
] }) : rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7988
8068
|
LayeredRuleRow,
|
|
7989
8069
|
{
|
|
7990
8070
|
index,
|
|
@@ -8004,9 +8084,9 @@ function LayeredFilterBuilder({
|
|
|
8004
8084
|
},
|
|
8005
8085
|
rule.id
|
|
8006
8086
|
)) }),
|
|
8007
|
-
/* @__PURE__ */ (0,
|
|
8008
|
-
/* @__PURE__ */ (0,
|
|
8009
|
-
/* @__PURE__ */ (0,
|
|
8087
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-border px-3 py-2", children: [
|
|
8088
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "The regular search still works and is applied before these layers." }),
|
|
8089
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
8010
8090
|
Button,
|
|
8011
8091
|
{
|
|
8012
8092
|
type: "button",
|
|
@@ -8016,7 +8096,7 @@ function LayeredFilterBuilder({
|
|
|
8016
8096
|
disabled: rules.length >= maxRules,
|
|
8017
8097
|
onClick: addRule,
|
|
8018
8098
|
children: [
|
|
8019
|
-
/* @__PURE__ */ (0,
|
|
8099
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Plus, { className: "h-3.5 w-3.5" }),
|
|
8020
8100
|
" Add layer"
|
|
8021
8101
|
]
|
|
8022
8102
|
}
|
|
@@ -8028,7 +8108,7 @@ function LayeredFilterBuilder({
|
|
|
8028
8108
|
]
|
|
8029
8109
|
}
|
|
8030
8110
|
),
|
|
8031
|
-
rules.map((rule, index) => /* @__PURE__ */ (0,
|
|
8111
|
+
rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
8032
8112
|
"span",
|
|
8033
8113
|
{
|
|
8034
8114
|
className: cn(
|
|
@@ -8036,7 +8116,7 @@ function LayeredFilterBuilder({
|
|
|
8036
8116
|
isCompleteLayeredFilterRule(rule) ? "border-border bg-muted/50 text-foreground" : "border-dashed border-warning/50 bg-warning/10 text-warning"
|
|
8037
8117
|
),
|
|
8038
8118
|
children: [
|
|
8039
|
-
/* @__PURE__ */ (0,
|
|
8119
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
8040
8120
|
"button",
|
|
8041
8121
|
{
|
|
8042
8122
|
type: "button",
|
|
@@ -8044,19 +8124,19 @@ function LayeredFilterBuilder({
|
|
|
8044
8124
|
onClick: () => setOpen(true),
|
|
8045
8125
|
title: isCompleteLayeredFilterRule(rule) ? layeredFilterRuleSummary(rule, fields) : `Layer ${index + 1} needs a value`,
|
|
8046
8126
|
children: [
|
|
8047
|
-
/* @__PURE__ */ (0,
|
|
8127
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "mr-1 text-muted-foreground", children: index + 1 }),
|
|
8048
8128
|
isCompleteLayeredFilterRule(rule) ? layeredFilterRuleSummary(rule, fields) : "Choose a value"
|
|
8049
8129
|
]
|
|
8050
8130
|
}
|
|
8051
8131
|
),
|
|
8052
|
-
/* @__PURE__ */ (0,
|
|
8132
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8053
8133
|
"button",
|
|
8054
8134
|
{
|
|
8055
8135
|
type: "button",
|
|
8056
8136
|
className: "shrink-0 rounded-full p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
8057
8137
|
"aria-label": `Remove filter layer ${index + 1}`,
|
|
8058
8138
|
onClick: () => removeRule(index),
|
|
8059
|
-
children: /* @__PURE__ */ (0,
|
|
8139
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(X, { className: "h-3 w-3" })
|
|
8060
8140
|
}
|
|
8061
8141
|
)
|
|
8062
8142
|
]
|
|
@@ -8086,7 +8166,7 @@ function LayeredRuleRow({
|
|
|
8086
8166
|
event.preventDefault();
|
|
8087
8167
|
onKeyboardMove(event.key === "ArrowUp" ? -1 : 1);
|
|
8088
8168
|
};
|
|
8089
|
-
return /* @__PURE__ */ (0,
|
|
8169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
8090
8170
|
"div",
|
|
8091
8171
|
{
|
|
8092
8172
|
className: cn(
|
|
@@ -8099,7 +8179,7 @@ function LayeredRuleRow({
|
|
|
8099
8179
|
onDrop(index);
|
|
8100
8180
|
},
|
|
8101
8181
|
children: [
|
|
8102
|
-
/* @__PURE__ */ (0,
|
|
8182
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8103
8183
|
"button",
|
|
8104
8184
|
{
|
|
8105
8185
|
type: "button",
|
|
@@ -8113,10 +8193,10 @@ function LayeredRuleRow({
|
|
|
8113
8193
|
},
|
|
8114
8194
|
onDragEnd,
|
|
8115
8195
|
onKeyDown: handleMoveKey,
|
|
8116
|
-
children: /* @__PURE__ */ (0,
|
|
8196
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
|
|
8117
8197
|
}
|
|
8118
8198
|
),
|
|
8119
|
-
/* @__PURE__ */ (0,
|
|
8199
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
8120
8200
|
Select,
|
|
8121
8201
|
{
|
|
8122
8202
|
value: field.id,
|
|
@@ -8134,16 +8214,16 @@ function LayeredRuleRow({
|
|
|
8134
8214
|
});
|
|
8135
8215
|
},
|
|
8136
8216
|
children: [
|
|
8137
|
-
/* @__PURE__ */ (0,
|
|
8217
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8138
8218
|
SelectTrigger,
|
|
8139
8219
|
{
|
|
8140
8220
|
size: "sm",
|
|
8141
8221
|
className: "h-7 w-full text-xs max-sm:col-span-1",
|
|
8142
8222
|
"aria-label": `Filter layer ${index + 1} field`,
|
|
8143
|
-
children: /* @__PURE__ */ (0,
|
|
8223
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, {})
|
|
8144
8224
|
}
|
|
8145
8225
|
),
|
|
8146
|
-
/* @__PURE__ */ (0,
|
|
8226
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectContent, { children: fields.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8147
8227
|
SelectItem,
|
|
8148
8228
|
{
|
|
8149
8229
|
value: candidate.id,
|
|
@@ -8155,7 +8235,7 @@ function LayeredRuleRow({
|
|
|
8155
8235
|
]
|
|
8156
8236
|
}
|
|
8157
8237
|
),
|
|
8158
|
-
/* @__PURE__ */ (0,
|
|
8238
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
8159
8239
|
Select,
|
|
8160
8240
|
{
|
|
8161
8241
|
value: rule.operator,
|
|
@@ -8167,35 +8247,35 @@ function LayeredRuleRow({
|
|
|
8167
8247
|
});
|
|
8168
8248
|
},
|
|
8169
8249
|
children: [
|
|
8170
|
-
/* @__PURE__ */ (0,
|
|
8250
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8171
8251
|
SelectTrigger,
|
|
8172
8252
|
{
|
|
8173
8253
|
size: "sm",
|
|
8174
8254
|
className: "h-7 w-full text-xs max-sm:col-start-2",
|
|
8175
8255
|
"aria-label": `Filter layer ${index + 1} operator`,
|
|
8176
|
-
children: /* @__PURE__ */ (0,
|
|
8256
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, {})
|
|
8177
8257
|
}
|
|
8178
8258
|
),
|
|
8179
|
-
/* @__PURE__ */ (0,
|
|
8259
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectContent, { children: operators.map((operator) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectItem, { value: operator, className: "text-xs", children: LAYERED_FILTER_OPERATOR_LABELS[operator] }, operator)) })
|
|
8180
8260
|
]
|
|
8181
8261
|
}
|
|
8182
8262
|
),
|
|
8183
|
-
/* @__PURE__ */ (0,
|
|
8263
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "min-w-0 max-sm:col-span-3 max-sm:col-start-1", children: !needsValue ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex h-7 items-center px-2 text-xs text-muted-foreground", children: "No value needed" }) : field.kind === "select" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
8184
8264
|
Select,
|
|
8185
8265
|
{
|
|
8186
8266
|
value: rule.value,
|
|
8187
8267
|
onValueChange: (value) => onChange({ value }),
|
|
8188
8268
|
children: [
|
|
8189
|
-
/* @__PURE__ */ (0,
|
|
8269
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8190
8270
|
SelectTrigger,
|
|
8191
8271
|
{
|
|
8192
8272
|
size: "sm",
|
|
8193
8273
|
className: "h-7 w-full text-xs",
|
|
8194
8274
|
"aria-label": `Filter layer ${index + 1} value`,
|
|
8195
|
-
children: /* @__PURE__ */ (0,
|
|
8275
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, {})
|
|
8196
8276
|
}
|
|
8197
8277
|
),
|
|
8198
|
-
/* @__PURE__ */ (0,
|
|
8278
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectContent, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8199
8279
|
SelectItem,
|
|
8200
8280
|
{
|
|
8201
8281
|
value: option.value,
|
|
@@ -8206,8 +8286,8 @@ function LayeredRuleRow({
|
|
|
8206
8286
|
)) })
|
|
8207
8287
|
]
|
|
8208
8288
|
}
|
|
8209
|
-
) : /* @__PURE__ */ (0,
|
|
8210
|
-
/* @__PURE__ */ (0,
|
|
8289
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
8290
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8211
8291
|
Input,
|
|
8212
8292
|
{
|
|
8213
8293
|
value: rule.value,
|
|
@@ -8218,9 +8298,9 @@ function LayeredRuleRow({
|
|
|
8218
8298
|
"aria-label": `Filter layer ${index + 1} value`
|
|
8219
8299
|
}
|
|
8220
8300
|
),
|
|
8221
|
-
rule.operator === "between" ? /* @__PURE__ */ (0,
|
|
8222
|
-
/* @__PURE__ */ (0,
|
|
8223
|
-
/* @__PURE__ */ (0,
|
|
8301
|
+
rule.operator === "between" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
8302
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "and" }),
|
|
8303
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8224
8304
|
Input,
|
|
8225
8305
|
{
|
|
8226
8306
|
value: rule.valueTo ?? "",
|
|
@@ -8233,7 +8313,7 @@ function LayeredRuleRow({
|
|
|
8233
8313
|
)
|
|
8234
8314
|
] }) : null
|
|
8235
8315
|
] }) }),
|
|
8236
|
-
/* @__PURE__ */ (0,
|
|
8316
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8237
8317
|
Button,
|
|
8238
8318
|
{
|
|
8239
8319
|
type: "button",
|
|
@@ -8242,7 +8322,7 @@ function LayeredRuleRow({
|
|
|
8242
8322
|
className: "h-7 w-7 p-0 text-muted-foreground hover:text-destructive max-sm:col-start-3 max-sm:row-start-1",
|
|
8243
8323
|
"aria-label": `Remove filter layer ${index + 1}`,
|
|
8244
8324
|
onClick: onRemove,
|
|
8245
|
-
children: /* @__PURE__ */ (0,
|
|
8325
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Trash2, { className: "h-3.5 w-3.5" })
|
|
8246
8326
|
}
|
|
8247
8327
|
)
|
|
8248
8328
|
]
|
|
@@ -8342,7 +8422,7 @@ function safeQueryPage(requestedPage, totalItems, pageSize) {
|
|
|
8342
8422
|
}
|
|
8343
8423
|
|
|
8344
8424
|
// src/data-table/MatrxDataTable.tsx
|
|
8345
|
-
var
|
|
8425
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
8346
8426
|
function TableToolbarAction({
|
|
8347
8427
|
HostAction,
|
|
8348
8428
|
ariaLabel,
|
|
@@ -8353,10 +8433,10 @@ function TableToolbarAction({
|
|
|
8353
8433
|
children
|
|
8354
8434
|
}) {
|
|
8355
8435
|
if (HostAction) {
|
|
8356
|
-
return /* @__PURE__ */ (0,
|
|
8436
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-matrx-table-toolbar-action": true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children }) });
|
|
8357
8437
|
}
|
|
8358
|
-
return /* @__PURE__ */ (0,
|
|
8359
|
-
/* @__PURE__ */ (0,
|
|
8438
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
8439
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-matrx-table-toolbar-action": true, className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
8360
8440
|
Button,
|
|
8361
8441
|
{
|
|
8362
8442
|
type: "button",
|
|
@@ -8368,10 +8448,10 @@ function TableToolbarAction({
|
|
|
8368
8448
|
"aria-busy": busy || void 0,
|
|
8369
8449
|
disabled,
|
|
8370
8450
|
onClick,
|
|
8371
|
-
children: (0,
|
|
8451
|
+
children: (0, import_react20.isValidElement)(children) ? (0, import_react20.cloneElement)(children, { className: cn("h-5 w-5", children.props.className) }) : children
|
|
8372
8452
|
}
|
|
8373
8453
|
) }) }),
|
|
8374
|
-
/* @__PURE__ */ (0,
|
|
8454
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: tooltip ?? ariaLabel })
|
|
8375
8455
|
] });
|
|
8376
8456
|
}
|
|
8377
8457
|
function hasSameRowReferences(previous, next) {
|
|
@@ -8384,20 +8464,20 @@ function TableRowCopyControl({
|
|
|
8384
8464
|
sourceId,
|
|
8385
8465
|
defaultColumns
|
|
8386
8466
|
}) {
|
|
8387
|
-
return /* @__PURE__ */ (0,
|
|
8388
|
-
|
|
8389
|
-
|
|
8390
|
-
|
|
8391
|
-
|
|
8392
|
-
|
|
8393
|
-
|
|
8394
|
-
|
|
8395
|
-
|
|
8396
|
-
|
|
8397
|
-
|
|
8398
|
-
|
|
8399
|
-
}
|
|
8400
|
-
|
|
8467
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CopyButtons, { size, ...tableRowCopyProps(copy, row, sourceId, defaultColumns) });
|
|
8468
|
+
}
|
|
8469
|
+
function tableRowCopyProps(copy, row, sourceId, defaultColumns) {
|
|
8470
|
+
const aiVariants = copy.rowAiVariants?.(row);
|
|
8471
|
+
return {
|
|
8472
|
+
sourceId,
|
|
8473
|
+
label: copy.label,
|
|
8474
|
+
...copy.rowReferences ? { references: copy.rowReferences(row) } : {},
|
|
8475
|
+
...copy.triggerVariant ? { triggerVariant: copy.triggerVariant } : {},
|
|
8476
|
+
human: () => copy.humanRow(row),
|
|
8477
|
+
json: () => copy.agentRow ? copy.agentRow(row) : row,
|
|
8478
|
+
agent: () => defaultColumns ? buildDefaultTableRowAgentInput(copy, row, defaultColumns) : buildRowAgentInput(copy, row),
|
|
8479
|
+
...aiVariants === void 0 ? {} : { aiVariants }
|
|
8480
|
+
};
|
|
8401
8481
|
}
|
|
8402
8482
|
function dragPointerY(event) {
|
|
8403
8483
|
const activator = event.activatorEvent;
|
|
@@ -8408,8 +8488,8 @@ function isStringArray(value) {
|
|
|
8408
8488
|
}
|
|
8409
8489
|
var activeUrlTableIds = /* @__PURE__ */ new Set();
|
|
8410
8490
|
function MatrxDataTable(props) {
|
|
8411
|
-
if (!props.urlState) return /* @__PURE__ */ (0,
|
|
8412
|
-
return /* @__PURE__ */ (0,
|
|
8491
|
+
if (!props.urlState) return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MatrxDataTableCore, { ...props });
|
|
8492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MatrxDataTableWithUrlState, { ...props, urlState: props.urlState });
|
|
8413
8493
|
}
|
|
8414
8494
|
function MatrxDataTableWithUrlState({
|
|
8415
8495
|
urlState,
|
|
@@ -8427,7 +8507,7 @@ function MatrxDataTableWithUrlState({
|
|
|
8427
8507
|
...urlState.history === void 0 ? {} : { history: urlState.history },
|
|
8428
8508
|
...urlState.textHistory === void 0 ? {} : { textHistory: urlState.textHistory }
|
|
8429
8509
|
});
|
|
8430
|
-
(0,
|
|
8510
|
+
(0, import_react20.useEffect)(() => {
|
|
8431
8511
|
if (activeUrlTableIds.has(urlState.id)) {
|
|
8432
8512
|
throw new Error(
|
|
8433
8513
|
`Duplicate MatrxDataTable urlState.id "${urlState.id}" on one page. Give every table a unique stable id.`
|
|
@@ -8464,7 +8544,7 @@ function MatrxDataTableWithUrlState({
|
|
|
8464
8544
|
props.selection?.onSelectedIdsChange(ids);
|
|
8465
8545
|
}
|
|
8466
8546
|
} : props.selection;
|
|
8467
|
-
return /* @__PURE__ */ (0,
|
|
8547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
8468
8548
|
MatrxDataTableCore,
|
|
8469
8549
|
{
|
|
8470
8550
|
...props,
|
|
@@ -8497,6 +8577,9 @@ function MatrxDataTableWithUrlState({
|
|
|
8497
8577
|
);
|
|
8498
8578
|
}
|
|
8499
8579
|
var COLUMN_REORDER_ACTIVATION_DISTANCE = 6;
|
|
8580
|
+
function TableContextPassthrough({ children }) {
|
|
8581
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children });
|
|
8582
|
+
}
|
|
8500
8583
|
function MatrxDataTableCore({
|
|
8501
8584
|
data: suppliedData,
|
|
8502
8585
|
columns,
|
|
@@ -8523,6 +8606,8 @@ function MatrxDataTableCore({
|
|
|
8523
8606
|
detail,
|
|
8524
8607
|
window: windowConfig,
|
|
8525
8608
|
copy,
|
|
8609
|
+
contextMenu,
|
|
8610
|
+
rowCopyPlacement = "inline",
|
|
8526
8611
|
edit,
|
|
8527
8612
|
hierarchy,
|
|
8528
8613
|
selectedId: controlledSelectedId,
|
|
@@ -8551,21 +8636,22 @@ function MatrxDataTableCore({
|
|
|
8551
8636
|
}) {
|
|
8552
8637
|
const appendQuery = query?.mode === "controlled-append" ? query : null;
|
|
8553
8638
|
const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
|
|
8554
|
-
const committedAppendQueryKey = (0,
|
|
8639
|
+
const committedAppendQueryKey = (0, import_react20.useRef)(appendQueryKey);
|
|
8555
8640
|
const appendSourceChanged = appendQuery !== null && committedAppendQueryKey.current !== appendQueryKey;
|
|
8556
8641
|
const data = appendQuery ? appendQuery.pagination.rows : suppliedData;
|
|
8557
8642
|
const isLoading = appendQuery ? appendQuery.pagination.loading : suppliedLoading;
|
|
8558
8643
|
const isFetching = appendQuery ? appendQuery.pagination.isFetchingNextPage : suppliedFetching;
|
|
8559
8644
|
const host = useMatrxDataTableHost();
|
|
8645
|
+
const ContextMenuBoundary = host.ContextMenuBoundary ?? TableContextPassthrough;
|
|
8560
8646
|
const resolvedDensity = density ?? host.defaultDensity ?? "normal";
|
|
8561
8647
|
const SavedViews = host.SavedViews;
|
|
8562
8648
|
const Link = host.Link ?? DefaultTableLink;
|
|
8563
8649
|
const SidePanelSurface = host.SidePanelSurface ?? DefaultTableSidePanel;
|
|
8564
8650
|
const { notify: toast, notice } = useTableNotice();
|
|
8565
|
-
const [savedViewError, setSavedViewError] = (0,
|
|
8566
|
-
const [toolbarActionError, setToolbarActionError] = (0,
|
|
8567
|
-
const [toolbarActionPending, setToolbarActionPending] = (0,
|
|
8568
|
-
const toolbarActionPendingRef = (0,
|
|
8651
|
+
const [savedViewError, setSavedViewError] = (0, import_react20.useState)(null);
|
|
8652
|
+
const [toolbarActionError, setToolbarActionError] = (0, import_react20.useState)(null);
|
|
8653
|
+
const [toolbarActionPending, setToolbarActionPending] = (0, import_react20.useState)({ refresh: false, add: false });
|
|
8654
|
+
const toolbarActionPendingRef = (0, import_react20.useRef)({ refresh: false, add: false });
|
|
8569
8655
|
const CHECKBOX_TAP_AREA = "h-4 w-4 touch-manipulation";
|
|
8570
8656
|
const mobileCardsClass = mobileCardsBreakpoint === "lg" ? "lg:hidden" : "sm:hidden";
|
|
8571
8657
|
const tableWithCardsClass = mobileCardsBreakpoint === "lg" ? "max-lg:hidden" : "max-sm:hidden";
|
|
@@ -8578,7 +8664,7 @@ function MatrxDataTableCore({
|
|
|
8578
8664
|
const sourceOwnsIntelligentSearch = sourceProcessing?.intelligentSearch === "source";
|
|
8579
8665
|
const sourceOwnsSearch = remoteQuery?.mode === "controlled" || appendQuery !== null && sourceProcessing === void 0 || sourceProcessing?.search === "source" || sourceOwnsIntelligentSearch;
|
|
8580
8666
|
const intelligentSearchEnabled = toolbar?.intelligentSearch !== void 0 && (sourceOwnsIntelligentSearch || remoteQuery === null && !sourceOwnsSearch);
|
|
8581
|
-
const emitControlledQueryChange = (0,
|
|
8667
|
+
const emitControlledQueryChange = (0, import_react20.useCallback)(
|
|
8582
8668
|
(patch, options) => {
|
|
8583
8669
|
if (!controlledQuery) return;
|
|
8584
8670
|
controlledQuery.onStateChange(
|
|
@@ -8587,8 +8673,8 @@ function MatrxDataTableCore({
|
|
|
8587
8673
|
},
|
|
8588
8674
|
[controlledQuery]
|
|
8589
8675
|
);
|
|
8590
|
-
const [internalSearch, setInternalSearch] = (0,
|
|
8591
|
-
const [draggedRowId, setDraggedRowId] = (0,
|
|
8676
|
+
const [internalSearch, setInternalSearch] = (0, import_react20.useState)("");
|
|
8677
|
+
const [draggedRowId, setDraggedRowId] = (0, import_react20.useState)(null);
|
|
8592
8678
|
const hierarchySensors = (0, import_core3.useSensors)(
|
|
8593
8679
|
(0, import_core3.useSensor)(import_core3.PointerSensor, {
|
|
8594
8680
|
activationConstraint: { distance: COLUMN_REORDER_ACTIVATION_DISTANCE }
|
|
@@ -8604,7 +8690,7 @@ function MatrxDataTableCore({
|
|
|
8604
8690
|
}
|
|
8605
8691
|
toolbar?.onSearchChange?.(v);
|
|
8606
8692
|
};
|
|
8607
|
-
const [internalSearchMatchMode, setInternalSearchMatchMode] = (0,
|
|
8693
|
+
const [internalSearchMatchMode, setInternalSearchMatchMode] = (0, import_react20.useState)(
|
|
8608
8694
|
toolbar?.searchMatch?.defaultMode ?? "contains"
|
|
8609
8695
|
);
|
|
8610
8696
|
const searchMatchMode = controlledQuery ? controlledQuery.state.searchMatchMode ?? toolbar?.searchMatch?.defaultMode ?? "contains" : internalSearchMatchMode;
|
|
@@ -8615,7 +8701,7 @@ function MatrxDataTableCore({
|
|
|
8615
8701
|
}
|
|
8616
8702
|
setInternalSearchMatchMode(mode);
|
|
8617
8703
|
};
|
|
8618
|
-
const [internalSearchScope, setInternalSearchScope] = (0,
|
|
8704
|
+
const [internalSearchScope, setInternalSearchScope] = (0, import_react20.useState)("all");
|
|
8619
8705
|
const searchScope = controlledQuery ? controlledQuery.state.searchScope ?? "all" : internalSearchScope;
|
|
8620
8706
|
const setSearchScope = (scope) => {
|
|
8621
8707
|
if (controlledQuery) {
|
|
@@ -8624,7 +8710,7 @@ function MatrxDataTableCore({
|
|
|
8624
8710
|
}
|
|
8625
8711
|
setInternalSearchScope(scope);
|
|
8626
8712
|
};
|
|
8627
|
-
const [internalAnyOf, setInternalAnyOf] = (0,
|
|
8713
|
+
const [internalAnyOf, setInternalAnyOf] = (0, import_react20.useState)("");
|
|
8628
8714
|
const toolbarAnyOfControlled = toolbar?.anyOf?.value !== void 0;
|
|
8629
8715
|
const anyOfValue = controlledQuery ? controlledQuery.state.anyOf : toolbarAnyOfControlled ? toolbar?.anyOf?.value ?? "" : internalAnyOf;
|
|
8630
8716
|
const setAnyOfValue = (v) => {
|
|
@@ -8635,7 +8721,7 @@ function MatrxDataTableCore({
|
|
|
8635
8721
|
}
|
|
8636
8722
|
toolbar?.anyOf?.onChange?.(v);
|
|
8637
8723
|
};
|
|
8638
|
-
const [internalLayeredFilters, setInternalLayeredFilters] = (0,
|
|
8724
|
+
const [internalLayeredFilters, setInternalLayeredFilters] = (0, import_react20.useState)([]);
|
|
8639
8725
|
const layeredFilters = controlledQuery ? controlledQuery.state.layeredFilters ?? [] : internalLayeredFilters;
|
|
8640
8726
|
const setLayeredFilters = (next) => {
|
|
8641
8727
|
if (controlledQuery) {
|
|
@@ -8644,7 +8730,7 @@ function MatrxDataTableCore({
|
|
|
8644
8730
|
}
|
|
8645
8731
|
setInternalLayeredFilters(next);
|
|
8646
8732
|
};
|
|
8647
|
-
const [internalColumnFilters, setInternalColumnFilters] = (0,
|
|
8733
|
+
const [internalColumnFilters, setInternalColumnFilters] = (0, import_react20.useState)({});
|
|
8648
8734
|
const columnFilters = controlledQuery ? controlledQuery.state.columnFilters : internalColumnFilters;
|
|
8649
8735
|
const setColumnFilter = (id, next) => {
|
|
8650
8736
|
const nextFilters = { ...columnFilters, [id]: next };
|
|
@@ -8657,7 +8743,7 @@ function MatrxDataTableCore({
|
|
|
8657
8743
|
}
|
|
8658
8744
|
setInternalColumnFilters(nextFilters);
|
|
8659
8745
|
};
|
|
8660
|
-
const [internalSort, setInternalSort] = (0,
|
|
8746
|
+
const [internalSort, setInternalSort] = (0, import_react20.useState)(defaultSort);
|
|
8661
8747
|
const sort = controlledQuery ? controlledQuery.state.sort : internalSort;
|
|
8662
8748
|
const setSort = (next) => {
|
|
8663
8749
|
if (controlledQuery) {
|
|
@@ -8666,7 +8752,7 @@ function MatrxDataTableCore({
|
|
|
8666
8752
|
}
|
|
8667
8753
|
setInternalSort(next);
|
|
8668
8754
|
};
|
|
8669
|
-
const [internalPage, setInternalPage] = (0,
|
|
8755
|
+
const [internalPage, setInternalPage] = (0, import_react20.useState)(1);
|
|
8670
8756
|
const page = controlledQuery ? controlledQuery.state.page : internalPage;
|
|
8671
8757
|
const setPage = (next) => {
|
|
8672
8758
|
if (controlledQuery) {
|
|
@@ -8675,7 +8761,7 @@ function MatrxDataTableCore({
|
|
|
8675
8761
|
}
|
|
8676
8762
|
setInternalPage(next);
|
|
8677
8763
|
};
|
|
8678
|
-
const [internalPageSize, setInternalPageSize] = (0,
|
|
8764
|
+
const [internalPageSize, setInternalPageSize] = (0, import_react20.useState)(
|
|
8679
8765
|
defaultPageSize === 0 ? Math.max(data.length, 1) : defaultPageSize
|
|
8680
8766
|
);
|
|
8681
8767
|
const pageSize = controlledQuery ? controlledQuery.state.pageSize : internalPageSize;
|
|
@@ -8686,26 +8772,28 @@ function MatrxDataTableCore({
|
|
|
8686
8772
|
}
|
|
8687
8773
|
setInternalPageSize(next);
|
|
8688
8774
|
};
|
|
8689
|
-
const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0,
|
|
8775
|
+
const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0, import_react20.useState)(null);
|
|
8690
8776
|
const rawSelectedId = controlledSelectedId !== void 0 ? controlledSelectedId : uncontrolledSelectedId;
|
|
8691
8777
|
const selectedId = appendSourceChanged ? null : rawSelectedId;
|
|
8692
8778
|
const setSelectedId = (id) => {
|
|
8693
8779
|
if (controlledSelectedId === void 0) setUncontrolledSelectedId(id);
|
|
8694
8780
|
onSelectedIdChange?.(id);
|
|
8695
8781
|
};
|
|
8696
|
-
const [uncontrolledWindowRowId, setUncontrolledWindowRowId] = (0,
|
|
8782
|
+
const [uncontrolledWindowRowId, setUncontrolledWindowRowId] = (0, import_react20.useState)(null);
|
|
8697
8783
|
const rawWindowRowId = controlledWindowRowId !== void 0 ? controlledWindowRowId : uncontrolledWindowRowId;
|
|
8698
8784
|
const windowRowId = appendSourceChanged ? null : rawWindowRowId;
|
|
8699
8785
|
const setWindowRowId = (id) => {
|
|
8700
8786
|
if (controlledWindowRowId === void 0) setUncontrolledWindowRowId(id);
|
|
8701
8787
|
onWindowRowIdChange?.(id);
|
|
8702
8788
|
};
|
|
8703
|
-
const [windowRowSnapshot, setWindowRowSnapshot] = (0,
|
|
8789
|
+
const [windowRowSnapshot, setWindowRowSnapshot] = (0, import_react20.useState)(null);
|
|
8704
8790
|
const editScopeKey = appendQueryKey === null ? "\0local" : `append:${appendQueryKey}`;
|
|
8705
|
-
const [editsByScope, setEditsByScope] = (0,
|
|
8706
|
-
const editRevisionRef = (0,
|
|
8707
|
-
const [savingByScope, setSavingByScope] = (0,
|
|
8708
|
-
const
|
|
8791
|
+
const [editsByScope, setEditsByScope] = (0, import_react20.useState)({});
|
|
8792
|
+
const editRevisionRef = (0, import_react20.useRef)({});
|
|
8793
|
+
const [savingByScope, setSavingByScope] = (0, import_react20.useState)({});
|
|
8794
|
+
const savingScopesRef = (0, import_react20.useRef)(/* @__PURE__ */ new Set());
|
|
8795
|
+
const [editRequest, setEditRequest] = (0, import_react20.useState)(null);
|
|
8796
|
+
const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = (0, import_react20.useState)(false);
|
|
8709
8797
|
const edits = editsByScope[editScopeKey]?.values ?? {};
|
|
8710
8798
|
const saving = (savingByScope[editScopeKey] ?? 0) > 0;
|
|
8711
8799
|
const setEdits = (next) => {
|
|
@@ -8772,7 +8860,7 @@ function MatrxDataTableCore({
|
|
|
8772
8860
|
rows: Object.entries(draft.values).map(([rowId, columns2]) => ({ rowId, columns: columns2 }))
|
|
8773
8861
|
}));
|
|
8774
8862
|
const selection = appendSourceChanged && selectionConfig ? { ...selectionConfig, selectedIds: [] } : selectionConfig;
|
|
8775
|
-
(0,
|
|
8863
|
+
(0, import_react20.useEffect)(() => {
|
|
8776
8864
|
const previous = committedAppendQueryKey.current;
|
|
8777
8865
|
committedAppendQueryKey.current = appendQueryKey;
|
|
8778
8866
|
if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
|
|
@@ -8790,14 +8878,14 @@ function MatrxDataTableCore({
|
|
|
8790
8878
|
onWindowRowIdChange,
|
|
8791
8879
|
selectionConfig
|
|
8792
8880
|
]);
|
|
8793
|
-
const scrollRef = (0,
|
|
8794
|
-
const tableRef = (0,
|
|
8795
|
-
const tableHeaderRef = (0,
|
|
8796
|
-
const cardsScrollRef = (0,
|
|
8797
|
-
const [documentStickyHeader, setDocumentStickyHeader] = (0,
|
|
8798
|
-
const documentStickyHeaderRef = (0,
|
|
8799
|
-
const previousAppendKeyForScrollReset = (0,
|
|
8800
|
-
(0,
|
|
8881
|
+
const scrollRef = (0, import_react20.useRef)(null);
|
|
8882
|
+
const tableRef = (0, import_react20.useRef)(null);
|
|
8883
|
+
const tableHeaderRef = (0, import_react20.useRef)(null);
|
|
8884
|
+
const cardsScrollRef = (0, import_react20.useRef)(null);
|
|
8885
|
+
const [documentStickyHeader, setDocumentStickyHeader] = (0, import_react20.useState)(false);
|
|
8886
|
+
const documentStickyHeaderRef = (0, import_react20.useRef)(false);
|
|
8887
|
+
const previousAppendKeyForScrollReset = (0, import_react20.useRef)(appendQueryKey);
|
|
8888
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
8801
8889
|
const previous = previousAppendKeyForScrollReset.current;
|
|
8802
8890
|
previousAppendKeyForScrollReset.current = appendQueryKey;
|
|
8803
8891
|
if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
|
|
@@ -8822,13 +8910,13 @@ function MatrxDataTableCore({
|
|
|
8822
8910
|
...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.thresholdPx !== void 0 ? { thresholdPx: appendScrollPolicy.thresholdPx } : {},
|
|
8823
8911
|
...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
|
|
8824
8912
|
});
|
|
8825
|
-
const rootRef = (0,
|
|
8913
|
+
const rootRef = (0, import_react20.useRef)(null);
|
|
8826
8914
|
useClippedContentGuard(rootRef, {
|
|
8827
8915
|
label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
|
|
8828
8916
|
});
|
|
8829
|
-
const [scrollHintRight, setScrollHintRight] = (0,
|
|
8830
|
-
const [scrollHintLeft, setScrollHintLeft] = (0,
|
|
8831
|
-
const updateScrollHint = (0,
|
|
8917
|
+
const [scrollHintRight, setScrollHintRight] = (0, import_react20.useState)(false);
|
|
8918
|
+
const [scrollHintLeft, setScrollHintLeft] = (0, import_react20.useState)(false);
|
|
8919
|
+
const updateScrollHint = (0, import_react20.useCallback)(() => {
|
|
8832
8920
|
const el = scrollRef.current;
|
|
8833
8921
|
if (!el) return;
|
|
8834
8922
|
setScrollHintRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 2);
|
|
@@ -8842,7 +8930,7 @@ function MatrxDataTableCore({
|
|
|
8842
8930
|
behavior: "smooth"
|
|
8843
8931
|
});
|
|
8844
8932
|
};
|
|
8845
|
-
(0,
|
|
8933
|
+
(0, import_react20.useEffect)(() => {
|
|
8846
8934
|
updateScrollHint();
|
|
8847
8935
|
window.addEventListener("resize", updateScrollHint);
|
|
8848
8936
|
const el = scrollRef.current;
|
|
@@ -8857,7 +8945,7 @@ function MatrxDataTableCore({
|
|
|
8857
8945
|
observer?.disconnect();
|
|
8858
8946
|
};
|
|
8859
8947
|
}, [updateScrollHint, data, columns]);
|
|
8860
|
-
(0,
|
|
8948
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
8861
8949
|
const scroll = scrollRef.current;
|
|
8862
8950
|
const table = tableRef.current;
|
|
8863
8951
|
const header = tableHeaderRef.current;
|
|
@@ -8916,30 +9004,30 @@ function MatrxDataTableCore({
|
|
|
8916
9004
|
window.removeEventListener("resize", requestUpdate);
|
|
8917
9005
|
};
|
|
8918
9006
|
}, [stickyHeader, data, columns]);
|
|
8919
|
-
const [columnOrder, setColumnOrder] = (0,
|
|
8920
|
-
const [hiddenColumnIds, setHiddenColumnIds] = (0,
|
|
9007
|
+
const [columnOrder, setColumnOrder] = (0, import_react20.useState)(() => columnState?.order ?? columns.map(columnId));
|
|
9008
|
+
const [hiddenColumnIds, setHiddenColumnIds] = (0, import_react20.useState)(
|
|
8921
9009
|
() => new Set(columnState?.hidden ?? columns.filter((column) => column.hidden).map(columnId))
|
|
8922
9010
|
);
|
|
8923
|
-
const [columnWidths, setColumnWidths] = (0,
|
|
9011
|
+
const [columnWidths, setColumnWidths] = (0, import_react20.useState)(
|
|
8924
9012
|
() => normalizeColumnWidthsForColumns(columnState?.widths, columns)
|
|
8925
9013
|
);
|
|
8926
|
-
const [fixedTableGeometry, setFixedTableGeometry] = (0,
|
|
8927
|
-
const knownColumnIds = (0,
|
|
8928
|
-
const draggedColumnId = (0,
|
|
8929
|
-
const columnDragActive = (0,
|
|
8930
|
-
const columnDragRaf = (0,
|
|
8931
|
-
const columnDragScrollDirection = (0,
|
|
8932
|
-
const [columnDragPreview, setColumnDragPreview] = (0,
|
|
8933
|
-
const stopColumnDragScroll = (0,
|
|
9014
|
+
const [fixedTableGeometry, setFixedTableGeometry] = (0, import_react20.useState)(null);
|
|
9015
|
+
const knownColumnIds = (0, import_react20.useRef)(new Set(columns.map(columnId)));
|
|
9016
|
+
const draggedColumnId = (0, import_react20.useRef)(null);
|
|
9017
|
+
const columnDragActive = (0, import_react20.useRef)(false);
|
|
9018
|
+
const columnDragRaf = (0, import_react20.useRef)(null);
|
|
9019
|
+
const columnDragScrollDirection = (0, import_react20.useRef)(0);
|
|
9020
|
+
const [columnDragPreview, setColumnDragPreview] = (0, import_react20.useState)(null);
|
|
9021
|
+
const stopColumnDragScroll = (0, import_react20.useCallback)(() => {
|
|
8934
9022
|
if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
|
|
8935
9023
|
columnDragRaf.current = null;
|
|
8936
9024
|
columnDragScrollDirection.current = 0;
|
|
8937
9025
|
}, []);
|
|
8938
|
-
(0,
|
|
9026
|
+
(0, import_react20.useEffect)(() => () => {
|
|
8939
9027
|
columnDragActive.current = false;
|
|
8940
9028
|
stopColumnDragScroll();
|
|
8941
9029
|
}, [stopColumnDragScroll]);
|
|
8942
|
-
const startColumnDragScroll = (0,
|
|
9030
|
+
const startColumnDragScroll = (0, import_react20.useCallback)(() => {
|
|
8943
9031
|
if (!columnDragActive.current || columnDragRaf.current !== null) return;
|
|
8944
9032
|
const scrollStep = () => {
|
|
8945
9033
|
const scroll = scrollRef.current;
|
|
@@ -8966,25 +9054,25 @@ function MatrxDataTableCore({
|
|
|
8966
9054
|
};
|
|
8967
9055
|
columnDragRaf.current = requestAnimationFrame(scrollStep);
|
|
8968
9056
|
}, []);
|
|
8969
|
-
const commitColumnState = (0,
|
|
9057
|
+
const commitColumnState = (0, import_react20.useCallback)((order, hidden) => {
|
|
8970
9058
|
if (columnState) columnState.onChange({ order, hidden: [...hidden] });
|
|
8971
9059
|
else {
|
|
8972
9060
|
setColumnOrder(order);
|
|
8973
9061
|
setHiddenColumnIds(hidden);
|
|
8974
9062
|
}
|
|
8975
9063
|
}, [columnState]);
|
|
8976
|
-
const [internalColumnManagerOpen, setInternalColumnManagerOpen] = (0,
|
|
9064
|
+
const [internalColumnManagerOpen, setInternalColumnManagerOpen] = (0, import_react20.useState)(false);
|
|
8977
9065
|
const columnManagerOpen = controlledColumnManager?.open ?? internalColumnManagerOpen;
|
|
8978
9066
|
const setColumnManagerOpen = controlledColumnManager?.onOpenChange ?? setInternalColumnManagerOpen;
|
|
8979
|
-
const columnIds = (0,
|
|
8980
|
-
const effectiveColumnOrder = (0,
|
|
8981
|
-
const effectiveHiddenColumnIds = (0,
|
|
8982
|
-
const effectiveColumnWidths = (0,
|
|
9067
|
+
const columnIds = (0, import_react20.useMemo)(() => columns.map(columnId), [columns]);
|
|
9068
|
+
const effectiveColumnOrder = (0, import_react20.useMemo)(() => columnState ? [...columnState.order.filter((id, index, values) => columnIds.includes(id) && values.indexOf(id) === index), ...columnIds.filter((id) => !columnState.order.includes(id))] : columnOrder, [columnIds, columnOrder, columnState]);
|
|
9069
|
+
const effectiveHiddenColumnIds = (0, import_react20.useMemo)(() => columnState ? new Set(columnState.hidden.filter((id) => columnIds.includes(id))) : hiddenColumnIds, [columnIds, columnState, hiddenColumnIds]);
|
|
9070
|
+
const effectiveColumnWidths = (0, import_react20.useMemo)(
|
|
8983
9071
|
() => normalizeColumnWidthsForColumns(columnState?.widths ?? columnWidths, columns),
|
|
8984
9072
|
[columns, columnState?.widths, columnWidths]
|
|
8985
9073
|
);
|
|
8986
|
-
const resizeGestureSnapshotRef = (0,
|
|
8987
|
-
const measureVisibleColumnWidths = (0,
|
|
9074
|
+
const resizeGestureSnapshotRef = (0, import_react20.useRef)(null);
|
|
9075
|
+
const measureVisibleColumnWidths = (0, import_react20.useCallback)(() => {
|
|
8988
9076
|
const measured = {};
|
|
8989
9077
|
const headers = tableRef.current ? Array.from(tableRef.current.querySelectorAll(
|
|
8990
9078
|
"thead th[data-matrx-table-column-id]"
|
|
@@ -8998,7 +9086,7 @@ function MatrxDataTableCore({
|
|
|
8998
9086
|
}
|
|
8999
9087
|
return normalizeColumnWidthsForColumns(measured, columns);
|
|
9000
9088
|
}, [columns]);
|
|
9001
|
-
const measureFixedTableGeometry = (0,
|
|
9089
|
+
const measureFixedTableGeometry = (0, import_react20.useCallback)(() => {
|
|
9002
9090
|
const table = tableRef.current;
|
|
9003
9091
|
const headers = table ? Array.from(table.querySelectorAll("thead th")) : [];
|
|
9004
9092
|
const widthFor = (selector) => {
|
|
@@ -9028,16 +9116,16 @@ function MatrxDataTableCore({
|
|
|
9028
9116
|
...actionsWidth === void 0 ? {} : { actionsWidth }
|
|
9029
9117
|
};
|
|
9030
9118
|
}, [resolvedDensity]);
|
|
9031
|
-
const captureResizeGestureSnapshot = (0,
|
|
9119
|
+
const captureResizeGestureSnapshot = (0, import_react20.useCallback)(() => {
|
|
9032
9120
|
resizeGestureSnapshotRef.current = {
|
|
9033
9121
|
widths: measureVisibleColumnWidths(),
|
|
9034
9122
|
geometry: measureFixedTableGeometry()
|
|
9035
9123
|
};
|
|
9036
9124
|
}, [measureFixedTableGeometry, measureVisibleColumnWidths]);
|
|
9037
|
-
const clearResizeGestureSnapshot = (0,
|
|
9125
|
+
const clearResizeGestureSnapshot = (0, import_react20.useCallback)(() => {
|
|
9038
9126
|
resizeGestureSnapshotRef.current = null;
|
|
9039
9127
|
}, []);
|
|
9040
|
-
const commitColumnWidths = (0,
|
|
9128
|
+
const commitColumnWidths = (0, import_react20.useCallback)((next, captureInitialWidths = false) => {
|
|
9041
9129
|
const gestureSnapshot = captureInitialWidths ? resizeGestureSnapshotRef.current : null;
|
|
9042
9130
|
resizeGestureSnapshotRef.current = null;
|
|
9043
9131
|
const normalized = normalizeColumnWidthsForColumns(
|
|
@@ -9056,7 +9144,7 @@ function MatrxDataTableCore({
|
|
|
9056
9144
|
}
|
|
9057
9145
|
setColumnWidths(normalized);
|
|
9058
9146
|
}, [columnIds, columnState, columns, measureFixedTableGeometry, measureVisibleColumnWidths]);
|
|
9059
|
-
(0,
|
|
9147
|
+
(0, import_react20.useEffect)(() => {
|
|
9060
9148
|
const ids = columns.map(columnId);
|
|
9061
9149
|
if (columnState) return;
|
|
9062
9150
|
const previousIds = knownColumnIds.current;
|
|
@@ -9075,31 +9163,31 @@ function MatrxDataTableCore({
|
|
|
9075
9163
|
setColumnWidths((current) => normalizeColumnWidthsForColumns(current, columns));
|
|
9076
9164
|
knownColumnIds.current = new Set(ids);
|
|
9077
9165
|
}, [columns, columnState]);
|
|
9078
|
-
(0,
|
|
9166
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
9079
9167
|
for (const id of columnIds) {
|
|
9080
9168
|
tableRef.current?.style.removeProperty(columnResizeCssVar(id));
|
|
9081
9169
|
}
|
|
9082
9170
|
});
|
|
9083
|
-
const previewColumnOrder = (0,
|
|
9171
|
+
const previewColumnOrder = (0, import_react20.useMemo)(
|
|
9084
9172
|
() => projectColumnDragOrder(effectiveColumnOrder, columnDragPreview),
|
|
9085
9173
|
[columnDragPreview, effectiveColumnOrder]
|
|
9086
9174
|
);
|
|
9087
9175
|
useColumnReorderAnimation(tableRef, previewColumnOrder.join("\0"), columnDragPreview !== null);
|
|
9088
|
-
const visibleColumns = (0,
|
|
9176
|
+
const visibleColumns = (0, import_react20.useMemo)(() => {
|
|
9089
9177
|
const byId = new Map(columns.map((column) => [columnId(column), column]));
|
|
9090
9178
|
return previewColumnOrder.map((id) => byId.get(id)).filter(
|
|
9091
9179
|
(column) => column !== void 0 && !effectiveHiddenColumnIds.has(columnId(column))
|
|
9092
9180
|
);
|
|
9093
9181
|
}, [columns, effectiveHiddenColumnIds, previewColumnOrder]);
|
|
9094
9182
|
const usesMeasuredFixedLayout = visibleColumns.length > 0 && visibleColumns.every((column) => effectiveColumnWidths[columnId(column)] !== void 0);
|
|
9095
|
-
(0,
|
|
9183
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
9096
9184
|
if (!usesMeasuredFixedLayout) {
|
|
9097
9185
|
if (fixedTableGeometry !== null) setFixedTableGeometry(null);
|
|
9098
9186
|
return;
|
|
9099
9187
|
}
|
|
9100
9188
|
if (fixedTableGeometry === null) setFixedTableGeometry(measureFixedTableGeometry());
|
|
9101
9189
|
}, [fixedTableGeometry, measureFixedTableGeometry, usesMeasuredFixedLayout]);
|
|
9102
|
-
(0,
|
|
9190
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
9103
9191
|
if (!usesMeasuredFixedLayout) return;
|
|
9104
9192
|
const table = tableRef.current;
|
|
9105
9193
|
if (!table) return;
|
|
@@ -9121,14 +9209,15 @@ function MatrxDataTableCore({
|
|
|
9121
9209
|
setFixedTableGeometry(geometry);
|
|
9122
9210
|
}, [resolvedDensity, measureFixedTableGeometry, usesMeasuredFixedLayout]);
|
|
9123
9211
|
const fixedLayoutActive = usesMeasuredFixedLayout && fixedTableGeometry !== null;
|
|
9124
|
-
const declaredVisibleCopyColumns = (0,
|
|
9212
|
+
const declaredVisibleCopyColumns = (0, import_react20.useMemo)(
|
|
9125
9213
|
() => visibleColumns.filter((column) => column.accessorFn !== void 0 || column.accessorKey !== void 0),
|
|
9126
9214
|
[visibleColumns]
|
|
9127
9215
|
);
|
|
9128
|
-
const tableCopySourceNamespace = (0,
|
|
9129
|
-
const
|
|
9216
|
+
const tableCopySourceNamespace = (0, import_react20.useId)();
|
|
9217
|
+
const tableContextMenuInstanceId = (0, import_react20.useId)();
|
|
9218
|
+
const tableDndContextId = (0, import_react20.useId)();
|
|
9130
9219
|
const defaultCopyTitle = toolbar?.title || "Table";
|
|
9131
|
-
const defaultCopy = (0,
|
|
9220
|
+
const defaultCopy = (0, import_react20.useMemo)(() => ({
|
|
9132
9221
|
label: defaultCopyTitle,
|
|
9133
9222
|
listLabel: defaultCopyTitle,
|
|
9134
9223
|
location: defaultCopyTitle,
|
|
@@ -9163,7 +9252,7 @@ function MatrxDataTableCore({
|
|
|
9163
9252
|
serializer: (shaped) => buildViewAgentInput(effectiveCopy, shaped, data, { scope: "custom" })
|
|
9164
9253
|
}))
|
|
9165
9254
|
] : [];
|
|
9166
|
-
const filterMeta = (0,
|
|
9255
|
+
const filterMeta = (0, import_react20.useMemo)(() => {
|
|
9167
9256
|
const meta = /* @__PURE__ */ new Map();
|
|
9168
9257
|
for (const col of visibleColumns) {
|
|
9169
9258
|
const id = columnId(col);
|
|
@@ -9171,14 +9260,14 @@ function MatrxDataTableCore({
|
|
|
9171
9260
|
}
|
|
9172
9261
|
return meta;
|
|
9173
9262
|
}, [visibleColumns, data, remoteQuery]);
|
|
9174
|
-
const intelligentSearchScopes = (0,
|
|
9263
|
+
const intelligentSearchScopes = (0, import_react20.useMemo)(
|
|
9175
9264
|
() => resolveTableSearchScopes(data, columns, {
|
|
9176
9265
|
...toolbar?.intelligentSearch?.roles === void 0 ? {} : { roles: toolbar.intelligentSearch.roles },
|
|
9177
9266
|
...toolbar?.intelligentSearch?.scopes === void 0 ? {} : { scopes: toolbar.intelligentSearch.scopes }
|
|
9178
9267
|
}),
|
|
9179
9268
|
[columns, data, toolbar?.intelligentSearch?.roles, toolbar?.intelligentSearch?.scopes]
|
|
9180
9269
|
);
|
|
9181
|
-
const processed = (0,
|
|
9270
|
+
const processed = (0, import_react20.useMemo)(() => {
|
|
9182
9271
|
if (remoteQuery && !appendUsesLocalProcessing) return data;
|
|
9183
9272
|
if (processLocalRows) {
|
|
9184
9273
|
return processLocalRows(data, {
|
|
@@ -9241,8 +9330,8 @@ function MatrxDataTableCore({
|
|
|
9241
9330
|
intelligentSearchEnabled,
|
|
9242
9331
|
searchScope
|
|
9243
9332
|
]);
|
|
9244
|
-
const lastNotifiedViewRows = (0,
|
|
9245
|
-
(0,
|
|
9333
|
+
const lastNotifiedViewRows = (0, import_react20.useRef)(null);
|
|
9334
|
+
(0, import_react20.useEffect)(() => {
|
|
9246
9335
|
if (!onViewChange) {
|
|
9247
9336
|
lastNotifiedViewRows.current = null;
|
|
9248
9337
|
return;
|
|
@@ -9251,7 +9340,7 @@ function MatrxDataTableCore({
|
|
|
9251
9340
|
lastNotifiedViewRows.current = processed;
|
|
9252
9341
|
if (changed) onViewChange(processed);
|
|
9253
9342
|
}, [processed, onViewChange]);
|
|
9254
|
-
(0,
|
|
9343
|
+
(0, import_react20.useEffect)(() => {
|
|
9255
9344
|
if (controlledQuery) return;
|
|
9256
9345
|
setInternalPage(1);
|
|
9257
9346
|
}, [
|
|
@@ -9295,7 +9384,7 @@ function MatrxDataTableCore({
|
|
|
9295
9384
|
numberedPageHasMore: !hidePagination && !isLoading && !isFetching && processed.length > 0 && safePage < pageCount && (remoteQuery?.mode === "controlled" || !remoteQuery && localPagination?.mode === "numbered"),
|
|
9296
9385
|
onPageAdvance: setPage
|
|
9297
9386
|
});
|
|
9298
|
-
const paginated = (0,
|
|
9387
|
+
const paginated = (0, import_react20.useMemo)(() => {
|
|
9299
9388
|
if (remoteQuery) return processed;
|
|
9300
9389
|
if (hidePagination) return processed;
|
|
9301
9390
|
if (localProgressiveEnabled) return [...progressiveRows.rows];
|
|
@@ -9303,15 +9392,15 @@ function MatrxDataTableCore({
|
|
|
9303
9392
|
const start = (safePage - 1) * effectivePageSize;
|
|
9304
9393
|
return processed.slice(start, start + effectivePageSize);
|
|
9305
9394
|
}, [processed, safePage, effectivePageSize, pageSize, remoteQuery, hidePagination, localProgressiveEnabled, progressiveRows.rows]);
|
|
9306
|
-
(0,
|
|
9395
|
+
(0, import_react20.useEffect)(() => {
|
|
9307
9396
|
if (!controlledQuery || controlledQuery.state.page === safePage) return;
|
|
9308
9397
|
emitControlledQueryChange({ page: safePage });
|
|
9309
9398
|
}, [controlledQuery, emitControlledQueryChange, safePage]);
|
|
9310
|
-
const selectedRow = (0,
|
|
9399
|
+
const selectedRow = (0, import_react20.useMemo)(() => {
|
|
9311
9400
|
if (!selectedId) return null;
|
|
9312
9401
|
return data.find((r) => getRowId(r) === selectedId) ?? null;
|
|
9313
9402
|
}, [data, selectedId, getRowId]);
|
|
9314
|
-
const windowRow = (0,
|
|
9403
|
+
const windowRow = (0, import_react20.useMemo)(() => {
|
|
9315
9404
|
if (!windowRowId) return null;
|
|
9316
9405
|
return data.find((r) => getRowId(r) === windowRowId) ?? (windowRowSnapshot && windowRowSnapshot.queryKey === appendQueryKey && getRowId(windowRowSnapshot.row) === windowRowId ? windowRowSnapshot.row : null);
|
|
9317
9406
|
}, [data, windowRowId, windowRowSnapshot, getRowId, appendQueryKey]);
|
|
@@ -9322,7 +9411,23 @@ function MatrxDataTableCore({
|
|
|
9322
9411
|
);
|
|
9323
9412
|
const editEnabled = Boolean(edit?.enabled && edit.onSave);
|
|
9324
9413
|
const showRowCopy = effectiveCopy !== void 0 && effectiveCopy.showRow !== false;
|
|
9414
|
+
const rowCopyInMenu = rowCopyPlacement === "menu" && Boolean(rowActions);
|
|
9415
|
+
const showInlineRowCopy = showRowCopy && !rowCopyInMenu;
|
|
9325
9416
|
const showToolbarCopy = effectiveCopy !== void 0 && effectiveCopy.showToolbar !== false;
|
|
9417
|
+
const renderRowActions = (row, controls) => {
|
|
9418
|
+
const actions = rowActions?.(row, controls);
|
|
9419
|
+
const scopedActions = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MatrxTableRowControlsScope, { value: controls, children: actions });
|
|
9420
|
+
if (!effectiveCopy || !showRowCopy) return scopedActions;
|
|
9421
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
9422
|
+
MatrxTableRowAlchemyProvider,
|
|
9423
|
+
{
|
|
9424
|
+
copy: tableRowCopyProps(effectiveCopy, row, `${tableCopySourceNamespace}:row:${getRowId(row)}`, copy === void 0 ? declaredVisibleCopyColumns : void 0),
|
|
9425
|
+
placement: rowCopyInMenu ? "menu" : "inline",
|
|
9426
|
+
controls,
|
|
9427
|
+
children: scopedActions
|
|
9428
|
+
}
|
|
9429
|
+
);
|
|
9430
|
+
};
|
|
9326
9431
|
const activeFilterCount = countActiveColumnFilters(columnFilters);
|
|
9327
9432
|
const facetActive = (toolbar?.facets ?? []).some((f) => {
|
|
9328
9433
|
if (f.type === "custom") return f.filter?.active ?? false;
|
|
@@ -9330,7 +9435,7 @@ function MatrxDataTableCore({
|
|
|
9330
9435
|
return def !== void 0 && f.value !== def;
|
|
9331
9436
|
});
|
|
9332
9437
|
const hasActiveFilters = activeFilterCount > 0 || Boolean(searchValue.trim()) || intelligentSearchEnabled && searchScope !== "all" || Boolean(anyOfValue.trim()) || completeLayeredFilterRules(layeredFilters).length > 0 || facetActive;
|
|
9333
|
-
const changeCount = (0,
|
|
9438
|
+
const changeCount = (0, import_react20.useMemo)(() => {
|
|
9334
9439
|
let n = 0;
|
|
9335
9440
|
for (const fields of Object.values(edits)) {
|
|
9336
9441
|
n += Object.keys(fields).length;
|
|
@@ -9397,7 +9502,7 @@ function MatrxDataTableCore({
|
|
|
9397
9502
|
const renderedEmptyState = remoteQuery === null && data.length > 0 && hasActiveFilters ? {
|
|
9398
9503
|
title: "No matching rows",
|
|
9399
9504
|
description: "No rows match the current search or filters.",
|
|
9400
|
-
action: /* @__PURE__ */ (0,
|
|
9505
|
+
action: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { type: "button", variant: "outline", size: "sm", onClick: clearAllFilters, children: "Clear filters" }),
|
|
9401
9506
|
icon: void 0
|
|
9402
9507
|
} : emptyState;
|
|
9403
9508
|
const commitCell = (rowId, field, next) => {
|
|
@@ -9436,9 +9541,40 @@ function MatrxDataTableCore({
|
|
|
9436
9541
|
return next;
|
|
9437
9542
|
});
|
|
9438
9543
|
};
|
|
9544
|
+
const beginRowEdit = (row) => {
|
|
9545
|
+
const column = visibleColumns.find(
|
|
9546
|
+
(candidate) => candidate.editable && (candidate.editableIf?.(row) ?? true)
|
|
9547
|
+
);
|
|
9548
|
+
if (!column) return;
|
|
9549
|
+
const field = column.accessorKey ? String(column.accessorKey) : columnId(column);
|
|
9550
|
+
setEditRequest((current) => ({
|
|
9551
|
+
rowId: getRowId(row),
|
|
9552
|
+
field,
|
|
9553
|
+
nonce: (current?.nonce ?? 0) + 1
|
|
9554
|
+
}));
|
|
9555
|
+
};
|
|
9556
|
+
const buildRecordControls = (row) => {
|
|
9557
|
+
const rowId = getRowId(row);
|
|
9558
|
+
const pending = edits[rowId];
|
|
9559
|
+
return {
|
|
9560
|
+
closeDetail: () => setSelectedId(null),
|
|
9561
|
+
openDetail: () => openDetail(row),
|
|
9562
|
+
openWindow: () => openWindow(row),
|
|
9563
|
+
closeWindow,
|
|
9564
|
+
hasPendingEdits: Boolean(pending),
|
|
9565
|
+
discardPendingEdits: () => discardRowEdits(rowId),
|
|
9566
|
+
...pending ? { cancelEdits: () => discardRowEdits(rowId) } : {},
|
|
9567
|
+
...pending && edit?.onSave && !edit.autoSave && !saving ? {
|
|
9568
|
+
saveEdits: () => handleSaveEdits(rowId)
|
|
9569
|
+
} : {},
|
|
9570
|
+
...editEnabled && visibleColumns.some(
|
|
9571
|
+
(column) => column.editable && (column.editableIf?.(row) ?? true)
|
|
9572
|
+
) ? { beginEdit: () => beginRowEdit(row) } : {}
|
|
9573
|
+
};
|
|
9574
|
+
};
|
|
9439
9575
|
const hierarchyRows = hierarchy?.rows ?? data;
|
|
9440
9576
|
const hierarchyGetParentId = hierarchy?.getParentId;
|
|
9441
|
-
const hierarchyIndex = (0,
|
|
9577
|
+
const hierarchyIndex = (0, import_react20.useMemo)(() => {
|
|
9442
9578
|
if (!hierarchyGetParentId) return null;
|
|
9443
9579
|
const byId = /* @__PURE__ */ new Map();
|
|
9444
9580
|
const parentById = /* @__PURE__ */ new Map();
|
|
@@ -9470,7 +9606,7 @@ function MatrxDataTableCore({
|
|
|
9470
9606
|
return { byId, parentById, depthById };
|
|
9471
9607
|
}, [hierarchyGetParentId, hierarchyRows, getRowId]);
|
|
9472
9608
|
const draggedRow = draggedRowId && hierarchyIndex ? hierarchyIndex.byId.get(draggedRowId) : void 0;
|
|
9473
|
-
const hierarchyBlockedIds = (0,
|
|
9609
|
+
const hierarchyBlockedIds = (0, import_react20.useMemo)(() => {
|
|
9474
9610
|
if (!draggedRowId || !hierarchyIndex) return null;
|
|
9475
9611
|
const childrenById = /* @__PURE__ */ new Map();
|
|
9476
9612
|
for (const [id, parentId] of hierarchyIndex.parentById) {
|
|
@@ -9607,15 +9743,18 @@ function MatrxDataTableCore({
|
|
|
9607
9743
|
}
|
|
9608
9744
|
setDraggedRowId(null);
|
|
9609
9745
|
};
|
|
9610
|
-
const handleSaveEdits = async () => {
|
|
9746
|
+
const handleSaveEdits = async (rowId) => {
|
|
9611
9747
|
if (!edit?.onSave || changeCount === 0) return;
|
|
9612
9748
|
const scope = editScopeKey;
|
|
9749
|
+
if (savingScopesRef.current.has(scope)) return;
|
|
9613
9750
|
const draft = editsByScope[scope];
|
|
9614
9751
|
if (!draft) return;
|
|
9615
|
-
const values = draft.values;
|
|
9616
|
-
|
|
9752
|
+
const values = rowId ? draft.values[rowId] ? { [rowId]: draft.values[rowId] } : {} : draft.values;
|
|
9753
|
+
if (Object.keys(values).length === 0) return;
|
|
9754
|
+
const revisions = rowId ? draft.revisions[rowId] ? { [rowId]: draft.revisions[rowId] } : {} : draft.revisions;
|
|
9617
9755
|
const rows = appendQueryKey === null ? data : draft.rows;
|
|
9618
9756
|
const save = edit.onSave;
|
|
9757
|
+
savingScopesRef.current.add(scope);
|
|
9619
9758
|
startSaving(scope);
|
|
9620
9759
|
try {
|
|
9621
9760
|
await Promise.resolve().then(() => save(values, rows));
|
|
@@ -9623,16 +9762,16 @@ function MatrxDataTableCore({
|
|
|
9623
9762
|
const currentDraft = current[scope];
|
|
9624
9763
|
if (!currentDraft) return current;
|
|
9625
9764
|
const nextValues = {};
|
|
9626
|
-
for (const [
|
|
9627
|
-
const savedRow = values[
|
|
9628
|
-
const savedRevisions = revisions[
|
|
9629
|
-
const currentRevisions = currentDraft.revisions[
|
|
9765
|
+
for (const [rowId2, rowValues] of Object.entries(currentDraft.values)) {
|
|
9766
|
+
const savedRow = values[rowId2];
|
|
9767
|
+
const savedRevisions = revisions[rowId2];
|
|
9768
|
+
const currentRevisions = currentDraft.revisions[rowId2];
|
|
9630
9769
|
const remaining = Object.fromEntries(
|
|
9631
9770
|
Object.entries(rowValues).filter(
|
|
9632
9771
|
([field]) => !Object.hasOwn(savedRow ?? {}, field) || currentRevisions?.[field] !== savedRevisions?.[field]
|
|
9633
9772
|
)
|
|
9634
9773
|
);
|
|
9635
|
-
if (Object.keys(remaining).length > 0) nextValues[
|
|
9774
|
+
if (Object.keys(remaining).length > 0) nextValues[rowId2] = remaining;
|
|
9636
9775
|
}
|
|
9637
9776
|
return { ...current, [scope]: { ...currentDraft, values: nextValues } };
|
|
9638
9777
|
});
|
|
@@ -9642,6 +9781,7 @@ function MatrxDataTableCore({
|
|
|
9642
9781
|
`Couldn't save: ${e instanceof Error ? e.message : String(e)}`
|
|
9643
9782
|
);
|
|
9644
9783
|
} finally {
|
|
9784
|
+
savingScopesRef.current.delete(scope);
|
|
9645
9785
|
finishSaving(scope);
|
|
9646
9786
|
}
|
|
9647
9787
|
};
|
|
@@ -9649,8 +9789,19 @@ function MatrxDataTableCore({
|
|
|
9649
9789
|
setEdits({});
|
|
9650
9790
|
edit?.onCancel?.();
|
|
9651
9791
|
};
|
|
9652
|
-
|
|
9653
|
-
|
|
9792
|
+
(0, import_react20.useEffect)(() => {
|
|
9793
|
+
if (!host.rowContextRegistry || !contextMenu && !host.createDefaultRowContext) return;
|
|
9794
|
+
return host.rowContextRegistry.register(tableContextMenuInstanceId, (rowId) => {
|
|
9795
|
+
const row = data.find((candidate) => getRowId(candidate) === rowId);
|
|
9796
|
+
if (!row) return null;
|
|
9797
|
+
const pending = edits[rowId];
|
|
9798
|
+
const displayRow = applyRowEdits(row, pending);
|
|
9799
|
+
const controls = buildRecordControls(displayRow);
|
|
9800
|
+
return contextMenu?.resolveRowContext(displayRow, controls) ?? host.createDefaultRowContext?.(displayRow, controls) ?? null;
|
|
9801
|
+
});
|
|
9802
|
+
}, [buildRecordControls, contextMenu, data, getRowId, host.createDefaultRowContext, host.rowContextRegistry, tableContextMenuInstanceId]);
|
|
9803
|
+
const showActionsCol = windowEnabled || Boolean(rowActions) || showInlineRowCopy;
|
|
9804
|
+
const selectedIdSet = (0, import_react20.useMemo)(
|
|
9654
9805
|
() => new Set(selection?.selectedIds ?? []),
|
|
9655
9806
|
[selection?.selectedIds]
|
|
9656
9807
|
);
|
|
@@ -9662,11 +9813,11 @@ function MatrxDataTableCore({
|
|
|
9662
9813
|
);
|
|
9663
9814
|
const allOnPageSelected = selectableRows.length > 0 && selectedOnPage.length === selectableRows.length;
|
|
9664
9815
|
const someOnPageSelected = selectedOnPage.length > 0 && !allOnPageSelected;
|
|
9665
|
-
const selectedRows = (0,
|
|
9816
|
+
const selectedRows = (0, import_react20.useMemo)(
|
|
9666
9817
|
() => data.filter((row) => selectedIdSet.has(getRowId(row))),
|
|
9667
9818
|
[data, selectedIdSet, getRowId]
|
|
9668
9819
|
);
|
|
9669
|
-
const lastToggledIndex = (0,
|
|
9820
|
+
const lastToggledIndex = (0, import_react20.useRef)(null);
|
|
9670
9821
|
const setSelectedIds = (next) => selection?.onSelectedIdsChange([...next]);
|
|
9671
9822
|
const toggleRowSelected = (index, shiftKey) => {
|
|
9672
9823
|
if (!selection) return;
|
|
@@ -9719,7 +9870,7 @@ function MatrxDataTableCore({
|
|
|
9719
9870
|
const display = renderCell(applyRowEdits(row, rowEdits), col, index);
|
|
9720
9871
|
const href = col.href?.(row) ?? void 0;
|
|
9721
9872
|
if (editEnabled && col.editable && (col.editableIf?.(row) ?? true)) {
|
|
9722
|
-
return /* @__PURE__ */ (0,
|
|
9873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
9723
9874
|
EditableTableCell,
|
|
9724
9875
|
{
|
|
9725
9876
|
value: rowEdits && field in rowEdits ? rowEdits[field] : getCellValue(row, col),
|
|
@@ -9729,13 +9880,14 @@ function MatrxDataTableCore({
|
|
|
9729
9880
|
dirty: Boolean(rowEdits && field in rowEdits),
|
|
9730
9881
|
onCommit: (next) => commitCell(id, field, next),
|
|
9731
9882
|
...href === void 0 ? {} : { href },
|
|
9732
|
-
...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger }
|
|
9883
|
+
...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger },
|
|
9884
|
+
...editRequest?.rowId === id && editRequest.field === field ? { editRequest: editRequest.nonce } : {}
|
|
9733
9885
|
}
|
|
9734
9886
|
);
|
|
9735
9887
|
}
|
|
9736
|
-
return href ? /* @__PURE__ */ (0,
|
|
9888
|
+
return href ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Link, { href, onClick: (event) => event.stopPropagation(), className: "block w-full min-w-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring", children: display }) : display;
|
|
9737
9889
|
};
|
|
9738
|
-
const currentViewSnapshot = (0,
|
|
9890
|
+
const currentViewSnapshot = (0, import_react20.useMemo)(
|
|
9739
9891
|
() => ({
|
|
9740
9892
|
__kind: "matrx-table-view",
|
|
9741
9893
|
version: 1,
|
|
@@ -9770,7 +9922,7 @@ function MatrxDataTableCore({
|
|
|
9770
9922
|
sort
|
|
9771
9923
|
]
|
|
9772
9924
|
);
|
|
9773
|
-
const declaredDefaultViewSnapshot = (0,
|
|
9925
|
+
const declaredDefaultViewSnapshot = (0, import_react20.useMemo)(
|
|
9774
9926
|
() => defaultViewSnapshot ?? {
|
|
9775
9927
|
__kind: "matrx-table-view",
|
|
9776
9928
|
version: 1,
|
|
@@ -9789,7 +9941,7 @@ function MatrxDataTableCore({
|
|
|
9789
9941
|
},
|
|
9790
9942
|
[columns, defaultPageSize, defaultSort, defaultViewSnapshot]
|
|
9791
9943
|
);
|
|
9792
|
-
const applySavedView = (0,
|
|
9944
|
+
const applySavedView = (0, import_react20.useCallback)(
|
|
9793
9945
|
(rawSnapshot) => {
|
|
9794
9946
|
const snapshot = parseTableViewSnapshot(rawSnapshot);
|
|
9795
9947
|
if (!snapshot) {
|
|
@@ -9839,7 +9991,7 @@ function MatrxDataTableCore({
|
|
|
9839
9991
|
},
|
|
9840
9992
|
[columns, commitColumnState, commitColumnWidths, controlledQuery, intelligentSearchEnabled, intelligentSearchScopes, toolbar]
|
|
9841
9993
|
);
|
|
9842
|
-
return /* @__PURE__ */ (0,
|
|
9994
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ContextMenuBoundary, { label: tableId ?? "Data table", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
9843
9995
|
import_core3.DndContext,
|
|
9844
9996
|
{
|
|
9845
9997
|
id: tableDndContextId,
|
|
@@ -9932,11 +10084,12 @@ function MatrxDataTableCore({
|
|
|
9932
10084
|
commitColumnState(order, effectiveHiddenColumnIds);
|
|
9933
10085
|
},
|
|
9934
10086
|
children: [
|
|
9935
|
-
/* @__PURE__ */ (0,
|
|
10087
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
9936
10088
|
"div",
|
|
9937
10089
|
{
|
|
9938
10090
|
ref: rootRef,
|
|
9939
10091
|
"data-matrx-table": true,
|
|
10092
|
+
"data-matrx-table-id": tableContextMenuInstanceId,
|
|
9940
10093
|
"data-matrx-table-implementation": "@ai-matrx/design-system",
|
|
9941
10094
|
"data-matrx-table-density": resolvedDensity,
|
|
9942
10095
|
"data-url-state-table": urlState?.id,
|
|
@@ -9946,14 +10099,14 @@ function MatrxDataTableCore({
|
|
|
9946
10099
|
),
|
|
9947
10100
|
children: [
|
|
9948
10101
|
notice,
|
|
9949
|
-
savedViewError ? /* @__PURE__ */ (0,
|
|
9950
|
-
toolbarActionError ? /* @__PURE__ */ (0,
|
|
9951
|
-
!hideToolbar && (viewTabs || toolbar?.title || showSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0,
|
|
10102
|
+
savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
|
|
10103
|
+
toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
|
|
10104
|
+
!hideToolbar && (viewTabs || toolbar?.title || showSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
9952
10105
|
TableTitleRow,
|
|
9953
10106
|
{
|
|
9954
|
-
tabs: viewTabs ? /* @__PURE__ */ (0,
|
|
10107
|
+
tabs: viewTabs ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applySavedView, related: relatedTableActions }, tableId ?? "table") : void 0,
|
|
9955
10108
|
...toolbar?.title === void 0 ? {} : { title: toolbar.title },
|
|
9956
|
-
context: tableId && SavedViews ? /* @__PURE__ */ (0,
|
|
10109
|
+
context: tableId && SavedViews ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
9957
10110
|
SavedViews,
|
|
9958
10111
|
{
|
|
9959
10112
|
tableId,
|
|
@@ -9962,7 +10115,7 @@ function MatrxDataTableCore({
|
|
|
9962
10115
|
onApply: applySavedView
|
|
9963
10116
|
}
|
|
9964
10117
|
) }) : void 0,
|
|
9965
|
-
search: showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ (0,
|
|
10118
|
+
search: showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
9966
10119
|
TableSearch,
|
|
9967
10120
|
{
|
|
9968
10121
|
value: searchValue,
|
|
@@ -9972,7 +10125,7 @@ function MatrxDataTableCore({
|
|
|
9972
10125
|
scopes: intelligentSearchScopes,
|
|
9973
10126
|
...toolbar?.searchPlaceholder === void 0 ? {} : { placeholder: toolbar.searchPlaceholder }
|
|
9974
10127
|
}
|
|
9975
|
-
) : /* @__PURE__ */ (0,
|
|
10128
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
9976
10129
|
"div",
|
|
9977
10130
|
{
|
|
9978
10131
|
"data-matrx-table-search": true,
|
|
@@ -9981,9 +10134,9 @@ function MatrxDataTableCore({
|
|
|
9981
10134
|
toolbar?.searchMatch ? "sm:max-w-md" : "sm:max-w-xs"
|
|
9982
10135
|
),
|
|
9983
10136
|
children: [
|
|
9984
|
-
/* @__PURE__ */ (0,
|
|
9985
|
-
/* @__PURE__ */ (0,
|
|
9986
|
-
/* @__PURE__ */ (0,
|
|
10137
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
|
|
10138
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
|
|
10139
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
9987
10140
|
Input,
|
|
9988
10141
|
{
|
|
9989
10142
|
value: searchValue,
|
|
@@ -9996,22 +10149,22 @@ function MatrxDataTableCore({
|
|
|
9996
10149
|
style: { fontSize: "16px" }
|
|
9997
10150
|
}
|
|
9998
10151
|
),
|
|
9999
|
-
searchValue ? /* @__PURE__ */ (0,
|
|
10000
|
-
/* @__PURE__ */ (0,
|
|
10152
|
+
searchValue ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
10153
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10001
10154
|
"button",
|
|
10002
10155
|
{
|
|
10003
10156
|
type: "button",
|
|
10004
10157
|
"aria-label": "Clear search",
|
|
10005
10158
|
className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
|
|
10006
10159
|
onClick: () => setSearchValue(""),
|
|
10007
|
-
children: /* @__PURE__ */ (0,
|
|
10160
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(X, { className: "h-5 w-5" })
|
|
10008
10161
|
}
|
|
10009
10162
|
) }),
|
|
10010
|
-
/* @__PURE__ */ (0,
|
|
10163
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "Clear search" })
|
|
10011
10164
|
] }) : null
|
|
10012
10165
|
] }),
|
|
10013
|
-
toolbar?.searchMatch ? /* @__PURE__ */ (0,
|
|
10014
|
-
/* @__PURE__ */ (0,
|
|
10166
|
+
toolbar?.searchMatch ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
10167
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10015
10168
|
Button,
|
|
10016
10169
|
{
|
|
10017
10170
|
type: "button",
|
|
@@ -10024,18 +10177,18 @@ function MatrxDataTableCore({
|
|
|
10024
10177
|
searchMatchMode === "whole_words" ? "contains" : "whole_words"
|
|
10025
10178
|
),
|
|
10026
10179
|
children: [
|
|
10027
|
-
/* @__PURE__ */ (0,
|
|
10180
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(WholeWord, { className: "h-5 w-5" }),
|
|
10028
10181
|
searchMatchMode === "whole_words" ? "Whole words" : "Contains"
|
|
10029
10182
|
]
|
|
10030
10183
|
}
|
|
10031
10184
|
) }),
|
|
10032
|
-
/* @__PURE__ */ (0,
|
|
10185
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: searchMatchMode === "whole_words" ? "Whole words \u2014 click to match text anywhere" : "Contains text \u2014 click to require whole words" })
|
|
10033
10186
|
] }) : null
|
|
10034
10187
|
]
|
|
10035
10188
|
}
|
|
10036
10189
|
) : null,
|
|
10037
10190
|
children: [
|
|
10038
|
-
toolbar?.layeredFilters ? /* @__PURE__ */ (0,
|
|
10191
|
+
toolbar?.layeredFilters ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10039
10192
|
LayeredFilterBuilder,
|
|
10040
10193
|
{
|
|
10041
10194
|
fields: toolbar.layeredFilters.fields,
|
|
@@ -10045,9 +10198,9 @@ function MatrxDataTableCore({
|
|
|
10045
10198
|
label: toolbar.layeredFilters.label
|
|
10046
10199
|
}
|
|
10047
10200
|
) : null,
|
|
10048
|
-
toolbar?.anyOf ? /* @__PURE__ */ (0,
|
|
10049
|
-
/* @__PURE__ */ (0,
|
|
10050
|
-
/* @__PURE__ */ (0,
|
|
10201
|
+
toolbar?.anyOf ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative w-full max-w-xs", children: [
|
|
10202
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
|
|
10203
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10051
10204
|
Input,
|
|
10052
10205
|
{
|
|
10053
10206
|
value: anyOfValue,
|
|
@@ -10057,22 +10210,22 @@ function MatrxDataTableCore({
|
|
|
10057
10210
|
style: { fontSize: "16px" }
|
|
10058
10211
|
}
|
|
10059
10212
|
),
|
|
10060
|
-
anyOfValue ? /* @__PURE__ */ (0,
|
|
10061
|
-
/* @__PURE__ */ (0,
|
|
10213
|
+
anyOfValue ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
10214
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10062
10215
|
"button",
|
|
10063
10216
|
{
|
|
10064
10217
|
type: "button",
|
|
10065
10218
|
"aria-label": "Clear match-any search",
|
|
10066
10219
|
className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
|
|
10067
10220
|
onClick: () => setAnyOfValue(""),
|
|
10068
|
-
children: /* @__PURE__ */ (0,
|
|
10221
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(X, { className: "h-5 w-5" })
|
|
10069
10222
|
}
|
|
10070
10223
|
) }),
|
|
10071
|
-
/* @__PURE__ */ (0,
|
|
10224
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "Clear match-any search" })
|
|
10072
10225
|
] }) : null
|
|
10073
10226
|
] }) : null,
|
|
10074
|
-
renderedFacets ? /* @__PURE__ */ (0,
|
|
10075
|
-
toolbar?.leading ? /* @__PURE__ */ (0,
|
|
10227
|
+
renderedFacets ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ToolbarFacets, { facets: renderedFacets }) : null,
|
|
10228
|
+
toolbar?.leading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10076
10229
|
"div",
|
|
10077
10230
|
{
|
|
10078
10231
|
"data-matrx-table-toolbar-extras": true,
|
|
@@ -10080,13 +10233,13 @@ function MatrxDataTableCore({
|
|
|
10080
10233
|
children: toolbar.leading
|
|
10081
10234
|
}
|
|
10082
10235
|
) : null,
|
|
10083
|
-
/* @__PURE__ */ (0,
|
|
10236
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10084
10237
|
"div",
|
|
10085
10238
|
{
|
|
10086
10239
|
"data-matrx-table-actions": true,
|
|
10087
10240
|
className: "ml-auto flex min-w-0 flex-wrap items-center gap-0",
|
|
10088
10241
|
children: [
|
|
10089
|
-
sourceTotal !== void 0 ? /* @__PURE__ */ (0,
|
|
10242
|
+
sourceTotal !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10090
10243
|
"span",
|
|
10091
10244
|
{
|
|
10092
10245
|
"data-matrx-table-source-total": true,
|
|
@@ -10103,7 +10256,7 @@ function MatrxDataTableCore({
|
|
|
10103
10256
|
]
|
|
10104
10257
|
}
|
|
10105
10258
|
) : null,
|
|
10106
|
-
/* @__PURE__ */ (0,
|
|
10259
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10107
10260
|
TableToolbarAction,
|
|
10108
10261
|
{
|
|
10109
10262
|
HostAction: host.ToolbarAction,
|
|
@@ -10111,10 +10264,10 @@ function MatrxDataTableCore({
|
|
|
10111
10264
|
tooltip: hasActiveFilters ? "Clear search and filters; keep columns and sort" : "No search or filters to clear",
|
|
10112
10265
|
disabled: !hasActiveFilters,
|
|
10113
10266
|
onClick: clearAllFilters,
|
|
10114
|
-
children: /* @__PURE__ */ (0,
|
|
10267
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Eraser, {})
|
|
10115
10268
|
}
|
|
10116
10269
|
),
|
|
10117
|
-
showToolbarCopy && effectiveCopy ? /* @__PURE__ */ (0,
|
|
10270
|
+
showToolbarCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10118
10271
|
CopyButtons,
|
|
10119
10272
|
{
|
|
10120
10273
|
size: "toolbar",
|
|
@@ -10157,17 +10310,17 @@ function MatrxDataTableCore({
|
|
|
10157
10310
|
}
|
|
10158
10311
|
}
|
|
10159
10312
|
) : null,
|
|
10160
|
-
columns.length > 0 ? /* @__PURE__ */ (0,
|
|
10313
|
+
columns.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10161
10314
|
TableToolbarAction,
|
|
10162
10315
|
{
|
|
10163
10316
|
HostAction: host.ToolbarAction,
|
|
10164
10317
|
ariaLabel: "Columns",
|
|
10165
10318
|
tooltip: "Show, hide, or reorder columns",
|
|
10166
10319
|
onClick: () => setColumnManagerOpen(true),
|
|
10167
|
-
children: /* @__PURE__ */ (0,
|
|
10320
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SlidersHorizontal, {})
|
|
10168
10321
|
}
|
|
10169
10322
|
) : null,
|
|
10170
|
-
toolbar?.refresh ? /* @__PURE__ */ (0,
|
|
10323
|
+
toolbar?.refresh ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10171
10324
|
TableToolbarAction,
|
|
10172
10325
|
{
|
|
10173
10326
|
HostAction: host.ToolbarAction,
|
|
@@ -10189,10 +10342,10 @@ function MatrxDataTableCore({
|
|
|
10189
10342
|
setToolbarActionPending((current) => ({ ...current, refresh: false }));
|
|
10190
10343
|
});
|
|
10191
10344
|
},
|
|
10192
|
-
children: /* @__PURE__ */ (0,
|
|
10345
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RefreshControlIcon, { spinning: isFetching || toolbarActionPending.refresh })
|
|
10193
10346
|
}
|
|
10194
10347
|
) : null,
|
|
10195
|
-
toolbar?.add ? /* @__PURE__ */ (0,
|
|
10348
|
+
toolbar?.add ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10196
10349
|
TableToolbarAction,
|
|
10197
10350
|
{
|
|
10198
10351
|
HostAction: host.ToolbarAction,
|
|
@@ -10214,7 +10367,7 @@ function MatrxDataTableCore({
|
|
|
10214
10367
|
setToolbarActionPending((current) => ({ ...current, add: false }));
|
|
10215
10368
|
});
|
|
10216
10369
|
},
|
|
10217
|
-
children: /* @__PURE__ */ (0,
|
|
10370
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Plus, {})
|
|
10218
10371
|
}
|
|
10219
10372
|
) : null,
|
|
10220
10373
|
toolbar?.actions
|
|
@@ -10224,15 +10377,15 @@ function MatrxDataTableCore({
|
|
|
10224
10377
|
]
|
|
10225
10378
|
}
|
|
10226
10379
|
),
|
|
10227
|
-
selection && selectionCount > 0 ? /* @__PURE__ */ (0,
|
|
10228
|
-
/* @__PURE__ */ (0,
|
|
10380
|
+
selection && selectionCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2 py-1.5", children: [
|
|
10381
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-xs font-medium text-foreground", children: [
|
|
10229
10382
|
(0, import_format3.formatCount)(selectionCount),
|
|
10230
10383
|
" ",
|
|
10231
10384
|
selectionNoun,
|
|
10232
10385
|
selectionCount === 1 ? "" : "s",
|
|
10233
10386
|
" selected"
|
|
10234
10387
|
] }),
|
|
10235
|
-
/* @__PURE__ */ (0,
|
|
10388
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10236
10389
|
Button,
|
|
10237
10390
|
{
|
|
10238
10391
|
type: "button",
|
|
@@ -10244,13 +10397,13 @@ function MatrxDataTableCore({
|
|
|
10244
10397
|
selection.onSelectedIdsChange([]);
|
|
10245
10398
|
},
|
|
10246
10399
|
children: [
|
|
10247
|
-
/* @__PURE__ */ (0,
|
|
10400
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(X, { className: "h-3.5 w-3.5" }),
|
|
10248
10401
|
"Clear"
|
|
10249
10402
|
]
|
|
10250
10403
|
}
|
|
10251
10404
|
),
|
|
10252
|
-
/* @__PURE__ */ (0,
|
|
10253
|
-
effectiveCopy && selectedRows.length > 0 ? /* @__PURE__ */ (0,
|
|
10405
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
|
|
10406
|
+
effectiveCopy && selectedRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10254
10407
|
CopyButtons,
|
|
10255
10408
|
{
|
|
10256
10409
|
size: "icon",
|
|
@@ -10283,9 +10436,9 @@ function MatrxDataTableCore({
|
|
|
10283
10436
|
selection.actions?.(selectedRows, selection.selectedIds)
|
|
10284
10437
|
] })
|
|
10285
10438
|
] }) : null,
|
|
10286
|
-
/* @__PURE__ */ (0,
|
|
10287
|
-
/* @__PURE__ */ (0,
|
|
10288
|
-
mobileCards ? /* @__PURE__ */ (0,
|
|
10439
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { "data-matrx-table-body-region": true, className: "flex min-h-0 flex-1 flex-col gap-2", children: [
|
|
10440
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
|
|
10441
|
+
mobileCards ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10289
10442
|
"div",
|
|
10290
10443
|
{
|
|
10291
10444
|
ref: cardsScrollRef,
|
|
@@ -10297,33 +10450,33 @@ function MatrxDataTableCore({
|
|
|
10297
10450
|
mobileCardsClass
|
|
10298
10451
|
),
|
|
10299
10452
|
children: [
|
|
10300
|
-
isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0,
|
|
10453
|
+
isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10301
10454
|
"div",
|
|
10302
10455
|
{
|
|
10303
10456
|
role: "status",
|
|
10304
10457
|
className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
|
|
10305
10458
|
children: [
|
|
10306
|
-
/* @__PURE__ */ (0,
|
|
10307
|
-
/* @__PURE__ */ (0,
|
|
10459
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
|
|
10460
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
|
|
10308
10461
|
]
|
|
10309
10462
|
}
|
|
10310
10463
|
) : null,
|
|
10311
|
-
isLoading ? Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0,
|
|
10464
|
+
isLoading ? Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10312
10465
|
Skeleton,
|
|
10313
10466
|
{
|
|
10314
10467
|
className: "h-52 w-full shrink-0 rounded-lg"
|
|
10315
10468
|
},
|
|
10316
10469
|
`mobile-card-sk-${index}`
|
|
10317
|
-
)) : paginated.length === 0 ? /* @__PURE__ */ (0,
|
|
10470
|
+
)) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex min-h-48 flex-1 items-center justify-center px-4 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex max-w-sm flex-col items-center gap-2", children: [
|
|
10318
10471
|
renderedEmptyState?.icon,
|
|
10319
|
-
/* @__PURE__ */ (0,
|
|
10320
|
-
renderedEmptyState?.description ? /* @__PURE__ */ (0,
|
|
10472
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
|
|
10473
|
+
renderedEmptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
|
|
10321
10474
|
renderedEmptyState?.action
|
|
10322
10475
|
] }) }) : paginated.map((row, index) => {
|
|
10323
10476
|
const id = getRowId(row);
|
|
10324
10477
|
const displayRow = applyRowEdits(row, edits[id]);
|
|
10325
10478
|
const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
|
|
10326
|
-
return /* @__PURE__ */ (0,
|
|
10479
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { "data-row-id": id, className: "contents", children: mobileCards(displayRow, index, {
|
|
10327
10480
|
renderCell: (columnKey) => {
|
|
10328
10481
|
const column = columns.find((candidate) => columnId(candidate) === columnKey);
|
|
10329
10482
|
return column ? renderRecordCell(row, column, index) : null;
|
|
@@ -10339,14 +10492,14 @@ function MatrxDataTableCore({
|
|
|
10339
10492
|
else next.delete(id);
|
|
10340
10493
|
setSelectedIds(next);
|
|
10341
10494
|
},
|
|
10342
|
-
actions:
|
|
10495
|
+
actions: showInlineRowCopy || rowActions ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10343
10496
|
"div",
|
|
10344
10497
|
{
|
|
10345
10498
|
"data-matrx-table-row-actions": true,
|
|
10346
10499
|
className: "inline-flex items-center justify-end gap-0",
|
|
10347
10500
|
onClick: (event) => event.stopPropagation(),
|
|
10348
10501
|
children: [
|
|
10349
|
-
|
|
10502
|
+
showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10350
10503
|
TableRowCopyControl,
|
|
10351
10504
|
{
|
|
10352
10505
|
size: "toolbar",
|
|
@@ -10356,20 +10509,13 @@ function MatrxDataTableCore({
|
|
|
10356
10509
|
...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
|
|
10357
10510
|
}
|
|
10358
10511
|
) : null,
|
|
10359
|
-
|
|
10360
|
-
closeDetail: () => setSelectedId(null),
|
|
10361
|
-
openDetail: () => openDetail(displayRow),
|
|
10362
|
-
openWindow: () => openWindow(displayRow),
|
|
10363
|
-
closeWindow,
|
|
10364
|
-
hasPendingEdits: Boolean(edits[id]),
|
|
10365
|
-
discardPendingEdits: () => discardRowEdits(id)
|
|
10366
|
-
})
|
|
10512
|
+
renderRowActions(displayRow, buildRecordControls(displayRow))
|
|
10367
10513
|
]
|
|
10368
10514
|
}
|
|
10369
10515
|
) : null
|
|
10370
10516
|
}) }, id);
|
|
10371
10517
|
}),
|
|
10372
|
-
appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0,
|
|
10518
|
+
appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10373
10519
|
"div",
|
|
10374
10520
|
{
|
|
10375
10521
|
"data-matrx-table-append-loading-card": true,
|
|
@@ -10377,7 +10523,7 @@ function MatrxDataTableCore({
|
|
|
10377
10523
|
"aria-live": "polite",
|
|
10378
10524
|
className: "sticky bottom-0 z-20 flex h-16 w-full max-w-[100cqw] shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-card/95 px-3 text-sm font-medium text-foreground shadow-sm backdrop-blur-sm",
|
|
10379
10525
|
children: [
|
|
10380
|
-
/* @__PURE__ */ (0,
|
|
10526
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10381
10527
|
Loader2,
|
|
10382
10528
|
{
|
|
10383
10529
|
"aria-hidden": "true",
|
|
@@ -10391,7 +10537,7 @@ function MatrxDataTableCore({
|
|
|
10391
10537
|
]
|
|
10392
10538
|
}
|
|
10393
10539
|
) : null,
|
|
10394
|
-
/* @__PURE__ */ (0,
|
|
10540
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10395
10541
|
"div",
|
|
10396
10542
|
{
|
|
10397
10543
|
ref: scrollRef,
|
|
@@ -10405,32 +10551,32 @@ function MatrxDataTableCore({
|
|
|
10405
10551
|
tableClassName
|
|
10406
10552
|
),
|
|
10407
10553
|
children: [
|
|
10408
|
-
hierarchy && draggedRow ? /* @__PURE__ */ (0,
|
|
10554
|
+
hierarchy && draggedRow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10409
10555
|
HierarchyRootDropTarget,
|
|
10410
10556
|
{
|
|
10411
10557
|
label: hierarchy.rootDropLabel ?? "Drop here to move to the top level",
|
|
10412
10558
|
draggedLabel: hierarchy.itemLabel?.(draggedRow) ?? "Moving row"
|
|
10413
10559
|
}
|
|
10414
10560
|
) : null,
|
|
10415
|
-
hierarchy && draggedRowId ? /* @__PURE__ */ (0,
|
|
10561
|
+
hierarchy && draggedRowId ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10416
10562
|
HierarchyDragIndicatorLayer,
|
|
10417
10563
|
{
|
|
10418
10564
|
scrollRef,
|
|
10419
10565
|
resolve: resolveHierarchyMove
|
|
10420
10566
|
}
|
|
10421
10567
|
) : null,
|
|
10422
|
-
isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0,
|
|
10568
|
+
isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10423
10569
|
"div",
|
|
10424
10570
|
{
|
|
10425
10571
|
role: "status",
|
|
10426
10572
|
className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
|
|
10427
10573
|
children: [
|
|
10428
|
-
/* @__PURE__ */ (0,
|
|
10429
|
-
/* @__PURE__ */ (0,
|
|
10574
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
|
|
10575
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
|
|
10430
10576
|
]
|
|
10431
10577
|
}
|
|
10432
10578
|
) : null,
|
|
10433
|
-
/* @__PURE__ */ (0,
|
|
10579
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10434
10580
|
"table",
|
|
10435
10581
|
{
|
|
10436
10582
|
ref: tableRef,
|
|
@@ -10448,7 +10594,7 @@ function MatrxDataTableCore({
|
|
|
10448
10594
|
fixedLayoutActive && "sm:table-fixed sm:max-w-none sm:w-[var(--matrx-resized-table-width)]"
|
|
10449
10595
|
),
|
|
10450
10596
|
children: [
|
|
10451
|
-
/* @__PURE__ */ (0,
|
|
10597
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10452
10598
|
"thead",
|
|
10453
10599
|
{
|
|
10454
10600
|
ref: tableHeaderRef,
|
|
@@ -10457,14 +10603,14 @@ function MatrxDataTableCore({
|
|
|
10457
10603
|
"z-10 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm",
|
|
10458
10604
|
stickyHeader && (documentStickyHeader ? "relative translate-y-[var(--matrx-document-sticky-offset)]" : "sticky top-0")
|
|
10459
10605
|
),
|
|
10460
|
-
children: /* @__PURE__ */ (0,
|
|
10461
|
-
selection ? /* @__PURE__ */ (0,
|
|
10606
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { children: [
|
|
10607
|
+
selection ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10462
10608
|
"th",
|
|
10463
10609
|
{
|
|
10464
10610
|
"data-matrx-table-selection-column": true,
|
|
10465
10611
|
className: "h-9 w-9 px-2 text-left align-middle",
|
|
10466
10612
|
style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
|
|
10467
|
-
children: /* @__PURE__ */ (0,
|
|
10613
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10468
10614
|
"div",
|
|
10469
10615
|
{
|
|
10470
10616
|
"data-matrx-table-selection-target": true,
|
|
@@ -10473,7 +10619,7 @@ function MatrxDataTableCore({
|
|
|
10473
10619
|
event.currentTarget.querySelector('[role="checkbox"]')?.click();
|
|
10474
10620
|
}
|
|
10475
10621
|
},
|
|
10476
|
-
children: /* @__PURE__ */ (0,
|
|
10622
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10477
10623
|
Checkbox,
|
|
10478
10624
|
{
|
|
10479
10625
|
className: CHECKBOX_TAP_AREA,
|
|
@@ -10495,7 +10641,7 @@ function MatrxDataTableCore({
|
|
|
10495
10641
|
const defaultSortDirection = col.defaultSortDirection ?? "asc";
|
|
10496
10642
|
const isColumnDragShadow = columnDragPreview?.draggedId === id && columnDragPreview.targetId !== null;
|
|
10497
10643
|
const columnResizable = resizableColumns && col.resizable !== false;
|
|
10498
|
-
return /* @__PURE__ */ (0,
|
|
10644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10499
10645
|
"th",
|
|
10500
10646
|
{
|
|
10501
10647
|
"data-matrx-table-column-id": id,
|
|
@@ -10525,7 +10671,7 @@ function MatrxDataTableCore({
|
|
|
10525
10671
|
),
|
|
10526
10672
|
style: columnWidthVar(col.width, effectiveColumnWidths[id], id, columnResizable),
|
|
10527
10673
|
children: [
|
|
10528
|
-
/* @__PURE__ */ (0,
|
|
10674
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10529
10675
|
ColumnHeaderCell,
|
|
10530
10676
|
{
|
|
10531
10677
|
label: col.header,
|
|
@@ -10562,7 +10708,7 @@ function MatrxDataTableCore({
|
|
|
10562
10708
|
reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
|
|
10563
10709
|
}
|
|
10564
10710
|
) }),
|
|
10565
|
-
columnResizable ? /* @__PURE__ */ (0,
|
|
10711
|
+
columnResizable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10566
10712
|
ColumnResizeHandle,
|
|
10567
10713
|
{
|
|
10568
10714
|
columnId: id,
|
|
@@ -10583,7 +10729,7 @@ function MatrxDataTableCore({
|
|
|
10583
10729
|
id
|
|
10584
10730
|
);
|
|
10585
10731
|
}),
|
|
10586
|
-
showActionsCol && /* @__PURE__ */ (0,
|
|
10732
|
+
showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10587
10733
|
"th",
|
|
10588
10734
|
{
|
|
10589
10735
|
"data-matrx-table-actions-column": true,
|
|
@@ -10595,10 +10741,10 @@ function MatrxDataTableCore({
|
|
|
10595
10741
|
] })
|
|
10596
10742
|
}
|
|
10597
10743
|
),
|
|
10598
|
-
/* @__PURE__ */ (0,
|
|
10599
|
-
isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0,
|
|
10600
|
-
selection ? /* @__PURE__ */ (0,
|
|
10601
|
-
visibleColumns.map((col) => /* @__PURE__ */ (0,
|
|
10744
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tbody", { children: [
|
|
10745
|
+
isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { className: "border-b border-border/60", children: [
|
|
10746
|
+
selection ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "px-2 py-2", style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
|
|
10747
|
+
visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10602
10748
|
"td",
|
|
10603
10749
|
{
|
|
10604
10750
|
className: cn(
|
|
@@ -10606,20 +10752,20 @@ function MatrxDataTableCore({
|
|
|
10606
10752
|
col.compact ? "px-1" : "px-2",
|
|
10607
10753
|
col.mobileHidden && "max-sm:hidden"
|
|
10608
10754
|
),
|
|
10609
|
-
children: /* @__PURE__ */ (0,
|
|
10755
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Skeleton, { className: "h-5 w-full" })
|
|
10610
10756
|
},
|
|
10611
10757
|
columnId(col)
|
|
10612
10758
|
)),
|
|
10613
|
-
showActionsCol && /* @__PURE__ */ (0,
|
|
10614
|
-
] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ (0,
|
|
10759
|
+
showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "text-right align-middle", style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Skeleton, { className: "ml-auto h-5 w-10" }) })
|
|
10760
|
+
] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10615
10761
|
"td",
|
|
10616
10762
|
{
|
|
10617
10763
|
colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
|
|
10618
10764
|
className: "px-0 py-12 text-center",
|
|
10619
|
-
children: /* @__PURE__ */ (0,
|
|
10765
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { "data-matrx-table-empty-state": true, className: "sticky left-0 flex flex-col items-center gap-2 whitespace-normal px-4", style: { width: "100cqw", maxWidth: "100%" }, children: [
|
|
10620
10766
|
renderedEmptyState?.icon,
|
|
10621
|
-
/* @__PURE__ */ (0,
|
|
10622
|
-
renderedEmptyState?.description ? /* @__PURE__ */ (0,
|
|
10767
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
|
|
10768
|
+
renderedEmptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
|
|
10623
10769
|
renderedEmptyState?.action
|
|
10624
10770
|
] })
|
|
10625
10771
|
}
|
|
@@ -10629,7 +10775,7 @@ function MatrxDataTableCore({
|
|
|
10629
10775
|
const rowEdits = edits[id];
|
|
10630
10776
|
const displayRow = applyRowEdits(row, rowEdits);
|
|
10631
10777
|
const isChecked = selectedIdSet.has(id);
|
|
10632
|
-
const rowNode = /* @__PURE__ */ (0,
|
|
10778
|
+
const rowNode = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10633
10779
|
"tr",
|
|
10634
10780
|
{
|
|
10635
10781
|
"data-row-id": id,
|
|
@@ -10652,13 +10798,13 @@ function MatrxDataTableCore({
|
|
|
10652
10798
|
zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20"
|
|
10653
10799
|
),
|
|
10654
10800
|
children: [
|
|
10655
|
-
selection ? /* @__PURE__ */ (0,
|
|
10801
|
+
selection ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10656
10802
|
"td",
|
|
10657
10803
|
{
|
|
10658
10804
|
className: "px-2 py-1.5 align-middle lg:py-0.5",
|
|
10659
10805
|
style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
|
|
10660
10806
|
onClick: (e) => e.stopPropagation(),
|
|
10661
|
-
children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ (0,
|
|
10807
|
+
children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10662
10808
|
"div",
|
|
10663
10809
|
{
|
|
10664
10810
|
"data-matrx-table-selection-target": true,
|
|
@@ -10667,7 +10813,7 @@ function MatrxDataTableCore({
|
|
|
10667
10813
|
event.currentTarget.querySelector('[role="checkbox"]')?.click();
|
|
10668
10814
|
}
|
|
10669
10815
|
},
|
|
10670
|
-
children: /* @__PURE__ */ (0,
|
|
10816
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10671
10817
|
Checkbox,
|
|
10672
10818
|
{
|
|
10673
10819
|
className: CHECKBOX_TAP_AREA,
|
|
@@ -10682,7 +10828,7 @@ function MatrxDataTableCore({
|
|
|
10682
10828
|
) : null,
|
|
10683
10829
|
visibleColumns.map((col, colIdx) => {
|
|
10684
10830
|
const isColumnDragShadow = columnDragPreview?.draggedId === columnId(col) && columnDragPreview.targetId !== null;
|
|
10685
|
-
return /* @__PURE__ */ (0,
|
|
10831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10686
10832
|
"td",
|
|
10687
10833
|
{
|
|
10688
10834
|
"data-matrx-table-column-id": columnId(col),
|
|
@@ -10706,14 +10852,14 @@ function MatrxDataTableCore({
|
|
|
10706
10852
|
columnId(col),
|
|
10707
10853
|
resizableColumns && col.resizable !== false
|
|
10708
10854
|
),
|
|
10709
|
-
children: /* @__PURE__ */ (0,
|
|
10855
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10710
10856
|
"div",
|
|
10711
10857
|
{
|
|
10712
10858
|
className: cn(
|
|
10713
10859
|
colIdx === 0 && hierarchy && "flex min-w-0 items-center"
|
|
10714
10860
|
),
|
|
10715
10861
|
children: [
|
|
10716
|
-
colIdx === 0 && hierarchy ? /* @__PURE__ */ (0,
|
|
10862
|
+
colIdx === 0 && hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10717
10863
|
HierarchyDragHandle,
|
|
10718
10864
|
{
|
|
10719
10865
|
id,
|
|
@@ -10721,7 +10867,7 @@ function MatrxDataTableCore({
|
|
|
10721
10867
|
disabled: !(hierarchy.canReparent?.(row) ?? true)
|
|
10722
10868
|
}
|
|
10723
10869
|
) : null,
|
|
10724
|
-
/* @__PURE__ */ (0,
|
|
10870
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10725
10871
|
"div",
|
|
10726
10872
|
{
|
|
10727
10873
|
"data-matrx-cell-content": true,
|
|
@@ -10736,20 +10882,20 @@ function MatrxDataTableCore({
|
|
|
10736
10882
|
columnId(col)
|
|
10737
10883
|
);
|
|
10738
10884
|
}),
|
|
10739
|
-
showActionsCol && /* @__PURE__ */ (0,
|
|
10885
|
+
showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10740
10886
|
"td",
|
|
10741
10887
|
{
|
|
10742
10888
|
"data-matrx-table-row-action-cell": true,
|
|
10743
10889
|
className: "text-right align-middle",
|
|
10744
10890
|
style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
|
|
10745
|
-
children: /* @__PURE__ */ (0,
|
|
10891
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10746
10892
|
"div",
|
|
10747
10893
|
{
|
|
10748
10894
|
"data-matrx-table-row-actions": true,
|
|
10749
10895
|
className: "inline-flex items-center justify-end gap-0",
|
|
10750
10896
|
onClick: (e) => e.stopPropagation(),
|
|
10751
10897
|
children: [
|
|
10752
|
-
|
|
10898
|
+
showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10753
10899
|
TableRowCopyControl,
|
|
10754
10900
|
{
|
|
10755
10901
|
size: "toolbar",
|
|
@@ -10759,16 +10905,9 @@ function MatrxDataTableCore({
|
|
|
10759
10905
|
...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
|
|
10760
10906
|
}
|
|
10761
10907
|
) : null,
|
|
10762
|
-
|
|
10763
|
-
|
|
10764
|
-
|
|
10765
|
-
openWindow: () => openWindow(displayRow),
|
|
10766
|
-
closeWindow,
|
|
10767
|
-
hasPendingEdits: Boolean(rowEdits),
|
|
10768
|
-
discardPendingEdits: () => discardRowEdits(id)
|
|
10769
|
-
}),
|
|
10770
|
-
windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Tooltip, { children: [
|
|
10771
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
10908
|
+
renderRowActions(displayRow, buildRecordControls(displayRow)),
|
|
10909
|
+
windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
10910
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10772
10911
|
Button,
|
|
10773
10912
|
{
|
|
10774
10913
|
type: "button",
|
|
@@ -10782,10 +10921,10 @@ function MatrxDataTableCore({
|
|
|
10782
10921
|
if (windowConfig?.openOnRowClick === true) openDetail(row);
|
|
10783
10922
|
else openWindow(row);
|
|
10784
10923
|
},
|
|
10785
|
-
children: opensWindowOnRowClick ? /* @__PURE__ */ (0,
|
|
10924
|
+
children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRight, { className: "h-5 w-5" })
|
|
10786
10925
|
}
|
|
10787
10926
|
) }),
|
|
10788
|
-
/* @__PURE__ */ (0,
|
|
10927
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window" })
|
|
10789
10928
|
] }) : null
|
|
10790
10929
|
]
|
|
10791
10930
|
}
|
|
@@ -10797,7 +10936,7 @@ function MatrxDataTableCore({
|
|
|
10797
10936
|
id
|
|
10798
10937
|
);
|
|
10799
10938
|
const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
|
|
10800
|
-
return hierarchy ? /* @__PURE__ */ (0,
|
|
10939
|
+
return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10801
10940
|
HierarchyDroppableRow,
|
|
10802
10941
|
{
|
|
10803
10942
|
id,
|
|
@@ -10805,21 +10944,21 @@ function MatrxDataTableCore({
|
|
|
10805
10944
|
children: wrappedRow
|
|
10806
10945
|
},
|
|
10807
10946
|
id
|
|
10808
|
-
) : /* @__PURE__ */ (0,
|
|
10947
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react20.Fragment, { children: wrappedRow }, id);
|
|
10809
10948
|
}),
|
|
10810
|
-
appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0,
|
|
10949
|
+
appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10811
10950
|
"td",
|
|
10812
10951
|
{
|
|
10813
10952
|
colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
|
|
10814
10953
|
className: "sticky bottom-0 z-20 h-16 border-y border-border bg-card/95 px-0 py-0 text-left shadow-sm backdrop-blur-sm",
|
|
10815
|
-
children: /* @__PURE__ */ (0,
|
|
10954
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10816
10955
|
"div",
|
|
10817
10956
|
{
|
|
10818
10957
|
role: "status",
|
|
10819
10958
|
"aria-live": "polite",
|
|
10820
10959
|
className: "sticky left-0 flex h-16 w-fit max-w-[100cqw] items-center justify-center gap-2 px-3 text-sm font-medium text-foreground",
|
|
10821
10960
|
children: [
|
|
10822
|
-
/* @__PURE__ */ (0,
|
|
10961
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10823
10962
|
Loader2,
|
|
10824
10963
|
{
|
|
10825
10964
|
"aria-hidden": "true",
|
|
@@ -10833,9 +10972,9 @@ function MatrxDataTableCore({
|
|
|
10833
10972
|
}
|
|
10834
10973
|
) }) : null
|
|
10835
10974
|
] }),
|
|
10836
|
-
footerRows.length > 0 ? /* @__PURE__ */ (0,
|
|
10837
|
-
selection ? /* @__PURE__ */ (0,
|
|
10838
|
-
visibleColumns.map((column) => /* @__PURE__ */ (0,
|
|
10975
|
+
footerRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { children: [
|
|
10976
|
+
selection ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "px-2 py-2" }) : null,
|
|
10977
|
+
visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10839
10978
|
"td",
|
|
10840
10979
|
{
|
|
10841
10980
|
className: cn(
|
|
@@ -10855,7 +10994,7 @@ function MatrxDataTableCore({
|
|
|
10855
10994
|
},
|
|
10856
10995
|
columnId(column)
|
|
10857
10996
|
)),
|
|
10858
|
-
showActionsCol ? /* @__PURE__ */ (0,
|
|
10997
|
+
showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", {}) : null
|
|
10859
10998
|
] }, `footer-${index}`)) }) : null
|
|
10860
10999
|
]
|
|
10861
11000
|
}
|
|
@@ -10863,8 +11002,8 @@ function MatrxDataTableCore({
|
|
|
10863
11002
|
]
|
|
10864
11003
|
}
|
|
10865
11004
|
),
|
|
10866
|
-
scrollHintLeft ? /* @__PURE__ */ (0,
|
|
10867
|
-
/* @__PURE__ */ (0,
|
|
11005
|
+
scrollHintLeft ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
11006
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10868
11007
|
Button,
|
|
10869
11008
|
{
|
|
10870
11009
|
type: "button",
|
|
@@ -10875,13 +11014,13 @@ function MatrxDataTableCore({
|
|
|
10875
11014
|
"data-matrx-table-scroll-control": "left",
|
|
10876
11015
|
className: "absolute left-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
|
|
10877
11016
|
onClick: () => scrollTableHorizontally("left"),
|
|
10878
|
-
children: /* @__PURE__ */ (0,
|
|
11017
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronLeft, { className: "h-5 w-5" })
|
|
10879
11018
|
}
|
|
10880
11019
|
) }),
|
|
10881
|
-
/* @__PURE__ */ (0,
|
|
11020
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "More columns to the left" })
|
|
10882
11021
|
] }) : null,
|
|
10883
|
-
scrollHintRight ? /* @__PURE__ */ (0,
|
|
10884
|
-
/* @__PURE__ */ (0,
|
|
11022
|
+
scrollHintRight ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
11023
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10885
11024
|
Button,
|
|
10886
11025
|
{
|
|
10887
11026
|
type: "button",
|
|
@@ -10892,26 +11031,26 @@ function MatrxDataTableCore({
|
|
|
10892
11031
|
"data-matrx-table-scroll-control": "right",
|
|
10893
11032
|
className: "absolute right-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
|
|
10894
11033
|
onClick: () => scrollTableHorizontally("right"),
|
|
10895
|
-
children: /* @__PURE__ */ (0,
|
|
11034
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronRight, { className: "h-5 w-5" })
|
|
10896
11035
|
}
|
|
10897
11036
|
) }),
|
|
10898
|
-
/* @__PURE__ */ (0,
|
|
11037
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "More columns to the right" })
|
|
10899
11038
|
] }) : null
|
|
10900
11039
|
] }),
|
|
10901
|
-
appendQuery ? /* @__PURE__ */ (0,
|
|
11040
|
+
appendQuery ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10902
11041
|
"div",
|
|
10903
11042
|
{
|
|
10904
11043
|
"data-matrx-table-footer": true,
|
|
10905
11044
|
className: "flex min-h-11 shrink-0 flex-wrap items-center gap-0 border-t border-border",
|
|
10906
11045
|
"aria-busy": isLoading || isFetching,
|
|
10907
11046
|
children: [
|
|
10908
|
-
/* @__PURE__ */ (0,
|
|
11047
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10909
11048
|
"div",
|
|
10910
11049
|
{
|
|
10911
11050
|
...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
|
|
10912
11051
|
className: "flex w-full min-w-0 items-center gap-2 text-xs text-muted-foreground sm:w-auto sm:flex-1 sm:text-sm",
|
|
10913
11052
|
children: [
|
|
10914
|
-
isLoading ? /* @__PURE__ */ (0,
|
|
11053
|
+
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10915
11054
|
Loader2,
|
|
10916
11055
|
{
|
|
10917
11056
|
"data-matrx-table-append-loader": true,
|
|
@@ -10919,17 +11058,17 @@ function MatrxDataTableCore({
|
|
|
10919
11058
|
className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
|
|
10920
11059
|
}
|
|
10921
11060
|
) : null,
|
|
10922
|
-
/* @__PURE__ */ (0,
|
|
10923
|
-
/* @__PURE__ */ (0,
|
|
10924
|
-
appendQuery.pagination.sourceUntil ? /* @__PURE__ */ (0,
|
|
11061
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
11062
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : `${(0, import_format3.formatCount)(data.length)} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${(0, import_format3.formatCount)(appendQuery.pagination.totalItems)}`}` }),
|
|
11063
|
+
appendQuery.pagination.sourceUntil ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { children: [
|
|
10925
11064
|
"Source fixed through",
|
|
10926
11065
|
" ",
|
|
10927
11066
|
new Date(appendQuery.pagination.sourceUntil).toLocaleString(),
|
|
10928
11067
|
"."
|
|
10929
11068
|
] }) : null,
|
|
10930
|
-
!isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0,
|
|
10931
|
-
scrollPagination.error ? /* @__PURE__ */ (0,
|
|
10932
|
-
appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ (0,
|
|
11069
|
+
!isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: "All source rows are loaded." }) : appendUsesLocalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: "Local search and filters cover loaded rows." }) : null,
|
|
11070
|
+
scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null,
|
|
11071
|
+
appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { role: "status", children: [
|
|
10933
11072
|
appendScrollPolicy.reason,
|
|
10934
11073
|
" Load more remains available."
|
|
10935
11074
|
] }) : null
|
|
@@ -10937,26 +11076,26 @@ function MatrxDataTableCore({
|
|
|
10937
11076
|
]
|
|
10938
11077
|
}
|
|
10939
11078
|
),
|
|
10940
|
-
appendQuery.pagination.sourcePageSize ? /* @__PURE__ */ (0,
|
|
11079
|
+
appendQuery.pagination.sourcePageSize ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10941
11080
|
Select,
|
|
10942
11081
|
{
|
|
10943
11082
|
value: String(appendQuery.pagination.sourcePageSize.value),
|
|
10944
11083
|
onValueChange: (value) => appendQuery.pagination.sourcePageSize?.onChange(Number(value)),
|
|
10945
11084
|
children: [
|
|
10946
|
-
/* @__PURE__ */ (0,
|
|
11085
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10947
11086
|
SelectTrigger,
|
|
10948
11087
|
{
|
|
10949
11088
|
"aria-label": "Rows per load",
|
|
10950
11089
|
className: "h-11 min-w-20 shrink-0 rounded-md border border-border bg-card px-3 text-sm [&_svg]:size-5",
|
|
10951
11090
|
disabled: isLoading || isFetching || appendQuery.pagination.loadAll?.isLoading,
|
|
10952
|
-
children: /* @__PURE__ */ (0,
|
|
11091
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectValue, {})
|
|
10953
11092
|
}
|
|
10954
11093
|
),
|
|
10955
|
-
/* @__PURE__ */ (0,
|
|
11094
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectContent, { children: appendQuery.pagination.sourcePageSize.options.map((size) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectItem, { value: String(size), children: size }, size)) })
|
|
10956
11095
|
]
|
|
10957
11096
|
}
|
|
10958
11097
|
) : null,
|
|
10959
|
-
appendQuery.pagination.loadAll?.isLoading ? /* @__PURE__ */ (0,
|
|
11098
|
+
appendQuery.pagination.loadAll?.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10960
11099
|
Button,
|
|
10961
11100
|
{
|
|
10962
11101
|
type: "button",
|
|
@@ -10965,7 +11104,7 @@ function MatrxDataTableCore({
|
|
|
10965
11104
|
onClick: appendQuery.pagination.loadAll.stop,
|
|
10966
11105
|
children: "Stop loading"
|
|
10967
11106
|
}
|
|
10968
|
-
) : scrollPagination.error ? /* @__PURE__ */ (0,
|
|
11107
|
+
) : scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10969
11108
|
Button,
|
|
10970
11109
|
{
|
|
10971
11110
|
type: "button",
|
|
@@ -10974,8 +11113,8 @@ function MatrxDataTableCore({
|
|
|
10974
11113
|
onClick: appendQuery.pagination.retrySource ?? (appendQuery.pagination.hasNextPage ? appendQuery.pagination.loadNextPage : appendQuery.pagination.refresh),
|
|
10975
11114
|
children: appendQuery.pagination.retrySource ? "Retry source" : appendQuery.pagination.hasNextPage ? "Retry" : "Reload rows"
|
|
10976
11115
|
}
|
|
10977
|
-
) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0,
|
|
10978
|
-
/* @__PURE__ */ (0,
|
|
11116
|
+
) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex min-w-0 max-w-full flex-wrap gap-0", children: [
|
|
11117
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10979
11118
|
Button,
|
|
10980
11119
|
{
|
|
10981
11120
|
type: "button",
|
|
@@ -10986,7 +11125,7 @@ function MatrxDataTableCore({
|
|
|
10986
11125
|
children: "Load more"
|
|
10987
11126
|
}
|
|
10988
11127
|
),
|
|
10989
|
-
appendQuery.pagination.loadAll ? /* @__PURE__ */ (0,
|
|
11128
|
+
appendQuery.pagination.loadAll ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10990
11129
|
Button,
|
|
10991
11130
|
{
|
|
10992
11131
|
type: "button",
|
|
@@ -10997,10 +11136,10 @@ function MatrxDataTableCore({
|
|
|
10997
11136
|
children: "Load all"
|
|
10998
11137
|
}
|
|
10999
11138
|
) : null
|
|
11000
|
-
] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0,
|
|
11139
|
+
] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "min-w-0 max-w-full break-words whitespace-normal px-3 text-xs text-muted-foreground sm:text-sm", children: "All rows loaded" }) : null
|
|
11001
11140
|
]
|
|
11002
11141
|
}
|
|
11003
|
-
) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ (0,
|
|
11142
|
+
) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11004
11143
|
GenericTablePagination,
|
|
11005
11144
|
{
|
|
11006
11145
|
totalItems,
|
|
@@ -11026,7 +11165,7 @@ function MatrxDataTableCore({
|
|
|
11026
11165
|
}
|
|
11027
11166
|
) }) : null
|
|
11028
11167
|
] }),
|
|
11029
|
-
/* @__PURE__ */ (0,
|
|
11168
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11030
11169
|
ColumnManager,
|
|
11031
11170
|
{
|
|
11032
11171
|
open: columnManagerOpen,
|
|
@@ -11037,7 +11176,7 @@ function MatrxDataTableCore({
|
|
|
11037
11176
|
onApply: commitColumnState
|
|
11038
11177
|
}
|
|
11039
11178
|
),
|
|
11040
|
-
detailEnabled && selectedRow ? /* @__PURE__ */ (0,
|
|
11179
|
+
detailEnabled && selectedRow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11041
11180
|
SidePanelSurface,
|
|
11042
11181
|
{
|
|
11043
11182
|
title: resolveStringTitle(
|
|
@@ -11048,8 +11187,8 @@ function MatrxDataTableCore({
|
|
|
11048
11187
|
description: detail?.description?.(selectedRow),
|
|
11049
11188
|
onClose: () => setSelectedId(null),
|
|
11050
11189
|
defaultWidth: detail?.defaultWidth ?? 480,
|
|
11051
|
-
headerActions: /* @__PURE__ */ (0,
|
|
11052
|
-
effectiveCopy && showRowCopy ? /* @__PURE__ */ (0,
|
|
11190
|
+
headerActions: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
11191
|
+
effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11053
11192
|
TableRowCopyControl,
|
|
11054
11193
|
{
|
|
11055
11194
|
size: "icon",
|
|
@@ -11061,8 +11200,8 @@ function MatrxDataTableCore({
|
|
|
11061
11200
|
}
|
|
11062
11201
|
) : null,
|
|
11063
11202
|
detail?.headerActions?.(selectedRow),
|
|
11064
|
-
windowEnabled ? /* @__PURE__ */ (0,
|
|
11065
|
-
/* @__PURE__ */ (0,
|
|
11203
|
+
windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
11204
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11066
11205
|
Button,
|
|
11067
11206
|
{
|
|
11068
11207
|
type: "button",
|
|
@@ -11072,10 +11211,10 @@ function MatrxDataTableCore({
|
|
|
11072
11211
|
className: "h-7 w-7",
|
|
11073
11212
|
"aria-label": "Open in window",
|
|
11074
11213
|
onClick: () => openWindow(selectedRow),
|
|
11075
|
-
children: /* @__PURE__ */ (0,
|
|
11214
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRight, { className: "h-5 w-5" })
|
|
11076
11215
|
}
|
|
11077
11216
|
) }),
|
|
11078
|
-
/* @__PURE__ */ (0,
|
|
11217
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "Open in window" })
|
|
11079
11218
|
] }) : null
|
|
11080
11219
|
] }),
|
|
11081
11220
|
children: detail?.render ? (
|
|
@@ -11086,7 +11225,7 @@ function MatrxDataTableCore({
|
|
|
11086
11225
|
// fixes the whole class at once — a custom body that already
|
|
11087
11226
|
// scrolls (`h-full` + `overflow-y-auto` root) still resolves to
|
|
11088
11227
|
// this container's height, so no second scrollbar appears.
|
|
11089
|
-
/* @__PURE__ */ (0,
|
|
11228
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-full min-h-0 overflow-y-auto", children: detail.render(selectedRow, {
|
|
11090
11229
|
closeDetail: () => setSelectedId(null),
|
|
11091
11230
|
openDetail: () => openDetail(selectedRow),
|
|
11092
11231
|
openWindow: () => openWindow(selectedRow),
|
|
@@ -11094,7 +11233,7 @@ function MatrxDataTableCore({
|
|
|
11094
11233
|
hasPendingEdits: Boolean(edits[getRowId(selectedRow)]),
|
|
11095
11234
|
discardPendingEdits: () => discardRowEdits(getRowId(selectedRow))
|
|
11096
11235
|
}) })
|
|
11097
|
-
) : /* @__PURE__ */ (0,
|
|
11236
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11098
11237
|
DataRowInspector,
|
|
11099
11238
|
{
|
|
11100
11239
|
row: selectedRow,
|
|
@@ -11106,7 +11245,7 @@ function MatrxDataTableCore({
|
|
|
11106
11245
|
)
|
|
11107
11246
|
}
|
|
11108
11247
|
) : null,
|
|
11109
|
-
windowRow ? /* @__PURE__ */ (0,
|
|
11248
|
+
windowRow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11110
11249
|
DataRowWindow,
|
|
11111
11250
|
{
|
|
11112
11251
|
isOpen: true,
|
|
@@ -11117,9 +11256,9 @@ function MatrxDataTableCore({
|
|
|
11117
11256
|
height: windowConfig?.height,
|
|
11118
11257
|
windowId: `matrx-data-row-${urlState?.id ?? "local"}-${getRowId(windowRow)}`,
|
|
11119
11258
|
defaultTab: windowConfig?.defaultTab,
|
|
11120
|
-
headerActions: /* @__PURE__ */ (0,
|
|
11121
|
-
windowConfig?.openOnRowClick === true && detail?.enabled === true ? /* @__PURE__ */ (0,
|
|
11122
|
-
/* @__PURE__ */ (0,
|
|
11259
|
+
headerActions: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
11260
|
+
windowConfig?.openOnRowClick === true && detail?.enabled === true ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
11261
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11123
11262
|
Button,
|
|
11124
11263
|
{
|
|
11125
11264
|
type: "button",
|
|
@@ -11132,12 +11271,12 @@ function MatrxDataTableCore({
|
|
|
11132
11271
|
closeWindow();
|
|
11133
11272
|
openDetail(windowRow);
|
|
11134
11273
|
},
|
|
11135
|
-
children: /* @__PURE__ */ (0,
|
|
11274
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRightOpen, { className: "h-5 w-5" })
|
|
11136
11275
|
}
|
|
11137
11276
|
) }),
|
|
11138
|
-
/* @__PURE__ */ (0,
|
|
11277
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "Open in side panel" })
|
|
11139
11278
|
] }) : null,
|
|
11140
|
-
effectiveCopy && showRowCopy ? /* @__PURE__ */ (0,
|
|
11279
|
+
effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11141
11280
|
TableRowCopyControl,
|
|
11142
11281
|
{
|
|
11143
11282
|
size: "icon",
|
|
@@ -11156,7 +11295,7 @@ function MatrxDataTableCore({
|
|
|
11156
11295
|
closeWindow,
|
|
11157
11296
|
hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
|
|
11158
11297
|
discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
|
|
11159
|
-
}) ?? /* @__PURE__ */ (0,
|
|
11298
|
+
}) ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11160
11299
|
DataRowInspector,
|
|
11161
11300
|
{
|
|
11162
11301
|
row: windowRow,
|
|
@@ -11192,15 +11331,15 @@ function MatrxDataTableCore({
|
|
|
11192
11331
|
})
|
|
11193
11332
|
}
|
|
11194
11333
|
) : null,
|
|
11195
|
-
editEnabled ? /* @__PURE__ */ (0,
|
|
11196
|
-
foreignDrafts.length > 0 ? /* @__PURE__ */ (0,
|
|
11334
|
+
editEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
|
|
11335
|
+
foreignDrafts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
11197
11336
|
"div",
|
|
11198
11337
|
{
|
|
11199
11338
|
"data-matrx-foreign-drafts": true,
|
|
11200
11339
|
className: "fixed inset-x-3 bottom-20 z-50 flex flex-wrap items-center justify-center gap-2 rounded-lg border border-amber-500/40 bg-card px-3 py-2 text-xs shadow-lg sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 sm:flex-nowrap",
|
|
11201
11340
|
children: [
|
|
11202
|
-
/* @__PURE__ */ (0,
|
|
11203
|
-
/* @__PURE__ */ (0,
|
|
11341
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Unsaved edits from previous results" }),
|
|
11342
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11204
11343
|
CopyButtons,
|
|
11205
11344
|
{
|
|
11206
11345
|
size: "xs",
|
|
@@ -11209,11 +11348,11 @@ function MatrxDataTableCore({
|
|
|
11209
11348
|
json: () => foreignDraftPayload
|
|
11210
11349
|
}
|
|
11211
11350
|
),
|
|
11212
|
-
/* @__PURE__ */ (0,
|
|
11351
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 text-xs text-destructive", onClick: () => setConfirmForeignDraftDiscard(true), children: "Discard drafts" })
|
|
11213
11352
|
]
|
|
11214
11353
|
}
|
|
11215
11354
|
) : null,
|
|
11216
|
-
/* @__PURE__ */ (0,
|
|
11355
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11217
11356
|
ConfirmDialog,
|
|
11218
11357
|
{
|
|
11219
11358
|
open: confirmForeignDraftDiscard,
|
|
@@ -11233,7 +11372,7 @@ function MatrxDataTableCore({
|
|
|
11233
11372
|
}
|
|
11234
11373
|
}
|
|
11235
11374
|
),
|
|
11236
|
-
/* @__PURE__ */ (0,
|
|
11375
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11237
11376
|
DirtySavePill,
|
|
11238
11377
|
{
|
|
11239
11378
|
changeCount,
|
|
@@ -11246,15 +11385,15 @@ function MatrxDataTableCore({
|
|
|
11246
11385
|
]
|
|
11247
11386
|
}
|
|
11248
11387
|
),
|
|
11249
|
-
/* @__PURE__ */ (0,
|
|
11388
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core3.DragOverlay, { children: draggedRow ? (
|
|
11250
11389
|
// w-max: the overlay inherits the ACTIVE node's size, and the active
|
|
11251
11390
|
// node is the 16px grip handle — without it the label wraps to one
|
|
11252
11391
|
// character per line.
|
|
11253
|
-
/* @__PURE__ */ (0,
|
|
11392
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-max max-w-xs truncate rounded border border-border bg-card px-2.5 py-1.5 text-sm font-medium text-foreground shadow-md", children: hierarchy?.itemLabel?.(draggedRow) ?? "Moving row" })
|
|
11254
11393
|
) : null })
|
|
11255
11394
|
]
|
|
11256
11395
|
}
|
|
11257
|
-
) });
|
|
11396
|
+
) }) });
|
|
11258
11397
|
}
|
|
11259
11398
|
function HierarchyDragHandle({
|
|
11260
11399
|
id,
|
|
@@ -11265,7 +11404,7 @@ function HierarchyDragHandle({
|
|
|
11265
11404
|
id,
|
|
11266
11405
|
disabled
|
|
11267
11406
|
});
|
|
11268
|
-
return /* @__PURE__ */ (0,
|
|
11407
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11269
11408
|
"button",
|
|
11270
11409
|
{
|
|
11271
11410
|
ref: setNodeRef,
|
|
@@ -11277,7 +11416,7 @@ function HierarchyDragHandle({
|
|
|
11277
11416
|
onClick: (event) => event.stopPropagation(),
|
|
11278
11417
|
...attributes,
|
|
11279
11418
|
...listeners,
|
|
11280
|
-
children: /* @__PURE__ */ (0,
|
|
11419
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
|
|
11281
11420
|
}
|
|
11282
11421
|
);
|
|
11283
11422
|
}
|
|
@@ -11286,7 +11425,7 @@ function HierarchyRootDropTarget({
|
|
|
11286
11425
|
draggedLabel
|
|
11287
11426
|
}) {
|
|
11288
11427
|
const { isOver, setNodeRef } = (0, import_core3.useDroppable)({ id: "__root__" });
|
|
11289
|
-
return /* @__PURE__ */ (0,
|
|
11428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
11290
11429
|
"div",
|
|
11291
11430
|
{
|
|
11292
11431
|
ref: setNodeRef,
|
|
@@ -11296,8 +11435,8 @@ function HierarchyRootDropTarget({
|
|
|
11296
11435
|
isOver && "border-solid bg-primary/20 shadow-md shadow-primary/25"
|
|
11297
11436
|
),
|
|
11298
11437
|
children: [
|
|
11299
|
-
/* @__PURE__ */ (0,
|
|
11300
|
-
/* @__PURE__ */ (0,
|
|
11438
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "truncate", children: draggedLabel }),
|
|
11439
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-primary/75", children: label })
|
|
11301
11440
|
]
|
|
11302
11441
|
}
|
|
11303
11442
|
);
|
|
@@ -11306,7 +11445,7 @@ function HierarchyDragIndicatorLayer({
|
|
|
11306
11445
|
scrollRef,
|
|
11307
11446
|
resolve: resolve2
|
|
11308
11447
|
}) {
|
|
11309
|
-
const [indicator, setIndicator] = (0,
|
|
11448
|
+
const [indicator, setIndicator] = (0, import_react20.useState)(
|
|
11310
11449
|
null
|
|
11311
11450
|
);
|
|
11312
11451
|
(0, import_core3.useDndMonitor)({
|
|
@@ -11346,7 +11485,7 @@ function HierarchyDragIndicatorLayer({
|
|
|
11346
11485
|
const { preview: preview2 } = indicator;
|
|
11347
11486
|
const indent = indicator.left + 10 + preview2.depth * 12;
|
|
11348
11487
|
if (preview2.position === "inside") {
|
|
11349
|
-
return /* @__PURE__ */ (0,
|
|
11488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11350
11489
|
"div",
|
|
11351
11490
|
{
|
|
11352
11491
|
"aria-hidden": "true",
|
|
@@ -11358,7 +11497,7 @@ function HierarchyDragIndicatorLayer({
|
|
|
11358
11497
|
width: Math.max(0, indicator.width - 4),
|
|
11359
11498
|
height: indicator.height
|
|
11360
11499
|
},
|
|
11361
|
-
children: /* @__PURE__ */ (0,
|
|
11500
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
11362
11501
|
"span",
|
|
11363
11502
|
{
|
|
11364
11503
|
className: "absolute top-1/2 -translate-y-1/2 whitespace-nowrap rounded bg-card/95 px-1.5 py-0.5 text-[10px] font-medium text-primary",
|
|
@@ -11373,7 +11512,7 @@ function HierarchyDragIndicatorLayer({
|
|
|
11373
11512
|
);
|
|
11374
11513
|
}
|
|
11375
11514
|
const lineTop = preview2.position === "before" ? indicator.top - 1 : indicator.top + indicator.height - 1;
|
|
11376
|
-
return /* @__PURE__ */ (0,
|
|
11515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11377
11516
|
"div",
|
|
11378
11517
|
{
|
|
11379
11518
|
"aria-hidden": "true",
|
|
@@ -11384,9 +11523,9 @@ function HierarchyDragIndicatorLayer({
|
|
|
11384
11523
|
left: indent,
|
|
11385
11524
|
width: Math.max(0, indicator.left + indicator.width - indent - 8)
|
|
11386
11525
|
},
|
|
11387
|
-
children: /* @__PURE__ */ (0,
|
|
11388
|
-
/* @__PURE__ */ (0,
|
|
11389
|
-
/* @__PURE__ */ (0,
|
|
11526
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative h-0.5 rounded-full bg-primary", children: [
|
|
11527
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border-2 border-primary bg-card" }),
|
|
11528
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
11390
11529
|
"span",
|
|
11391
11530
|
{
|
|
11392
11531
|
className: cn(
|
|
@@ -11410,9 +11549,9 @@ function HierarchyDroppableRow({
|
|
|
11410
11549
|
children
|
|
11411
11550
|
}) {
|
|
11412
11551
|
const { setNodeRef } = (0, import_core3.useDroppable)({ id, disabled });
|
|
11413
|
-
if (!(0,
|
|
11552
|
+
if (!(0, import_react20.isValidElement)(children) || children.type !== "tr") return children;
|
|
11414
11553
|
const row = children;
|
|
11415
|
-
return (0,
|
|
11554
|
+
return (0, import_react20.cloneElement)(row, {
|
|
11416
11555
|
ref: setNodeRef,
|
|
11417
11556
|
className: row.props.className
|
|
11418
11557
|
});
|
|
@@ -11427,7 +11566,7 @@ function ColumnHeaderDropZone({
|
|
|
11427
11566
|
disabled: !enabled,
|
|
11428
11567
|
data: { matrxDragKind: "column-header", columnId: id }
|
|
11429
11568
|
});
|
|
11430
|
-
return /* @__PURE__ */ (0,
|
|
11569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
|
|
11431
11570
|
}
|
|
11432
11571
|
function fixedUtilityWidth(width) {
|
|
11433
11572
|
return width === void 0 ? void 0 : { width: `${width}px`, minWidth: `${width}px`, maxWidth: `${width}px` };
|
|
@@ -11452,14 +11591,14 @@ function columnWidthVar(width, resizedWidth, id, resizable) {
|
|
|
11452
11591
|
};
|
|
11453
11592
|
}
|
|
11454
11593
|
function DefaultJsonCell({ value }) {
|
|
11455
|
-
const [open, setOpen] = (0,
|
|
11594
|
+
const [open, setOpen] = (0, import_react20.useState)(false);
|
|
11456
11595
|
const host = useMatrxDataTableHost();
|
|
11457
11596
|
const Viewer = host.JsonViewer;
|
|
11458
11597
|
const text = JSON.stringify(value, null, 2);
|
|
11459
11598
|
const summary = Array.isArray(value) ? `${value.length} items` : Object.keys(value).slice(0, 3).join(", ") || "Empty object";
|
|
11460
|
-
return /* @__PURE__ */ (0,
|
|
11461
|
-
/* @__PURE__ */ (0,
|
|
11462
|
-
/* @__PURE__ */ (0,
|
|
11599
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
|
|
11600
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
11601
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { type: "button", className: "block max-w-full truncate text-left text-sm text-foreground", onClick: (event) => {
|
|
11463
11602
|
event.stopPropagation();
|
|
11464
11603
|
setOpen(true);
|
|
11465
11604
|
}, style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", whiteSpace: "normal", overflowWrap: "anywhere" }, "aria-label": "Open JSON value", children: [
|
|
@@ -11467,9 +11606,9 @@ function DefaultJsonCell({ value }) {
|
|
|
11467
11606
|
" ",
|
|
11468
11607
|
summary
|
|
11469
11608
|
] }) }),
|
|
11470
|
-
/* @__PURE__ */ (0,
|
|
11609
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { className: "max-w-md max-h-80 overflow-auto whitespace-pre-wrap break-words", children: text })
|
|
11471
11610
|
] }),
|
|
11472
|
-
/* @__PURE__ */ (0,
|
|
11611
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DataRowWindow, { isOpen: open, onClose: () => setOpen(false), title: "JSON value", row: value, viewContent: Viewer ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Viewer, { data: value }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("pre", { className: "overflow-auto whitespace-pre-wrap p-3 text-xs", children: text }) })
|
|
11473
11612
|
] });
|
|
11474
11613
|
}
|
|
11475
11614
|
function renderCell(row, col, index) {
|
|
@@ -11480,7 +11619,7 @@ function renderCell(row, col, index) {
|
|
|
11480
11619
|
if (asUuid && typeof raw === "string") {
|
|
11481
11620
|
const forbidden = typeof col.fk?.forbidden === "function" ? col.fk.forbidden(raw, row) : Boolean(col.fk?.forbidden);
|
|
11482
11621
|
const declaredToken = typeof col.fk?.token === "function" ? col.fk.token(row) : col.fk?.token;
|
|
11483
|
-
return /* @__PURE__ */ (0,
|
|
11622
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
11484
11623
|
MatrxUuidCell,
|
|
11485
11624
|
{
|
|
11486
11625
|
value: raw,
|
|
@@ -11492,14 +11631,14 @@ function renderCell(row, col, index) {
|
|
|
11492
11631
|
}
|
|
11493
11632
|
);
|
|
11494
11633
|
}
|
|
11495
|
-
if (raw !== null && typeof raw === "object" && !(raw instanceof Date)) return /* @__PURE__ */ (0,
|
|
11634
|
+
if (raw !== null && typeof raw === "object" && !(raw instanceof Date)) return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DefaultJsonCell, { value: raw });
|
|
11496
11635
|
if (typeof raw === "boolean") {
|
|
11497
|
-
return /* @__PURE__ */ (0,
|
|
11636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: raw ? "rounded bg-emerald-500/10 px-1.5 py-0.5 text-xs text-emerald-600" : "rounded bg-slate-500/10 px-1.5 py-0.5 text-xs text-muted-foreground", children: raw ? "Yes" : "No" });
|
|
11498
11637
|
}
|
|
11499
11638
|
const formatted = formatTableDisplayValue(raw);
|
|
11500
|
-
return /* @__PURE__ */ (0,
|
|
11501
|
-
/* @__PURE__ */ (0,
|
|
11502
|
-
/* @__PURE__ */ (0,
|
|
11639
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
|
|
11640
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "block text-sm text-foreground", style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", overflowWrap: "anywhere" }, children: formatted }) }),
|
|
11641
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { className: "max-w-md whitespace-pre-wrap break-words max-h-80 overflow-auto", children: typeof raw === "object" && raw !== null ? JSON.stringify(raw, null, 2) : formatted })
|
|
11503
11642
|
] });
|
|
11504
11643
|
}
|
|
11505
11644
|
function resolveStringTitle(title, fallback) {
|
|
@@ -11509,19 +11648,19 @@ function resolveStringTitle(title, fallback) {
|
|
|
11509
11648
|
}
|
|
11510
11649
|
|
|
11511
11650
|
// src/data-table/SavedViewsControl.tsx
|
|
11512
|
-
var
|
|
11651
|
+
var import_react21 = require("react");
|
|
11513
11652
|
|
|
11514
11653
|
// src/dropdown-menu.tsx
|
|
11515
11654
|
var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
11516
11655
|
var React17 = __toESM(require("react"), 1);
|
|
11517
|
-
var
|
|
11656
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
11518
11657
|
var DropdownMenu = DropdownMenuPrimitive.Root;
|
|
11519
11658
|
var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
|
11520
11659
|
var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
|
11521
11660
|
var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
|
|
11522
11661
|
var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
|
|
11523
11662
|
var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
|
|
11524
|
-
var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11663
|
+
var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
11525
11664
|
DropdownMenuPrimitive.SubTrigger,
|
|
11526
11665
|
{
|
|
11527
11666
|
ref,
|
|
@@ -11534,12 +11673,12 @@ var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, .
|
|
|
11534
11673
|
...props,
|
|
11535
11674
|
children: [
|
|
11536
11675
|
children,
|
|
11537
|
-
/* @__PURE__ */ (0,
|
|
11676
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
|
|
11538
11677
|
]
|
|
11539
11678
|
}
|
|
11540
11679
|
));
|
|
11541
11680
|
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
|
|
11542
|
-
var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11681
|
+
var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
11543
11682
|
DropdownMenuPrimitive.SubContent,
|
|
11544
11683
|
{
|
|
11545
11684
|
ref,
|
|
@@ -11551,7 +11690,7 @@ var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) =
|
|
|
11551
11690
|
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
|
|
11552
11691
|
var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
|
|
11553
11692
|
const portalContainer = usePortalContainer(container);
|
|
11554
|
-
return /* @__PURE__ */ (0,
|
|
11693
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
11555
11694
|
DropdownMenuPrimitive.Content,
|
|
11556
11695
|
{
|
|
11557
11696
|
ref,
|
|
@@ -11568,7 +11707,7 @@ var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, conta
|
|
|
11568
11707
|
) });
|
|
11569
11708
|
});
|
|
11570
11709
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
|
11571
|
-
var DropdownMenuItem = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11710
|
+
var DropdownMenuItem = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
11572
11711
|
DropdownMenuPrimitive.Item,
|
|
11573
11712
|
{
|
|
11574
11713
|
ref,
|
|
@@ -11578,7 +11717,7 @@ var DropdownMenuItem = React17.forwardRef(({ className, inset, ...props }, ref)
|
|
|
11578
11717
|
}
|
|
11579
11718
|
));
|
|
11580
11719
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
|
11581
|
-
var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11720
|
+
var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
11582
11721
|
DropdownMenuPrimitive.CheckboxItem,
|
|
11583
11722
|
{
|
|
11584
11723
|
ref,
|
|
@@ -11586,13 +11725,13 @@ var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...pro
|
|
|
11586
11725
|
className: cn(MENU_INDICATOR_ITEM_CLASS, className),
|
|
11587
11726
|
...props,
|
|
11588
11727
|
children: [
|
|
11589
|
-
/* @__PURE__ */ (0,
|
|
11728
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
|
|
11590
11729
|
children
|
|
11591
11730
|
]
|
|
11592
11731
|
}
|
|
11593
11732
|
));
|
|
11594
11733
|
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
|
|
11595
|
-
var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11734
|
+
var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
11596
11735
|
DropdownMenuPrimitive.RadioItem,
|
|
11597
11736
|
{
|
|
11598
11737
|
ref,
|
|
@@ -11600,13 +11739,13 @@ var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props
|
|
|
11600
11739
|
className: cn(MENU_INDICATOR_ITEM_CLASS, className),
|
|
11601
11740
|
...props,
|
|
11602
11741
|
children: [
|
|
11603
|
-
/* @__PURE__ */ (0,
|
|
11742
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
|
|
11604
11743
|
children
|
|
11605
11744
|
]
|
|
11606
11745
|
}
|
|
11607
11746
|
));
|
|
11608
11747
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
|
11609
|
-
var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11748
|
+
var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
11610
11749
|
DropdownMenuPrimitive.Label,
|
|
11611
11750
|
{
|
|
11612
11751
|
ref,
|
|
@@ -11616,7 +11755,7 @@ var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref)
|
|
|
11616
11755
|
}
|
|
11617
11756
|
));
|
|
11618
11757
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
|
11619
|
-
var DropdownMenuSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11758
|
+
var DropdownMenuSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
11620
11759
|
DropdownMenuPrimitive.Separator,
|
|
11621
11760
|
{
|
|
11622
11761
|
ref,
|
|
@@ -11629,7 +11768,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
|
|
11629
11768
|
var DropdownMenuShortcut = ({
|
|
11630
11769
|
className,
|
|
11631
11770
|
...props
|
|
11632
|
-
}) => /* @__PURE__ */ (0,
|
|
11771
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
11633
11772
|
"span",
|
|
11634
11773
|
{
|
|
11635
11774
|
"data-slot": "dropdown-menu-shortcut",
|
|
@@ -11640,7 +11779,7 @@ var DropdownMenuShortcut = ({
|
|
|
11640
11779
|
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
|
11641
11780
|
|
|
11642
11781
|
// src/data-table/SavedViewsControl.tsx
|
|
11643
|
-
var
|
|
11782
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
11644
11783
|
function SavedViewsControl({
|
|
11645
11784
|
views,
|
|
11646
11785
|
activeId = null,
|
|
@@ -11652,11 +11791,11 @@ function SavedViewsControl({
|
|
|
11652
11791
|
onUpdate,
|
|
11653
11792
|
onReload
|
|
11654
11793
|
}) {
|
|
11655
|
-
const unsavedChangesId = (0,
|
|
11656
|
-
const [saveOpen, setSaveOpen] = (0,
|
|
11657
|
-
const [name, setName] = (0,
|
|
11658
|
-
const [saving, setSaving] = (0,
|
|
11659
|
-
const [actionError, setActionError] = (0,
|
|
11794
|
+
const unsavedChangesId = (0, import_react21.useId)();
|
|
11795
|
+
const [saveOpen, setSaveOpen] = (0, import_react21.useState)(false);
|
|
11796
|
+
const [name, setName] = (0, import_react21.useState)("");
|
|
11797
|
+
const [saving, setSaving] = (0, import_react21.useState)(false);
|
|
11798
|
+
const [actionError, setActionError] = (0, import_react21.useState)(null);
|
|
11660
11799
|
const visibleError = actionError ?? error;
|
|
11661
11800
|
const save = async () => {
|
|
11662
11801
|
const next = name.trim();
|
|
@@ -11698,10 +11837,10 @@ function SavedViewsControl({
|
|
|
11698
11837
|
}
|
|
11699
11838
|
};
|
|
11700
11839
|
const activeName = activeId ? views.find((view) => view.id === activeId)?.name : void 0;
|
|
11701
|
-
return /* @__PURE__ */ (0,
|
|
11702
|
-
/* @__PURE__ */ (0,
|
|
11703
|
-
/* @__PURE__ */ (0,
|
|
11704
|
-
/* @__PURE__ */ (0,
|
|
11840
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-1", "data-matrx-table-saved-views": true, children: [
|
|
11841
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DropdownMenu, { children: [
|
|
11842
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Tooltip, { children: [
|
|
11843
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
11705
11844
|
Button,
|
|
11706
11845
|
{
|
|
11707
11846
|
type: "button",
|
|
@@ -11712,38 +11851,38 @@ function SavedViewsControl({
|
|
|
11712
11851
|
"aria-describedby": dirty ? unsavedChangesId : void 0,
|
|
11713
11852
|
disabled: saving,
|
|
11714
11853
|
children: [
|
|
11715
|
-
/* @__PURE__ */ (0,
|
|
11716
|
-
dirty ? /* @__PURE__ */ (0,
|
|
11717
|
-
/* @__PURE__ */ (0,
|
|
11854
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 flex-1 truncate", children: loading ? "Loading views\u2026" : activeName ?? "Default view" }),
|
|
11855
|
+
dirty ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-amber-500" }) : null,
|
|
11856
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChevronDown, { className: "size-3.5 shrink-0" })
|
|
11718
11857
|
]
|
|
11719
11858
|
}
|
|
11720
11859
|
) }) }),
|
|
11721
|
-
/* @__PURE__ */ (0,
|
|
11860
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipContent, { children: "Choose or save a table view" })
|
|
11722
11861
|
] }),
|
|
11723
|
-
/* @__PURE__ */ (0,
|
|
11724
|
-
/* @__PURE__ */ (0,
|
|
11725
|
-
/* @__PURE__ */ (0,
|
|
11726
|
-
/* @__PURE__ */ (0,
|
|
11727
|
-
views.map((view) => /* @__PURE__ */ (0,
|
|
11862
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DropdownMenuContent, { align: "end", children: [
|
|
11863
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuLabel, { children: "Views" }),
|
|
11864
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DropdownMenuRadioGroup, { value: activeId ?? "__default__", onValueChange: (value) => onSelect(value === "__default__" ? null : value), children: [
|
|
11865
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuRadioItem, { value: "__default__", children: "Default view" }),
|
|
11866
|
+
views.map((view) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuRadioItem, { value: view.id, children: view.name }, view.id))
|
|
11728
11867
|
] }),
|
|
11729
|
-
/* @__PURE__ */ (0,
|
|
11730
|
-
/* @__PURE__ */ (0,
|
|
11868
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuSeparator, {}),
|
|
11869
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuItem, { disabled: saving, onSelect: () => {
|
|
11731
11870
|
setActionError(null);
|
|
11732
11871
|
setSaveOpen(true);
|
|
11733
11872
|
}, children: "Save current view\u2026" }),
|
|
11734
|
-
activeId && onUpdate ? /* @__PURE__ */ (0,
|
|
11735
|
-
onReload ? /* @__PURE__ */ (0,
|
|
11873
|
+
activeId && onUpdate ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuItem, { disabled: saving, onSelect: () => void update(), children: "Update current view" }) : null,
|
|
11874
|
+
onReload ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuItem, { disabled: saving || loading, onSelect: () => void reload(), children: "Reload views" }) : null
|
|
11736
11875
|
] })
|
|
11737
11876
|
] }),
|
|
11738
|
-
dirty ? /* @__PURE__ */ (0,
|
|
11739
|
-
visibleError ? /* @__PURE__ */ (0,
|
|
11740
|
-
/* @__PURE__ */ (0,
|
|
11741
|
-
/* @__PURE__ */ (0,
|
|
11742
|
-
visibleError ? /* @__PURE__ */ (0,
|
|
11743
|
-
/* @__PURE__ */ (0,
|
|
11744
|
-
/* @__PURE__ */ (0,
|
|
11745
|
-
/* @__PURE__ */ (0,
|
|
11746
|
-
/* @__PURE__ */ (0,
|
|
11877
|
+
dirty ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { id: unsavedChangesId, className: "sr-only", children: "This table view has unsaved changes. Open the view menu to save or update it." }) : null,
|
|
11878
|
+
visibleError ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { role: "alert", className: "basis-full break-words text-xs text-destructive", children: visibleError }) : null,
|
|
11879
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Dialog, { open: saveOpen, onOpenChange: setSaveOpen, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DialogContent, { children: [
|
|
11880
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogTitle, { children: "Save current view" }) }),
|
|
11881
|
+
visibleError ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: visibleError }) : null,
|
|
11882
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Input, { "aria-label": "View name", value: name, onChange: (event) => setName(event.target.value), placeholder: "View name", autoFocus: true }),
|
|
11883
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DialogFooter, { children: [
|
|
11884
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { type: "button", variant: "outline", onClick: () => setSaveOpen(false), children: "Cancel" }),
|
|
11885
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { type: "button", disabled: !name.trim() || saving, onClick: () => void save(), children: saving ? "Saving\u2026" : "Save view" })
|
|
11747
11886
|
] })
|
|
11748
11887
|
] }) })
|
|
11749
11888
|
] });
|