dishui 0.0.65 → 0.0.66

package/dist/components/Select/index.js

@@ -1,264 +1,261 @@
-import { useClickOutside as K } from "../../hooks/useClickOutside.js";
-import { useCallback as L, useEffect as p, useRef as v, useState as w } from "react";
-import { jsx as o, jsxs as P } from "react/jsx-runtime";
-import { createPortal as U } from "react-dom";
-var Y = ({ isOpen: r }) => /* @__PURE__ */ o("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  style: {
-    display: "block",
-    width: 16,
-    height: 16,
-    transform: r ? "rotate(180deg)" : "rotate(0deg)",
-    transition: "transform 200ms ease-in-out"
-  },
-  children: /* @__PURE__ */ o("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M19 9l-7 7-7-7"
-  })
-}), X = () => /* @__PURE__ */ o("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  className: "h-3 w-3",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  strokeWidth: 3,
-  children: /* @__PURE__ */ o("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M6 18L18 6M6 6l12 12"
-  })
-}), Z = ({ options: r, value: i, onChange: x, placeholder: R = "Select...", multiple: l = !1, fixedHeight: D = !1, style: O, className: $ }) => {
-  const [a, u] = w(!1), [c, b] = w(-1), [y, N] = w(""), [A, j] = w(!0), [M, S] = w({}), h = v(null), k = v(null), m = v(null), g = v(null);
-  p(() => {
-    if (!a) return;
-    const e = (n) => {
-      const t = n.target;
-      h.current?.contains(t) || m.current?.contains(t) || u(!1);
-    };
-    return document.addEventListener("pointerdown", e), document.addEventListener("mousedown", e), () => {
-      document.removeEventListener("pointerdown", e), document.removeEventListener("mousedown", e);
-    };
-  }, [a]);
-  const d = Array.isArray(i) ? i : i != null ? [i] : [];
-  K(h, L(() => u(!1), []));
-  const f = L(() => {
-    const e = h.current;
-    if (!e) return;
-    const n = e.getBoundingClientRect(), t = Math.min(r.length, 8) * 36 + 8, s = n.bottom + 4 + t <= window.innerHeight;
-    S({
-      position: "fixed",
-      left: n.left,
-      top: s ? n.bottom + 4 : Math.max(8, n.top - t - 4),
-      width: n.width,
-      zIndex: 1e4
-    });
-  }, [r.length]);
-  p(() => {
-    if (a)
-      return f(), window.addEventListener("resize", f), window.addEventListener("scroll", f, !0), () => {
-        window.removeEventListener("resize", f), window.removeEventListener("scroll", f, !0);
-      };
-  }, [a, f]), p(() => {
-    const e = h.current;
-    if (!e) return;
-    const n = () => j(e.clientWidth >= 88);
-    n();
-    const t = new ResizeObserver(n);
-    return t.observe(e), () => t.disconnect();
-  }, []), p(() => {
-    if (!a) return;
-    const e = (n) => {
-      switch (n.key) {
-        case "ArrowDown":
-          n.preventDefault(), b((t) => t < r.length - 1 ? t + 1 : 0), C();
-          break;
-        case "ArrowUp":
-          n.preventDefault(), b((t) => t > 0 ? t - 1 : r.length - 1), C();
-          break;
-        case "Enter":
-        case " ":
-          n.preventDefault(), c >= 0 && c < r.length && E(r[c]), l || u(!1);
-          break;
-        case "Escape":
-          u(!1);
-      }
-    };
-    return document.addEventListener("keydown", e), () => {
-      document.removeEventListener("keydown", e);
-    };
-  }, [
-    a,
-    c,
-    r,
-    l
-  ]);
-  const C = L(() => {
-    if (m.current && c >= 0) {
-      const e = m.current, n = e.children[c];
-      if (n) {
-        const t = e.getBoundingClientRect(), s = n.getBoundingClientRect();
-        s.bottom > t.bottom ? e.scrollTop += s.bottom - t.bottom : s.top < t.top && (e.scrollTop -= t.top - s.top);
-      }
-    }
-  }, [c]), I = () => {
-    const e = !a;
-    u(e), b(e ? 0 : -1), e && f();
-  }, E = (e) => {
-    if (l) {
-      const n = Array.isArray(i) ? i : [];
-      let t;
-      n.includes(e.value) ? t = n.filter((s) => s !== e.value) : t = [...n, e.value], x(t);
-    } else
-      x(e.value), u(!1);
-  }, T = (e, n) => {
-    if (e.pointerType === "mouse") {
-      e.preventDefault(), e.stopPropagation(), E(n);
-      return;
-    }
-    e.stopPropagation(), g.current = {
-      pointerId: e.pointerId,
-      x: e.clientX,
-      y: e.clientY
-    };
-  }, B = (e, n) => {
-    const t = g.current;
-    g.current = null, !(!t || e.pointerId !== t.pointerId) && Math.hypot(e.clientX - t.x, e.clientY - t.y) < 10 && (e.stopPropagation(), E(n));
-  }, W = () => {
-    g.current = null;
-  }, z = (e, n) => {
-    e.stopPropagation(), x((Array.isArray(i) ? i : []).filter((t) => t !== n));
-  };
-  p(() => {
-    if (l && k.current) {
-      const e = k.current, n = r.filter((s) => d.includes(s.value)).map((s) => s.label).join(", "), t = e.scrollWidth > e.clientWidth;
-      N(t ? n : "");
-    } else N("");
-  }, [
-    i,
-    l,
-    r,
-    d
-  ]);
-  const V = () => {
-    if (d.length === 0) return /* @__PURE__ */ o("span", {
-      className: "text-base-content/60 italic",
-      children: R
-    });
-    const e = r.filter((n) => d.includes(n.value));
-    if (l) {
-      const n = D;
-      return /* @__PURE__ */ o("div", {
-        ref: k,
-        className: `
+import { useClickOutside as e } from "../../hooks/useClickOutside.js";
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
+//#region src/components/Select/index.tsx
+var c = ({ isOpen: e }) => /* @__PURE__ */ a("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	style: {
+		display: "block",
+		width: 16,
+		height: 16,
+		transform: e ? "rotate(180deg)" : "rotate(0deg)",
+		transition: "transform 200ms ease-in-out"
+	},
+	children: /* @__PURE__ */ a("path", {
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M19 9l-7 7-7-7"
+	})
+}), l = () => /* @__PURE__ */ a("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	className: "h-3 w-3",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	strokeWidth: 3,
+	children: /* @__PURE__ */ a("path", {
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M6 18L18 6M6 6l12 12"
+	})
+}), u = ({ options: u, value: d, onChange: f, placeholder: p = "Select...", multiple: m = !1, fixedHeight: h = !1, style: g, className: _ }) => {
+	let [v, y] = i(!1), [b, x] = i(-1), [S, C] = i(""), [w, T] = i(!0), [E, D] = i({}), O = r(null), k = r(null), A = r(null), j = r(null);
+	n(() => {
+		if (!v) return;
+		let e = (e) => {
+			let t = e.target;
+			O.current?.contains(t) || A.current?.contains(t) || y(!1);
+		};
+		return document.addEventListener("pointerdown", e), document.addEventListener("mousedown", e), () => {
+			document.removeEventListener("pointerdown", e), document.removeEventListener("mousedown", e);
+		};
+	}, [v]);
+	let M = Array.isArray(d) ? d : d == null ? [] : [d];
+	e(O, t(() => y(!1), []));
+	let N = t(() => {
+		let e = O.current;
+		if (!e) return;
+		let t = e.getBoundingClientRect(), n = Math.min(u.length, 8) * 36 + 8, r = t.bottom + 4 + n <= window.innerHeight;
+		D({
+			position: "fixed",
+			left: t.left,
+			top: r ? t.bottom + 4 : Math.max(8, t.top - n - 4),
+			width: t.width,
+			zIndex: 1e4
+		});
+	}, [u.length]);
+	n(() => {
+		if (v) return N(), window.addEventListener("resize", N), window.addEventListener("scroll", N, !0), () => {
+			window.removeEventListener("resize", N), window.removeEventListener("scroll", N, !0);
+		};
+	}, [v, N]), n(() => {
+		let e = O.current;
+		if (!e) return;
+		let t = () => T(e.clientWidth >= 88);
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []), n(() => {
+		if (!v) return;
+		let e = (e) => {
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), x((e) => e < u.length - 1 ? e + 1 : 0), P();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), x((e) => e > 0 ? e - 1 : u.length - 1), P();
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault(), b >= 0 && b < u.length && I(u[b]), m || y(!1);
+					break;
+				case "Escape": y(!1);
+			}
+		};
+		return document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [
+		v,
+		b,
+		u,
+		m
+	]);
+	let P = t(() => {
+		if (A.current && b >= 0) {
+			let e = A.current, t = e.children[b];
+			if (t) {
+				let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+				r.bottom > n.bottom ? e.scrollTop += r.bottom - n.bottom : r.top < n.top && (e.scrollTop -= n.top - r.top);
+			}
+		}
+	}, [b]), F = () => {
+		let e = !v;
+		y(e), x(e ? 0 : -1), e && N();
+	}, I = (e) => {
+		if (m) {
+			let t = Array.isArray(d) ? d : [], n;
+			n = t.includes(e.value) ? t.filter((t) => t !== e.value) : [...t, e.value], f(n);
+		} else f(e.value), y(!1);
+	}, L = (e, t) => {
+		if (e.pointerType === "mouse") {
+			e.preventDefault(), e.stopPropagation(), I(t);
+			return;
+		}
+		e.stopPropagation(), j.current = {
+			pointerId: e.pointerId,
+			x: e.clientX,
+			y: e.clientY
+		};
+	}, R = (e, t) => {
+		let n = j.current;
+		j.current = null, n && e.pointerId === n.pointerId && Math.hypot(e.clientX - n.x, e.clientY - n.y) < 10 && (e.stopPropagation(), I(t));
+	}, z = () => {
+		j.current = null;
+	}, B = (e, t) => {
+		e.stopPropagation(), f((Array.isArray(d) ? d : []).filter((e) => e !== t));
+	};
+	n(() => {
+		if (m && k.current) {
+			let e = k.current, t = u.filter((e) => M.includes(e.value)).map((e) => e.label).join(", "), n = e.scrollWidth > e.clientWidth;
+			C(n ? t : "");
+		} else C("");
+	}, [
+		d,
+		m,
+		u,
+		M
+	]);
+	let V = () => {
+		if (M.length === 0) return /* @__PURE__ */ a("span", {
+			className: "text-base-content/60 italic",
+			children: p
+		});
+		let e = u.filter((e) => M.includes(e.value));
+		if (m) {
+			let t = h;
+			return /* @__PURE__ */ a("div", {
+				ref: k,
+				className: `
         flex gap-1 
-        ${n ? "flex-nowrap overflow-x-auto overflow-y-hidden" : "flex-wrap overflow-hidden"} // Enable horizontal scroll, hide vertical scrollbar if any
-        ${y ? "tooltip tooltip-bottom" : ""} // Keep tooltip for overflow
+        ${t ? "flex-nowrap overflow-x-auto overflow-y-hidden" : "flex-wrap overflow-hidden"} // Enable horizontal scroll, hide vertical scrollbar if any
+        ${S ? "tooltip tooltip-bottom" : ""} // Keep tooltip for overflow
       `,
-        "data-tip": y || void 0,
-        style: {
-          scrollbarWidth: "thin",
-          ...n ? { paddingRight: "1.75rem" } : {}
-        },
-        children: e.map((t) => /* @__PURE__ */ P("span", {
-          className: "badge badge-ghost gap-1 text-xs items-center whitespace-nowrap flex-shrink-0",
-          children: [t.label, /* @__PURE__ */ o("button", {
-            type: "button",
-            onClick: (s) => z(s, t.value),
-            className: "btn btn-xs btn-ghost btn-circle p-0 m-0 hover:bg-error hover:text-error-content",
-            "aria-label": `Remove ${t.label}`,
-            children: /* @__PURE__ */ o(X, {})
-          })]
-        }, t.value))
-      });
-    } else {
-      const n = r.find((t) => t.value === d[0]);
-      return n ? /* @__PURE__ */ o("span", {
-        className: "truncate",
-        children: n.label
-      }) : /* @__PURE__ */ o("span", {
-        className: "text-base-content/60 italic",
-        children: R
-      });
-    }
-  }, H = `
+				"data-tip": S || void 0,
+				style: {
+					scrollbarWidth: "thin",
+					...t ? { paddingRight: "1.75rem" } : {}
+				},
+				children: e.map((e) => /* @__PURE__ */ o("span", {
+					className: "badge badge-ghost gap-1 text-xs items-center whitespace-nowrap flex-shrink-0",
+					children: [e.label, /* @__PURE__ */ a("button", {
+						type: "button",
+						onClick: (t) => B(t, e.value),
+						className: "btn btn-xs btn-ghost btn-circle p-0 m-0 hover:bg-error hover:text-error-content",
+						"aria-label": `Remove ${e.label}`,
+						children: /* @__PURE__ */ a(l, {})
+					})]
+				}, e.value))
+			});
+		}
+		{
+			let e = u.find((e) => e.value === M[0]);
+			return e ? /* @__PURE__ */ a("span", {
+				className: "truncate",
+				children: e.label
+			}) : /* @__PURE__ */ a("span", {
+				className: "text-base-content/60 italic",
+				children: p
+			});
+		}
+	}, H = `
     relative border border-base-300 rounded-lg bg-base-100 w-full
     flex justify-between items-center cursor-pointer px-3 text-sm
     focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50
     hover:border-base-content/30
-    ${l ? D ? "h-8" : "min-h-8 h-auto py-1" : "h-8"}
+    ${m ? h ? "h-8" : "min-h-8 h-auto py-1" : "h-8"}
   `;
-  return /* @__PURE__ */ P("div", {
-    ref: h,
-    style: O,
-    className: `relative w-full font-sans select-none ${$ || ""}`,
-    children: [/* @__PURE__ */ P("div", {
-      tabIndex: 0,
-      className: H,
-      onClick: I,
-      onKeyDown: (e) => {
-        (e.key === "Enter" || e.key === " ") && I();
-      },
-      role: "combobox",
-      "aria-haspopup": "listbox",
-      "aria-expanded": a,
-      children: [/* @__PURE__ */ o("div", {
-        className: "flex-1 min-w-0 overflow-hidden",
-        style: { paddingRight: A ? 28 : 0 },
-        children: V()
-      }), A && /* @__PURE__ */ o("div", {
-        "aria-hidden": "true",
-        style: {
-          position: "absolute",
-          right: 10,
-          top: "50%",
-          transform: "translateY(-50%)",
-          pointerEvents: "none",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: 16,
-          height: 16
-        },
-        children: /* @__PURE__ */ o(Y, { isOpen: a })
-      })]
-    }), a && typeof document < "u" && U(/* @__PURE__ */ o("ul", {
-      ref: m,
-      className: "bg-base-100 border border-base-300 rounded-md shadow-lg list-none p-0 m-0 max-h-60 overflow-y-auto focus:outline-none",
-      style: {
-        ...M,
-        touchAction: "pan-y"
-      },
-      onPointerDown: (e) => e.stopPropagation(),
-      role: "listbox",
-      "aria-activedescendant": c >= 0 ? `option-${r[c]?.value}` : void 0,
-      tabIndex: -1,
-      children: r.length > 0 ? r.map((e, n) => /* @__PURE__ */ o("li", {
-        id: `option-${e.value}`,
-        className: `p-2 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis hover:bg-base-200 ${n === c ? "bg-base-300" : ""} ${d.includes(e.value) && !l ? "font-semibold bg-base-200" : ""} ${d.includes(e.value) && l ? "font-semibold" : ""}`,
-        onPointerDown: (t) => T(t, e),
-        onPointerUp: (t) => B(t, e),
-        onPointerCancel: W,
-        onClick: (t) => {
-          t.preventDefault(), t.stopPropagation();
-        },
-        onMouseEnter: () => b(n),
-        role: "option",
-        "aria-selected": d.includes(e.value),
-        children: e.label
-      }, e.value)) : /* @__PURE__ */ o("li", {
-        className: "p-2 text-base-content/60 italic",
-        children: "No options available"
-      })
-    }), document.body)]
-  });
-};
-export {
-  Z as default
+	return /* @__PURE__ */ o("div", {
+		ref: O,
+		style: g,
+		className: `relative w-full font-sans select-none ${_ || ""}`,
+		children: [/* @__PURE__ */ o("div", {
+			tabIndex: 0,
+			className: H,
+			onClick: F,
+			onKeyDown: (e) => {
+				(e.key === "Enter" || e.key === " ") && F();
+			},
+			role: "combobox",
+			"aria-haspopup": "listbox",
+			"aria-expanded": v,
+			children: [/* @__PURE__ */ a("div", {
+				className: "flex-1 min-w-0 overflow-hidden",
+				style: { paddingRight: w ? 28 : 0 },
+				children: V()
+			}), w && /* @__PURE__ */ a("div", {
+				"aria-hidden": "true",
+				style: {
+					position: "absolute",
+					right: 10,
+					top: "50%",
+					transform: "translateY(-50%)",
+					pointerEvents: "none",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: 16,
+					height: 16
+				},
+				children: /* @__PURE__ */ a(c, { isOpen: v })
+			})]
+		}), v && typeof document < "u" && s(/* @__PURE__ */ a("ul", {
+			ref: A,
+			className: "bg-base-100 border border-base-300 rounded-md shadow-lg list-none p-0 m-0 max-h-60 overflow-y-auto focus:outline-none",
+			style: {
+				...E,
+				touchAction: "pan-y"
+			},
+			onPointerDown: (e) => e.stopPropagation(),
+			role: "listbox",
+			"aria-activedescendant": b >= 0 ? `option-${u[b]?.value}` : void 0,
+			tabIndex: -1,
+			children: u.length > 0 ? u.map((e, t) => /* @__PURE__ */ a("li", {
+				id: `option-${e.value}`,
+				className: `p-2 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis hover:bg-base-200 ${t === b ? "bg-base-300" : ""} ${M.includes(e.value) && !m ? "font-semibold bg-base-200" : ""} ${M.includes(e.value) && m ? "font-semibold" : ""}`,
+				onPointerDown: (t) => L(t, e),
+				onPointerUp: (t) => R(t, e),
+				onPointerCancel: z,
+				onClick: (e) => {
+					e.preventDefault(), e.stopPropagation();
+				},
+				onMouseEnter: () => x(t),
+				role: "option",
+				"aria-selected": M.includes(e.value),
+				children: e.label
+			}, e.value)) : /* @__PURE__ */ a("li", {
+				className: "p-2 text-base-content/60 italic",
+				children: "No options available"
+			})
+		}), document.body)]
+	});
 };
+//#endregion
+export { u as default };
 
 //# sourceMappingURL=index.js.map