@cystackapp/ui 2.0.3 → 2.0.5
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.
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
interface Props {
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* The single line of text shown under the icon, e.g.
|
|
5
|
+
* "No data found in the last 30 days." Empty states are intentionally one
|
|
6
|
+
* line — keep it short and context-specific.
|
|
7
|
+
*/
|
|
8
|
+
description?: string;
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated Use `description`. Still rendered (as the single line) when
|
|
11
|
+
* `description` is omitted, so existing call sites keep working.
|
|
12
|
+
*/
|
|
13
|
+
title?: string;
|
|
14
|
+
/**
|
|
15
|
+
* @deprecated Empty states are a single line now — `supportingText` is no
|
|
16
|
+
* longer rendered as a second line. Kept only as a last-resort fallback for
|
|
17
|
+
* the single line. Move the text to `description`.
|
|
18
|
+
*/
|
|
4
19
|
supportingText?: string;
|
|
5
20
|
/**
|
|
6
21
|
* - `"illustration"`: cloud graphic with grid background (default)
|
|
@@ -16,11 +31,14 @@ interface Props {
|
|
|
16
31
|
/**
|
|
17
32
|
* Generic empty state for lists, tables, and sections.
|
|
18
33
|
*
|
|
34
|
+
* Renders a single, muted line of text under the icon/illustration. Pass the
|
|
35
|
+
* context-specific message via `description`.
|
|
36
|
+
*
|
|
19
37
|
* @example
|
|
20
38
|
* ```tsx
|
|
21
|
-
* <EmptyState
|
|
22
|
-
* <EmptyState
|
|
39
|
+
* <EmptyState description="No results match your filters." type="featured-icon" />
|
|
40
|
+
* <EmptyState description="Nothing here yet" buttons={<Button>Add item</Button>} />
|
|
23
41
|
* ```
|
|
24
42
|
*/
|
|
25
|
-
export declare const EmptyState: ({ title, supportingText, type, buttons, className, icon, }: Props) => import("react").JSX.Element;
|
|
43
|
+
export declare const EmptyState: ({ description, title, supportingText, type, buttons, className, icon, }: Props) => import("react").JSX.Element;
|
|
26
44
|
export {};
|
|
@@ -1,36 +1,39 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { SearchLg as
|
|
3
|
-
import { cn as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
const
|
|
1
|
+
import { jsxs as t, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { SearchLg as m } from "@untitled-ui/icons-react";
|
|
3
|
+
import { cn as d } from "../../utils/cn.js";
|
|
4
|
+
import f from "../../assets/background-pattern-grid.svg.js";
|
|
5
|
+
import x from "../../assets/background-pattern-circles-md.svg.js";
|
|
6
|
+
import p from "../../assets/empty-cloud.svg.js";
|
|
7
|
+
const y = ({
|
|
8
|
+
description: a,
|
|
8
9
|
title: s,
|
|
9
|
-
supportingText:
|
|
10
|
-
type:
|
|
11
|
-
buttons:
|
|
12
|
-
className:
|
|
13
|
-
icon:
|
|
14
|
-
}) =>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
10
|
+
supportingText: i,
|
|
11
|
+
type: r = "illustration",
|
|
12
|
+
buttons: l,
|
|
13
|
+
className: n,
|
|
14
|
+
icon: o
|
|
15
|
+
}) => {
|
|
16
|
+
const c = a ?? s ?? i;
|
|
17
|
+
return /* @__PURE__ */ t(
|
|
18
|
+
"div",
|
|
19
|
+
{
|
|
20
|
+
className: d(
|
|
21
|
+
"relative isolate flex flex-1 flex-col items-center justify-center gap-8 overflow-hidden pb-6 pt-12",
|
|
22
|
+
n
|
|
23
|
+
),
|
|
24
|
+
children: [
|
|
25
|
+
/* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-5", children: [
|
|
26
|
+
/* @__PURE__ */ t("div", { className: "relative flex items-center justify-center", children: [
|
|
27
|
+
r === "illustration" ? /* @__PURE__ */ e(f, { className: "pointer-events-none absolute left-1/2 top-1/2 -z-10 h-120 w-120 -translate-x-1/2 -translate-y-1/2" }) : /* @__PURE__ */ e(x, { className: "pointer-events-none absolute left-1/2 top-1/2 -z-10 h-120 w-120 -translate-x-1/2 -translate-y-1/2" }),
|
|
28
|
+
r === "illustration" ? /* @__PURE__ */ e(p, { className: "h-32 w-43" }) : /* @__PURE__ */ e("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg border border-gray-v2-200 bg-white shadow-xs", children: o ?? /* @__PURE__ */ e(m, { className: "h-6 w-6" }) })
|
|
29
|
+
] }),
|
|
30
|
+
/* @__PURE__ */ e("div", { className: "flex flex-col items-center px-3 text-center", children: /* @__PURE__ */ e("span", { className: "text-sm text-gray-v2", children: c }) })
|
|
31
|
+
] }),
|
|
32
|
+
l ? /* @__PURE__ */ e("div", { className: "flex gap-3", children: l }) : null
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
};
|
|
34
37
|
export {
|
|
35
|
-
|
|
38
|
+
y as EmptyState
|
|
36
39
|
};
|
|
@@ -1,110 +1,109 @@
|
|
|
1
|
-
import { jsx as l, jsxs as
|
|
2
|
-
import { useMemo as
|
|
3
|
-
import { useTranslation as
|
|
4
|
-
import { Checkbox as
|
|
5
|
-
import { EmptyState as
|
|
6
|
-
import { LoadingState as
|
|
7
|
-
import { cn as
|
|
8
|
-
import { TableCell as
|
|
9
|
-
import { TableHeader as
|
|
10
|
-
import { TablePagination as
|
|
11
|
-
import { TableRow as
|
|
12
|
-
import { buildGridTemplate as
|
|
13
|
-
import { useRowSelection as
|
|
14
|
-
import { useFitPageHeight as
|
|
15
|
-
const
|
|
1
|
+
import { jsx as l, jsxs as a, Fragment as K } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as L } from "react";
|
|
3
|
+
import { useTranslation as O } from "react-i18next";
|
|
4
|
+
import { Checkbox as Q } from "../checkbox/Checkbox.js";
|
|
5
|
+
import { EmptyState as U } from "../empty-state/EmptyState.js";
|
|
6
|
+
import { LoadingState as V } from "../loading-state/LoadingState.js";
|
|
7
|
+
import { cn as T } from "../../utils/cn.js";
|
|
8
|
+
import { TableCell as p } from "./TableCell.js";
|
|
9
|
+
import { TableHeader as W } from "./TableHeader.js";
|
|
10
|
+
import { TablePagination as X } from "./TablePagination.js";
|
|
11
|
+
import { TableRow as Y } from "./TableRow.js";
|
|
12
|
+
import { buildGridTemplate as Z } from "./table-utils.js";
|
|
13
|
+
import { useRowSelection as _ } from "./hooks/use-row-selection.js";
|
|
14
|
+
import { useFitPageHeight as $ } from "./hooks/use-fit-page-height.js";
|
|
15
|
+
const cr = ({
|
|
16
16
|
data: d = [],
|
|
17
|
-
columns:
|
|
18
|
-
rowKey:
|
|
19
|
-
isLoading:
|
|
17
|
+
columns: n,
|
|
18
|
+
rowKey: m,
|
|
19
|
+
isLoading: b,
|
|
20
20
|
selection: o,
|
|
21
21
|
sort: N,
|
|
22
22
|
pagination: v,
|
|
23
|
-
onRowClick:
|
|
23
|
+
onRowClick: f,
|
|
24
24
|
getRowHref: s,
|
|
25
25
|
emptyState: r,
|
|
26
|
-
fitPageHeight:
|
|
27
|
-
className:
|
|
26
|
+
fitPageHeight: h,
|
|
27
|
+
className: k
|
|
28
28
|
}) => {
|
|
29
|
-
const { t:
|
|
29
|
+
const { t: C } = O("components/table"), { bodyRef: j, paginationRef: A, maxHeight: F } = $(), { isSelected: E, toggleRow: G, selectAllProps: M } = _({
|
|
30
30
|
selection: o,
|
|
31
31
|
data: d,
|
|
32
|
-
rowKey:
|
|
33
|
-
isLoading:
|
|
34
|
-
}),
|
|
35
|
-
() =>
|
|
36
|
-
[
|
|
37
|
-
),
|
|
32
|
+
rowKey: m,
|
|
33
|
+
isLoading: b
|
|
34
|
+
}), P = L(
|
|
35
|
+
() => Z(n, { hasSelection: !!o }),
|
|
36
|
+
[n, o]
|
|
37
|
+
), q = b || d.length === 0;
|
|
38
38
|
return /* @__PURE__ */ l(
|
|
39
39
|
"div",
|
|
40
40
|
{
|
|
41
|
-
className:
|
|
41
|
+
className: T(
|
|
42
42
|
"bg-white border border-gray-v2-200 shadow-xs rounded-xl flex flex-col min-h-0 overflow-hidden",
|
|
43
|
-
|
|
43
|
+
k
|
|
44
44
|
),
|
|
45
|
-
children:
|
|
46
|
-
|
|
45
|
+
children: q ? /* @__PURE__ */ l("div", { className: "flex items-center justify-center", children: b ? /* @__PURE__ */ l(V, {}) : /* @__PURE__ */ l(
|
|
46
|
+
U,
|
|
47
47
|
{
|
|
48
|
-
|
|
49
|
-
supportingText: r == null ? void 0 : r.supportingText,
|
|
48
|
+
description: (r == null ? void 0 : r.description) ?? (r == null ? void 0 : r.title) ?? (r == null ? void 0 : r.supportingText) ?? C("emptyState"),
|
|
50
49
|
type: r == null ? void 0 : r.type,
|
|
51
50
|
buttons: r == null ? void 0 : r.actions
|
|
52
51
|
}
|
|
53
|
-
) }) : /* @__PURE__ */
|
|
54
|
-
/* @__PURE__ */
|
|
52
|
+
) }) : /* @__PURE__ */ a(K, { children: [
|
|
53
|
+
/* @__PURE__ */ a(
|
|
55
54
|
"div",
|
|
56
55
|
{
|
|
57
56
|
className: "grid flex-1 min-h-0 overflow-x-auto",
|
|
58
|
-
style: { gridTemplateColumns:
|
|
57
|
+
style: { gridTemplateColumns: P },
|
|
59
58
|
children: [
|
|
60
59
|
/* @__PURE__ */ l(
|
|
61
|
-
|
|
60
|
+
W,
|
|
62
61
|
{
|
|
63
|
-
columns:
|
|
62
|
+
columns: n,
|
|
64
63
|
sort: N,
|
|
65
|
-
selectAll:
|
|
64
|
+
selectAll: M
|
|
66
65
|
}
|
|
67
66
|
),
|
|
68
67
|
/* @__PURE__ */ l(
|
|
69
68
|
"div",
|
|
70
69
|
{
|
|
71
|
-
ref:
|
|
70
|
+
ref: h ? j : void 0,
|
|
72
71
|
className: "grid grid-cols-subgrid col-span-full overflow-x-hidden overflow-y-auto",
|
|
73
|
-
style:
|
|
74
|
-
children: d.map((
|
|
72
|
+
style: h ? { maxHeight: F } : void 0,
|
|
73
|
+
children: d.map((c, u) => {
|
|
75
74
|
var g;
|
|
76
|
-
const
|
|
77
|
-
return /* @__PURE__ */
|
|
78
|
-
|
|
75
|
+
const e = m(c), x = E(e), z = u === d.length - 1, B = !!f || !!s, D = (g = o == null ? void 0 : o.disabledKeys) == null ? void 0 : g.includes(e);
|
|
76
|
+
return /* @__PURE__ */ a(
|
|
77
|
+
Y,
|
|
79
78
|
{
|
|
80
|
-
href: s == null ? void 0 : s(
|
|
81
|
-
onClick:
|
|
82
|
-
className:
|
|
79
|
+
href: s == null ? void 0 : s(c),
|
|
80
|
+
onClick: f && !s ? () => f(c) : void 0,
|
|
81
|
+
className: T(
|
|
83
82
|
x && "bg-gray-v2-50",
|
|
84
|
-
!
|
|
85
|
-
|
|
83
|
+
!z && "border-b border-gray-v2-200",
|
|
84
|
+
B && "cursor-pointer"
|
|
86
85
|
),
|
|
87
86
|
children: [
|
|
88
|
-
o ? /* @__PURE__ */ l(
|
|
89
|
-
|
|
87
|
+
o ? /* @__PURE__ */ l(p, { align: "center", children: /* @__PURE__ */ l(
|
|
88
|
+
Q,
|
|
90
89
|
{
|
|
91
90
|
checked: x,
|
|
92
|
-
disabled:
|
|
93
|
-
onClick: (i) =>
|
|
91
|
+
disabled: D,
|
|
92
|
+
onClick: (i) => G(e, i)
|
|
94
93
|
}
|
|
95
94
|
) }) : null,
|
|
96
|
-
|
|
97
|
-
|
|
95
|
+
n.map((i, J) => /* @__PURE__ */ l(
|
|
96
|
+
p,
|
|
98
97
|
{
|
|
99
98
|
align: i.align,
|
|
100
99
|
className: i.cellClassName,
|
|
101
|
-
children: i.cell(
|
|
100
|
+
children: i.cell(c, u)
|
|
102
101
|
},
|
|
103
|
-
i.id ? i.id :
|
|
102
|
+
i.id ? i.id : J
|
|
104
103
|
))
|
|
105
104
|
]
|
|
106
105
|
},
|
|
107
|
-
|
|
106
|
+
e
|
|
108
107
|
);
|
|
109
108
|
})
|
|
110
109
|
}
|
|
@@ -113,9 +112,9 @@ const nr = ({
|
|
|
113
112
|
}
|
|
114
113
|
),
|
|
115
114
|
v ? /* @__PURE__ */ l(
|
|
116
|
-
|
|
115
|
+
X,
|
|
117
116
|
{
|
|
118
|
-
ref:
|
|
117
|
+
ref: h ? A : void 0,
|
|
119
118
|
pagination: v
|
|
120
119
|
}
|
|
121
120
|
) : null
|
|
@@ -124,5 +123,5 @@ const nr = ({
|
|
|
124
123
|
);
|
|
125
124
|
};
|
|
126
125
|
export {
|
|
127
|
-
|
|
126
|
+
cr as Table
|
|
128
127
|
};
|
|
@@ -76,7 +76,11 @@ export interface PaginationState {
|
|
|
76
76
|
}
|
|
77
77
|
/** Configuration for the empty-state view shown when data is an empty array. */
|
|
78
78
|
export interface EmptyStateConfig {
|
|
79
|
-
|
|
79
|
+
/** Single, context-specific line shown when there are no rows. */
|
|
80
|
+
description?: string;
|
|
81
|
+
/** @deprecated Use `description`. */
|
|
82
|
+
title?: string;
|
|
83
|
+
/** @deprecated No longer rendered as a second line. Use `description`. */
|
|
80
84
|
supportingText?: string;
|
|
81
85
|
type?: "featured-icon" | "illustration";
|
|
82
86
|
/** Action buttons rendered below the empty-state message. */
|