@pibit.ai/cure-design-system 0.6.21 → 0.6.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/patterns/filters/checklist-select.d.ts.map +1 -1
- package/dist/patterns/filters/checklist-select.js +32 -26
- package/dist/patterns/filters/filter-list-section.d.ts.map +1 -1
- package/dist/patterns/filters/filter-list-section.js +55 -48
- package/dist/patterns/filters/status-filter-dropdown.d.ts.map +1 -1
- package/dist/patterns/filters/status-filter-dropdown.js +66 -79
- package/dist/patterns/tree-view/indented-tree.d.ts +23 -0
- package/dist/patterns/tree-view/indented-tree.d.ts.map +1 -0
- package/dist/patterns/tree-view/indented-tree.js +232 -0
- package/dist/patterns/tree-view/tree-view.d.ts +40 -7
- package/dist/patterns/tree-view/tree-view.d.ts.map +1 -1
- package/dist/patterns/tree-view/tree-view.js +142 -107
- package/dist/styles/components.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checklist-select.d.ts","sourceRoot":"","sources":["../../../src/patterns/filters/checklist-select.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,4EAA4E;IAC5E,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,uEAAuE;IACvE,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,iEAAiE;IACjE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"checklist-select.d.ts","sourceRoot":"","sources":["../../../src/patterns/filters/checklist-select.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,4EAA4E;IAC5E,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,uEAAuE;IACvE,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,iEAAiE;IACjE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE,oBAAoB,2CA8HtB"}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { jsxs as s, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { MinusSquare as v } from "@untitledui/icons";
|
|
3
|
-
import { cx as
|
|
3
|
+
import { cx as p } from "../../utils/cn.js";
|
|
4
4
|
import { Checkbox as u } from "../../primitives/checkbox/checkbox.js";
|
|
5
5
|
import { Button as y } from "../../primitives/button/button.js";
|
|
6
|
-
function
|
|
7
|
-
options:
|
|
8
|
-
selectedKeys:
|
|
6
|
+
function D({
|
|
7
|
+
options: x,
|
|
8
|
+
selectedKeys: c,
|
|
9
9
|
onChange: l,
|
|
10
10
|
onApply: d,
|
|
11
11
|
onReset: m,
|
|
12
12
|
onClose: n,
|
|
13
13
|
className: b
|
|
14
14
|
}) {
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
const
|
|
19
|
-
|
|
15
|
+
const a = x.map((e) => e.key).filter(Boolean), i = new Set(c), f = a.length > 0 && i.size === a.length, h = i.size > 0 && i.size < a.length, o = () => {
|
|
16
|
+
f || h ? l == null || l([]) : l == null || l(a);
|
|
17
|
+
}, k = (e) => {
|
|
18
|
+
const t = new Set(c);
|
|
19
|
+
t.has(e) ? t.delete(e) : t.add(e), l == null || l(Array.from(t));
|
|
20
|
+
}, S = () => {
|
|
21
|
+
d == null || d(c), n == null || n();
|
|
20
22
|
}, N = () => {
|
|
21
|
-
d == null || d(a), n == null || n();
|
|
22
|
-
}, k = () => {
|
|
23
23
|
m == null || m();
|
|
24
24
|
};
|
|
25
25
|
return /* @__PURE__ */ s(
|
|
26
26
|
"div",
|
|
27
27
|
{
|
|
28
|
-
className:
|
|
28
|
+
className: p(
|
|
29
29
|
"flex flex-col rounded-xl bg-primary shadow-sm ring-1 ring-primary",
|
|
30
30
|
b
|
|
31
31
|
),
|
|
@@ -35,25 +35,32 @@ function _({
|
|
|
35
35
|
/* @__PURE__ */ s(
|
|
36
36
|
"label",
|
|
37
37
|
{
|
|
38
|
-
className:
|
|
38
|
+
className: p(
|
|
39
39
|
"flex cursor-pointer items-center gap-3 rounded-md py-2 pr-2 pl-0 outline-hidden",
|
|
40
40
|
"hover:bg-primary_hover"
|
|
41
41
|
),
|
|
42
42
|
children: [
|
|
43
|
-
|
|
43
|
+
h ? /* @__PURE__ */ r(
|
|
44
44
|
v,
|
|
45
45
|
{
|
|
46
46
|
size: 18,
|
|
47
47
|
className: "text-utility-brand-600",
|
|
48
|
-
onClick:
|
|
49
|
-
cursor: "pointer"
|
|
48
|
+
onClick: o,
|
|
49
|
+
cursor: "pointer",
|
|
50
|
+
"aria-hidden": !1,
|
|
51
|
+
role: "checkbox",
|
|
52
|
+
"aria-checked": "mixed",
|
|
53
|
+
"aria-label": "Select all options",
|
|
54
|
+
tabIndex: 0,
|
|
55
|
+
onKeyDown: (e) => {
|
|
56
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), o());
|
|
57
|
+
}
|
|
50
58
|
}
|
|
51
59
|
) : /* @__PURE__ */ r(
|
|
52
60
|
u,
|
|
53
61
|
{
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
onChange: h,
|
|
62
|
+
isSelected: f,
|
|
63
|
+
onChange: o,
|
|
57
64
|
size: "sm",
|
|
58
65
|
"aria-label": "Select all options"
|
|
59
66
|
}
|
|
@@ -62,10 +69,10 @@ function _({
|
|
|
62
69
|
]
|
|
63
70
|
}
|
|
64
71
|
),
|
|
65
|
-
|
|
72
|
+
x.map((e) => /* @__PURE__ */ s(
|
|
66
73
|
"label",
|
|
67
74
|
{
|
|
68
|
-
className:
|
|
75
|
+
className: p(
|
|
69
76
|
"flex cursor-pointer items-center gap-3 rounded-md py-2 pr-2 pl-0 outline-hidden",
|
|
70
77
|
"hover:bg-primary_hover"
|
|
71
78
|
),
|
|
@@ -73,9 +80,8 @@ function _({
|
|
|
73
80
|
/* @__PURE__ */ r(
|
|
74
81
|
u,
|
|
75
82
|
{
|
|
76
|
-
id: e.key,
|
|
77
83
|
isSelected: i.has(e.key),
|
|
78
|
-
onChange: () =>
|
|
84
|
+
onChange: () => k(e.key),
|
|
79
85
|
size: "sm",
|
|
80
86
|
"aria-label": e.value
|
|
81
87
|
}
|
|
@@ -93,7 +99,7 @@ function _({
|
|
|
93
99
|
size: "xs",
|
|
94
100
|
color: "secondary",
|
|
95
101
|
className: "flex-1 bg-secondary border-none text-primary",
|
|
96
|
-
onClick:
|
|
102
|
+
onClick: N,
|
|
97
103
|
children: "Reset"
|
|
98
104
|
}
|
|
99
105
|
),
|
|
@@ -103,7 +109,7 @@ function _({
|
|
|
103
109
|
size: "xs",
|
|
104
110
|
color: "primary",
|
|
105
111
|
className: "flex-1",
|
|
106
|
-
onClick:
|
|
112
|
+
onClick: S,
|
|
107
113
|
children: "Apply"
|
|
108
114
|
}
|
|
109
115
|
)
|
|
@@ -113,5 +119,5 @@ function _({
|
|
|
113
119
|
);
|
|
114
120
|
}
|
|
115
121
|
export {
|
|
116
|
-
|
|
122
|
+
D as ChecklistSelect
|
|
117
123
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-list-section.d.ts","sourceRoot":"","sources":["../../../src/patterns/filters/filter-list-section.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,cAAc;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAEnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAEnC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAEjC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAE9B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAcD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,cAAc,EAAE,EAC1D,KAAK,EACL,KAAK,EACL,cAAc,EACd,SAAS,EACT,MAAM,EACN,WAAsB,EACtB,UAAU,EACV,YAAkC,EAClC,YAAkC,EAClC,UAA8B,EAC9B,cAAc,EACd,iBAAiB,EACjB,YAAY,GACb,EAAE,sBAAsB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"filter-list-section.d.ts","sourceRoot":"","sources":["../../../src/patterns/filters/filter-list-section.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,cAAc;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAEnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAEnC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAEjC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAE9B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAcD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,cAAc,EAAE,EAC1D,KAAK,EACL,KAAK,EACL,cAAc,EACd,SAAS,EACT,MAAM,EACN,WAAsB,EACtB,UAAU,EACV,YAAkC,EAClC,YAAkC,EAClC,UAA8B,EAC9B,cAAc,EACd,iBAAiB,EACjB,YAAY,GACb,EAAE,sBAAsB,CAAC,CAAC,CAAC,2CAwF3B"}
|
|
@@ -1,101 +1,108 @@
|
|
|
1
|
-
import { jsxs as n, jsx as
|
|
2
|
-
import { MinusSquare as
|
|
3
|
-
import
|
|
4
|
-
import { Checkbox as
|
|
5
|
-
import { Avatar as
|
|
6
|
-
function
|
|
7
|
-
return
|
|
1
|
+
import { jsxs as n, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { MinusSquare as N } from "@untitledui/icons";
|
|
3
|
+
import g from "../../primitives/select/SearchInput.js";
|
|
4
|
+
import { Checkbox as m } from "../../primitives/checkbox/checkbox.js";
|
|
5
|
+
import { Avatar as b } from "../../primitives/avatar/avatar.js";
|
|
6
|
+
function S(r) {
|
|
7
|
+
return r.label ?? String(r.value ?? "");
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
return
|
|
9
|
+
function C(r) {
|
|
10
|
+
return r.value ?? String(r.id ?? "");
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
return
|
|
12
|
+
function k(r) {
|
|
13
|
+
return r.id ?? r.value;
|
|
14
14
|
}
|
|
15
|
-
function
|
|
16
|
-
title:
|
|
17
|
-
items:
|
|
15
|
+
function K({
|
|
16
|
+
title: r,
|
|
17
|
+
items: c,
|
|
18
18
|
selectedValues: i,
|
|
19
|
-
selectAll:
|
|
19
|
+
selectAll: o,
|
|
20
20
|
search: l,
|
|
21
|
-
placeholder:
|
|
21
|
+
placeholder: u = "Search",
|
|
22
22
|
showAvatar: h,
|
|
23
|
-
getItemLabel: t =
|
|
24
|
-
getItemValue: f =
|
|
25
|
-
getItemKey:
|
|
26
|
-
onSearchChange:
|
|
27
|
-
onToggleSelectAll:
|
|
23
|
+
getItemLabel: t = S,
|
|
24
|
+
getItemValue: f = C,
|
|
25
|
+
getItemKey: x = k,
|
|
26
|
+
onSearchChange: p,
|
|
27
|
+
onToggleSelectAll: s,
|
|
28
28
|
onToggleItem: v
|
|
29
29
|
}) {
|
|
30
|
-
const
|
|
31
|
-
(
|
|
30
|
+
const y = c.filter(
|
|
31
|
+
(e) => t(e).toLowerCase().includes(l.toLowerCase())
|
|
32
32
|
);
|
|
33
33
|
return /* @__PURE__ */ n("div", { children: [
|
|
34
34
|
/* @__PURE__ */ n("div", { className: "flex items-center gap-2 mb-4", children: [
|
|
35
|
-
/* @__PURE__ */
|
|
35
|
+
/* @__PURE__ */ a("h3", { className: "text-sm font-medium text-gray-900", children: r }),
|
|
36
36
|
i.length > 0 && /* @__PURE__ */ n("span", { className: "text-xs", children: [
|
|
37
37
|
i.length,
|
|
38
38
|
" selected"
|
|
39
39
|
] })
|
|
40
40
|
] }),
|
|
41
41
|
/* @__PURE__ */ n("div", { className: "space-y-1", children: [
|
|
42
|
-
(
|
|
43
|
-
|
|
42
|
+
(c.length > 10 || l) && /* @__PURE__ */ a(
|
|
43
|
+
g,
|
|
44
44
|
{
|
|
45
45
|
className: "bg-secondary_subtle ring-0 rounded-md",
|
|
46
46
|
size: "sm",
|
|
47
|
-
placeholder:
|
|
47
|
+
placeholder: u,
|
|
48
48
|
value: l,
|
|
49
|
-
onChange:
|
|
49
|
+
onChange: p
|
|
50
50
|
}
|
|
51
51
|
),
|
|
52
52
|
/* @__PURE__ */ n("div", { className: "max-h-48 overflow-y-auto", children: [
|
|
53
53
|
/* @__PURE__ */ n("div", { className: "flex items-center gap-3 p-2", children: [
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
o ? /* @__PURE__ */ a(
|
|
55
|
+
m,
|
|
56
56
|
{
|
|
57
57
|
className: "cursor-pointer",
|
|
58
58
|
"aria-label": "Select all",
|
|
59
|
-
isSelected:
|
|
60
|
-
onChange:
|
|
59
|
+
isSelected: o,
|
|
60
|
+
onChange: s
|
|
61
61
|
}
|
|
62
|
-
) : /* @__PURE__ */
|
|
62
|
+
) : /* @__PURE__ */ a(
|
|
63
63
|
"div",
|
|
64
64
|
{
|
|
65
|
-
onClick:
|
|
65
|
+
onClick: s,
|
|
66
|
+
role: "checkbox",
|
|
67
|
+
"aria-checked": i.length > 0 ? "mixed" : !1,
|
|
68
|
+
"aria-label": "Select all",
|
|
69
|
+
tabIndex: 0,
|
|
70
|
+
onKeyDown: (e) => {
|
|
71
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), s());
|
|
72
|
+
},
|
|
66
73
|
className: "h-4 w-4 flex items-center justify-center overflow-hidden cursor-pointer",
|
|
67
|
-
children: /* @__PURE__ */
|
|
74
|
+
children: /* @__PURE__ */ a(N, { size: 18, className: "text-utility-brand-600" })
|
|
68
75
|
}
|
|
69
76
|
),
|
|
70
|
-
/* @__PURE__ */
|
|
77
|
+
/* @__PURE__ */ a("span", { className: "text-sm font-medium text-gray-900", children: "Select All" })
|
|
71
78
|
] }),
|
|
72
|
-
|
|
73
|
-
const d = f(
|
|
79
|
+
y.map((e) => {
|
|
80
|
+
const d = f(e);
|
|
74
81
|
return /* @__PURE__ */ n(
|
|
75
82
|
"div",
|
|
76
83
|
{
|
|
77
84
|
className: "flex items-center gap-3 hover:bg-primary_hover rounded-md p-2",
|
|
78
85
|
children: [
|
|
79
|
-
/* @__PURE__ */
|
|
80
|
-
|
|
86
|
+
/* @__PURE__ */ a(
|
|
87
|
+
m,
|
|
81
88
|
{
|
|
82
|
-
"aria-label": t(
|
|
89
|
+
"aria-label": t(e),
|
|
83
90
|
isSelected: i.includes(d),
|
|
84
91
|
onChange: () => v(d)
|
|
85
92
|
}
|
|
86
93
|
),
|
|
87
|
-
h ? /* @__PURE__ */
|
|
88
|
-
|
|
94
|
+
h ? /* @__PURE__ */ a(
|
|
95
|
+
b,
|
|
89
96
|
{
|
|
90
97
|
size: "xs",
|
|
91
|
-
initials: t(
|
|
92
|
-
alt: t(
|
|
98
|
+
initials: t(e).charAt(0),
|
|
99
|
+
alt: t(e)
|
|
93
100
|
}
|
|
94
101
|
) : null,
|
|
95
|
-
/* @__PURE__ */
|
|
102
|
+
/* @__PURE__ */ a("span", { className: "text-sm text-gray-700", children: t(e) })
|
|
96
103
|
]
|
|
97
104
|
},
|
|
98
|
-
|
|
105
|
+
x(e)
|
|
99
106
|
);
|
|
100
107
|
})
|
|
101
108
|
] })
|
|
@@ -103,5 +110,5 @@ function q({
|
|
|
103
110
|
] });
|
|
104
111
|
}
|
|
105
112
|
export {
|
|
106
|
-
|
|
113
|
+
K as FilterListSection
|
|
107
114
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-filter-dropdown.d.ts","sourceRoot":"","sources":["../../../src/patterns/filters/status-filter-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"status-filter-dropdown.d.ts","sourceRoot":"","sources":["../../../src/patterns/filters/status-filter-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAgBnE,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,OAAO,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,KAAK,uBAAuB,GAAG;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,KAAK,iCAAiC,GAAG,uBAAuB,GAAG;IACjE,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,oBAAoB,EAAE,aAAa,CAAC;IACpC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,kBAAkB,EAAE,CAAC;IACpC,2GAA2G;IAC3G,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,KAAK,+BAA+B,GAAG,uBAAuB,GAAG;IAC/D,aAAa,EAAE,QAAQ,CAAC;IACxB,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GACjC,iCAAiC,GACjC,+BAA+B,CAAC;AAQpC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAyP9D,CAAC"}
|
|
@@ -1,92 +1,79 @@
|
|
|
1
|
-
import { jsx as l, jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import { ChevronDown as
|
|
4
|
-
import { cx as
|
|
5
|
-
import { Dropdown as
|
|
6
|
-
import { Button as
|
|
7
|
-
import { RadioButtonBase as
|
|
8
|
-
import { CheckboxBase as
|
|
9
|
-
const
|
|
1
|
+
import { jsx as l, jsxs as s, Fragment as j } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as v, useState as L, useLayoutEffect as b } from "react";
|
|
3
|
+
import { ChevronDown as O, MinusSquare as T } from "@untitledui/icons";
|
|
4
|
+
import { cx as B } from "../../utils/cn.js";
|
|
5
|
+
import { Dropdown as k } from "../../primitives/dropdown/dropdown.js";
|
|
6
|
+
import { Button as m } from "../../primitives/button/button.js";
|
|
7
|
+
import { RadioButtonBase as K } from "../../primitives/radio/radio.js";
|
|
8
|
+
import { CheckboxBase as _ } from "../../primitives/checkbox/checkbox.js";
|
|
9
|
+
const w = ({ isSelected: t }) => /* @__PURE__ */ l("div", { className: "pointer-events-none", "aria-hidden": !0, children: /* @__PURE__ */ l(_, { isSelected: t }) }), W = (t) => {
|
|
10
10
|
const {
|
|
11
|
-
isOpen:
|
|
12
|
-
onOpenChange:
|
|
13
|
-
onApply:
|
|
14
|
-
onReset:
|
|
15
|
-
className:
|
|
11
|
+
isOpen: c,
|
|
12
|
+
onOpenChange: C,
|
|
13
|
+
onApply: S,
|
|
14
|
+
onReset: D,
|
|
15
|
+
className: p,
|
|
16
16
|
buttonLabel: d = "Status",
|
|
17
|
-
isDisabled:
|
|
18
|
-
isApplyDisabled:
|
|
19
|
-
isResetDisabled:
|
|
20
|
-
} = t, r = t.selectionMode === "single",
|
|
17
|
+
isDisabled: N = !1,
|
|
18
|
+
isApplyDisabled: F,
|
|
19
|
+
isResetDisabled: R
|
|
20
|
+
} = t, r = t.selectionMode === "single", o = r ? t.options : t.statusOptions, i = (o == null ? void 0 : o.length) ?? 0, u = r ? 0 : Object.entries(t.appliedStatusFilters).filter(
|
|
21
21
|
([e, n]) => e !== "all" && n
|
|
22
|
-
).length,
|
|
22
|
+
).length, A = !r && t.defaultSelectAll === !0, M = (() => {
|
|
23
23
|
if (r) {
|
|
24
24
|
const e = t.defaultValue ?? "all";
|
|
25
25
|
return t.value !== e;
|
|
26
26
|
}
|
|
27
|
-
return
|
|
28
|
-
},
|
|
29
|
-
g,
|
|
30
|
-
r,
|
|
31
|
-
t,
|
|
32
|
-
o,
|
|
33
|
-
a
|
|
34
|
-
]), m = h(() => r ? 0 : Object.entries(t.statusFilters).filter(
|
|
27
|
+
return i === 0 ? !1 : A ? u < i : u > 0;
|
|
28
|
+
})(), h = r ? 0 : Object.entries(t.statusFilters).filter(
|
|
35
29
|
([e, n]) => e !== "all" && n
|
|
36
|
-
).length,
|
|
30
|
+
).length, y = h === i && i > 0, g = h > 0 && h < i, z = (() => {
|
|
37
31
|
var n;
|
|
38
32
|
if (!r)
|
|
39
|
-
return !(
|
|
33
|
+
return !(u === i && i > 0) && u > 0 ? `${d} ${u} selected` : d;
|
|
40
34
|
const e = t.defaultValue ?? "all";
|
|
41
|
-
return t.value === e ? d : ((n =
|
|
42
|
-
}, [
|
|
43
|
-
r,
|
|
44
|
-
o,
|
|
45
|
-
a,
|
|
46
|
-
d,
|
|
47
|
-
t,
|
|
48
|
-
s
|
|
49
|
-
]), f = k(null), b = k(0), [E, H] = O(
|
|
35
|
+
return t.value === e ? d : ((n = o.find((a) => a.key === t.value)) == null ? void 0 : n.label) ?? d;
|
|
36
|
+
})(), f = v(null), x = v(0), [V, E] = L(
|
|
50
37
|
() => typeof window > "u" ? 400 : Math.round(window.innerHeight * 0.5)
|
|
51
|
-
),
|
|
52
|
-
return
|
|
53
|
-
if (!
|
|
38
|
+
), H = r ? t.pendingValue : t.statusFilters;
|
|
39
|
+
return b(() => {
|
|
40
|
+
if (!c) return;
|
|
54
41
|
const e = () => {
|
|
55
|
-
|
|
42
|
+
E(Math.round(window.innerHeight * 0.5));
|
|
56
43
|
};
|
|
57
44
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
58
|
-
}, [
|
|
45
|
+
}, [c]), b(() => {
|
|
59
46
|
const e = () => {
|
|
60
|
-
f.current && (f.current.scrollTop =
|
|
47
|
+
f.current && (f.current.scrollTop = x.current);
|
|
61
48
|
};
|
|
62
49
|
e();
|
|
63
50
|
const n = requestAnimationFrame(e);
|
|
64
51
|
return () => cancelAnimationFrame(n);
|
|
65
|
-
}, [
|
|
52
|
+
}, [H]), /* @__PURE__ */ l("div", { className: "relative", children: /* @__PURE__ */ s(k.Root, { isOpen: c, onOpenChange: C, children: [
|
|
66
53
|
/* @__PURE__ */ l(
|
|
67
|
-
|
|
54
|
+
m,
|
|
68
55
|
{
|
|
69
56
|
size: "xs",
|
|
70
57
|
color: "secondary",
|
|
71
|
-
iconTrailing: /* @__PURE__ */ l(
|
|
72
|
-
className:
|
|
58
|
+
iconTrailing: /* @__PURE__ */ l(O, { size: 12 }),
|
|
59
|
+
className: B(
|
|
73
60
|
"relative",
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
61
|
+
M && !c && "ring-1 ring-brand-600 bg-brand-primary text-brand-600 hover:bg-brand-primary hover:text-brand-600",
|
|
62
|
+
p,
|
|
63
|
+
c && "shadow-[0_0_0_4px_rgba(102,112,133,0.14)]"
|
|
77
64
|
),
|
|
78
|
-
isDisabled:
|
|
79
|
-
children:
|
|
65
|
+
isDisabled: N,
|
|
66
|
+
children: z
|
|
80
67
|
}
|
|
81
68
|
),
|
|
82
69
|
/* @__PURE__ */ l(
|
|
83
|
-
|
|
70
|
+
k.Popover,
|
|
84
71
|
{
|
|
85
72
|
className: "overflow-hidden",
|
|
86
73
|
style: { overflow: "hidden" },
|
|
87
|
-
maxHeight:
|
|
74
|
+
maxHeight: V,
|
|
88
75
|
scrollRef: f,
|
|
89
|
-
children: /* @__PURE__ */
|
|
76
|
+
children: /* @__PURE__ */ s("div", { className: "flex max-h-[50vh] flex-col overflow-hidden text-secondary text-xs", children: [
|
|
90
77
|
/* @__PURE__ */ l(
|
|
91
78
|
"div",
|
|
92
79
|
{
|
|
@@ -95,25 +82,25 @@ const S = ({ isSelected: t }) => /* @__PURE__ */ l("div", { className: "pointer-
|
|
|
95
82
|
role: r ? "radiogroup" : void 0,
|
|
96
83
|
"aria-label": r ? d : void 0,
|
|
97
84
|
onScroll: (e) => {
|
|
98
|
-
|
|
85
|
+
x.current = e.currentTarget.scrollTop;
|
|
99
86
|
},
|
|
100
|
-
children: r ?
|
|
87
|
+
children: r ? o.map((e) => {
|
|
101
88
|
const n = t.pendingValue === e.key;
|
|
102
|
-
return /* @__PURE__ */
|
|
89
|
+
return /* @__PURE__ */ s(
|
|
103
90
|
"div",
|
|
104
91
|
{
|
|
105
92
|
role: "radio",
|
|
106
93
|
"aria-checked": n,
|
|
107
94
|
tabIndex: 0,
|
|
108
95
|
className: "flex cursor-pointer items-center gap-3",
|
|
109
|
-
onMouseDownCapture: (
|
|
96
|
+
onMouseDownCapture: (a) => a.preventDefault(),
|
|
110
97
|
onClick: () => t.onValueChange(e.key),
|
|
111
|
-
onKeyDown: (
|
|
112
|
-
(
|
|
98
|
+
onKeyDown: (a) => {
|
|
99
|
+
(a.key === "Enter" || a.key === " ") && (a.preventDefault(), t.onValueChange(e.key));
|
|
113
100
|
},
|
|
114
101
|
children: [
|
|
115
102
|
/* @__PURE__ */ l("div", { className: "pointer-events-none", children: /* @__PURE__ */ l(
|
|
116
|
-
|
|
103
|
+
K,
|
|
117
104
|
{
|
|
118
105
|
size: "sm",
|
|
119
106
|
isSelected: n,
|
|
@@ -125,12 +112,12 @@ const S = ({ isSelected: t }) => /* @__PURE__ */ l("div", { className: "pointer-
|
|
|
125
112
|
},
|
|
126
113
|
e.key
|
|
127
114
|
);
|
|
128
|
-
}) : /* @__PURE__ */
|
|
129
|
-
/* @__PURE__ */
|
|
115
|
+
}) : /* @__PURE__ */ s(j, { children: [
|
|
116
|
+
/* @__PURE__ */ s(
|
|
130
117
|
"div",
|
|
131
118
|
{
|
|
132
119
|
role: "checkbox",
|
|
133
|
-
"aria-checked":
|
|
120
|
+
"aria-checked": g ? "mixed" : y,
|
|
134
121
|
tabIndex: 0,
|
|
135
122
|
className: "flex cursor-pointer items-center gap-3",
|
|
136
123
|
onMouseDownCapture: (e) => e.preventDefault(),
|
|
@@ -139,19 +126,19 @@ const S = ({ isSelected: t }) => /* @__PURE__ */ l("div", { className: "pointer-
|
|
|
139
126
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.onStatusChange("all"));
|
|
140
127
|
},
|
|
141
128
|
children: [
|
|
142
|
-
|
|
143
|
-
|
|
129
|
+
g ? /* @__PURE__ */ l(
|
|
130
|
+
T,
|
|
144
131
|
{
|
|
145
132
|
size: 18,
|
|
146
133
|
className: "text-utility-brand-600",
|
|
147
134
|
"aria-hidden": !0
|
|
148
135
|
}
|
|
149
|
-
) : /* @__PURE__ */ l(
|
|
136
|
+
) : /* @__PURE__ */ l(w, { isSelected: y }),
|
|
150
137
|
/* @__PURE__ */ l("span", { children: "All" })
|
|
151
138
|
]
|
|
152
139
|
}
|
|
153
140
|
),
|
|
154
|
-
|
|
141
|
+
o.map((e) => /* @__PURE__ */ s(
|
|
155
142
|
"div",
|
|
156
143
|
{
|
|
157
144
|
role: "checkbox",
|
|
@@ -165,7 +152,7 @@ const S = ({ isSelected: t }) => /* @__PURE__ */ l("div", { className: "pointer-
|
|
|
165
152
|
},
|
|
166
153
|
children: [
|
|
167
154
|
/* @__PURE__ */ l(
|
|
168
|
-
|
|
155
|
+
w,
|
|
169
156
|
{
|
|
170
157
|
isSelected: t.statusFilters[e.key]
|
|
171
158
|
}
|
|
@@ -178,26 +165,26 @@ const S = ({ isSelected: t }) => /* @__PURE__ */ l("div", { className: "pointer-
|
|
|
178
165
|
] })
|
|
179
166
|
}
|
|
180
167
|
),
|
|
181
|
-
/* @__PURE__ */
|
|
168
|
+
/* @__PURE__ */ s("div", { className: "flex shrink-0 justify-end gap-2 bg-primary p-3", children: [
|
|
182
169
|
/* @__PURE__ */ l(
|
|
183
|
-
|
|
170
|
+
m,
|
|
184
171
|
{
|
|
185
172
|
size: "xs",
|
|
186
173
|
color: "secondary",
|
|
187
174
|
className: "flex-1 p-2",
|
|
188
|
-
onClick:
|
|
189
|
-
isDisabled:
|
|
175
|
+
onClick: D,
|
|
176
|
+
isDisabled: R,
|
|
190
177
|
children: "Reset"
|
|
191
178
|
}
|
|
192
179
|
),
|
|
193
180
|
/* @__PURE__ */ l(
|
|
194
|
-
|
|
181
|
+
m,
|
|
195
182
|
{
|
|
196
183
|
size: "xs",
|
|
197
184
|
color: "primary",
|
|
198
185
|
className: "flex-1 p-2",
|
|
199
|
-
onClick:
|
|
200
|
-
isDisabled:
|
|
186
|
+
onClick: S,
|
|
187
|
+
isDisabled: F,
|
|
201
188
|
children: "Apply"
|
|
202
189
|
}
|
|
203
190
|
)
|
|
@@ -208,5 +195,5 @@ const S = ({ isSelected: t }) => /* @__PURE__ */ l("div", { className: "pointer-
|
|
|
208
195
|
] }) });
|
|
209
196
|
};
|
|
210
197
|
export {
|
|
211
|
-
|
|
198
|
+
W as StatusFilterDropdown
|
|
212
199
|
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { TreeViewNode } from './tree-view';
|
|
2
|
+
type CustomNode = React.FC<{
|
|
3
|
+
node: TreeViewNode;
|
|
4
|
+
isSelected: boolean;
|
|
5
|
+
}>;
|
|
6
|
+
export interface IndentedTreeProps {
|
|
7
|
+
tree: TreeViewNode[];
|
|
8
|
+
onToggle: (path: string) => void;
|
|
9
|
+
CustomNode: CustomNode;
|
|
10
|
+
onNodeClick?: (node: TreeViewNode) => void;
|
|
11
|
+
selectedNodeId?: string | null;
|
|
12
|
+
keyboardNavigation: boolean;
|
|
13
|
+
canSelectNode?: (node: TreeViewNode) => boolean;
|
|
14
|
+
"aria-label"?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* The `indented` TreeView variant: spaced rows, a 24px indent with one guide line per level, an
|
|
18
|
+
* animated chevron and children. The chevron only expands/collapses; clicking a row's content
|
|
19
|
+
* selects it, for parents and leaves alike.
|
|
20
|
+
*/
|
|
21
|
+
export declare const IndentedTree: ({ tree, onToggle, CustomNode, onNodeClick, selectedNodeId, keyboardNavigation, canSelectNode, "aria-label": ariaLabel, }: IndentedTreeProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=indented-tree.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indented-tree.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/indented-tree.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,0HAS1B,iBAAiB,4CA8GnB,CAAC"}
|