@ai-matrx/design-system 0.18.19 → 0.18.21
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 +12 -0
- package/dist/data-table/index.cjs +31 -10
- package/dist/data-table/index.cjs.map +1 -1
- package/dist/data-table/index.js +31 -10
- package/dist/data-table/index.js.map +1 -1
- package/dist/styles.css +41 -1
- package/package.json +1 -1
package/dist/data-table/index.js
CHANGED
|
@@ -888,7 +888,7 @@ function TableTitleRow({
|
|
|
888
888
|
{
|
|
889
889
|
"data-matrx-table-toolbar": true,
|
|
890
890
|
className: cn(
|
|
891
|
-
"flex min-w-0 shrink-0 flex-wrap items-center gap-2
|
|
891
|
+
"flex min-w-0 shrink-0 flex-wrap items-center gap-2",
|
|
892
892
|
className
|
|
893
893
|
),
|
|
894
894
|
children: [
|
|
@@ -915,7 +915,7 @@ function TableTitleRow({
|
|
|
915
915
|
"div",
|
|
916
916
|
{
|
|
917
917
|
"data-matrx-table-actions": true,
|
|
918
|
-
className: "ml-auto flex min-w-0 flex-wrap items-center gap-
|
|
918
|
+
className: "ml-auto flex min-w-0 flex-wrap items-center gap-0",
|
|
919
919
|
children: actions
|
|
920
920
|
}
|
|
921
921
|
) : null
|
|
@@ -7271,7 +7271,10 @@ function MatrxDataTableCore({
|
|
|
7271
7271
|
...appendQuery?.scroll
|
|
7272
7272
|
});
|
|
7273
7273
|
const rootRef = useRef6(null);
|
|
7274
|
+
const actionDiagnosticObserver = useRef6(null);
|
|
7274
7275
|
const setDiagnosticBoundaryRef = useCallback4((node) => {
|
|
7276
|
+
actionDiagnosticObserver.current?.disconnect();
|
|
7277
|
+
actionDiagnosticObserver.current = null;
|
|
7275
7278
|
rootRef.current = node;
|
|
7276
7279
|
if (!node) return;
|
|
7277
7280
|
node.style.setProperty("outline", "2px solid #2563eb", "important");
|
|
@@ -7289,6 +7292,22 @@ function MatrxDataTableCore({
|
|
|
7289
7292
|
boundary.style.setProperty("z-index", "2147483647", "important");
|
|
7290
7293
|
boundary.style.setProperty("box-sizing", "border-box", "important");
|
|
7291
7294
|
boundary.style.setProperty("border", "2px solid #2563eb", "important");
|
|
7295
|
+
const paintActionDiagnostics = () => {
|
|
7296
|
+
const paint = (selector, color) => {
|
|
7297
|
+
for (const element of Array.from(node.querySelectorAll(selector))) {
|
|
7298
|
+
if (element.closest("[data-matrx-table]") !== node) continue;
|
|
7299
|
+
element.style.setProperty("outline", `1px solid ${color}`, "important");
|
|
7300
|
+
element.style.setProperty("outline-offset", "-1px", "important");
|
|
7301
|
+
}
|
|
7302
|
+
};
|
|
7303
|
+
paint("[data-matrx-table-row-action-cell], [data-matrx-table-row-actions]", "#16a34a");
|
|
7304
|
+
paint("[data-matrx-table-row-actions] :is(button, a)", "#f97316");
|
|
7305
|
+
paint("[data-matrx-table-row-actions] .matrx-tap-pill", "#a855f7");
|
|
7306
|
+
paint("[data-matrx-table-row-actions] svg", "#ef4444");
|
|
7307
|
+
};
|
|
7308
|
+
paintActionDiagnostics();
|
|
7309
|
+
actionDiagnosticObserver.current = new MutationObserver(paintActionDiagnostics);
|
|
7310
|
+
actionDiagnosticObserver.current.observe(node, { childList: true, subtree: true });
|
|
7292
7311
|
}, []);
|
|
7293
7312
|
useClippedContentGuard(rootRef, {
|
|
7294
7313
|
label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
|
|
@@ -8168,7 +8187,7 @@ function MatrxDataTableCore({
|
|
|
8168
8187
|
// where every row read as an empty text input rather than a selection
|
|
8169
8188
|
// control. The control keeps its own size and gains the 44px tap area
|
|
8170
8189
|
// as an invisible ::before below.
|
|
8171
|
-
"flex h-full min-h-0 flex-col
|
|
8190
|
+
"flex h-full min-h-0 flex-col p-2 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-h-11 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-w-11 max-lg:[&_input]:min-h-11 max-lg:[&_table_a]:inline-flex max-lg:[&_table_a]:min-h-11 max-lg:[&_table_a]:items-center",
|
|
8172
8191
|
className
|
|
8173
8192
|
),
|
|
8174
8193
|
children: [
|
|
@@ -8294,7 +8313,7 @@ function MatrxDataTableCore({
|
|
|
8294
8313
|
"div",
|
|
8295
8314
|
{
|
|
8296
8315
|
"data-matrx-table-actions": true,
|
|
8297
|
-
className: "ml-auto flex min-w-0 flex-wrap items-center gap-
|
|
8316
|
+
className: "ml-auto flex min-w-0 flex-wrap items-center gap-0",
|
|
8298
8317
|
children: [
|
|
8299
8318
|
sourceTotal !== void 0 ? /* @__PURE__ */ jsxs26(
|
|
8300
8319
|
"span",
|
|
@@ -8546,7 +8565,8 @@ function MatrxDataTableCore({
|
|
|
8546
8565
|
actions: showRowCopy || rowActions ? /* @__PURE__ */ jsxs26(
|
|
8547
8566
|
"div",
|
|
8548
8567
|
{
|
|
8549
|
-
|
|
8568
|
+
"data-matrx-table-row-actions": true,
|
|
8569
|
+
className: "inline-flex items-center justify-end gap-0",
|
|
8550
8570
|
onClick: (event) => event.stopPropagation(),
|
|
8551
8571
|
children: [
|
|
8552
8572
|
showRowCopy && effectiveCopy ? /* @__PURE__ */ jsx35(
|
|
@@ -8721,7 +8741,7 @@ function MatrxDataTableCore({
|
|
|
8721
8741
|
id
|
|
8722
8742
|
);
|
|
8723
8743
|
}),
|
|
8724
|
-
showActionsCol && /* @__PURE__ */ jsx35("th", { className: "h-9 w-
|
|
8744
|
+
showActionsCol && /* @__PURE__ */ jsx35("th", { className: "h-9 w-px text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Actions" })
|
|
8725
8745
|
] }) }),
|
|
8726
8746
|
/* @__PURE__ */ jsxs26("tbody", { children: [
|
|
8727
8747
|
isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs26("tr", { className: "border-b border-border/60", children: [
|
|
@@ -8738,7 +8758,7 @@ function MatrxDataTableCore({
|
|
|
8738
8758
|
},
|
|
8739
8759
|
columnId(col)
|
|
8740
8760
|
)),
|
|
8741
|
-
showActionsCol && /* @__PURE__ */ jsx35("td", { className: "
|
|
8761
|
+
showActionsCol && /* @__PURE__ */ jsx35("td", { className: "text-right align-middle", children: /* @__PURE__ */ jsx35(Skeleton, { className: "ml-auto h-5 w-10" }) })
|
|
8742
8762
|
] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35(
|
|
8743
8763
|
"td",
|
|
8744
8764
|
{
|
|
@@ -8846,9 +8866,10 @@ function MatrxDataTableCore({
|
|
|
8846
8866
|
columnId(col)
|
|
8847
8867
|
);
|
|
8848
8868
|
}),
|
|
8849
|
-
showActionsCol && /* @__PURE__ */ jsx35("td", { className: "
|
|
8869
|
+
showActionsCol && /* @__PURE__ */ jsx35("td", { "data-matrx-table-row-action-cell": true, className: "text-right align-middle", children: /* @__PURE__ */ jsxs26(
|
|
8850
8870
|
"div",
|
|
8851
8871
|
{
|
|
8872
|
+
"data-matrx-table-row-actions": true,
|
|
8852
8873
|
className: "inline-flex items-center justify-end gap-0",
|
|
8853
8874
|
onClick: (e) => e.stopPropagation(),
|
|
8854
8875
|
children: [
|
|
@@ -8953,7 +8974,7 @@ function MatrxDataTableCore({
|
|
|
8953
8974
|
},
|
|
8954
8975
|
columnId(column)
|
|
8955
8976
|
)),
|
|
8956
|
-
showActionsCol ? /* @__PURE__ */ jsx35("td", {
|
|
8977
|
+
showActionsCol ? /* @__PURE__ */ jsx35("td", {}) : null
|
|
8957
8978
|
] }, `footer-${index}`)) }) : null
|
|
8958
8979
|
] })
|
|
8959
8980
|
]
|
|
@@ -8996,7 +9017,7 @@ function MatrxDataTableCore({
|
|
|
8996
9017
|
"div",
|
|
8997
9018
|
{
|
|
8998
9019
|
"data-matrx-table-footer": true,
|
|
8999
|
-
className: "flex min-h-16 shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border
|
|
9020
|
+
className: "flex min-h-16 shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border",
|
|
9000
9021
|
"aria-busy": isLoading || isFetching,
|
|
9001
9022
|
children: [
|
|
9002
9023
|
/* @__PURE__ */ jsxs26(
|