ono-react-element 0.0.10 → 0.0.12

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ONO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/es/{AutoSliderList-Dy-otnYu.js → AutoSliderList-DCpCHe1X.js}

@@ -1,16 +1,16 @@
 import { j as t } from "./dependencies-CbQbPZZ-.js";
 import { p as e } from "./utils-BxXROOPY.js";
 import { useState as i, useRef as o, useMemo as r, useEffect as n, cloneElement as s } from "react";
-import { u as l } from "./hooks-Dew3_cmY.js";
+import { useGetElementSize as l } from "./index.js";
 var a = ((t2) => (t2.Horizontal = "Horizontal", t2.Vertical = "Vertical", t2))(a || {});
-const c = ({ list: c2, style: d, disable: f, children: u, sliderBox: m, className: p, sliderStyle: h, duration: x = 300, sliderClassName: w, currentIndex: y = 0, direction: j = a.Horizontal, sliderTransitionTimingFunction: g = "ease-in-out" }) => {
-  const [z, H] = i(false), [T, $] = i(0), [v, A] = i({ t: 0, l: 0 }), [C, N] = i({ w: 0, h: 0 }), b = o(null), k = o(null), B = r(() => ["width", "height", "transform"].map((t2) => `${t2} ${x / 1e3}s ${g}`).join(","), [j, x, g]), D = r(() => ({ width: C.w, height: C.h, transition: z ? B : "initial", transform: `translate(${v.l}px, ${v.t}px)` }), [C, v]), { w: I, h: L } = l();
+const c = ({ list: c2, style: d, disable: f, children: m, sliderBox: u, className: p, sliderStyle: h, duration: x = 300, sliderClassName: w, currentIndex: y = 0, direction: j = a.Horizontal, sliderTransitionTimingFunction: g = "ease-in-out" }) => {
+  const [z, H] = i(false), [T, $] = i(0), [v, A] = i({ t: 0, l: 0 }), [C, N] = i({ w: 0, h: 0 }), b = o(null), B = o(null), k = r(() => ["width", "height", "transform"].map((t2) => `${t2} ${x / 1e3}s ${g}`).join(","), [j, x, g]), D = r(() => ({ width: C.w, height: C.h, transition: z ? k : "initial", transform: `translate(${v.l}px, ${v.t}px)` }), [C, v]), { w: I, h: L } = l();
   return n(() => {
     $(y);
   }, [y]), n(() => {
     (() => {
       if ("number" != typeof T) return;
-      if (!b.current || !k.current) return;
+      if (!b.current || !B.current) return;
       const t2 = Array.from(b.current.children).slice(1);
       t2.forEach((t3) => {
         t3.style.position = "relative", t3.style.cursor = f ? "not-allowed" : "pointer", t3.style.zIndex = "1";
@@ -18,9 +18,9 @@ const c = ({ list: c2, style: d, disable: f, children: u, sliderBox: m, classNam
       const i2 = window.getComputedStyle(b.current), o2 = { t: "Horizontal" === j ? e(i2.paddingTop) : t2[T].offsetTop, l: "Horizontal" === j ? t2[T].offsetLeft : e(i2.paddingLeft) };
       A(o2), N({ w: t2[T].offsetWidth, h: t2[T].offsetHeight }), setTimeout(() => H(true), x);
     })();
-  }, [T, I, L, f]), t.jsxs("ul", { ref: b, className: ["ono-auto-slider-list-container", p, f ? "ono-auto-slider-list-is-disable" : ""].filter(Boolean).join(" "), style: { flexDirection: "Horizontal" === j ? "row" : "column", ...d }, children: [t.jsx("li", { ref: k, className: ["ono-auto-slider-list-slider", w].filter(Boolean).join(" "), style: { ...h, ...D }, children: m }), c2.map((t2, e2) => s(u({ item: t2, index: e2, isActive: e2 === T }), { onClick: (i2) => {
+  }, [T, I, L, f]), t.jsxs("ul", { ref: b, className: ["ono-auto-slider-list-container", p, f ? "ono-auto-slider-list-is-disable" : ""].filter(Boolean).join(" "), style: { flexDirection: "Horizontal" === j ? "row" : "column", ...d }, children: [t.jsx("li", { ref: B, className: ["ono-auto-slider-list-slider", w].filter(Boolean).join(" "), style: { ...h, ...D }, children: u }), c2.map((t2, e2) => s(m({ item: t2, index: e2, isActive: e2 === T }), { onClick: (i2) => {
     if (f) return;
-    const o2 = u({ item: t2, index: e2, isActive: e2 === T }).props.onClick;
+    const o2 = m({ item: t2, index: e2, isActive: e2 === T }).props.onClick;
     o2 && o2(i2), $(e2);
   } }))] });
 };

package/dist/es/InjunctiveBox-DsntB_UW.js

@@ -0,0 +1,11 @@
+import { j as e, R as o } from "./dependencies-CbQbPZZ-.js";
+import { useEventListener as n } from "./index.js";
+let s, l = null;
+const t = ({ className: o2, content: s2, style: t2, onClick: u2, onDoubleClick: i2, onContextMenu: c, onMouseDown: r, onMouseUp: M, onMouseEnter: a, onMouseLeave: d, onMouseMove: m, isClickBoxToClose: p }) => (n("click", () => {
+  p && l && (l.remove(), l = null);
+}), e.jsx("div", { className: o2, style: t2, onClick: u2, onDoubleClick: i2, onContextMenu: c, onMouseDown: r, onMouseUp: M, onMouseEnter: a, onMouseLeave: d, onMouseMove: m, children: "function" == typeof s2 ? s2((e2) => {
+  l && (l.remove(), l = null, e2 && e2());
+}) : s2 })), u = (o2) => (i(o2.isSingle || false).render(e.jsx(t, { ...o2 })), l), i = (e2) => (e2 && l && s || (l = document.createElement("div"), document.body.appendChild(l), s = o.createRoot(l)), s);
+export {
+  u as i
+};

package/dist/es/{Input-Z3uL5-nj.js → Input-CYA8Q8B5.js}

@@ -1,15 +1,15 @@
 import { j as e } from "./dependencies-CbQbPZZ-.js";
 import { useState as o, useRef as n, useEffect as t } from "react";
-import { b as a } from "./hooks-Dew3_cmY.js";
-const s = () => e.jsx("svg", { className: "ono-input-icon", viewBox: "64 64 896 896", focusable: "false", "data-icon": "close-circle", fill: "currentColor", "aria-hidden": "true", children: e.jsx("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }) }), r = ({ open: o2 }) => e.jsx("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": o2 ? "eye" : "eye-invisible", fill: "currentColor", "aria-hidden": "true", className: "ono-input-icon", children: o2 ? e.jsx("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }) : e.jsxs(e.Fragment, { children: [e.jsx("path", { d: "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z" }), e.jsx("path", { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z" })] }) }), l = ({ id: a2, name: l2, max: i2, min: c, maxLength: d, minLength: u, type: p = "text", className: m, defaultValue: h, placeholder: x, readonly: f, autocomplete: y = "off", autofocus: g, form: b, disabled: v, clearable: C, showPassword: j, prepend: w, append: N, prefix: L, suffix: z, showCount: S, border: k = "1px solid #5644b8", boxShadow: B = "0 0 0 2px #7969d11a", value: M = "", onChange: P, onFocus: F, onBlur: E, onClear: O }) => {
-  const [q, D] = o(M), [Q, R] = o(false), [Y, V] = o(false), W = n(null), $ = C && !v && q, A = j && !v;
+import { useKeyPress as a } from "./index.js";
+const r = () => e.jsx("svg", { className: "ono-input-icon", viewBox: "64 64 896 896", focusable: "false", "data-icon": "close-circle", fill: "currentColor", "aria-hidden": "true", children: e.jsx("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }) }), s = ({ open: o2 }) => e.jsx("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": o2 ? "eye" : "eye-invisible", fill: "currentColor", "aria-hidden": "true", className: "ono-input-icon", children: o2 ? e.jsx("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }) : e.jsxs(e.Fragment, { children: [e.jsx("path", { d: "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z" }), e.jsx("path", { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z" })] }) }), l = ({ id: a2, name: l2, max: i2, min: c, maxLength: d, minLength: u, type: p = "text", className: m, defaultValue: h, placeholder: x, readonly: f, autocomplete: y = "off", autofocus: g, form: v, disabled: b, clearable: C, showPassword: j, prepend: w, append: N, prefix: L, suffix: z, showCount: S, border: B = "1px solid #5644b8", boxShadow: M = "0 0 0 2px #7969d11a", value: k = "", onChange: P, onFocus: F, onBlur: E, onClear: O }) => {
+  const [q, D] = o(k), [Q, R] = o(false), [Y, V] = o(false), W = n(null), $ = C && !b && q, A = j && !b;
   return t(() => {
-    W.current && (W.current.style.setProperty("--ono-input-border", k), W.current.style.setProperty("--ono-input-box-shadow", B));
+    W.current && (W.current.style.setProperty("--ono-input-border", B), W.current.style.setProperty("--ono-input-box-shadow", M));
   }, [W]), t(() => {
-    D(M);
-  }, [M]), e.jsxs("div", { className: ["ono-input", "ono-input-border", v ? "ono-input-is-disabled" : ""].filter(Boolean).join(" "), children: [w && e.jsx("div", { className: "ono-prepend", children: w }), e.jsxs("div", { ref: W, className: ["ono-input-wrapper", Q ? "ono-input-is-focus" : "", m].filter(Boolean).join(" "), onMouseDown: (e2) => {
+    D(k);
+  }, [k]), e.jsxs("div", { className: ["ono-input", "ono-input-border", b ? "ono-input-is-disabled" : ""].filter(Boolean).join(" "), children: [w && e.jsx("div", { className: "ono-prepend", children: w }), e.jsxs("div", { ref: W, className: ["ono-input-wrapper", Q ? "ono-input-is-focus" : "", m].filter(Boolean).join(" "), onMouseDown: (e2) => {
     "INPUT" !== e2.target.tagName && e2.preventDefault();
-  }, children: [L && e.jsx("span", { className: "ono-prefix", children: L }), e.jsx("input", { id: a2, max: i2, min: c, name: l2, maxLength: d, minLength: u, defaultValue: h, className: "ono-input-inner", type: j ? Y ? "text" : "password" : p, placeholder: x, readOnly: f, autoComplete: y, autoFocus: g, form: b, disabled: v, onFocus: (e2) => {
+  }, children: [L && e.jsx("span", { className: "ono-prefix", children: L }), e.jsx("input", { id: a2, max: i2, min: c, name: l2, maxLength: d, minLength: u, defaultValue: h, className: "ono-input-inner", type: j ? Y ? "text" : "password" : p, placeholder: x, readOnly: f, autoComplete: y, autoFocus: g, form: v, disabled: b, onFocus: (e2) => {
     F == null ? void 0 : F(e2), R(true);
   }, onBlur: (e2) => {
     E == null ? void 0 : E(e2), R(false);
@@ -17,22 +17,22 @@ const s = () => e.jsx("svg", { className: "ono-input-icon", viewBox: "64 64 896
     P == null ? void 0 : P(e2), D(e2.target.value);
   } }), (z || $ || A || S) && e.jsxs("span", { className: "ono-suffix", children: [z, $ && e.jsx("button", { className: "ono-clear-icon", onClick: () => {
     O == null ? void 0 : O(), D("");
-  }, children: e.jsx(s, {}) }), A && e.jsx("button", { className: "ono-eye-icon", onClick: () => V(!Y), children: e.jsx(r, { open: Y }) }), S && d && e.jsxs("p", { className: "ono-count", children: [q.length, "/", d] })] })] }), N && e.jsx("div", { className: "ono-append", children: N })] });
-}, i = ({ id: s2, name: r2, rows: l2, maxLength: i2, minLength: c, className: d, placeholder: u, readonly: p, resize: m = true, autocomplete: h = "off", autofocus: x, form: f, disabled: y, autoSize: g, showCount: b, border: v = "1px solid #5644b8", boxShadow: C = "0 0 0 2px #7969d11a", value: j = "", onChange: w }) => {
-  const [N, L] = o(j), [z, S] = o(false), [k, B] = o([j]), [M, P] = o(0), F = n(null), E = (e2) => {
-    const o2 = k.slice(0, M + 1);
-    o2.push(e2), B(o2), P(o2.length - 1);
+  }, children: e.jsx(r, {}) }), A && e.jsx("button", { className: "ono-eye-icon", onClick: () => V(!Y), children: e.jsx(s, { open: Y }) }), S && d && e.jsxs("p", { className: "ono-count", children: [q.length, "/", d] })] })] }), N && e.jsx("div", { className: "ono-append", children: N })] });
+}, i = ({ id: r2, name: s2, rows: l2, maxLength: i2, minLength: c, className: d, placeholder: u, readonly: p, resize: m = true, autocomplete: h = "off", autofocus: x, form: f, disabled: y, autoSize: g, showCount: v, border: b = "1px solid #5644b8", boxShadow: C = "0 0 0 2px #7969d11a", value: j = "", onChange: w }) => {
+  const [N, L] = o(j), [z, S] = o(false), [B, M] = o([j]), [k, P] = o(0), F = n(null), E = (e2) => {
+    const o2 = B.slice(0, k + 1);
+    o2.push(e2), M(o2), P(o2.length - 1);
   }, O = [{ key: "CommandOrControl+z", handler: (e2) => {
     document.activeElement === F.current && (e2.preventDefault(), (() => {
-      if (M > 0 && F.current) {
-        const e3 = M - 1, o2 = k[e3];
+      if (k > 0 && F.current) {
+        const e3 = k - 1, o2 = B[e3];
         if (F.current.value = o2, L(o2), P(e3), w) {
           const e4 = { target: F.current };
           w(e4);
         }
       }
     })());
-  }, deps: [k] }, { key: "CommandOrControl+d", handler: (e2) => {
+  }, deps: [B] }, { key: "CommandOrControl+d", handler: (e2) => {
     if (F.current && document.activeElement === F.current) {
       e2.preventDefault();
       const o2 = ((e3) => {
@@ -44,7 +44,7 @@ const s = () => e.jsx("svg", { className: "ono-input-icon", viewBox: "64 64 896
         w(e3);
       }
     }
-  }, deps: [k] }];
+  }, deps: [B] }];
   return O.forEach(({ key: e2, handler: o2, deps: n2 }) => a(e2, o2, { target: F.current, deps: n2 })), t(() => {
     L(j);
   }, [j]), t(() => {
@@ -52,27 +52,27 @@ const s = () => e.jsx("svg", { className: "ono-input-icon", viewBox: "64 64 896
       if (!F.current) return;
       const e2 = F.current;
       ((e3, o2, n2, t2, a2) => {
-        const s3 = e3.parentNode;
-        e3.style.resize = o2 ? "none" : n2 ? "vertical" : "none", s3.style.setProperty("--ono-input-border", t2), s3.style.setProperty("--ono-input-box-shadow", a2), s3.style.setProperty("--ono-input-height", "auto");
-      })(e2, g || false, m, v, C), g && ((e3, o2) => {
+        const r3 = e3.parentNode;
+        e3.style.resize = o2 ? "none" : n2 ? "vertical" : "none", r3.style.setProperty("--ono-input-border", t2), r3.style.setProperty("--ono-input-box-shadow", a2), r3.style.setProperty("--ono-input-height", "auto");
+      })(e2, g || false, m, b, C), g && ((e3, o2) => {
         const { minRows: n2 = 2, maxRows: t2 } = "object" == typeof o2 ? o2 : {}, a2 = document.createElement("div");
         a2.style.position = "absolute", a2.style.visibility = "hidden", a2.style.whiteSpace = "pre-wrap", a2.style.wordWrap = "break-word", a2.style.width = `${e3.clientWidth}px`, a2.style.font = getComputedStyle(e3).font, a2.style.padding = getComputedStyle(e3).padding, a2.style.border = getComputedStyle(e3).border, a2.style.boxSizing = "border-box", document.body.appendChild(a2);
-        const s3 = 34 * n2;
-        let r3 = s3;
+        const r3 = 34 * n2;
+        let s3 = r3;
         if (e3.value) {
           a2.textContent = e3.value;
           const o3 = a2.offsetHeight;
-          r3 = Math.max(s3, o3), t2 && r3 > 34 * t2 ? (r3 = 34 * t2, e3.style.overflowY = "auto") : e3.style.overflowY = "hidden";
+          s3 = Math.max(r3, o3), t2 && s3 > 34 * t2 ? (s3 = 34 * t2, e3.style.overflowY = "auto") : e3.style.overflowY = "hidden";
         } else e3.style.overflowY = "hidden";
-        e3.style.height = `${r3}px`, e3.style.resize = o2 ? "none" : "vertical", document.body.removeChild(a2), Math.floor(r3 / 34);
+        e3.style.height = `${s3}px`, e3.style.resize = o2 ? "none" : "vertical", document.body.removeChild(a2), Math.floor(s3 / 34);
       })(e2, g);
     })();
-  }, [F, g, N]), e.jsxs("div", { className: ["ono-textarea", y ? "ono-input-is-disabled" : ""].filter(Boolean).join(" "), children: [e.jsx("div", { className: ["ono-textarea-wrapper", z ? "none" === v ? "" : "ono-input-is-focus" : "", d].filter(Boolean).join(" "), onClick: () => {
+  }, [F, g, N]), e.jsxs("div", { className: ["ono-textarea", y ? "ono-input-is-disabled" : ""].filter(Boolean).join(" "), children: [e.jsx("div", { className: ["ono-textarea-wrapper", z ? "none" === b ? "" : "ono-input-is-focus" : "", d].filter(Boolean).join(" "), onClick: () => {
     var _a;
     return (_a = F.current) == null ? void 0 : _a.focus();
-  }, children: e.jsx("textarea", { ref: F, className: "ono-textarea-inner", id: s2, rows: l2, name: r2, maxLength: i2, minLength: c, placeholder: u, readOnly: p, autoComplete: h, autoFocus: x, form: f, disabled: y, onFocus: () => S(true), onBlur: () => S(false), value: N, onChange: (e2) => {
+  }, children: e.jsx("textarea", { ref: F, className: "ono-textarea-inner", id: r2, rows: l2, name: s2, maxLength: i2, minLength: c, placeholder: u, readOnly: p, autoComplete: h, autoFocus: x, form: f, disabled: y, onFocus: () => S(true), onBlur: () => S(false), value: N, onChange: (e2) => {
     L(e2.target.value), E(e2.target.value), w == null ? void 0 : w(e2);
-  } }) }), b && i2 && e.jsx("p", { className: "ono-count-bar", onClick: (e2) => e2.stopPropagation(), children: N.length + "/" + i2 })] });
+  } }) }), v && i2 && e.jsx("p", { className: "ono-count-bar", onClick: (e2) => e2.stopPropagation(), children: N.length + "/" + i2 })] });
 };
 export {
   l as O,

package/dist/es/{Modal-C-c_S_VM.js → Modal-D4gV43Cy.js}

@@ -4,7 +4,7 @@ import { useRef as n, useEffect as l } from "react";
 import { p as a } from "./PortalRenderer-CDAzQJgm.js";
 const t = ({ title: a2 = "This is a modal title", icon: t2, content: r2 = "This is a modal content", okText: s = "confirm", cancelText: i = "cancel", isLoading: c, confirmDisabled: d, cancelDisabled: m, position: x, onConfirm: h = () => {
 }, onCancel: b = () => {
-}, mask: f = true, maskClosable: u = false, width: j, btnClr: p, footer: C = ({ OkBtn: e2, CancelBtn: n2 }) => o.jsxs(o.Fragment, { children: [o.jsx(n2, {}), o.jsx(e2, {})] }), modalBody: v, destroy: y }) => {
+}, mask: u = true, maskClosable: f = false, width: j, btnClr: p, footer: C = ({ OkBtn: e2, CancelBtn: n2 }) => o.jsxs(o.Fragment, { children: [o.jsx(n2, {}), o.jsx(e2, {})] }), modalBody: v, destroy: y }) => {
   const g = n(null), B = n(null), w = [{ label: "themeColor", value: p || "" }, { label: "themeHoverColor", value: p && e(p, "light", 10) || "" }, { label: "themeActiveColor", value: p && e(p, "dark", 20) || "" }, { label: "themeDisabledClr", value: p && e(p, "light", 20) || "" }], N = () => {
     if (x) {
       if (!B.current) return;
@@ -13,15 +13,15 @@ const t = ({ title: a2 = "This is a modal title", icon: t2, content: r2 = "This
       }, 300);
     } else y();
   };
-  return l(() => (g.current && (f ? g.current.showModal() : g.current.show()), () => {
+  return l(() => (g.current && (u ? g.current.showModal() : g.current.show()), () => {
     g.current && g.current.close();
-  }), [g.current, f]), l(() => {
+  }), [g.current, u]), l(() => {
     (() => {
       if (!B.current) return;
       const o2 = B.current.style;
       j && o2.setProperty("--width", j + "px"), x && (o2.setProperty("--left", (x.x / window.innerWidth * 100).toFixed(2) + "%"), o2.setProperty("--top", (x.y / window.innerHeight * 100).toFixed(2) + "%")), p && w.forEach((e2) => o2.setProperty(`--${e2.label}`, e2.value));
     })();
-  }, [B]), o.jsx("dialog", { ref: g, className: "ono-modal", onClick: () => u && N(), children: v ? v(N) : o.jsxs("div", { ref: B, className: ["ono-modal-box", x ? "ono-modal-enter" : ""].join(" "), onClick: (o2) => o2.stopPropagation(), children: [o.jsxs("div", { className: "ono-modal-box-body", children: [t2 ?? o.jsx("div", { className: "ono-modal-box-body-icon", children: o.jsx("svg", { color: "#faad14", viewBox: "64 64 896 896", focusable: "false", "data-icon": "exclamation-circle", width: "22px", height: "22px", fill: "currentColor", "aria-hidden": "true", style: { marginInlineEnd: "12px" }, children: o.jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" }) }) }), o.jsxs("div", { className: "ono-modal-box-body-contentBar", children: [o.jsx("h1", { className: "ono-modal-box-body-contentBar-title", children: a2 }), o.jsx("p", { className: "ono-modal-box-body-contentBar-content", children: r2 })] })] }), C && o.jsx("div", { className: "ono-modal-box-footer", children: C({ OkBtn: () => o.jsxs("button", { className: "ono-modal-box-footer-confirmBtn", disabled: d || c, onClick: () => {
+  }, [B]), o.jsx("dialog", { ref: g, className: "ono-modal", onClick: () => f && N(), children: v ? v(N) : o.jsxs("div", { ref: B, className: ["ono-modal-box", x ? "ono-modal-enter" : ""].join(" "), onClick: (o2) => o2.stopPropagation(), children: [o.jsxs("div", { className: "ono-modal-box-body", children: [t2 ?? o.jsx("div", { className: "ono-modal-box-body-icon", children: o.jsx("svg", { color: "#faad14", viewBox: "64 64 896 896", focusable: "false", "data-icon": "exclamation-circle", width: "22px", height: "22px", fill: "currentColor", "aria-hidden": "true", style: { marginInlineEnd: "12px" }, children: o.jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" }) }) }), o.jsxs("div", { className: "ono-modal-box-body-contentBar", children: [o.jsx("h1", { className: "ono-modal-box-body-contentBar-title", children: a2 }), o.jsx("p", { className: "ono-modal-box-body-contentBar-content", children: r2 })] })] }), C && o.jsx("div", { className: "ono-modal-box-footer", children: C({ OkBtn: () => o.jsxs("button", { className: "ono-modal-box-footer-confirmBtn", disabled: d || c, onClick: () => {
     h(), N();
   }, children: [c && o.jsx("svg", { className: "ono-modal-box-footer-confirmBtn-loading", viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", fill: "currentColor", "aria-hidden": "true", children: o.jsx("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }) }), s ?? "Confirm"] }), CancelBtn: () => o.jsx("button", { className: "ono-modal-box-footer-cancelBtn", disabled: m || c, onClick: () => {
     b(), N();

package/dist/es/{Select-y-aAIqxg.js → Select-CJuIMAoG.js}

@@ -1,9 +1,9 @@
 import { j as e } from "./dependencies-CbQbPZZ-.js";
 import { useState as o, useEffect as n } from "react";
-import { T as a } from "./Tooltip-C5OFmxWo.js";
-import { O as t } from "./Input-Z3uL5-nj.js";
+import { T as a } from "./Tooltip-Dj8ZeMVG.js";
+import { O as t } from "./Input-CYA8Q8B5.js";
 import { L as l } from "./List-UAKCMuGC.js";
-const i = ({ label: o2, value: n2, disabled: a2, onChange: t2, optionRender: l2, currentValue: i2 }) => e.jsx("button", { role: "option", "aria-label": o2, disabled: a2, className: "ono-option-item", onClick: () => t2 == null ? void 0 : t2(n2), children: l2 ? l2({ label: o2, value: n2, disabled: a2 }, i2 === o2) : e.jsx("div", { className: ["ono-option-item-content", i2 === o2 ? "ono-option-item-content-active" : "", a2 ? "ono-option-item-content-disabled" : ""].filter(Boolean).join(" "), children: o2 }) }), s = ({ options: s2, defaultValue: c, placeholder: d, inputBorder: p, isShowArrow: m, disabled: u, clearable: h, selectClassName: j, optionsClassName: b, filterable: f, notFoundContent: x, optionRender: v, onClear: C, onChange: g, filterMethod: w }) => {
+const i = ({ label: o2, value: n2, disabled: a2, onChange: t2, optionRender: l2, currentValue: i2 }) => e.jsx("button", { role: "option", "aria-label": o2, disabled: a2, className: "ono-option-item", onClick: () => t2 == null ? void 0 : t2(n2), children: l2 ? l2({ label: o2, value: n2, disabled: a2 }, i2 === o2) : e.jsx("div", { className: ["ono-option-item-content", i2 === o2 ? "ono-option-item-content-active" : "", a2 ? "ono-option-item-content-disabled" : ""].filter(Boolean).join(" "), children: o2 }) }), s = ({ options: s2, defaultValue: c, placeholder: d, inputBorder: p, isShowArrow: m, disabled: u, clearable: h, selectClassName: f, optionsClassName: j, filterable: b, notFoundContent: x, optionRender: v, onClear: C, onChange: g, filterMethod: w }) => {
   const [N, L] = o(""), [B, S] = o(""), [V, k] = o(false), [M, y] = o(false), [O, R] = o(""), A = (e2) => {
     const o2 = s2.find((o3) => o3.value === e2);
     L(o2 ? o2.label : "");
@@ -12,9 +12,9 @@ const i = ({ label: o2, value: n2, disabled: a2, onChange: t2, optionRender: l2,
   };
   return n(() => {
     c && A(c);
-  }, [c, s2]), e.jsx(a, { sameWidth: true, trigger: "click", placement: "bottom", isShowArrow: m, className: ["ono-option", b].filter(Boolean).join(" "), onOpenChange: (e2) => {
-    y(e2), f && B && !e2 && S("");
-  }, content: e.jsx(l, { list: f ? w && "function" == typeof w ? w(B, s2) : s2.filter((e2) => e2.label.toLocaleLowerCase().includes(B.toLocaleLowerCase())) : s2, fallback: x ?? e.jsx("div", { className: "ono-option-item", children: e.jsx("div", { className: "ono-option-item-content-no-data", onClick: (e2) => e2.stopPropagation(), children: "No Data" }) }), children: (o2) => e.jsx(i, { ...o2, onChange: F, currentValue: N.toString(), optionRender: v }, o2.value) }), children: e.jsx("div", { className: "ono-select", onMouseEnter: () => k(true), onMouseLeave: () => k(false), children: e.jsx(t, { className: [f ? "" : "ono-select-readonly", j].filter(Boolean).join(" "), border: p, disabled: u, placeholder: f && O ? N.toString() || "" : d, readonly: !f, value: f && M ? B : N.toString(), clearable: V && h, suffix: V && h && N || h && B && f ? e.jsx(e.Fragment, {}) : e.jsx(r, { isVisible: M }), onClear: () => {
+  }, [c, s2]), e.jsx(a, { sameWidth: true, trigger: "click", placement: "bottom", isShowArrow: m, className: ["ono-option-container", j].filter(Boolean).join(" "), onOpenChange: (e2) => {
+    y(e2), b && B && !e2 && S("");
+  }, content: e.jsx(l, { list: b ? w && "function" == typeof w ? w(B, s2) : s2.filter((e2) => e2.label.toLocaleLowerCase().includes(B.toLocaleLowerCase())) : s2, fallback: x ?? e.jsx("div", { className: "ono-option-item", children: e.jsx("div", { className: "ono-option-item-content-no-data", onClick: (e2) => e2.stopPropagation(), children: "No Data" }) }), children: (o2) => e.jsx(i, { ...o2, onChange: F, currentValue: N.toString(), optionRender: v }, o2.value) }), children: e.jsx("div", { className: "ono-select", onMouseEnter: () => k(true), onMouseLeave: () => k(false), children: e.jsx(t, { className: [b ? "" : "ono-select-readonly", f].filter(Boolean).join(" "), border: p, disabled: u, placeholder: b && O ? N.toString() || "" : d, readonly: !b, value: b && M ? B : N.toString(), clearable: V && h, suffix: V && h && N || h && B && b ? e.jsx(e.Fragment, {}) : e.jsx(r, { isVisible: M }), onClear: () => {
     C == null ? void 0 : C(), g == null ? void 0 : g(""), R(""), L(""), S("");
   }, onChange: (e2) => S(e2.target.value) }) }) });
 }, r = ({ isVisible: o2 }) => e.jsx("svg", { className: ["ono-select-arrow-down-icon", o2 ? "ono-select-arrow-down-active" : ""].filter(Boolean).join(" "), viewBox: "64 64 896 896", focusable: "false", "data-icon": "down", fill: "currentColor", "aria-hidden": "true", children: e.jsx("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }) });

package/dist/es/{TemplateDialog-fX7Ie-xU.js → TemplateDialog-DKEBuvXA.js}

@@ -1,17 +1,17 @@
 import { j as e } from "./dependencies-CbQbPZZ-.js";
 import { h as t } from "./utils-BxXROOPY.js";
 import { useState as n, useRef as o, useEffect as r, useCallback as s } from "react";
-const i = ({ children: i2, animation: a, className: l, duration: c = 300, style: d, maskColor: p = "rgba(0, 0, 0, 0.5)", disableContextMenu: u, clickMaskClose: m = true, dialogClose: y }) => {
-  const [f, k] = n(false), x = o(null), h = () => {
-    if (x.current) if (k(true), a) {
-      const e2 = x.current;
+const i = ({ children: i2, animation: a, className: l, duration: c = 300, style: d, maskColor: p = "rgba(0, 0, 0, 0.5)", disableContextMenu: m, maskClickClose: u = true, dialogClose: y }) => {
+  const [f, k] = n(false), g = o(null), x = () => {
+    if (g.current) if (k(true), a) {
+      const e2 = g.current;
       e2.classList.remove(`ono-${a.type}-enter`), e2.classList.add(`ono-${a.type}-leave`), setTimeout(y, c);
     } else y();
   };
   r(() => {
     (() => {
-      if (!a || !x.current) return;
-      const e2 = x.current.parentElement.style, n2 = x.current.style;
+      if (!a || !g.current) return;
+      const e2 = g.current.parentElement.style, n2 = g.current.style;
       switch (e2.setProperty("--duration", c / 1e3 + "s"), a.type) {
         case "zoom": {
           const { x: e3, y: o2 } = t(a.element), r2 = (e3 / window.innerWidth * 100).toFixed(2) + "%", s2 = (o2 / window.innerHeight * 100).toFixed(2) + "%";
@@ -25,20 +25,20 @@ const i = ({ children: i2, animation: a, className: l, duration: c = 300, style:
         }
       }
     })();
-  }, [x, a]);
-  const v = s(() => {
+  }, [g, a]);
+  const C = s(() => {
     if (!a) return "";
     const e2 = `ono-${a.type}-enter`, t2 = `ono-${a.type}-leave`;
     return f ? t2 : e2;
   }, [a, f]);
   return e.jsx("div", { className: `
-        ono-mask
-        ono-mask-${f ? "leave" : "enter"}
-      `, style: { background: p }, onClick: () => m && h(), onContextMenu: (e2) => u && e2.preventDefault(), children: e.jsx("div", { ref: x, className: `
+        ono-dialog-mask
+        ono-dialog-mask-${f ? "leave" : "enter"}
+      `, style: { background: p }, onClick: () => u && x(), onContextMenu: (e2) => m && e2.preventDefault(), children: e.jsx("div", { ref: g, className: `
           ono-dialog
           ${l || ""} 
-          ${v()}
-        `, style: d, onClick: (e2) => e2.stopPropagation(), children: "function" == typeof i2 ? i2(h) : i2 }) });
+          ${C()}
+        `, style: d, onClick: (e2) => e2.stopPropagation(), children: "function" == typeof i2 ? i2(x) : i2 }) });
 };
 export {
   i as T

package/dist/es/{Toast-BadlA1yD.js → Toast-DHu6WOZ0.js}

@@ -1,6 +1,6 @@
 import { j as s } from "./dependencies-CbQbPZZ-.js";
 import { useEffect as e, useRef as t } from "react";
-import { i } from "./InjunctiveBox-D0V-K9Pn.js";
+import { i } from "./InjunctiveBox-DsntB_UW.js";
 const a = "_enter_3s92l_32";
 let r = [];
 const c = { success: { light: "#52c41a", dark: "#49aa19" }, error: { light: "#ff4d4f", dark: "#a61d24" }, warning: { light: "#faad14", dark: "#d89614" }, promise: { light: "", dark: "" } }, o = (s2, e2) => c[s2][e2], n = (e2) => {

package/dist/es/Tooltip-Dj8ZeMVG.js

@@ -0,0 +1,29 @@
+import { j as e } from "./dependencies-CbQbPZZ-.js";
+import { createPopper as r } from "@popperjs/core";
+import { useState as t, useRef as n, useEffect as o } from "react";
+import { useClickOutSide as c } from "./index.js";
+let s = null, l = null;
+const i = ({ children: i2, content: p, onOpenChange: u, trigger: a = "hover", placement: m = "top", popperOptions: d = {}, className: f, style: h, isShowArrow: x = true, sameWidth: w, autoAdjustOverflow: j = true }) => {
+  const [v, y] = t(false), g = n(null), b = n(null), k = (e2) => {
+    u == null ? void 0 : u(e2), y(e2);
+  };
+  return c(b, () => {
+    "click" !== a && "contextmenu" !== a || k(false);
+  }, { event: ["click", "contextmenu"], deps: [a, u] }), o(() => {
+    (() => {
+      if (!b.current) return;
+      const e2 = Array.from(b.current.children);
+      if (e2.length > 1) throw new Error("Tooltip only support one child");
+      b.current.style.width = e2[0].getBoundingClientRect().width + "px";
+    })();
+  }, [b, i2]), o(() => {
+    b.current && ("hover" === a ? (b.current.onmouseenter = () => k(true), b.current.onmouseleave = () => k(false)) : "click" === a ? b.current.onclick = () => k(!v) : "focus" === a ? (b.current.onfocus = () => k(true), b.current.onblur = () => k(false)) : b.current.oncontextmenu = () => k(!v)), v && b.current && g.current ? l = r(b.current, g.current, { placement: m, modifiers: [{ name: "offset", options: { offset: [0, 6] } }, w ? { name: "sameWidth", enabled: true, phase: "beforeWrite", requires: ["computeStyles"], fn({ state: e2 }) {
+      e2.styles.popper.width = `${e2.rects.reference.width}px`;
+    }, effect({ state: e2 }) {
+      e2.elements.popper.style.width = `${e2.elements.reference.offsetWidth}px`;
+    } } : {}, j ? { name: "flip", enabled: true } : {}], ...d }) : l && (l.destroy(), l = null, s && s.remove(), s = null);
+  }, [v, b, g]), e.jsxs(e.Fragment, { children: [v && e.jsxs("div", { ref: g, style: h, className: ["ono-tooltip-popper", f].join(" "), "data-popper-placement": d.placement || m, children: [e.jsx("div", { children: p instanceof Function ? p() : p }), x && e.jsx("div", { className: "ono-tooltip-popper-arrow", "data-popper-arrow": true })] }), e.jsx("div", { ref: b, children: i2 instanceof Function ? i2() : i2 })] });
+};
+export {
+  i as T
+};

package/dist/es/{VirtualList-BeDq637Z.js → VirtualList-BBvdkGKk.js}

@@ -1,11 +1,11 @@
 import { j as e } from "./dependencies-CbQbPZZ-.js";
 import { memo as t, useState as r, useMemo as i, useRef as n, useEffect as l } from "react";
-import { a } from "./hooks-Dew3_cmY.js";
-const s = t(({ containerClassName: t2, dataSource: s2, containerStyle: d2 = {}, onEndCallback: c, refreshSpeed: o = 50, wrapperClassName: h, wrapperStyle: u = {}, estimatedSize: p = 35, updateDataSourceScroll2Top: f, direction: g = "vertical" }) => {
-  const [v, S] = r({ viewSize: 0, startIndex: 0, listSize: 0, renderCount: 0, prevLen: 0 }), [x, m] = r([]), z = "number" == typeof p ? p : p(), w = i(() => Math.min(s2.length, v.startIndex + v.renderCount), [s2, v]), I = i(() => {
+import { useEventListener as a } from "./index.js";
+const d = t(({ containerClassName: t2, dataSource: d2, containerStyle: s2 = {}, onEndCallback: c, refreshSpeed: o = 50, wrapperClassName: h, wrapperStyle: u = {}, estimatedSize: p = 35, updateDataSourceScroll2Top: f, direction: g = "vertical" }) => {
+  const [v, x] = r({ viewSize: 0, startIndex: 0, listSize: 0, renderCount: 0, prevLen: 0 }), [S, m] = r([]), z = "number" == typeof p ? p : p(), w = i(() => Math.min(d2.length, v.startIndex + v.renderCount), [d2, v]), I = i(() => {
     var _a;
-    return v.startIndex > 0 ? (_a = x[v.startIndex - 1]) == null ? void 0 : _a.end : 0;
-  }, [v.startIndex, x]), y = i(() => s2.slice(v.startIndex, w).map(({ id: t3, data: r2 }) => e.jsx("li", { "data-virtual-id": t3, style: "vertical" === g ? { width: "100%" } : { height: "100%" }, children: r2 }, t3)), [w, s2, v.startIndex, g]), C = i(() => ({ display: "flex", listStyle: "none", flexDirection: "vertical" === g ? "column" : "row", height: "vertical" === g ? v.listSize - I + "px" : "100%", width: "vertical" === g ? "auto" : v.listSize - I + "px", transform: "vertical" === g ? `translate3d(0, ${I}px, 0)` : `translate3d(${I}px, 0, 0)` }), [v.listSize, I, g]), j = n(null), L = n(null), N = (e2) => S((t3) => ({ ...t3, ...e2 })), b = /* @__PURE__ */ ((e2, t3 = 300) => {
+    return v.startIndex > 0 ? (_a = S[v.startIndex - 1]) == null ? void 0 : _a.end : 0;
+  }, [v.startIndex, S]), y = i(() => d2.slice(v.startIndex, w).map(({ id: t3, data: r2 }) => e.jsx("li", { "data-virtual-id": t3, style: "vertical" === g ? { width: "100%" } : { height: "100%" }, children: r2 }, t3)), [w, d2, v.startIndex, g]), C = i(() => ({ display: "flex", listStyle: "none", flexDirection: "vertical" === g ? "column" : "row", height: "vertical" === g ? v.listSize - I + "px" : "100%", width: "vertical" === g ? "auto" : v.listSize - I + "px", transform: "vertical" === g ? `translate3d(0, ${I}px, 0)` : `translate3d(${I}px, 0, 0)` }), [v.listSize, I, g]), j = n(null), L = n(null), N = (e2) => x((t3) => ({ ...t3, ...e2 })), b = /* @__PURE__ */ ((e2, t3 = 300) => {
     let r2 = 0;
     return () => {
       const i2 = Date.now();
@@ -13,7 +13,7 @@ const s = t(({ containerClassName: t2, dataSource: s2, containerStyle: d2 = {},
     };
   })(() => {
     const { scrollTop: e2, clientHeight: t3, scrollHeight: r2, scrollLeft: i2, clientWidth: n2, scrollWidth: l2 } = j.current, a2 = "vertical" === g ? r2 - t3 - e2 : l2 - n2 - i2;
-    N({ startIndex: A(x, "vertical" === g ? e2 : i2) }), ("vertical" === g ? e2 === z / 2 : i2 === z / 2) && N({ startIndex: 0 }), a2 <= 20 && c && c();
+    N({ startIndex: A(S, "vertical" === g ? e2 : i2) }), ("vertical" === g ? e2 === z / 2 : i2 === z / 2) && N({ startIndex: 0 }), a2 <= 20 && c && c();
   }, o), A = (e2, t3) => {
     let r2 = 0, i2 = e2.length - 1, n2 = -1;
     for (; r2 <= i2; ) {
@@ -23,43 +23,43 @@ const s = t(({ containerClassName: t2, dataSource: s2, containerStyle: d2 = {},
     }
     return n2;
   };
-  return a("scroll", b, { target: j.current, deps: [x, g] }), l(() => {
+  return a("scroll", b, { target: j.current, deps: [S, g] }), l(() => {
     (() => {
       if (!j.current) return;
       const e2 = ("vertical" === g ? j.current.offsetHeight : j.current.offsetWidth) || 0;
       N({ viewSize: e2, renderCount: Math.ceil(e2 / z) + 1 });
     })();
   }, [j, g]), l(() => {
-    s2.length && L && (() => {
+    d2.length && L && (() => {
       var _a;
-      const e2 = [], t3 = s2.length - v.prevLen, r2 = t3 > 0 ? x.length : 0, i2 = r2 > 0 ? x[r2 - 1].end : 0;
-      for (let r3 = 0; r3 < (t3 > 0 ? t3 : s2.length); r3++) {
-        const n2 = s2[(t3 > 0 ? v.prevLen : 0) + r3];
+      const e2 = [], t3 = d2.length - v.prevLen, r2 = t3 > 0 ? S.length : 0, i2 = r2 > 0 ? S[r2 - 1].end : 0;
+      for (let r3 = 0; r3 < (t3 > 0 ? t3 : d2.length); r3++) {
+        const n2 = d2[(t3 > 0 ? v.prevLen : 0) + r3];
         e2.push({ index: n2.id, size: z, start: i2 ? i2 + r3 * z : n2.id * z, end: i2 ? i2 + (r3 + 1) * z : (n2.id + 1) * z, dSize: 0 });
       }
-      m((r3) => [...t3 > 0 ? r3 : [], ...e2]), N({ prevLen: s2.length }), f && ((_a = j.current) == null ? void 0 : _a.scrollTo(0, 0));
+      m((r3) => [...t3 > 0 ? r3 : [], ...e2]), N({ prevLen: d2.length }), f && ((_a = j.current) == null ? void 0 : _a.scrollTo(0, 0));
     })();
-  }, [L, s2, f]), l(() => {
+  }, [L, d2, f]), l(() => {
     (() => {
-      if (!L.current || 0 === x.length) return;
+      if (!L.current || 0 === S.length) return;
       const e2 = Array.from(L.current.childNodes);
       if (!e2.length) return;
       e2.forEach((e3) => {
-        const t4 = e3.getBoundingClientRect(), r3 = +e3.getAttribute("data-virtual-id"), i3 = x[r3], n2 = i3.size - ("vertical" === g ? t4.height : t4.width);
+        const t4 = e3.getBoundingClientRect(), r3 = +e3.getAttribute("data-virtual-id"), i3 = S[r3], n2 = i3.size - ("vertical" === g ? t4.height : t4.width);
         n2 && (i3.size = "vertical" === g ? t4.height : t4.width, i3.end = i3.end - n2, i3.dSize = n2);
       });
-      const t3 = +e2[0].getAttribute("data-virtual-id"), r2 = x.length;
-      let i2 = x[t3].dSize;
-      x[t3].dSize = 0;
+      const t3 = +e2[0].getAttribute("data-virtual-id"), r2 = S.length;
+      let i2 = S[t3].dSize;
+      S[t3].dSize = 0;
       for (let e3 = t3 + 1; e3 < r2; e3++) {
-        const t4 = x[e3];
-        t4.start = x[e3 - 1].end, t4.end = t4.end - i2, t4.dSize && (i2 += t4.dSize, t4.dSize = 0);
+        const t4 = S[e3];
+        t4.start = S[e3 - 1].end, t4.end = t4.end - i2, t4.dSize && (i2 += t4.dSize, t4.dSize = 0);
       }
-      N({ listSize: x[r2 - 1].end });
+      N({ listSize: S[r2 - 1].end });
     })();
-  }, [L, x, v.startIndex, g]), e.jsx("div", { ref: j, className: t2, style: { width: "100%", height: "100%", overflow: "auto", ...d2 }, children: e.jsx("ul", { ref: L, className: h, style: { ...C, ...u }, children: y }) });
-}), d = (e2, t2) => e2.map((e3, r2) => ({ id: r2, data: t2(e3, r2) }));
+  }, [L, S, v.startIndex, g]), e.jsx("div", { ref: j, className: t2, style: { width: "100%", height: "100%", overflow: "auto", ...s2 }, children: e.jsx("ul", { ref: L, className: h, style: { ...C, ...u }, children: y }) });
+}), s = (e2, t2) => e2.map((e3, r2) => ({ id: r2, data: t2(e3, r2) }));
 export {
-  s as E,
-  d as c
+  d as E,
+  s as c
 };

package/dist/es/{Waterfall-a_c3urjB.js → Waterfall-Ce9ZeKxm.js}

@@ -1,6 +1,6 @@
 import { j as e } from "./dependencies-CbQbPZZ-.js";
 import { useState as t, useRef as a, useCallback as i, useEffect as n } from "react";
-import { a as o } from "./hooks-Dew3_cmY.js";
+import { useEventListener as o } from "./index.js";
 const r = ({ options: r2, pageSize: l, children: s, request: d, reloadData: c, className: m, style: g, updateData: p, loading: h = true, bottomThreshold: u = 50 }) => {
   const [f, x] = t({ page: 1, reloadData: c, loading: false, isFinish: false, gap: "number" == typeof r2 ? 0 : r2.gap, imageWidth: "number" == typeof r2 ? r2 : 0, columns: "number" == typeof r2 ? 0 : r2.columns, imageList: [] }), [y, w] = t([]), [W, b] = t([]), j = a(null), v = a(null), D = a(null), L = (e2) => x((t2) => ({ ...t2, ...e2 })), N = async (e2, t2) => {
     const a2 = c && f.reloadData !== c;