asterui 0.12.13 → 0.12.14
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/components/Button.d.ts +4 -0
- package/dist/components/Drawer.d.ts +47 -6
- package/dist/components/Dropdown.d.ts +65 -9
- package/dist/components/Input.d.ts +15 -1
- package/dist/components/Modal.d.ts +5 -1
- package/dist/components/Navbar.d.ts +15 -1
- package/dist/components/SidebarDrawer.d.ts +21 -0
- package/dist/components/Tabs.d.ts +30 -4
- package/dist/index.d.ts +6 -4
- package/dist/index.js +169 -167
- package/dist/index.js.map +1 -1
- package/dist/index100.js +44 -11
- package/dist/index100.js.map +1 -1
- package/dist/index101.js +10 -12
- package/dist/index101.js.map +1 -1
- package/dist/index102.js +14 -7
- package/dist/index102.js.map +1 -1
- package/dist/index103.js +7 -12
- package/dist/index103.js.map +1 -1
- package/dist/index104.js +11 -29
- package/dist/index104.js.map +1 -1
- package/dist/index105.js +29 -16
- package/dist/index105.js.map +1 -1
- package/dist/index106.js +21 -0
- package/dist/index106.js.map +1 -0
- package/dist/index21.js +1 -1
- package/dist/index26.js +171 -40
- package/dist/index26.js.map +1 -1
- package/dist/index27.js +41 -17
- package/dist/index27.js.map +1 -1
- package/dist/index28.js +17 -33
- package/dist/index28.js.map +1 -1
- package/dist/index29.js +33 -52
- package/dist/index29.js.map +1 -1
- package/dist/index30.js +50 -61
- package/dist/index30.js.map +1 -1
- package/dist/index31.js +60 -181
- package/dist/index31.js.map +1 -1
- package/dist/index32.js +184 -18
- package/dist/index32.js.map +1 -1
- package/dist/index33.js +15 -217
- package/dist/index33.js.map +1 -1
- package/dist/index34.js +216 -1083
- package/dist/index34.js.map +1 -1
- package/dist/index35.js +1086 -16
- package/dist/index35.js.map +1 -1
- package/dist/index36.js +16 -121
- package/dist/index36.js.map +1 -1
- package/dist/index37.js +119 -37
- package/dist/index37.js.map +1 -1
- package/dist/index38.js +34 -208
- package/dist/index38.js.map +1 -1
- package/dist/index39.js +390 -89
- package/dist/index39.js.map +1 -1
- package/dist/index40.js +93 -158
- package/dist/index40.js.map +1 -1
- package/dist/index41.js +211 -135
- package/dist/index41.js.map +1 -1
- package/dist/index42.js +146 -15
- package/dist/index42.js.map +1 -1
- package/dist/index43.js +15 -17
- package/dist/index43.js.map +1 -1
- package/dist/index44.js +17 -21
- package/dist/index44.js.map +1 -1
- package/dist/index45.js +18 -134
- package/dist/index45.js.map +1 -1
- package/dist/index46.js +134 -10
- package/dist/index46.js.map +1 -1
- package/dist/index47.js +13 -35
- package/dist/index47.js.map +1 -1
- package/dist/index48.js +35 -34
- package/dist/index48.js.map +1 -1
- package/dist/index49.js +34 -81
- package/dist/index49.js.map +1 -1
- package/dist/index50.js +71 -166
- package/dist/index50.js.map +1 -1
- package/dist/index51.js +167 -144
- package/dist/index51.js.map +1 -1
- package/dist/index52.js +152 -11
- package/dist/index52.js.map +1 -1
- package/dist/index53.js +10 -20
- package/dist/index53.js.map +1 -1
- package/dist/index54.js +22 -14
- package/dist/index54.js.map +1 -1
- package/dist/index55.js +14 -7
- package/dist/index55.js.map +1 -1
- package/dist/index56.js +6 -310
- package/dist/index56.js.map +1 -1
- package/dist/index57.js +334 -17
- package/dist/index57.js.map +1 -1
- package/dist/index58.js +47 -122
- package/dist/index58.js.map +1 -1
- package/dist/index59.js +120 -108
- package/dist/index59.js.map +1 -1
- package/dist/index60.js +107 -167
- package/dist/index60.js.map +1 -1
- package/dist/index61.js +167 -29
- package/dist/index61.js.map +1 -1
- package/dist/index62.js +30 -120
- package/dist/index62.js.map +1 -1
- package/dist/index63.js +116 -80
- package/dist/index63.js.map +1 -1
- package/dist/index64.js +85 -19
- package/dist/index64.js.map +1 -1
- package/dist/index65.js +19 -73
- package/dist/index65.js.map +1 -1
- package/dist/index66.js +71 -54
- package/dist/index66.js.map +1 -1
- package/dist/index67.js +56 -44
- package/dist/index67.js.map +1 -1
- package/dist/index68.js +42 -49
- package/dist/index68.js.map +1 -1
- package/dist/index69.js +52 -62
- package/dist/index69.js.map +1 -1
- package/dist/index70.js +56 -101
- package/dist/index70.js.map +1 -1
- package/dist/index71.js +107 -41
- package/dist/index71.js.map +1 -1
- package/dist/index72.js +41 -68
- package/dist/index72.js.map +1 -1
- package/dist/index73.js +66 -19
- package/dist/index73.js.map +1 -1
- package/dist/index74.js +18 -55
- package/dist/index74.js.map +1 -1
- package/dist/index75.js +55 -251
- package/dist/index75.js.map +1 -1
- package/dist/index76.js +254 -22
- package/dist/index76.js.map +1 -1
- package/dist/index77.js +22 -31
- package/dist/index77.js.map +1 -1
- package/dist/index78.js +30 -93
- package/dist/index78.js.map +1 -1
- package/dist/index79.js +89 -324
- package/dist/index79.js.map +1 -1
- package/dist/index80.js +323 -50
- package/dist/index80.js.map +1 -1
- package/dist/index81.js +79 -39
- package/dist/index81.js.map +1 -1
- package/dist/index82.js +40 -23
- package/dist/index82.js.map +1 -1
- package/dist/index83.js +21 -93
- package/dist/index83.js.map +1 -1
- package/dist/index84.js +87 -148
- package/dist/index84.js.map +1 -1
- package/dist/index85.js +147 -152
- package/dist/index85.js.map +1 -1
- package/dist/index86.js +159 -63
- package/dist/index86.js.map +1 -1
- package/dist/index87.js +65 -35
- package/dist/index87.js.map +1 -1
- package/dist/index88.js +35 -234
- package/dist/index88.js.map +1 -1
- package/dist/index89.js +231 -31
- package/dist/index89.js.map +1 -1
- package/dist/index9.js +69 -44
- package/dist/index9.js.map +1 -1
- package/dist/index90.js +34 -210
- package/dist/index90.js.map +1 -1
- package/dist/index91.js +195 -198
- package/dist/index91.js.map +1 -1
- package/dist/index92.js +159 -241
- package/dist/index92.js.map +1 -1
- package/dist/index93.js +283 -166
- package/dist/index93.js.map +1 -1
- package/dist/index94.js +173 -253
- package/dist/index94.js.map +1 -1
- package/dist/index95.js +258 -14
- package/dist/index95.js.map +1 -1
- package/dist/index96.js +12 -31
- package/dist/index96.js.map +1 -1
- package/dist/index97.js +32 -5
- package/dist/index97.js.map +1 -1
- package/dist/index98.js +5 -13
- package/dist/index98.js.map +1 -1
- package/dist/index99.js +11 -43
- package/dist/index99.js.map +1 -1
- package/package.json +1 -1
package/dist/index50.js
CHANGED
|
@@ -1,179 +1,84 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
filterOption: x = !0,
|
|
21
|
-
className: Z = "",
|
|
22
|
-
dropdownClassName: _ = "",
|
|
23
|
-
...z
|
|
1
|
+
import { jsx as H } from "react/jsx-runtime";
|
|
2
|
+
import I, { useRef as R, useState as b, useCallback as K, useLayoutEffect as A } from "react";
|
|
3
|
+
const d = {
|
|
4
|
+
sm: 640,
|
|
5
|
+
md: 768,
|
|
6
|
+
lg: 1024,
|
|
7
|
+
xl: 1280,
|
|
8
|
+
"2xl": 1536
|
|
9
|
+
};
|
|
10
|
+
function L(t, e) {
|
|
11
|
+
return typeof t == "number" ? t : t ? t["2xl"] !== void 0 && e >= d["2xl"] ? t["2xl"] : t.xl !== void 0 && e >= d.xl ? t.xl : t.lg !== void 0 && e >= d.lg ? t.lg : t.md !== void 0 && e >= d.md ? t.md : t.sm !== void 0 && e >= d.sm ? t.sm : t.xs !== void 0 ? t.xs : 3 : 3;
|
|
12
|
+
}
|
|
13
|
+
const O = ({
|
|
14
|
+
children: t,
|
|
15
|
+
columns: e = 3,
|
|
16
|
+
gap: r = 16,
|
|
17
|
+
className: z = "",
|
|
18
|
+
style: M,
|
|
19
|
+
...P
|
|
24
20
|
}) => {
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
if (!e || !t || g === null) return;
|
|
46
|
-
const n = h.substring(0, g);
|
|
47
|
-
t.textContent = n;
|
|
48
|
-
const r = e.getBoundingClientRect(), s = t.getBoundingClientRect(), w = parseInt(getComputedStyle(e).lineHeight) || 20;
|
|
49
|
-
te({
|
|
50
|
-
top: r.top + window.scrollY + w + 4,
|
|
51
|
-
left: r.left + window.scrollX + Math.min(s.width % r.width, r.width - 200)
|
|
52
|
-
});
|
|
53
|
-
}, [h, g]);
|
|
54
|
-
C(() => {
|
|
55
|
-
u && O();
|
|
56
|
-
}, [u, O, D]);
|
|
57
|
-
const re = (e) => {
|
|
58
|
-
const t = e.target.value, n = e.target.selectionStart;
|
|
59
|
-
p === void 0 && T(t), E?.(t), se(t, n);
|
|
60
|
-
}, se = (e, t) => {
|
|
61
|
-
let n = null, r = null;
|
|
62
|
-
for (const s of ne) {
|
|
63
|
-
const i = e.substring(0, t).lastIndexOf(s);
|
|
64
|
-
if (i !== -1) {
|
|
65
|
-
const S = i > 0 ? e[i - 1] : v;
|
|
66
|
-
if (S === v || S === `
|
|
67
|
-
` || i === 0) {
|
|
68
|
-
const F = e.substring(i + s.length, t);
|
|
69
|
-
if (!F.includes(v) && !F.includes(`
|
|
70
|
-
`)) {
|
|
71
|
-
n = s, r = i;
|
|
72
|
-
break;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
if (n !== null && r !== null) {
|
|
78
|
-
const s = e.substring(r + n.length, t);
|
|
79
|
-
N(n), M(s), H(r), m(!0), y(0), W?.(s, n);
|
|
80
|
-
} else
|
|
81
|
-
m(!1), N(null), M(""), H(null);
|
|
82
|
-
}, P = (e) => {
|
|
83
|
-
if (e.disabled || g === null || I === null) return;
|
|
84
|
-
const t = l.current;
|
|
85
|
-
if (!t) return;
|
|
86
|
-
const n = h.substring(0, g), r = h.substring(t.selectionStart), s = `${I}${e.value}${v}`, w = n + s + r;
|
|
87
|
-
p === void 0 && T(w), E?.(w), U?.(e, I), m(!1), N(null), M(""), H(null), setTimeout(() => {
|
|
88
|
-
const i = n.length + s.length;
|
|
89
|
-
t.focus(), t.setSelectionRange(i, i);
|
|
90
|
-
}, 0);
|
|
91
|
-
}, ae = (e) => {
|
|
92
|
-
if (u)
|
|
93
|
-
switch (e.key) {
|
|
94
|
-
case "ArrowDown":
|
|
95
|
-
e.preventDefault(), y((t) => (t + 1) % Math.max(c.length, 1));
|
|
96
|
-
break;
|
|
97
|
-
case "ArrowUp":
|
|
98
|
-
e.preventDefault(), y((t) => (t - 1 + c.length) % Math.max(c.length, 1));
|
|
99
|
-
break;
|
|
100
|
-
case "Enter":
|
|
101
|
-
c[d] && (e.preventDefault(), P(c[d]));
|
|
102
|
-
break;
|
|
103
|
-
case "Escape":
|
|
104
|
-
e.preventDefault(), m(!1);
|
|
105
|
-
break;
|
|
106
|
-
case "Tab":
|
|
107
|
-
c[d] && (e.preventDefault(), P(c[d]));
|
|
108
|
-
break;
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
C(() => {
|
|
112
|
-
const e = (t) => {
|
|
113
|
-
b.current && !b.current.contains(t.target) && l.current && !l.current.contains(t.target) && m(!1);
|
|
21
|
+
const u = R(null), [l, T] = b([]), [y, N] = b(0), w = R([]), c = I.Children.toArray(t), s = K(() => {
|
|
22
|
+
const i = u.current;
|
|
23
|
+
if (!i || c.length === 0) return;
|
|
24
|
+
const n = i.offsetWidth, m = typeof window < "u" ? window.innerWidth : n, a = L(e, m), j = (n - r * (a - 1)) / a, o = new Array(a).fill(0), W = [];
|
|
25
|
+
c.forEach((_, x) => {
|
|
26
|
+
const C = w.current[x];
|
|
27
|
+
if (!C) return;
|
|
28
|
+
let h = 0, E = o[0];
|
|
29
|
+
for (let f = 1; f < a; f++)
|
|
30
|
+
o[f] < E && (E = o[f], h = f);
|
|
31
|
+
const k = h * (j + r), B = o[h];
|
|
32
|
+
W[x] = { left: k, top: B };
|
|
33
|
+
const F = C.offsetHeight;
|
|
34
|
+
o[h] += F + r;
|
|
35
|
+
}), T(W), N(Math.max(...o) - r);
|
|
36
|
+
}, [t, e, r, c.length]);
|
|
37
|
+
A(() => {
|
|
38
|
+
s();
|
|
39
|
+
const i = () => {
|
|
40
|
+
s();
|
|
114
41
|
};
|
|
115
|
-
return
|
|
116
|
-
}, []),
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
42
|
+
return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
|
|
43
|
+
}, [s]), A(() => {
|
|
44
|
+
const i = setTimeout(s, 0);
|
|
45
|
+
return () => clearTimeout(i);
|
|
46
|
+
}, [t, s]);
|
|
47
|
+
const v = u.current?.offsetWidth ?? 0, S = typeof window < "u" ? window.innerWidth : v, g = L(e, S), p = v > 0 ? (v - r * (g - 1)) / g : 0;
|
|
48
|
+
return /* @__PURE__ */ H(
|
|
120
49
|
"div",
|
|
121
50
|
{
|
|
122
|
-
ref:
|
|
123
|
-
className:
|
|
124
|
-
min-w-48 max-h-60 overflow-auto ${_}`,
|
|
51
|
+
ref: u,
|
|
52
|
+
className: z,
|
|
125
53
|
style: {
|
|
126
|
-
|
|
127
|
-
|
|
54
|
+
position: "relative",
|
|
55
|
+
height: y > 0 ? y : void 0,
|
|
56
|
+
...M
|
|
128
57
|
},
|
|
129
|
-
|
|
130
|
-
|
|
58
|
+
...P,
|
|
59
|
+
children: c.map((i, n) => /* @__PURE__ */ H(
|
|
60
|
+
"div",
|
|
131
61
|
{
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
62
|
+
ref: (m) => {
|
|
63
|
+
w.current[n] = m;
|
|
64
|
+
},
|
|
65
|
+
style: {
|
|
66
|
+
position: l.length > 0 ? "absolute" : "relative",
|
|
67
|
+
left: l[n]?.left ?? 0,
|
|
68
|
+
top: l[n]?.top ?? 0,
|
|
69
|
+
width: p > 0 ? p : "100%",
|
|
70
|
+
visibility: l.length > 0 ? "visible" : "hidden"
|
|
71
|
+
},
|
|
72
|
+
children: i
|
|
73
|
+
},
|
|
74
|
+
n
|
|
75
|
+
))
|
|
143
76
|
}
|
|
144
77
|
);
|
|
145
|
-
return /* @__PURE__ */ K("div", { className: `relative ${Z}`, "data-state": u ? "open" : "closed", ...z, children: [
|
|
146
|
-
/* @__PURE__ */ a(
|
|
147
|
-
"div",
|
|
148
|
-
{
|
|
149
|
-
ref: B,
|
|
150
|
-
className: "invisible absolute whitespace-pre-wrap break-words",
|
|
151
|
-
style: {
|
|
152
|
-
font: l.current ? getComputedStyle(l.current).font : void 0,
|
|
153
|
-
width: l.current?.clientWidth,
|
|
154
|
-
padding: l.current ? getComputedStyle(l.current).padding : void 0
|
|
155
|
-
},
|
|
156
|
-
"aria-hidden": "true"
|
|
157
|
-
}
|
|
158
|
-
),
|
|
159
|
-
/* @__PURE__ */ a(
|
|
160
|
-
"textarea",
|
|
161
|
-
{
|
|
162
|
-
ref: l,
|
|
163
|
-
value: h,
|
|
164
|
-
onChange: re,
|
|
165
|
-
onKeyDown: ae,
|
|
166
|
-
placeholder: Y,
|
|
167
|
-
disabled: G,
|
|
168
|
-
readOnly: J,
|
|
169
|
-
rows: typeof o == "object" ? o.minRows || V : o ? 1 : V,
|
|
170
|
-
className: "textarea textarea-bordered w-full resize-none"
|
|
171
|
-
}
|
|
172
|
-
),
|
|
173
|
-
oe(le, document.body)
|
|
174
|
-
] });
|
|
175
78
|
};
|
|
79
|
+
O.displayName = "Masonry";
|
|
176
80
|
export {
|
|
177
|
-
|
|
81
|
+
O as Masonry,
|
|
82
|
+
O as default
|
|
178
83
|
};
|
|
179
84
|
//# sourceMappingURL=index50.js.map
|
package/dist/index50.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index50.js","sources":["../src/components/Mention.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport interface MentionOption {\n value: string\n label?: string\n avatar?: string\n disabled?: boolean\n}\n\nexport interface MentionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSelect' | 'defaultValue' | 'prefix'> {\n value?: string\n defaultValue?: string\n onChange?: (value: string) => void\n onSelect?: (option: MentionOption, prefix: string) => void\n onSearch?: (text: string, prefix: string) => void\n options?: MentionOption[]\n loading?: boolean\n prefix?: string | string[]\n split?: string\n placeholder?: string\n disabled?: boolean\n readOnly?: boolean\n rows?: number\n autoSize?: boolean | { minRows?: number; maxRows?: number }\n notFoundContent?: React.ReactNode\n filterOption?: boolean | ((input: string, option: MentionOption) => boolean)\n dropdownClassName?: string\n}\n\nexport const Mention: React.FC<MentionProps> = ({\n value,\n defaultValue = '',\n onChange,\n onSelect,\n onSearch,\n options = [],\n loading = false,\n prefix = '@',\n split = ' ',\n placeholder,\n disabled = false,\n readOnly = false,\n rows = 3,\n autoSize = false,\n notFoundContent = 'No matches found',\n filterOption = true,\n className = '',\n dropdownClassName = '',\n ...rest\n}) => {\n const [internalValue, setInternalValue] = useState(defaultValue)\n const currentValue = value !== undefined ? value : internalValue\n\n const [isOpen, setIsOpen] = useState(false)\n const [activePrefix, setActivePrefix] = useState<string | null>(null)\n const [searchText, setSearchText] = useState('')\n const [activeIndex, setActiveIndex] = useState(0)\n const [mentionStart, setMentionStart] = useState<number | null>(null)\n const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 })\n\n const textareaRef = useRef<HTMLTextAreaElement>(null)\n const dropdownRef = useRef<HTMLDivElement>(null)\n const measureRef = useRef<HTMLDivElement>(null)\n\n const prefixes = Array.isArray(prefix) ? prefix : [prefix]\n\n // Filter options based on search text\n const filteredOptions = useCallback(() => {\n if (!filterOption) return options\n\n const filterFn =\n typeof filterOption === 'function'\n ? filterOption\n : (input: string, option: MentionOption) => {\n const label = option.label || option.value\n return label.toLowerCase().includes(input.toLowerCase())\n }\n\n return options.filter((opt) => filterFn(searchText, opt))\n }, [options, searchText, filterOption])\n\n const filtered = filteredOptions()\n\n // Update textarea height for autoSize\n const updateHeight = useCallback(() => {\n const textarea = textareaRef.current\n if (!textarea || !autoSize) return\n\n textarea.style.height = 'auto'\n const scrollHeight = textarea.scrollHeight\n\n if (typeof autoSize === 'object') {\n const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20\n const minHeight = autoSize.minRows ? autoSize.minRows * lineHeight : 0\n const maxHeight = autoSize.maxRows ? autoSize.maxRows * lineHeight : Infinity\n\n textarea.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`\n } else {\n textarea.style.height = `${scrollHeight}px`\n }\n }, [autoSize])\n\n useEffect(() => {\n updateHeight()\n }, [currentValue, updateHeight])\n\n // Calculate dropdown position\n const updateDropdownPosition = useCallback(() => {\n const textarea = textareaRef.current\n const measure = measureRef.current\n if (!textarea || !measure || mentionStart === null) return\n\n // Get text before cursor to measure position\n const textBeforeCursor = currentValue.substring(0, mentionStart)\n\n // Create a temporary element to measure text position\n measure.textContent = textBeforeCursor\n\n const textareaRect = textarea.getBoundingClientRect()\n const measureRect = measure.getBoundingClientRect()\n\n // Calculate position relative to viewport\n const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20\n\n setDropdownPosition({\n top: textareaRect.top + window.scrollY + lineHeight + 4,\n left: textareaRect.left + window.scrollX + Math.min(measureRect.width % textareaRect.width, textareaRect.width - 200),\n })\n }, [currentValue, mentionStart])\n\n useEffect(() => {\n if (isOpen) {\n updateDropdownPosition()\n }\n }, [isOpen, updateDropdownPosition, searchText])\n\n // Handle text change\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value\n const cursorPos = e.target.selectionStart\n\n if (value === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n\n // Check if we should open the mention dropdown\n checkForMention(newValue, cursorPos)\n }\n\n const checkForMention = (text: string, cursorPos: number) => {\n // Look backwards from cursor for a prefix\n let foundPrefix: string | null = null\n let foundStart: number | null = null\n\n for (const p of prefixes) {\n // Find the last occurrence of prefix before cursor\n const beforeCursor = text.substring(0, cursorPos)\n const lastPrefixIndex = beforeCursor.lastIndexOf(p)\n\n if (lastPrefixIndex !== -1) {\n // Check if prefix is at start or preceded by whitespace/split\n const charBefore = lastPrefixIndex > 0 ? text[lastPrefixIndex - 1] : split\n if (charBefore === split || charBefore === '\\n' || lastPrefixIndex === 0) {\n // Check if there's no space between prefix and cursor\n const textAfterPrefix = text.substring(lastPrefixIndex + p.length, cursorPos)\n if (!textAfterPrefix.includes(split) && !textAfterPrefix.includes('\\n')) {\n foundPrefix = p\n foundStart = lastPrefixIndex\n break\n }\n }\n }\n }\n\n if (foundPrefix !== null && foundStart !== null) {\n const search = text.substring(foundStart + foundPrefix.length, cursorPos)\n setActivePrefix(foundPrefix)\n setSearchText(search)\n setMentionStart(foundStart)\n setIsOpen(true)\n setActiveIndex(0)\n onSearch?.(search, foundPrefix)\n } else {\n setIsOpen(false)\n setActivePrefix(null)\n setSearchText('')\n setMentionStart(null)\n }\n }\n\n // Handle option selection\n const selectOption = (option: MentionOption) => {\n if (option.disabled || mentionStart === null || activePrefix === null) return\n\n const textarea = textareaRef.current\n if (!textarea) return\n\n const beforeMention = currentValue.substring(0, mentionStart)\n const afterCursor = currentValue.substring(textarea.selectionStart)\n\n const mentionText = `${activePrefix}${option.value}${split}`\n const newValue = beforeMention + mentionText + afterCursor\n\n if (value === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n onSelect?.(option, activePrefix)\n\n setIsOpen(false)\n setActivePrefix(null)\n setSearchText('')\n setMentionStart(null)\n\n // Set cursor position after mention\n setTimeout(() => {\n const newCursorPos = beforeMention.length + mentionText.length\n textarea.focus()\n textarea.setSelectionRange(newCursorPos, newCursorPos)\n }, 0)\n }\n\n // Handle keyboard navigation\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (!isOpen) return\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault()\n setActiveIndex((prev) => (prev + 1) % Math.max(filtered.length, 1))\n break\n case 'ArrowUp':\n e.preventDefault()\n setActiveIndex((prev) => (prev - 1 + filtered.length) % Math.max(filtered.length, 1))\n break\n case 'Enter':\n if (filtered[activeIndex]) {\n e.preventDefault()\n selectOption(filtered[activeIndex])\n }\n break\n case 'Escape':\n e.preventDefault()\n setIsOpen(false)\n break\n case 'Tab':\n if (filtered[activeIndex]) {\n e.preventDefault()\n selectOption(filtered[activeIndex])\n }\n break\n }\n }\n\n // Close dropdown on outside click\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (\n dropdownRef.current &&\n !dropdownRef.current.contains(e.target as Node) &&\n textareaRef.current &&\n !textareaRef.current.contains(e.target as Node)\n ) {\n setIsOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }, [])\n\n // Scroll active item into view\n useEffect(() => {\n if (isOpen && dropdownRef.current) {\n const activeItem = dropdownRef.current.querySelector('[data-active=\"true\"]')\n activeItem?.scrollIntoView({ block: 'nearest' })\n }\n }, [activeIndex, isOpen])\n\n const dropdown = isOpen && (\n <div\n ref={dropdownRef}\n className={`fixed z-50 bg-base-100 border border-base-300 rounded-lg shadow-lg\n min-w-48 max-h-60 overflow-auto ${dropdownClassName}`}\n style={{\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n }}\n >\n {loading ? (\n <div className=\"p-3 text-center text-base-content/60\">\n <span className=\"loading loading-spinner loading-sm\"></span>\n </div>\n ) : filtered.length === 0 ? (\n <div className=\"p-3 text-center text-base-content/60 text-sm\">\n {notFoundContent}\n </div>\n ) : (\n <ul className=\"menu menu-sm p-1\">\n {filtered.map((option, index) => (\n <li key={option.value}>\n <button\n type=\"button\"\n data-active={index === activeIndex}\n className={`flex items-center gap-2 ${\n index === activeIndex ? 'active' : ''\n } ${option.disabled ? 'disabled opacity-50 cursor-not-allowed' : ''}`}\n onClick={() => selectOption(option)}\n onMouseEnter={() => setActiveIndex(index)}\n >\n {option.avatar && (\n <div className=\"avatar\">\n <div className=\"w-6 h-6 rounded-full\">\n <img src={option.avatar} alt=\"\" />\n </div>\n </div>\n )}\n <span>{option.label || option.value}</span>\n </button>\n </li>\n ))}\n </ul>\n )}\n </div>\n )\n\n return (\n <div className={`relative ${className}`} data-state={isOpen ? 'open' : 'closed'} {...rest}>\n {/* Hidden measure element for cursor position */}\n <div\n ref={measureRef}\n className=\"invisible absolute whitespace-pre-wrap break-words\"\n style={{\n font: textareaRef.current ? getComputedStyle(textareaRef.current).font : undefined,\n width: textareaRef.current?.clientWidth,\n padding: textareaRef.current ? getComputedStyle(textareaRef.current).padding : undefined,\n }}\n aria-hidden=\"true\"\n />\n\n <textarea\n ref={textareaRef}\n value={currentValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n rows={typeof autoSize === 'object' ? autoSize.minRows || rows : autoSize ? 1 : rows}\n className=\"textarea textarea-bordered w-full resize-none\"\n />\n\n {createPortal(dropdown, document.body)}\n </div>\n )\n}\n"],"names":["Mention","value","defaultValue","onChange","onSelect","onSearch","options","loading","prefix","split","placeholder","disabled","readOnly","rows","autoSize","notFoundContent","filterOption","className","dropdownClassName","rest","internalValue","setInternalValue","useState","currentValue","isOpen","setIsOpen","activePrefix","setActivePrefix","searchText","setSearchText","activeIndex","setActiveIndex","mentionStart","setMentionStart","dropdownPosition","setDropdownPosition","textareaRef","useRef","dropdownRef","measureRef","prefixes","filtered","useCallback","filterFn","input","option","opt","updateHeight","textarea","scrollHeight","lineHeight","minHeight","maxHeight","useEffect","updateDropdownPosition","measure","textBeforeCursor","textareaRect","measureRect","handleChange","newValue","cursorPos","checkForMention","text","foundPrefix","foundStart","p","lastPrefixIndex","charBefore","textAfterPrefix","search","selectOption","beforeMention","afterCursor","mentionText","newCursorPos","handleKeyDown","prev","handleClickOutside","e","dropdown","jsx","index","jsxs","createPortal"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index50.js","sources":["../src/components/Masonry.tsx"],"sourcesContent":["import React, { useRef, useState, useLayoutEffect, useCallback } from 'react'\n\nexport interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode\n columns?:\n | number\n | {\n xs?: number\n sm?: number\n md?: number\n lg?: number\n xl?: number\n '2xl'?: number\n }\n gap?: number\n}\n\n// Tailwind breakpoints in pixels\nconst BREAKPOINTS = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536,\n}\n\nfunction getColumnsForWidth(\n columns: MasonryProps['columns'],\n width: number\n): number {\n if (typeof columns === 'number') {\n return columns\n }\n\n if (!columns) return 3\n\n // Find the appropriate column count for current width\n // Start from largest breakpoint and work down\n if (columns['2xl'] !== undefined && width >= BREAKPOINTS['2xl']) {\n return columns['2xl']\n }\n if (columns.xl !== undefined && width >= BREAKPOINTS.xl) {\n return columns.xl\n }\n if (columns.lg !== undefined && width >= BREAKPOINTS.lg) {\n return columns.lg\n }\n if (columns.md !== undefined && width >= BREAKPOINTS.md) {\n return columns.md\n }\n if (columns.sm !== undefined && width >= BREAKPOINTS.sm) {\n return columns.sm\n }\n if (columns.xs !== undefined) {\n return columns.xs\n }\n\n // Default fallback\n return 3\n}\n\nexport const Masonry: React.FC<MasonryProps> = ({\n children,\n columns = 3,\n gap = 16,\n className = '',\n style,\n ...rest\n}) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const [positions, setPositions] = useState<\n Array<{ left: number; top: number }>\n >([])\n const [containerHeight, setContainerHeight] = useState(0)\n const itemRefs = useRef<(HTMLDivElement | null)[]>([])\n\n const childArray = React.Children.toArray(children)\n\n const calculateLayout = useCallback(() => {\n const container = containerRef.current\n if (!container || childArray.length === 0) return\n\n const containerWidth = container.offsetWidth\n // Use viewport width for responsive breakpoints (matches Tailwind behavior)\n const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : containerWidth\n const numColumns = getColumnsForWidth(columns, viewportWidth)\n const columnWidth = (containerWidth - gap * (numColumns - 1)) / numColumns\n\n // Track height of each column\n const columnHeights = new Array(numColumns).fill(0)\n const newPositions: Array<{ left: number; top: number }> = []\n\n // Place each item in the shortest column\n childArray.forEach((_, index) => {\n const itemEl = itemRefs.current[index]\n if (!itemEl) return\n\n // Find shortest column\n let shortestColumn = 0\n let minHeight = columnHeights[0]\n for (let i = 1; i < numColumns; i++) {\n if (columnHeights[i] < minHeight) {\n minHeight = columnHeights[i]\n shortestColumn = i\n }\n }\n\n // Calculate position\n const left = shortestColumn * (columnWidth + gap)\n const top = columnHeights[shortestColumn]\n\n newPositions[index] = { left, top }\n\n // Update column height\n const itemHeight = itemEl.offsetHeight\n columnHeights[shortestColumn] += itemHeight + gap\n })\n\n setPositions(newPositions)\n setContainerHeight(Math.max(...columnHeights) - gap)\n }, [children, columns, gap, childArray.length])\n\n // Calculate layout after render and on resize\n useLayoutEffect(() => {\n calculateLayout()\n\n const handleResize = () => {\n calculateLayout()\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [calculateLayout])\n\n // Recalculate when children change\n useLayoutEffect(() => {\n // Small delay to ensure refs are populated\n const timer = setTimeout(calculateLayout, 0)\n return () => clearTimeout(timer)\n }, [children, calculateLayout])\n\n const containerWidth = containerRef.current?.offsetWidth ?? 0\n const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : containerWidth\n const numColumns = getColumnsForWidth(columns, viewportWidth)\n const columnWidth =\n containerWidth > 0\n ? (containerWidth - gap * (numColumns - 1)) / numColumns\n : 0\n\n return (\n <div\n ref={containerRef}\n className={className}\n style={{\n position: 'relative',\n height: containerHeight > 0 ? containerHeight : undefined,\n ...style,\n }}\n {...rest}\n >\n {childArray.map((child, index) => (\n <div\n key={index}\n ref={(el) => {\n itemRefs.current[index] = el\n }}\n style={{\n position: positions.length > 0 ? 'absolute' : 'relative',\n left: positions[index]?.left ?? 0,\n top: positions[index]?.top ?? 0,\n width: columnWidth > 0 ? columnWidth : '100%',\n visibility: positions.length > 0 ? 'visible' : 'hidden',\n }}\n >\n {child}\n </div>\n ))}\n </div>\n )\n}\n\nMasonry.displayName = 'Masonry'\n\nexport default Masonry\n"],"names":["BREAKPOINTS","getColumnsForWidth","columns","width","Masonry","children","gap","className","style","rest","containerRef","useRef","positions","setPositions","useState","containerHeight","setContainerHeight","itemRefs","childArray","React","calculateLayout","useCallback","container","containerWidth","viewportWidth","numColumns","columnWidth","columnHeights","newPositions","index","itemEl","shortestColumn","minHeight","i","left","top","itemHeight","useLayoutEffect","handleResize","timer","jsx","child","el"],"mappings":"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"}
|