@pibit.ai/cure-design-system 0.6.22 → 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.
Files changed (8) hide show
  1. package/dist/patterns/tree-view/indented-tree.d.ts +23 -0
  2. package/dist/patterns/tree-view/indented-tree.d.ts.map +1 -0
  3. package/dist/patterns/tree-view/indented-tree.js +232 -0
  4. package/dist/patterns/tree-view/tree-view.d.ts +40 -7
  5. package/dist/patterns/tree-view/tree-view.d.ts.map +1 -1
  6. package/dist/patterns/tree-view/tree-view.js +142 -107
  7. package/dist/styles/components.css +1 -1
  8. package/package.json +1 -1
package/dist/patterns/tree-view/tree-view.js CHANGED
@@ -1,168 +1,203 @@
1
- import { jsxs as A, jsx as r, Fragment as E } from "react/jsx-runtime";
2
- import { useState as $ } from "react";
3
- import { SearchSm as T, ChevronDown as K, ChevronRight as V } from "@untitledui/icons";
4
- import { cn as k } from "../../utils/cn.js";
5
- import { Input as _ } from "../../primitives/input/input.js";
6
- const N = 10;
7
- function C(e, l, s = "") {
1
+ import { jsx as s, jsxs as N, Fragment as D } from "react/jsx-runtime";
2
+ import { useMemo as P, useState as V, useRef as Q, useEffect as U } from "react";
3
+ import { SearchSm as z, ChevronDown as B, ChevronRight as F } from "@untitledui/icons";
4
+ import { cn as H } from "../../utils/cn.js";
5
+ import { IndentedTree as X } from "./indented-tree.js";
6
+ import { Input as Z } from "../../primitives/input/input.js";
7
+ const T = 10;
8
+ function K(e, t) {
9
+ const r = (i, [n, ...a]) => i.map((l, c) => c !== n ? l : a.length ? { ...l, children: r(l.children, a) } : { ...l, isOpen: !l.isOpen });
10
+ return r(e, t.split("-").map(Number));
11
+ }
12
+ function E(e, t, r = "") {
8
13
  const {
9
- labelKey: m,
14
+ labelKey: i,
10
15
  childrenKey: n,
11
- dataKey: f = "metadata",
12
- typeKey: x = "type",
13
- idKey: h,
14
- maxDepth: i,
15
- defaultExpanded: g
16
- } = l, v = s ? s.split(".").length : 0;
17
- return i != null && v >= i ? [] : (Array.isArray(e) ? e : Object.values(e)).map((t, w) => {
18
- const b = h != null ? t[h] : void 0, a = String(b ?? w), d = s ? `${s}.${a}` : a, c = t[n], o = Array.isArray(c) ? c : c != null ? Object.values(c) : [];
16
+ dataKey: a = "metadata",
17
+ typeKey: l = "type",
18
+ idKey: c,
19
+ maxDepth: o,
20
+ defaultExpanded: u,
21
+ expandedIds: f
22
+ } = t, y = r ? r.split(".").length : 0;
23
+ return o != null && y >= o ? [] : (Array.isArray(e) ? e : Object.values(e)).map((h, S) => {
24
+ const b = c != null ? h[c] : void 0, A = String(b ?? S), x = r ? `${r}.${A}` : A, d = h[n], g = Array.isArray(d) ? d : d != null ? Object.values(d) : [];
19
25
  return {
20
- id: d,
21
- label: t[m] ?? "Untitled",
22
- type: t[x] ?? "Untitled",
23
- isOpen: t.isOpen ?? g ?? !1,
24
- children: o.length > 0 ? C(o, l, d) : [],
25
- [f]: t
26
+ id: x,
27
+ label: h[i] ?? "Untitled",
28
+ type: h[l] ?? "Untitled",
29
+ isOpen: h.isOpen ?? (f ? f.has(x) : u) ?? !1,
30
+ children: g.length > 0 ? E(g, t, x) : [],
31
+ [a]: h
26
32
  };
27
33
  });
28
34
  }
29
- function O(e, l) {
30
- const s = e.label ?? "", m = Array.isArray(e.children) ? e.children : [];
31
- return s.toLowerCase().includes(l.toLowerCase()) ? !0 : m.some((n) => O(n, l));
35
+ function I(e, t) {
36
+ const r = e.label ?? "", i = Array.isArray(e.children) ? e.children : [];
37
+ return r.toLowerCase().includes(t.toLowerCase()) ? !0 : i.some((n) => I(n, t));
32
38
  }
33
- const D = () => /* @__PURE__ */ r("div", { className: "flex h-[28px] items-center px-[13px] shrink-0", children: /* @__PURE__ */ r("div", { className: "relative h-full w-0 shrink-0", children: /* @__PURE__ */ r(
39
+ const G = () => /* @__PURE__ */ s("div", { className: "flex h-[28px] items-center px-[13px] shrink-0", children: /* @__PURE__ */ s("div", { className: "relative h-full w-0 shrink-0", children: /* @__PURE__ */ s(
34
40
  "div",
35
41
  {
36
42
  className: "absolute inset-y-0 bg-(--color-border-secondary)",
37
43
  style: { left: "-0.5px", width: 1 }
38
44
  }
39
- ) }) }), I = ({
45
+ ) }) }), J = ({
40
46
  data: e,
41
- config: l,
42
- CustomNode: s,
43
- onNodeClick: m,
44
- selectedNodeId: n,
45
- showSearch: f = !1,
46
- searchPlaceholder: x = "Search...",
47
- searchClassName: h,
48
- searchInputClassName: i,
49
- defaultExpanded: g
47
+ config: t,
48
+ nodes: r,
49
+ CustomNode: i,
50
+ onNodeClick: n,
51
+ selectedNodeId: a,
52
+ showSearch: l = !1,
53
+ searchPlaceholder: c = "Search...",
54
+ searchClassName: o,
55
+ searchInputClassName: u,
56
+ defaultExpanded: f,
57
+ defaultExpandedIds: y,
58
+ syncWithData: p = !1,
59
+ variant: h = "nested",
60
+ isLeafClickable: S,
61
+ keyboardNavigation: b = !1,
62
+ canSelectNode: A,
63
+ "aria-label": x
50
64
  }) => {
51
- const [v, y] = $(
52
- () => C(e, {
53
- ...l,
54
- defaultExpanded: g ?? l.defaultExpanded
55
- })
56
- ), [t, w] = $("");
57
- function b(a, d) {
58
- const c = structuredClone(v), o = d.split("-"), p = Number(o[0]);
59
- o.shift();
60
- let u = c[p];
61
- o.length > 0 && (u = o.reduce((L, j) => L.children[Number(j)], c[p])), u.isOpen = !u.isOpen, y(c);
65
+ const d = P(
66
+ () => y == null ? void 0 : new Set(y),
67
+ [y]
68
+ ), g = () => r ?? E(e, {
69
+ ...t,
70
+ defaultExpanded: f ?? t.defaultExpanded,
71
+ expandedIds: d ?? t.expandedIds
72
+ }), [$, m] = V(g), [w, _] = V(""), j = Q(!1);
73
+ U(() => {
74
+ p && (j.current && m(g()), j.current = !0);
75
+ }, [p, e, t, r, d, f]);
76
+ function L(v, O) {
77
+ m((M) => K(M, O));
62
78
  }
63
- return /* @__PURE__ */ A("div", { className: "min-w-max", children: [
64
- f && /* @__PURE__ */ r("div", { className: k("mb-2", h), children: /* @__PURE__ */ r(
65
- _,
79
+ return h === "indented" ? /* @__PURE__ */ s(
80
+ X,
81
+ {
82
+ tree: $,
83
+ onToggle: (v) => m((O) => K(O, v)),
84
+ CustomNode: i,
85
+ onNodeClick: n,
86
+ selectedNodeId: a,
87
+ keyboardNavigation: b,
88
+ canSelectNode: A,
89
+ "aria-label": x
90
+ }
91
+ ) : /* @__PURE__ */ N("div", { className: "min-w-max", children: [
92
+ l && /* @__PURE__ */ s("div", { className: H("mb-2", o), children: /* @__PURE__ */ s(
93
+ Z,
66
94
  {
67
95
  type: "search",
68
- placeholder: x,
69
- value: t,
70
- onChange: (a) => w(a),
96
+ placeholder: c,
97
+ value: w,
98
+ onChange: (v) => _(v),
71
99
  size: "sm",
72
- className: i,
73
- icon: T
100
+ className: u,
101
+ icon: z
74
102
  }
75
103
  ) }),
76
- /* @__PURE__ */ r("div", { className: "flex flex-col", children: v.map((a, d) => /* @__PURE__ */ r(
77
- S,
104
+ /* @__PURE__ */ s("div", { className: "flex flex-col", children: $.map((v, O) => /* @__PURE__ */ s(
105
+ R,
78
106
  {
79
- node: a,
80
- parentId: String(d),
107
+ node: v,
108
+ parentId: String(O),
81
109
  depth: 0,
82
- handleToggle: b,
83
- onNodeClick: m,
84
- selectedNodeId: n,
85
- CustomNode: s,
86
- query: t
110
+ handleToggle: L,
111
+ onNodeClick: n,
112
+ selectedNodeId: a,
113
+ CustomNode: i,
114
+ query: w,
115
+ isLeafClickable: S
87
116
  },
88
- a.id || d
117
+ v.id || O
89
118
  )) })
90
119
  ] });
91
120
  };
92
- I.displayName = "TreeView";
93
- const S = ({
121
+ J.displayName = "TreeView";
122
+ const R = ({
94
123
  node: e,
95
- parentId: l,
96
- depth: s = 0,
97
- handleToggle: m,
124
+ parentId: t,
125
+ depth: r = 0,
126
+ handleToggle: i,
98
127
  onNodeClick: n,
99
- selectedNodeId: f,
100
- CustomNode: x,
101
- query: h
128
+ selectedNodeId: a,
129
+ CustomNode: l,
130
+ query: c,
131
+ isLeafClickable: o
102
132
  }) => {
103
- const i = h.length > 0, g = Array.isArray(e.children) ? e.children : [], v = e.label ?? "";
104
- if (i && !O(e, h))
133
+ const u = c.length > 0, f = Array.isArray(e.children) ? e.children : [], y = e.label ?? "";
134
+ if (u && !I(e, c))
105
135
  return null;
106
- const y = g.length > 0, t = f != null && e.id === f, w = y && (i || (e.isOpen ?? !1)), b = (p) => {
107
- p.stopPropagation(), y && (i || m(e, l), n == null || n(e));
108
- }, a = s === 0 ? "pl-[6px]" : "", d = s === 0 ? "pl-[2px]" : "pl-[8px]", c = i && v.toLowerCase().includes(h.toLowerCase()), o = i ? !0 : e.isOpen;
109
- return /* @__PURE__ */ A("div", { className: "relative", children: [
110
- /* @__PURE__ */ A(
136
+ const p = f.length > 0, h = a != null && e.id === a, S = p && (u || (e.isOpen ?? !1)), b = !p && !!(o != null && o(e)), A = (m) => {
137
+ if (m.stopPropagation(), b) {
138
+ n == null || n(e);
139
+ return;
140
+ }
141
+ p && (u || i(e, t), n == null || n(e));
142
+ }, x = r === 0 ? "pl-[6px]" : "", d = r === 0 ? "pl-[2px]" : "pl-[8px]", g = u && y.toLowerCase().includes(c.toLowerCase()), $ = u ? !0 : e.isOpen;
143
+ return /* @__PURE__ */ N("div", { className: "relative", children: [
144
+ /* @__PURE__ */ N(
111
145
  "div",
112
146
  {
113
- className: `flex h-[28px] w-full items-center pr-[8px] rounded-sm ${a} ${c ? "bg-(--color-bg-secondary)" : ""} ${y ? "cursor-pointer hover:bg-(--color-bg-secondary)" : ""}`,
114
- onClick: b,
147
+ className: `flex h-[28px] w-full items-center pr-[8px] rounded-sm ${x} ${g ? "bg-(--color-bg-secondary)" : ""} ${p ? "cursor-pointer hover:bg-(--color-bg-secondary)" : ""} ${b ? "cursor-pointer" : ""}`,
148
+ onClick: A,
115
149
  children: [
116
- s > 0 && Array.from({ length: s }).map((p, u) => /* @__PURE__ */ r(D, {}, u)),
117
- y ? /* @__PURE__ */ r(
150
+ r > 0 && Array.from({ length: r }).map((m, w) => /* @__PURE__ */ s(G, {}, w)),
151
+ p ? /* @__PURE__ */ s(
118
152
  "div",
119
153
  {
120
- className: `flex flex-col h-full items-center shrink-0 ${d} ${o ? "justify-end" : "justify-center"}`,
121
- children: o ? /* @__PURE__ */ A(E, { children: [
122
- /* @__PURE__ */ r(
123
- K,
154
+ className: `flex flex-col h-full items-center shrink-0 ${d} ${$ ? "justify-end" : "justify-center"}`,
155
+ children: $ ? /* @__PURE__ */ N(D, { children: [
156
+ /* @__PURE__ */ s(
157
+ B,
124
158
  {
125
159
  className: "shrink-0 text-(--color-gray-400)",
126
- style: { width: N, height: N }
160
+ style: { width: T, height: T }
127
161
  }
128
162
  ),
129
- /* @__PURE__ */ r("div", { className: "relative h-[8px] w-0 shrink-0", children: /* @__PURE__ */ r(
163
+ /* @__PURE__ */ s("div", { className: "relative h-[8px] w-0 shrink-0", children: /* @__PURE__ */ s(
130
164
  "div",
131
165
  {
132
166
  className: "absolute inset-y-0 bg-(--color-border-secondary)",
133
167
  style: { left: "-0.5px", width: 1 }
134
168
  }
135
169
  ) })
136
- ] }) : /* @__PURE__ */ r(
137
- V,
170
+ ] }) : /* @__PURE__ */ s(
171
+ F,
138
172
  {
139
173
  className: "shrink-0 text-(--color-gray-400)",
140
- style: { width: N, height: N }
174
+ style: { width: T, height: T }
141
175
  }
142
176
  )
143
177
  }
144
- ) : s > 0 ? /* @__PURE__ */ r("div", { className: "h-full w-[6px] shrink-0" }) : null,
145
- /* @__PURE__ */ r("div", { className: "flex flex-1 h-full items-center min-w-0 pl-[2px]", children: /* @__PURE__ */ r(x, { node: e, isSelected: t }) })
178
+ ) : r > 0 ? /* @__PURE__ */ s("div", { className: "h-full w-[6px] shrink-0" }) : null,
179
+ /* @__PURE__ */ s("div", { className: "flex flex-1 h-full items-center min-w-0 pl-[2px]", children: /* @__PURE__ */ s(l, { node: e, isSelected: h }) })
146
180
  ]
147
181
  }
148
182
  ),
149
- w && /* @__PURE__ */ r("div", { className: "relative", children: g.map((p, u) => /* @__PURE__ */ r(
150
- S,
183
+ S && /* @__PURE__ */ s("div", { className: "relative", children: f.map((m, w) => /* @__PURE__ */ s(
184
+ R,
151
185
  {
152
- node: p,
153
- parentId: `${l}-${u}`,
154
- depth: s + 1,
155
- handleToggle: m,
186
+ node: m,
187
+ parentId: `${t}-${w}`,
188
+ depth: r + 1,
189
+ handleToggle: i,
156
190
  onNodeClick: n,
157
- selectedNodeId: f,
158
- CustomNode: x,
159
- query: h
191
+ selectedNodeId: a,
192
+ CustomNode: l,
193
+ query: c,
194
+ isLeafClickable: o
160
195
  },
161
- p.id || `${l}-${u}`
196
+ m.id || `${t}-${w}`
162
197
  )) })
163
198
  ] });
164
199
  };
165
200
  export {
166
- I as TreeView,
167
- C as buildTreeViewNodes
201
+ J as TreeView,
202
+ E as buildTreeViewNodes
168
203
  };