@mastra/playground-ui 30.0.0 → 30.0.1
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 +67 -0
- package/dist/index.cjs.js +28 -261
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.css +9 -17
- package/dist/index.es.js +29 -259
- package/dist/index.es.js.map +1 -1
- package/dist/src/ds/components/DataList/{data-list-row.d.ts → data-list-row-wrapper.d.ts} +2 -2
- package/dist/src/ds/components/DataList/data-list.d.ts +1 -1
- package/dist/src/ds/components/DataList/shared.d.ts +3 -3
- package/dist/src/ds/components/LogsDataList/logs-data-list.d.ts +1 -1
- package/dist/src/index.d.ts +0 -2
- package/package.json +7 -7
- package/dist/src/ds/components/EntityList/entity-list-cells.d.ts +0 -9
- package/dist/src/ds/components/EntityList/entity-list-no-match.d.ts +0 -5
- package/dist/src/ds/components/EntityList/entity-list-pagination.d.ts +0 -7
- package/dist/src/ds/components/EntityList/entity-list-root.d.ts +0 -7
- package/dist/src/ds/components/EntityList/entity-list-row-link.d.ts +0 -9
- package/dist/src/ds/components/EntityList/entity-list-row.d.ts +0 -8
- package/dist/src/ds/components/EntityList/entity-list-rows.d.ts +0 -6
- package/dist/src/ds/components/EntityList/entity-list-skeleton.d.ts +0 -5
- package/dist/src/ds/components/EntityList/entity-list-top-cell.d.ts +0 -20
- package/dist/src/ds/components/EntityList/entity-list-top.d.ts +0 -6
- package/dist/src/ds/components/EntityList/entity-list.d.ts +0 -24
- package/dist/src/ds/components/EntityList/index.d.ts +0 -2
- package/dist/src/ds/components/EntityListPageLayout/entity-list-page-layout-root.d.ts +0 -5
- package/dist/src/ds/components/EntityListPageLayout/entity-list-page-layout-top.d.ts +0 -5
- package/dist/src/ds/components/EntityListPageLayout/entity-list-page-layout.d.ts +0 -5
- package/dist/src/ds/components/EntityListPageLayout/index.d.ts +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,72 @@
|
|
|
1
1
|
# @mastra/playground-ui
|
|
2
2
|
|
|
3
|
+
## 30.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Renamed `DataList.Row` (the non-interactive grid wrapper) to `DataList.RowWrapper` for clarity, since the name `Row` was easy to confuse with the interactive row primitives (`.RowButton`, `.RowLink`, `.RowStatic`). The corresponding exported component is now `DataListRowWrapper` (was `DataListRow`). ([#17123](https://github.com/mastra-ai/mastra/pull/17123))
|
|
8
|
+
|
|
9
|
+
**Migration**
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
// Before
|
|
13
|
+
<DataList.Row>
|
|
14
|
+
<DataList.SelectCell ... />
|
|
15
|
+
<DataList.RowButton ...>...</DataList.RowButton>
|
|
16
|
+
</DataList.Row>
|
|
17
|
+
|
|
18
|
+
// After
|
|
19
|
+
<DataList.RowWrapper>
|
|
20
|
+
<DataList.SelectCell ... />
|
|
21
|
+
<DataList.RowButton ...>...</DataList.RowButton>
|
|
22
|
+
</DataList.RowWrapper>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
The `.RowButton`, `.RowLink`, and `.RowStatic` primitives are unchanged.
|
|
26
|
+
|
|
27
|
+
- `ContextMenu` Positioner and popup raised from `z-50` to `z-1000` with `isolate`, so the menu sits above app chrome that uses higher stacking contexts (e.g. sticky headers with `z-500`). Previously the menu would render behind such elements when opened on triggers near them. ([#17133](https://github.com/mastra-ai/mastra/pull/17133))
|
|
28
|
+
|
|
29
|
+
- Removed the EntityList and EntityListPageLayout components — they were superseded by DataList. The 9 Studio root list pages (Agents, Datasets, Experiments, MCPs, Processors, Prompts, Scorers, Tools, Workflows) now build on DataList, matching the condensed layout shared across the rest of Studio. ([#17058](https://github.com/mastra-ai/mastra/pull/17058))
|
|
30
|
+
|
|
31
|
+
**Migration**
|
|
32
|
+
|
|
33
|
+
If you were importing EntityList or EntityListPageLayout from `@mastra/playground-ui`, switch to DataList — its API is a strict superset:
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
// Before
|
|
37
|
+
import { EntityList, EntityListSkeleton } from '@mastra/playground-ui';
|
|
38
|
+
|
|
39
|
+
// After
|
|
40
|
+
import { DataList, DataListSkeleton } from '@mastra/playground-ui';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
The primitive names match (`.Top`, `.TopCell`, `.TopCellSmart`, `.RowLink`, `.Cell`, `.TextCell`, `.NameCell`, `.DescriptionCell`, `.NoMatch`, `.Pagination`). DataList additionally exposes `.Row`, `.RowButton`, `.RowStatic`, `.IdCell`, `.MonoCell`, `.SelectCell`, `.NextPageLoading`, and more — useful when you need selection rows or action cells outside a RowLink.
|
|
44
|
+
|
|
45
|
+
- Updated dependencies [[`21db1a4`](https://github.com/mastra-ai/mastra/commit/21db1a4b8ac058d5a4fbe38b516cc1b81e526915)]:
|
|
46
|
+
- @mastra/core@1.37.1
|
|
47
|
+
- @mastra/client-js@1.21.1
|
|
48
|
+
- @mastra/react@0.4.2
|
|
49
|
+
|
|
50
|
+
## 30.0.1-alpha.0
|
|
51
|
+
|
|
52
|
+
### Patch Changes
|
|
53
|
+
|
|
54
|
+
- Removed the EntityList and EntityListPageLayout components — they were superseded by DataList. The 9 Studio root list pages (Agents, Datasets, Experiments, MCPs, Processors, Prompts, Scorers, Tools, Workflows) now build on DataList, matching the condensed layout shared across the rest of Studio. ([#17058](https://github.com/mastra-ai/mastra/pull/17058))
|
|
55
|
+
|
|
56
|
+
**Migration**
|
|
57
|
+
|
|
58
|
+
If you were importing EntityList or EntityListPageLayout from `@mastra/playground-ui`, switch to DataList — its API is a strict superset:
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
// Before
|
|
62
|
+
import { EntityList, EntityListSkeleton } from '@mastra/playground-ui';
|
|
63
|
+
|
|
64
|
+
// After
|
|
65
|
+
import { DataList, DataListSkeleton } from '@mastra/playground-ui';
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
The primitive names match (`.Top`, `.TopCell`, `.TopCellSmart`, `.RowLink`, `.Cell`, `.TextCell`, `.NameCell`, `.DescriptionCell`, `.NoMatch`, `.Pagination`). DataList additionally exposes `.Row`, `.RowButton`, `.RowStatic`, `.IdCell`, `.MonoCell`, `.SelectCell`, `.NextPageLoading`, and more — useful when you need selection rows or action cells outside a RowLink.
|
|
69
|
+
|
|
3
70
|
## 30.0.0
|
|
4
71
|
|
|
5
72
|
### Minor Changes
|
package/dist/index.cjs.js
CHANGED
|
@@ -6719,7 +6719,7 @@ const itemClass$1 = cn(
|
|
|
6719
6719
|
"[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-60 [&:hover>svg]:opacity-100"
|
|
6720
6720
|
);
|
|
6721
6721
|
const popupClass$1 = cn(
|
|
6722
|
-
"bg-surface3 text-neutral4 z-
|
|
6722
|
+
"bg-surface3 text-neutral4 z-1000 min-w-44 max-h-[min(20rem,var(--available-height))] overflow-x-hidden overflow-y-auto rounded-xl border border-border1 p-1 shadow-dialog origin-[var(--transform-origin)] outline-none",
|
|
6723
6723
|
"data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
|
|
6724
6724
|
"data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1"
|
|
6725
6725
|
);
|
|
@@ -6732,7 +6732,7 @@ const ContextMenuContent = React__namespace.forwardRef(
|
|
|
6732
6732
|
alignOffset,
|
|
6733
6733
|
side,
|
|
6734
6734
|
sideOffset,
|
|
6735
|
-
className: "z-
|
|
6735
|
+
className: "isolate z-1000 outline-none",
|
|
6736
6736
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6737
6737
|
contextMenu.ContextMenu.Popup,
|
|
6738
6738
|
{
|
|
@@ -6853,7 +6853,7 @@ const ContextMenuSubContent = React__namespace.forwardRef(
|
|
|
6853
6853
|
alignOffset,
|
|
6854
6854
|
side,
|
|
6855
6855
|
sideOffset,
|
|
6856
|
-
className: "z-
|
|
6856
|
+
className: "isolate z-1000 outline-none",
|
|
6857
6857
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6858
6858
|
contextMenu.ContextMenu.Popup,
|
|
6859
6859
|
{
|
|
@@ -12837,11 +12837,11 @@ const ItemList = Object.assign(ItemListRoot, {
|
|
|
12837
12837
|
LabelCell: ItemListLabelCell
|
|
12838
12838
|
});
|
|
12839
12839
|
|
|
12840
|
-
const widths$
|
|
12840
|
+
const widths$1 = ["75%", "50%", "65%", "90%", "60%", "80%"];
|
|
12841
12841
|
function ItemListItemsSkeleton({ columns, numberOfRows = 3 }) {
|
|
12842
12842
|
const getPseudoRandomWidth = (rowIdx, colIdx) => {
|
|
12843
|
-
const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$
|
|
12844
|
-
return widths$
|
|
12843
|
+
const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$1.length;
|
|
12844
|
+
return widths$1[index];
|
|
12845
12845
|
};
|
|
12846
12846
|
return /* @__PURE__ */ jsxRuntime.jsx(ItemListItems, { children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(ItemListRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemListRowButton, { columns, children: (columns || []).map((col, colIdx) => {
|
|
12847
12847
|
const key = `${col.name}-${colIdx}`;
|
|
@@ -13516,11 +13516,6 @@ const dataListRowStyles = [
|
|
|
13516
13516
|
...dataListRowOuterStyles
|
|
13517
13517
|
];
|
|
13518
13518
|
|
|
13519
|
-
const DataListRow = React.forwardRef(({ children, className, ...rest }, ref) => {
|
|
13520
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("grid grid-cols-subgrid gap-0 mx-1", ...dataListRowOuterStyles, className), ...rest, children });
|
|
13521
|
-
});
|
|
13522
|
-
DataListRow.displayName = "DataListRow";
|
|
13523
|
-
|
|
13524
13519
|
const DataListRowButton = React.forwardRef(
|
|
13525
13520
|
({ children, className, type = "button", flushLeft, flushRight, colStart, colEnd, featured, style, ...rest }, ref) => {
|
|
13526
13521
|
const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
|
|
@@ -13603,6 +13598,21 @@ const DataListRowStatic = React.forwardRef(
|
|
|
13603
13598
|
);
|
|
13604
13599
|
DataListRowStatic.displayName = "DataListRowStatic";
|
|
13605
13600
|
|
|
13601
|
+
const DataListRowWrapper = React.forwardRef(
|
|
13602
|
+
({ children, className, ...rest }, ref) => {
|
|
13603
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
13604
|
+
"div",
|
|
13605
|
+
{
|
|
13606
|
+
ref,
|
|
13607
|
+
className: cn("grid grid-cols-subgrid gap-0 mx-1", ...dataListRowOuterStyles, className),
|
|
13608
|
+
...rest,
|
|
13609
|
+
children
|
|
13610
|
+
}
|
|
13611
|
+
);
|
|
13612
|
+
}
|
|
13613
|
+
);
|
|
13614
|
+
DataListRowWrapper.displayName = "DataListRowWrapper";
|
|
13615
|
+
|
|
13606
13616
|
function DataListSpacer({ height }) {
|
|
13607
13617
|
if (height <= 0) return null;
|
|
13608
13618
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", style: { height } });
|
|
@@ -13668,7 +13678,7 @@ function DataListTopCellWithTooltip({ children, tooltip, className }) {
|
|
|
13668
13678
|
/* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
|
|
13669
13679
|
] });
|
|
13670
13680
|
}
|
|
13671
|
-
const breakpointClasses
|
|
13681
|
+
const breakpointClasses = {
|
|
13672
13682
|
sm: { show: "hidden sm:inline-flex", hide: "inline-flex sm:hidden" },
|
|
13673
13683
|
md: { show: "hidden md:inline-flex", hide: "inline-flex md:hidden" },
|
|
13674
13684
|
lg: { show: "hidden lg:inline-flex", hide: "inline-flex lg:hidden" },
|
|
@@ -13683,7 +13693,7 @@ function DataListTopCellSmart({
|
|
|
13683
13693
|
className
|
|
13684
13694
|
}) {
|
|
13685
13695
|
const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
|
|
13686
|
-
const bp = breakpointClasses
|
|
13696
|
+
const bp = breakpointClasses[breakpoint];
|
|
13687
13697
|
const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
13688
13698
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
|
|
13689
13699
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
|
|
@@ -13734,7 +13744,7 @@ const DataList = Object.assign(DataListRoot, {
|
|
|
13734
13744
|
TopCell: DataListTopCell,
|
|
13735
13745
|
TopCellWithTooltip: DataListTopCellWithTooltip,
|
|
13736
13746
|
TopCellSmart: DataListTopCellSmart,
|
|
13737
|
-
|
|
13747
|
+
RowWrapper: DataListRowWrapper,
|
|
13738
13748
|
RowButton: DataListRowButton,
|
|
13739
13749
|
RowLink: DataListRowLink,
|
|
13740
13750
|
RowStatic: DataListRowStatic,
|
|
@@ -13756,14 +13766,14 @@ const DataList = Object.assign(DataListRoot, {
|
|
|
13756
13766
|
Pagination: DataListPagination
|
|
13757
13767
|
});
|
|
13758
13768
|
|
|
13759
|
-
const widths
|
|
13769
|
+
const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
|
|
13760
13770
|
function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 }) {
|
|
13761
13771
|
const columnParts = columns.trim().split(/\s+/);
|
|
13762
13772
|
const columnCount = columnParts.length;
|
|
13763
13773
|
const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
|
|
13764
13774
|
const getPseudoRandomWidth = (rowIdx, colIdx) => {
|
|
13765
|
-
const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths
|
|
13766
|
-
return widths
|
|
13775
|
+
const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
|
|
13776
|
+
return widths[index];
|
|
13767
13777
|
};
|
|
13768
13778
|
return /* @__PURE__ */ jsxRuntime.jsx(DataListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
13769
13779
|
"div",
|
|
@@ -13889,221 +13899,6 @@ const TracesDataList = Object.assign(TracesDataListRoot, {
|
|
|
13889
13899
|
NextPageLoading: DataListNextPageLoading
|
|
13890
13900
|
});
|
|
13891
13901
|
|
|
13892
|
-
function EntityListCell({ children, className }) {
|
|
13893
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative py-4 grid items-center text-ui-md whitespace-nowrap text-neutral3", className), children });
|
|
13894
|
-
}
|
|
13895
|
-
function EntityListTextCell({ children, className }) {
|
|
13896
|
-
return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className, children });
|
|
13897
|
-
}
|
|
13898
|
-
function EntityListNameCell({ children, className }) {
|
|
13899
|
-
return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className: cn("text-left text-neutral4", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) });
|
|
13900
|
-
}
|
|
13901
|
-
function EntityListDescriptionCell({ children, className }) {
|
|
13902
|
-
return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className: cn("text-neutral2", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) });
|
|
13903
|
-
}
|
|
13904
|
-
|
|
13905
|
-
function EntityListNoMatch({ message = "Nothing matches your search", className }) {
|
|
13906
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md", children: message }) });
|
|
13907
|
-
}
|
|
13908
|
-
|
|
13909
|
-
function EntityListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
|
|
13910
|
-
const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
|
|
13911
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("col-span-full flex items-center justify-center gap-8 pt-6 pb-4 text-ui-md text-neutral3"), children: [
|
|
13912
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
13913
|
-
"Page ",
|
|
13914
|
-
/* @__PURE__ */ jsxRuntime.jsx("b", { children: currentPage ? currentPage + 1 : "1" })
|
|
13915
|
-
] }),
|
|
13916
|
-
showNavigation && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13917
|
-
"div",
|
|
13918
|
-
{
|
|
13919
|
-
className: cn(
|
|
13920
|
-
"flex gap-4",
|
|
13921
|
-
"[&>button]:flex [&>button]:items-center [&>button]:gap-2 [&>button]:text-neutral4 [&>button:hover]:text-neutral5 [&>button]:transition-colors [&>button]:border [&>button]:border-border1 [&>button]:p-1 [&>button]:px-2 [&>button]:rounded-md",
|
|
13922
|
-
"[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-neutral3"
|
|
13923
|
-
),
|
|
13924
|
-
children: [
|
|
13925
|
-
typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: onPrevPage, children: [
|
|
13926
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
|
|
13927
|
-
"Previous"
|
|
13928
|
-
] }),
|
|
13929
|
-
hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: onNextPage, children: [
|
|
13930
|
-
"Next",
|
|
13931
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
|
|
13932
|
-
] })
|
|
13933
|
-
]
|
|
13934
|
-
}
|
|
13935
|
-
)
|
|
13936
|
-
] });
|
|
13937
|
-
}
|
|
13938
|
-
|
|
13939
|
-
function EntityListRoot({ children, columns, className }) {
|
|
13940
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
13941
|
-
"div",
|
|
13942
|
-
{
|
|
13943
|
-
className: cn(
|
|
13944
|
-
"grid bg-surface2 border h-full border-border1 rounded-xl overflow-y-auto content-start",
|
|
13945
|
-
className
|
|
13946
|
-
),
|
|
13947
|
-
style: { gridTemplateColumns: columns },
|
|
13948
|
-
children
|
|
13949
|
-
}
|
|
13950
|
-
);
|
|
13951
|
-
}
|
|
13952
|
-
|
|
13953
|
-
function EntityListRow({ children, className, onClick, selected }) {
|
|
13954
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
13955
|
-
"div",
|
|
13956
|
-
{
|
|
13957
|
-
role: onClick ? "button" : void 0,
|
|
13958
|
-
tabIndex: onClick ? 0 : void 0,
|
|
13959
|
-
onClick,
|
|
13960
|
-
onKeyDown: onClick ? (e) => {
|
|
13961
|
-
if (e.currentTarget !== e.target) return;
|
|
13962
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
13963
|
-
e.preventDefault();
|
|
13964
|
-
onClick();
|
|
13965
|
-
}
|
|
13966
|
-
} : void 0,
|
|
13967
|
-
className: cn(
|
|
13968
|
-
"entity-list-row grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full cursor-pointer border-y border-b-border1 border-t-transparent px-5",
|
|
13969
|
-
"hover:bg-surface4 hover:border-transparent focus-within:bg-surface4 focus-within:border-transparent focus-within:ring-1 focus-within:ring-inset focus-within:ring-accent1",
|
|
13970
|
-
"[.entity-list-row:hover+&]:border-t-transparent [.entity-list-row:focus-within+&]:border-t-transparent",
|
|
13971
|
-
"transition-colors duration-200 rounded-lg",
|
|
13972
|
-
selected && "bg-surface4 border-transparent",
|
|
13973
|
-
className
|
|
13974
|
-
),
|
|
13975
|
-
children
|
|
13976
|
-
}
|
|
13977
|
-
);
|
|
13978
|
-
}
|
|
13979
|
-
|
|
13980
|
-
function EntityListRowLink({ children, to, className, LinkComponent: Link }) {
|
|
13981
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
13982
|
-
Link,
|
|
13983
|
-
{
|
|
13984
|
-
href: to,
|
|
13985
|
-
className: cn(
|
|
13986
|
-
"entity-list-row grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full px-5 outline-hidden cursor-pointer border-y border-b-border1 border-t-transparent",
|
|
13987
|
-
"hover:bg-surface4 hover:border-transparent focus-within:bg-surface4 focus-within:border-transparent focus-within:ring-1 focus-within:ring-inset focus-within:ring-accent1",
|
|
13988
|
-
"[.entity-list-row:hover+&]:border-t-transparent [.entity-list-row:focus-within+&]:border-t-transparent",
|
|
13989
|
-
"transition-colors duration-200 rounded-lg",
|
|
13990
|
-
className
|
|
13991
|
-
),
|
|
13992
|
-
children
|
|
13993
|
-
}
|
|
13994
|
-
);
|
|
13995
|
-
}
|
|
13996
|
-
|
|
13997
|
-
function EntityListRows({ children, className }) {
|
|
13998
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-subgrid col-span-full overflow-y-auto p-1", className), children });
|
|
13999
|
-
}
|
|
14000
|
-
|
|
14001
|
-
function EntityListTop({ children, className }) {
|
|
14002
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14003
|
-
"div",
|
|
14004
|
-
{
|
|
14005
|
-
className: cn(
|
|
14006
|
-
"grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full border-b border-border1 px-4 bg-surface2 sticky top-0 z-10",
|
|
14007
|
-
className
|
|
14008
|
-
),
|
|
14009
|
-
children
|
|
14010
|
-
}
|
|
14011
|
-
);
|
|
14012
|
-
}
|
|
14013
|
-
|
|
14014
|
-
const EntityListTopCell = React.forwardRef(({ children, className }, ref) => {
|
|
14015
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14016
|
-
"span",
|
|
14017
|
-
{
|
|
14018
|
-
ref,
|
|
14019
|
-
className: cn(
|
|
14020
|
-
"h-8 py-1 flex items-center uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs",
|
|
14021
|
-
className
|
|
14022
|
-
),
|
|
14023
|
-
children
|
|
14024
|
-
}
|
|
14025
|
-
);
|
|
14026
|
-
});
|
|
14027
|
-
function EntityListTopCellWithTooltip({ children, tooltip, className }) {
|
|
14028
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
|
|
14029
|
-
/* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityListTopCell, { className, children }) }),
|
|
14030
|
-
/* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
|
|
14031
|
-
] });
|
|
14032
|
-
}
|
|
14033
|
-
const breakpointClasses = {
|
|
14034
|
-
sm: { show: "hidden sm:inline-flex", hide: "inline-flex sm:hidden" },
|
|
14035
|
-
md: { show: "hidden md:inline-flex", hide: "inline-flex md:hidden" },
|
|
14036
|
-
lg: { show: "hidden lg:inline-flex", hide: "inline-flex lg:hidden" },
|
|
14037
|
-
xl: { show: "hidden xl:inline-flex", hide: "inline-flex xl:hidden" },
|
|
14038
|
-
"2xl": { show: "hidden 2xl:inline-flex", hide: "inline-flex 2xl:hidden" }
|
|
14039
|
-
};
|
|
14040
|
-
function EntityListTopCellSmart({
|
|
14041
|
-
long,
|
|
14042
|
-
short,
|
|
14043
|
-
tooltip,
|
|
14044
|
-
breakpoint = "2xl",
|
|
14045
|
-
className
|
|
14046
|
-
}) {
|
|
14047
|
-
const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
|
|
14048
|
-
const bp = breakpointClasses[breakpoint];
|
|
14049
|
-
const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
14050
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
|
|
14051
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
|
|
14052
|
-
] });
|
|
14053
|
-
if (tooltipText) {
|
|
14054
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14055
|
-
EntityListTopCellWithTooltip,
|
|
14056
|
-
{
|
|
14057
|
-
tooltip: tooltipText,
|
|
14058
|
-
className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className),
|
|
14059
|
-
children: content
|
|
14060
|
-
}
|
|
14061
|
-
);
|
|
14062
|
-
}
|
|
14063
|
-
return /* @__PURE__ */ jsxRuntime.jsx(EntityListTopCell, { className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className), children: content });
|
|
14064
|
-
}
|
|
14065
|
-
|
|
14066
|
-
const EntityList = Object.assign(EntityListRoot, {
|
|
14067
|
-
Top: EntityListTop,
|
|
14068
|
-
TopCell: EntityListTopCell,
|
|
14069
|
-
TopCellWithTooltip: EntityListTopCellWithTooltip,
|
|
14070
|
-
TopCellSmart: EntityListTopCellSmart,
|
|
14071
|
-
Rows: EntityListRows,
|
|
14072
|
-
Row: EntityListRow,
|
|
14073
|
-
RowLink: EntityListRowLink,
|
|
14074
|
-
Cell: EntityListCell,
|
|
14075
|
-
TextCell: EntityListTextCell,
|
|
14076
|
-
NameCell: EntityListNameCell,
|
|
14077
|
-
DescriptionCell: EntityListDescriptionCell,
|
|
14078
|
-
NoMatch: EntityListNoMatch,
|
|
14079
|
-
Pagination: EntityListPagination
|
|
14080
|
-
});
|
|
14081
|
-
|
|
14082
|
-
const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
|
|
14083
|
-
function EntityListSkeleton({ columns, numberOfRows = 3 }) {
|
|
14084
|
-
const columnParts = columns.trim().split(/\s+/);
|
|
14085
|
-
const columnCount = columnParts.length;
|
|
14086
|
-
const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
|
|
14087
|
-
const getPseudoRandomWidth = (rowIdx, colIdx) => {
|
|
14088
|
-
const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
|
|
14089
|
-
return widths[index];
|
|
14090
|
-
};
|
|
14091
|
-
return /* @__PURE__ */ jsxRuntime.jsx(EntityListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
14092
|
-
"div",
|
|
14093
|
-
{
|
|
14094
|
-
className: "entity-list-row grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full px-5 border-y border-b-border1 border-t-transparent transition-colors duration-200 rounded-lg",
|
|
14095
|
-
children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
14096
|
-
"div",
|
|
14097
|
-
{
|
|
14098
|
-
className: "bg-surface4 rounded-md animate-pulse text-transparent h-4 select-none",
|
|
14099
|
-
style: { width: getPseudoRandomWidth(rowIdx, colIdx) }
|
|
14100
|
-
}
|
|
14101
|
-
) }, colIdx))
|
|
14102
|
-
},
|
|
14103
|
-
rowIdx
|
|
14104
|
-
)) });
|
|
14105
|
-
}
|
|
14106
|
-
|
|
14107
13902
|
const LEVEL_CONFIG = {
|
|
14108
13903
|
debug: { label: "DEBUG", color: "#71717a" },
|
|
14109
13904
|
info: { label: "INFO", color: "#60a5fa" },
|
|
@@ -14158,7 +13953,7 @@ const LogsDataList = Object.assign(DataListRoot, {
|
|
|
14158
13953
|
TopCell: DataListTopCell,
|
|
14159
13954
|
TopCellWithTooltip: DataListTopCellWithTooltip,
|
|
14160
13955
|
TopCellSmart: DataListTopCellSmart,
|
|
14161
|
-
|
|
13956
|
+
RowWrapper: DataListRowWrapper,
|
|
14162
13957
|
RowButton: DataListRowButton,
|
|
14163
13958
|
RowLink: DataListRowLink,
|
|
14164
13959
|
Spacer: DataListSpacer,
|
|
@@ -14172,31 +13967,6 @@ const LogsDataList = Object.assign(DataListRoot, {
|
|
|
14172
13967
|
NextPageLoading: DataListNextPageLoading
|
|
14173
13968
|
});
|
|
14174
13969
|
|
|
14175
|
-
function EntityListPageLayoutRoot({ children, className }) {
|
|
14176
|
-
const pageHeading = usePageHeading();
|
|
14177
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
14178
|
-
"main",
|
|
14179
|
-
{
|
|
14180
|
-
className: cn(
|
|
14181
|
-
"w-full h-full overflow-hidden grid grid-rows-[auto_auto] max-w-[110rem] px-10 mx-auto gap-4 py-6 content-start",
|
|
14182
|
-
className
|
|
14183
|
-
),
|
|
14184
|
-
children: [
|
|
14185
|
-
pageHeading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "sr-only", children: pageHeading }),
|
|
14186
|
-
children
|
|
14187
|
-
]
|
|
14188
|
-
}
|
|
14189
|
-
);
|
|
14190
|
-
}
|
|
14191
|
-
|
|
14192
|
-
function EntityListPageLayoutTop({ children, className }) {
|
|
14193
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-4", className), children });
|
|
14194
|
-
}
|
|
14195
|
-
|
|
14196
|
-
const EntityListPageLayout = Object.assign(EntityListPageLayoutRoot, {
|
|
14197
|
-
Top: EntityListPageLayoutTop
|
|
14198
|
-
});
|
|
14199
|
-
|
|
14200
13970
|
function PageLayoutColumn({ children, className }) {
|
|
14201
13971
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid content-start", className), children });
|
|
14202
13972
|
}
|
|
@@ -22473,9 +22243,6 @@ exports.EntityContent = EntityContent;
|
|
|
22473
22243
|
exports.EntityDescription = EntityDescription;
|
|
22474
22244
|
exports.EntityHeader = EntityHeader;
|
|
22475
22245
|
exports.EntityIcon = EntityIcon;
|
|
22476
|
-
exports.EntityList = EntityList;
|
|
22477
|
-
exports.EntityListPageLayout = EntityListPageLayout;
|
|
22478
|
-
exports.EntityListSkeleton = EntityListSkeleton;
|
|
22479
22246
|
exports.EntityName = EntityName;
|
|
22480
22247
|
exports.Entry = Entry;
|
|
22481
22248
|
exports.EntryCell = EntryCell;
|