dishui 0.0.84 → 0.0.91

package/dist/components/Select/index.js

@@ -1,9 +1,8 @@
-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";
+import { useCallback as e, useEffect as t, useId as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createPortal as c } from "react-dom";
 //#region src/components/Select/index.tsx
-var c = ({ isOpen: e }) => /* @__PURE__ */ a("svg", {
+var l = ({ isOpen: e }) => /* @__PURE__ */ o("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	fill: "none",
 	viewBox: "0 0 24 24",
@@ -16,200 +15,225 @@ var c = ({ isOpen: e }) => /* @__PURE__ */ a("svg", {
 		transform: e ? "rotate(180deg)" : "rotate(0deg)",
 		transition: "transform 200ms ease-in-out"
 	},
-	children: /* @__PURE__ */ a("path", {
+	children: /* @__PURE__ */ o("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		d: "M19 9l-7 7-7-7"
 	})
-}), l = () => /* @__PURE__ */ a("svg", {
+}), u = () => /* @__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__ */ a("path", {
+	children: /* @__PURE__ */ o("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		d: "M6 18L18 6M6 6l12 12"
 	})
-}), u = ({ options: u, value: d, onChange: f, "aria-label": p, placeholder: m = "Select...", multiple: h = !1, fixedHeight: g = !1, style: _, className: v }) => {
-	let [y, b] = i(!1), [x, S] = i(-1), [C, w] = i(""), [T, E] = i(!0), [D, O] = i({}), k = r(null), A = r(null), j = r(null), M = r(null);
-	n(() => {
-		if (!y) return;
+}), d = ({ options: d, value: f, onChange: p, "aria-label": m, "aria-labelledby": h, "aria-describedby": g, id: _, disabled: v = !1, placeholder: y = "Select...", multiple: b = !1, fixedHeight: x = !1, style: S, className: C }) => {
+	let w = n(), T = _ ?? `select-${w}`, E = `${T}-listbox`, D = (e) => `${E}-${typeof e.value}-${encodeURIComponent(String(e.value))}`, [O, k] = a(!1), A = O && !v;
+	v && O && k(!1);
+	let [j, M] = a(null), [N, P] = a(""), [F, I] = a(!0), [L, R] = a({}), z = i(null), B = i(null), V = i(null), H = i(null), U = i(null), W = i(!1);
+	t(() => {
+		if (!A) return;
 		let e = (e) => {
 			let t = e.target;
-			k.current?.contains(t) || j.current?.contains(t) || b(!1);
+			z.current?.contains(t) || H.current?.contains(t) || k(!1);
 		};
-		return document.addEventListener("pointerdown", e), document.addEventListener("mousedown", e), () => {
-			document.removeEventListener("pointerdown", e), document.removeEventListener("mousedown", e);
+		return document.addEventListener("pointerdown", e), () => {
+			document.removeEventListener("pointerdown", e);
 		};
-	}, [y]);
-	let N = Array.isArray(d) ? d : d == null ? [] : [d];
-	e(k, t(() => b(!1), []));
-	let P = t(() => {
-		let e = k.current;
+	}, [A]);
+	let G = r(() => Array.isArray(f) ? f : f == null ? [] : [f], [f]), K = d.flatMap((e, t) => e.disabled ? [] : [t]), q = d.findIndex((e) => !e.disabled && G.includes(e.value)), J = d.findIndex((e) => !e.disabled && e.value === j), Y = J >= 0 ? J : q >= 0 ? q : K[0] ?? -1, X = (e) => {
+		let t = e.relatedTarget;
+		(!t || !z.current?.contains(t) && !H.current?.contains(t)) && k(!1);
+	}, Z = e(() => {
+		let e = z.current;
 		if (!e) return;
-		let t = e.getBoundingClientRect(), n = Math.min(u.length, 8) * 36 + 8, r = t.bottom + 4 + n <= window.innerHeight;
-		O({
+		let t = e.getBoundingClientRect(), n = Math.min(d.length, 8) * 36 + 8, r = t.bottom + 4 + n <= window.innerHeight;
+		R({
 			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 (y) return P(), window.addEventListener("resize", P), window.addEventListener("scroll", P, !0), () => {
-			window.removeEventListener("resize", P), window.removeEventListener("scroll", P, !0);
+	}, [d.length]);
+	t(() => {
+		if (A) return Z(), window.addEventListener("resize", Z), window.addEventListener("scroll", Z, !0), () => {
+			window.removeEventListener("resize", Z), window.removeEventListener("scroll", Z, !0);
 		};
-	}, [y, P]), n(() => {
-		let e = k.current;
+	}, [A, Z]), t(() => {
+		let e = z.current;
 		if (!e) return;
-		let t = () => E(e.clientWidth >= 88);
+		let t = () => I(e.clientWidth >= 88);
 		t();
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, []), n(() => {
-		if (!y) return;
-		let e = (e) => {
+	}, []), t(() => {
+		if (A && H.current && Y >= 0) {
+			let e = H.current, t = e.children[Y];
+			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);
+			}
+		}
+	}, [A, Y]);
+	let Q = (e = "first") => {
+		if (v) return;
+		let t = q >= 0 ? q : e === "last" ? K.at(-1) : K[0];
+		M(t !== void 0 && t >= 0 ? d[t].value : null), k(!0), Z();
+	}, ee = () => {
+		v || (B.current?.focus({ preventScroll: !0 }), A ? k(!1) : Q());
+	}, te = (e) => {
+		if (e.key === "Tab") {
+			k(!1);
+			return;
+		}
+		if (!(e.target !== B.current || v || e.defaultPrevented || e.nativeEvent.isComposing || e.altKey || e.ctrlKey || e.metaKey)) {
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), S((e) => e < u.length - 1 ? e + 1 : 0), F();
-					break;
 				case "ArrowUp":
-					e.preventDefault(), S((e) => e > 0 ? e - 1 : u.length - 1), F();
+					if (!A) Q(e.key === "ArrowUp" ? "last" : "first");
+					else if (K.length) {
+						let t = K.indexOf(Y), n = e.key === "ArrowDown" ? 1 : -1, r = K[(t + n + K.length) % K.length];
+						M(d[r].value);
+					}
 					break;
+				case "Home":
+				case "End": {
+					A || Q();
+					let t = e.key === "Home" ? K[0] : K.at(-1);
+					M(t === void 0 ? null : d[t].value);
+					break;
+				}
 				case "Enter":
 				case " ":
-					e.preventDefault(), x >= 0 && x < u.length && L(u[x]), h || b(!1);
+					A ? Y >= 0 && $(d[Y]) : Q();
 					break;
-				case "Escape": b(!1);
-			}
-		};
-		return document.addEventListener("keydown", e), () => {
-			document.removeEventListener("keydown", e);
-		};
-	}, [
-		y,
-		x,
-		u,
-		h
-	]);
-	let F = t(() => {
-		if (j.current && x >= 0) {
-			let e = j.current, t = e.children[x];
-			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);
+				case "Escape":
+					if (!A) return;
+					k(!1);
+					break;
+				default: return;
 			}
+			e.preventDefault(), e.stopPropagation();
+		}
+	}, $ = (e) => {
+		if (!(v || e.disabled)) {
+			if (M(e.value), B.current?.focus({ preventScroll: !0 }), b) {
+				let t = Array.isArray(f) ? f : [], n;
+				n = t.includes(e.value) ? t.filter((t) => t !== e.value) : [...t, e.value], p(n);
+			} else p(e.value), k(!1);
 		}
-	}, [x]), I = () => {
-		let e = !y;
-		b(e), S(e ? 0 : -1), e && P();
-	}, L = (e) => {
-		if (h) {
-			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), b(!1);
-	}, R = (e, t) => {
-		if (e.pointerType === "mouse") {
-			e.preventDefault(), e.stopPropagation(), L(t);
+	}, ne = (e, t) => {
+		if (W.current = !1, e.pointerType === "mouse") {
+			e.preventDefault(), e.stopPropagation(), $(t);
 			return;
 		}
-		e.stopPropagation(), M.current = {
+		e.stopPropagation(), U.current = {
 			pointerId: e.pointerId,
 			x: e.clientX,
 			y: e.clientY
 		};
-	}, z = (e, t) => {
-		let n = M.current;
-		M.current = null, n && e.pointerId === n.pointerId && Math.hypot(e.clientX - n.x, e.clientY - n.y) < 10 && (e.stopPropagation(), L(t));
-	}, B = () => {
-		M.current = null;
-	}, V = (e, t) => {
-		e.stopPropagation(), f((Array.isArray(d) ? d : []).filter((e) => e !== t));
+	}, re = (e) => {
+		let t = U.current;
+		if (U.current = null, !t || e.pointerId !== t.pointerId) return;
+		let n = Math.hypot(e.clientX - t.x, e.clientY - t.y);
+		W.current = n < 10, e.stopPropagation();
+	}, ie = () => {
+		U.current = null, W.current = !1;
+	}, ae = (e, t) => {
+		e.stopPropagation(), !(v || d.find((e) => e.value === t)?.disabled) && (B.current?.focus({ preventScroll: !0 }), p((Array.isArray(f) ? f : []).filter((e) => e !== t)));
 	};
-	n(() => {
-		if (h && A.current) {
-			let e = A.current, t = u.filter((e) => N.includes(e.value)).map((e) => e.label).join(", "), n = e.scrollWidth > e.clientWidth;
-			w(n ? t : "");
-		} else w("");
+	t(() => {
+		if (b && V.current) {
+			let e = V.current, t = d.filter((e) => G.includes(e.value)).map((e) => e.label).join(", "), n = e.scrollWidth > e.clientWidth;
+			P(n ? t : "");
+		} else P("");
 	}, [
+		b,
 		d,
-		h,
-		u,
-		N
+		G
 	]);
-	let H = () => {
-		if (N.length === 0) return /* @__PURE__ */ a("span", {
+	let oe = () => {
+		if (G.length === 0) return /* @__PURE__ */ o("span", {
 			className: "text-base-content/60 italic",
-			children: m
+			children: y
 		});
-		let e = u.filter((e) => N.includes(e.value));
-		if (h) {
-			let t = g;
-			return /* @__PURE__ */ a("div", {
-				ref: A,
+		let e = d.filter((e) => G.includes(e.value));
+		if (b) {
+			let t = x;
+			return /* @__PURE__ */ o("div", {
+				ref: V,
 				className: `
         flex gap-1 
         ${t ? "flex-nowrap overflow-x-auto overflow-y-hidden" : "flex-wrap overflow-hidden"} // Enable horizontal scroll, hide vertical scrollbar if any
-        ${C ? "tooltip tooltip-bottom" : ""} // Keep tooltip for overflow
+        ${N ? "tooltip tooltip-bottom" : ""} // Keep tooltip for overflow
       `,
-				"data-tip": C || void 0,
+				"data-tip": N || void 0,
 				style: {
 					scrollbarWidth: "thin",
 					...t ? { paddingRight: "1.75rem" } : {}
 				},
-				children: e.map((e) => /* @__PURE__ */ o("span", {
+				children: e.map((e) => /* @__PURE__ */ s("span", {
 					className: "badge badge-ghost gap-1 text-xs items-center whitespace-nowrap flex-shrink-0",
-					children: [e.label, /* @__PURE__ */ a("button", {
+					children: [e.label, /* @__PURE__ */ o("button", {
 						type: "button",
-						onClick: (t) => V(t, e.value),
+						disabled: v || e.disabled,
+						onClick: (t) => ae(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, {})
+						children: /* @__PURE__ */ o(u, {})
 					})]
-				}, e.value))
+				}, D(e)))
 			});
 		}
 		{
-			let e = u.find((e) => e.value === N[0]);
-			return e ? /* @__PURE__ */ a("span", {
+			let e = d.find((e) => e.value === G[0]);
+			return e ? /* @__PURE__ */ o("span", {
 				className: "truncate",
 				children: e.label
-			}) : /* @__PURE__ */ a("span", {
+			}) : /* @__PURE__ */ o("span", {
 				className: "text-base-content/60 italic",
-				children: m
+				children: y
 			});
 		}
-	}, U = `
+	}, se = `
     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
-    ${h ? g ? "h-8" : "min-h-8 h-auto py-1" : "h-8"}
+    ${b ? x ? "h-8" : "min-h-8 h-auto py-1" : "h-8"}
   `;
-	return /* @__PURE__ */ o("div", {
-		ref: k,
-		style: _,
-		className: `relative w-full font-sans select-none ${v || ""}`,
-		children: [/* @__PURE__ */ o("div", {
-			tabIndex: 0,
-			className: U,
-			onClick: I,
-			onKeyDown: (e) => {
-				(e.key === "Enter" || e.key === " ") && I();
-			},
+	return /* @__PURE__ */ s("div", {
+		ref: z,
+		style: S,
+		className: `relative w-full font-sans select-none ${C || ""}`,
+		onBlur: X,
+		onKeyDown: te,
+		children: [/* @__PURE__ */ s("div", {
+			ref: B,
+			id: T,
+			tabIndex: v ? -1 : 0,
+			className: `${se} ${v ? "opacity-50 cursor-not-allowed" : ""}`,
+			onClick: ee,
 			role: "combobox",
-			"aria-label": p,
+			"aria-label": m ?? (h ? void 0 : y),
+			"aria-labelledby": h,
+			"aria-describedby": g,
 			"aria-haspopup": "listbox",
-			"aria-expanded": y,
-			children: [/* @__PURE__ */ a("div", {
+			"aria-expanded": A,
+			"aria-disabled": v || void 0,
+			"aria-controls": A ? E : void 0,
+			"aria-activedescendant": A && Y >= 0 ? D(d[Y]) : void 0,
+			children: [/* @__PURE__ */ o("div", {
 				className: "flex-1 min-w-0 overflow-hidden",
-				style: { paddingRight: T ? 28 : 0 },
-				children: H()
-			}), T && /* @__PURE__ */ a("div", {
+				style: { paddingRight: F ? 28 : 0 },
+				children: oe()
+			}), F && /* @__PURE__ */ o("div", {
 				"aria-hidden": "true",
 				style: {
 					position: "absolute",
@@ -223,33 +247,39 @@ var c = ({ isOpen: e }) => /* @__PURE__ */ a("svg", {
 					width: 16,
 					height: 16
 				},
-				children: /* @__PURE__ */ a(c, { isOpen: y })
+				children: /* @__PURE__ */ o(l, { isOpen: A })
 			})]
-		}), y && typeof document < "u" && s(/* @__PURE__ */ a("ul", {
-			ref: j,
+		}), A && typeof document < "u" && c(/* @__PURE__ */ o("ul", {
+			ref: H,
+			id: E,
 			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: {
-				...D,
+				...L,
 				touchAction: "pan-y"
 			},
 			onPointerDown: (e) => e.stopPropagation(),
 			role: "listbox",
-			"aria-activedescendant": x >= 0 ? `option-${u[x]?.value}` : void 0,
+			"aria-labelledby": h ?? T,
+			"aria-multiselectable": b || void 0,
+			onFocus: () => B.current?.focus({ preventScroll: !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 === x ? "bg-base-300" : ""} ${N.includes(e.value) && !h ? "font-semibold bg-base-200" : ""} ${N.includes(e.value) && h ? "font-semibold" : ""}`,
-				onPointerDown: (t) => R(t, e),
-				onPointerUp: (t) => z(t, e),
-				onPointerCancel: B,
-				onClick: (e) => {
-					e.preventDefault(), e.stopPropagation();
+			children: d.length > 0 ? d.map((e, t) => /* @__PURE__ */ o("li", {
+				id: D(e),
+				className: `p-2 ${e.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-base-200"} whitespace-nowrap overflow-hidden text-ellipsis ${t === Y ? "bg-base-300" : ""} ${G.includes(e.value) && !b ? "font-semibold bg-base-200" : ""} ${G.includes(e.value) && b ? "font-semibold" : ""}`,
+				onPointerDown: (t) => ne(t, e),
+				onPointerUp: re,
+				onPointerCancel: ie,
+				onClick: (t) => {
+					t.preventDefault(), t.stopPropagation(), (W.current || t.detail === 0) && $(e), W.current = !1;
+				},
+				onPointerMove: (t) => {
+					t.pointerType === "mouse" && (t.movementX || t.movementY) && !e.disabled && M(e.value);
 				},
-				onMouseEnter: () => S(t),
 				role: "option",
-				"aria-selected": N.includes(e.value),
+				"aria-disabled": e.disabled || void 0,
+				"aria-selected": G.includes(e.value),
 				children: e.label
-			}, e.value)) : /* @__PURE__ */ a("li", {
+			}, D(e))) : /* @__PURE__ */ o("li", {
 				className: "p-2 text-base-content/60 italic",
 				children: "No options available"
 			})
@@ -257,6 +287,6 @@ var c = ({ isOpen: e }) => /* @__PURE__ */ a("svg", {
 	});
 };
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useClickOutside } from '../../hooks/useClickOutside';\n\nexport interface Option {\n  value: string | number;\n  label: string;\n}\n\nexport interface SelectProps {\n  /** Accessible name for the combobox. */\n  'aria-label'?: string;\n  options: Option[];\n  value?: string | number | (string | number)[];\n  onChange: (value: string | number | (string | number)[]) => void;\n  placeholder?: string;\n  multiple?: boolean;\n  fixedHeight?: boolean;\n  style?: React.CSSProperties;       // Allow passing inline styles\n  className?: string;                // Allow passing CSS classes for the wrapper\n}\n\n// SVG component for the dropdown arrow\nconst DropdownArrow: React.FC<{ isOpen: boolean }> = ({ isOpen }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    style={{\n      display: 'block',\n      width: 16,\n      height: 16,\n      transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n      transition: 'transform 200ms ease-in-out',\n    }}\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n  </svg>\n);\n\n// SVG component for the remove button 'x'\nconst RemoveIcon: React.FC = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n);\n\n// Select Component Implementation using daisyUI/Tailwind\nconst Select: React.FC<SelectProps> = ({\n  options,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  placeholder = 'Select...',\n  multiple = false,\n  fixedHeight = false,\n  style,\n  className // This className applies to the wrapper\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const [tooltipText, setTooltipText] = useState('');\n  const [showArrow, setShowArrow] = useState(true);\n  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null); // Ref for the header div\n  const optionsListRef = useRef<HTMLUListElement>(null);\n  // Tracks a touch/pen press on an option so a tap selects while a drag scrolls.\n  // (pointerdown on touch must NOT preventDefault — that blocks native scrolling.)\n  const touchPressRef = useRef<{ pointerId: number; x: number; y: number } | null>(null);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (wrapperRef.current?.contains(target) || optionsListRef.current?.contains(target)) return;\n      setIsOpen(false);\n    };\n    document.addEventListener('pointerdown', handlePointerDown);\n    document.addEventListener('mousedown', handlePointerDown);\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown);\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [isOpen]);\n\n  const selectedValuesArray = Array.isArray(value) ? value : (value !== undefined && value !== null ? [value] : []);\n\n  // Close dropdown when clicking outside\n  useClickOutside(wrapperRef, useCallback(() => setIsOpen(false), []));\n\n  const updateDropdownPosition = useCallback(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    const rect = wrapper.getBoundingClientRect();\n    const estimatedHeight = Math.min(options.length, 8) * 36 + 8;\n    const fitsBelow = rect.bottom + 4 + estimatedHeight <= window.innerHeight;\n    setDropdownStyle({\n      position: 'fixed',\n      left: rect.left,\n      top: fitsBelow ? rect.bottom + 4 : Math.max(8, rect.top - estimatedHeight - 4),\n      width: rect.width,\n      zIndex: 10000,\n    });\n  }, [options.length]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    updateDropdownPosition();\n    window.addEventListener('resize', updateDropdownPosition);\n    window.addEventListener('scroll', updateDropdownPosition, true);\n    return () => {\n      window.removeEventListener('resize', updateDropdownPosition);\n      window.removeEventListener('scroll', updateDropdownPosition, true);\n    };\n  }, [isOpen, updateDropdownPosition]);\n\n  // Hide the decorative arrow when the control becomes too narrow to reserve\n  // space for both it and a useful amount of label text.\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    const update = () => setShowArrow(wrapper.clientWidth >= 88);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, []);\n\n  // Keyboard navigation\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          setHighlightedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));\n          scrollToHighlightedOption();\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          setHighlightedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));\n          scrollToHighlightedOption();\n          break;\n        case 'Enter':\n        case ' ': // Space key\n          event.preventDefault();\n          if (highlightedIndex >= 0 && highlightedIndex < options.length) {\n            handleOptionClick(options[highlightedIndex]);\n            if (!multiple) setIsOpen(false); // Close dropdown on selection if single mode\n          } else if (!multiple) {\n            setIsOpen(false); // Close dropdown if Enter/Space is pressed without a highlighted option in single mode\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          break;\n        default:\n          // Optional: Implement type-ahead find\n          break;\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, highlightedIndex, options, multiple]); // Added multiple to dependencies\n\n  const scrollToHighlightedOption = useCallback(() => {\n    if (optionsListRef.current && highlightedIndex >= 0) {\n      const list = optionsListRef.current;\n      const optionElement = list.children[highlightedIndex] as HTMLLIElement;\n      if (optionElement) {\n        const listRect = list.getBoundingClientRect();\n        const optionRect = optionElement.getBoundingClientRect();\n\n        if (optionRect.bottom > listRect.bottom) {\n          list.scrollTop += optionRect.bottom - listRect.bottom;\n        } else if (optionRect.top < listRect.top) {\n          list.scrollTop -= listRect.top - optionRect.top;\n        }\n      }\n    }\n  }, [highlightedIndex]);\n\n  const toggleDropdown = () => {\n    const next = !isOpen;\n    setIsOpen(next);\n    setHighlightedIndex(next ? 0 : -1); // Reset or set initial highlight\n    if (next) updateDropdownPosition();\n  };\n\n  const handleOptionClick = (option: Option) => {\n    if (multiple) {\n      const currentValues = Array.isArray(value) ? value : [];\n      let newValue;\n      if (currentValues.includes(option.value)) {\n        newValue = currentValues.filter(v => v !== option.value);\n      } else {\n        newValue = [...currentValues, option.value];\n      }\n      onChange(newValue);\n    } else {\n      onChange(option.value);\n      setIsOpen(false); // Close dropdown on single select\n    }\n    // Keep highlight on the selected item in multi-select? Maybe not.\n    // setHighlightedIndex(options.findIndex(o => o.value === option.value));\n  };\n\n  // Mouse: select immediately on press (existing desktop behavior).\n  // Touch/pen: only record the press — selection happens on pointerup if the\n  // gesture turned out to be a tap rather than a scroll. preventDefault() on a\n  // touch pointerdown suppresses the browser's native pan gesture, which made\n  // long dropdowns impossible to scroll on mobile (and every scroll attempt\n  // selected an option instead).\n  const handleOptionPointerDown = (event: React.PointerEvent<HTMLLIElement>, option: Option) => {\n    if (event.pointerType === 'mouse') {\n      event.preventDefault();\n      event.stopPropagation();\n      handleOptionClick(option);\n      return;\n    }\n    event.stopPropagation();\n    touchPressRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };\n  };\n\n  const handleOptionPointerUp = (event: React.PointerEvent<HTMLLIElement>, option: Option) => {\n    const press = touchPressRef.current;\n    touchPressRef.current = null;\n    if (!press || event.pointerId !== press.pointerId) return;\n    // Select only if the finger did not move much — otherwise it was a scroll.\n    const moved = Math.hypot(event.clientX - press.x, event.clientY - press.y);\n    if (moved < 10) {\n      event.stopPropagation();\n      handleOptionClick(option);\n    }\n  };\n\n  const handleOptionPointerCancel = () => {\n    touchPressRef.current = null;\n  };\n\n  const handleRemoveItem = (e: React.MouseEvent, itemValue: string | number) => {\n    e.stopPropagation(); // Prevent dropdown from opening/closing\n    const currentValues = Array.isArray(value) ? value : [];\n    onChange(currentValues.filter(v => v !== itemValue));\n  };\n\n  // Update tooltip text and check for overflow\n  useEffect(() => {\n    if (multiple && headerRef.current) {\n      const header = headerRef.current;\n      const selectedLabels = options\n        .filter(opt => selectedValuesArray.includes(opt.value))\n        .map(opt => opt.label)\n        .join(', ');\n\n      // Check if the content (scrollWidth) exceeds the visible area (clientWidth)\n      const isOverflowing = header.scrollWidth > header.clientWidth;\n      setTooltipText(isOverflowing ? selectedLabels : ''); // Only set text if overflowing\n    } else {\n      setTooltipText(''); // Clear tooltip for single select or empty multi-select\n    }\n  }, [value, multiple, options, selectedValuesArray]);\n\n\n  const renderSelectedValue = () => {\n    if (selectedValuesArray.length === 0) {\n      return <span className=\"text-base-content/60 italic\">{placeholder}</span>;\n    }\n\n    const selectedOptions = options.filter(opt => selectedValuesArray.includes(opt.value));\n\n    if (multiple) {\n      const isFixed = fixedHeight;\n      // Apply overflow-x-auto for horizontal scrolling in fixedHeight mode\n      const containerClasses = `\n        flex gap-1 \n        ${isFixed ? 'flex-nowrap overflow-x-auto overflow-y-hidden' : 'flex-wrap overflow-hidden'} // Enable horizontal scroll, hide vertical scrollbar if any\n        ${tooltipText ? 'tooltip tooltip-bottom' : ''} // Keep tooltip for overflow\n      `;\n      // Removed showEllipsisPrefix\n\n      return (\n        <div\n          ref={headerRef}\n          className={containerClasses}\n          data-tip={tooltipText ? tooltipText : undefined} // Keep tooltip logic\n          // Add scrollbar styling if desired (e.g., using ::-webkit-scrollbar pseudo-element via CSS or a utility)\n          style={{\n            scrollbarWidth: 'thin',\n            // 为固定高度模式添加右侧内边距，避免与下拉图标重叠\n            ...(isFixed ? { paddingRight: '1.75rem' } : {})\n          }}\n        >\n          {/* Removed wrapper for ellipsis and its popup */}\n\n          {/* Render the badges */}\n          {selectedOptions.map(option => (\n            <span key={option.value} className=\"badge badge-ghost gap-1 text-xs items-center whitespace-nowrap flex-shrink-0\">\n              {option.label}\n              <button\n                type=\"button\"\n                onClick={(e) => handleRemoveItem(e, option.value)}\n                className=\"btn btn-xs btn-ghost btn-circle p-0 m-0 hover:bg-error hover:text-error-content\"\n                aria-label={`Remove ${option.label}`}\n              >\n                <RemoveIcon />\n              </button>\n            </span>\n          ))}\n        </div>\n      );\n    } else {\n      const selectedOption = options.find(opt => opt.value === selectedValuesArray[0]);\n      return selectedOption ? <span className=\"truncate\">{selectedOption.label}</span> : <span className=\"text-base-content/60 italic\">{placeholder}</span>;\n    }\n  };\n\n  // Match the default control height to a normal line of form text. Multi-select\n  // may still grow when wrapping tags unless fixedHeight is requested.\n  const selectClasses = `\n    relative border border-base-300 rounded-lg bg-base-100 w-full\n    flex justify-between items-center cursor-pointer px-3 text-sm\n    focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50\n    hover:border-base-content/30\n    ${multiple\n      ? (fixedHeight ? 'h-8' : 'min-h-8 h-auto py-1')\n      : 'h-8'}\n  `;\n\n  return (\n    <div\n      ref={wrapperRef}\n      style={style}\n      className={`relative w-full font-sans select-none ${className || ''}`}\n    >\n      {/* Header */}\n      <div\n        tabIndex={0}\n        className={selectClasses}\n        onClick={toggleDropdown}\n        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') toggleDropdown(); }}\n        role=\"combobox\"\n        aria-label={ariaLabel}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <div\n          className=\"flex-1 min-w-0 overflow-hidden\"\n          style={{ paddingRight: showArrow ? 28 : 0 }}\n        >\n          {renderSelectedValue()}\n        </div>\n        {/* Inline positioning avoids utility CSS/theme overrides moving the icon. */}\n        {showArrow && (\n          <div\n            aria-hidden=\"true\"\n            style={{\n              position: 'absolute',\n              right: 10,\n              top: '50%',\n              transform: 'translateY(-50%)',\n              pointerEvents: 'none',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              width: 16,\n              height: 16,\n            }}\n          >\n            <DropdownArrow isOpen={isOpen} />\n          </div>\n        )}\n      </div>\n\n      {/* Dropdown Options */}\n      {isOpen && typeof document !== 'undefined' && createPortal(\n        <ul\n          ref={optionsListRef}\n          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\"\n          style={{ ...dropdownStyle, touchAction: 'pan-y' }}\n          onPointerDown={(event) => event.stopPropagation()}\n          role=\"listbox\" // ARIA role\n          aria-activedescendant={highlightedIndex >= 0 ? `option-${options[highlightedIndex]?.value}` : undefined} // For screen readers\n          tabIndex={-1} // Allows focus programmatically but not via tab\n        >\n          {options.length > 0 ? (\n            options.map((option, index) => (\n              <li\n                key={option.value}\n                id={`option-${option.value}`} // ID for aria-activedescendant\n                className={`p-2 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis hover:bg-base-200 ${index === highlightedIndex ? 'bg-base-300' : '' // Highlight style\n                  } ${selectedValuesArray.includes(option.value) && !multiple ? 'font-semibold bg-base-200' : '' // Style for selected single item\n                  } ${selectedValuesArray.includes(option.value) && multiple ? 'font-semibold' : '' // Style for selected multi items (less prominent background)\n                  }`}\n                onPointerDown={(event) => handleOptionPointerDown(event, option)}\n                onPointerUp={(event) => handleOptionPointerUp(event, option)}\n                onPointerCancel={handleOptionPointerCancel}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }}\n                onMouseEnter={() => setHighlightedIndex(index)} // Highlight on hover\n                role=\"option\" // ARIA role\n                aria-selected={selectedValuesArray.includes(option.value)}\n              >\n                {/* Optional: Add a checkmark or similar for selected items, especially in multi-select */}\n                {option.label}\n              </li>\n            ))\n          ) : (\n            <li className=\"p-2 text-base-content/60 italic\">\n              No options available\n            </li>\n          )}\n        </ul>,\n        document.body,\n      )}\n    </div>\n  );\n};\n\nexport default Select; "],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface Option {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  /** Accessible name for the combobox. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  /** Optional ID for the combobox; generated per instance when omitted. */\n  id?: string;\n  disabled?: boolean;\n  options: Option[];\n  value?: string | number | (string | number)[];\n  onChange: (value: string | number | (string | number)[]) => void;\n  placeholder?: string;\n  multiple?: boolean;\n  fixedHeight?: boolean;\n  style?: React.CSSProperties;       // Allow passing inline styles\n  className?: string;                // Allow passing CSS classes for the wrapper\n}\n\n// SVG component for the dropdown arrow\nconst DropdownArrow: React.FC<{ isOpen: boolean }> = ({ isOpen }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    style={{\n      display: 'block',\n      width: 16,\n      height: 16,\n      transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n      transition: 'transform 200ms ease-in-out',\n    }}\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n  </svg>\n);\n\n// SVG component for the remove button 'x'\nconst RemoveIcon: React.FC = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n);\n\n// Select Component Implementation using daisyUI/Tailwind\nconst Select: React.FC<SelectProps> = ({\n  options,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  'aria-describedby': ariaDescribedby,\n  id,\n  disabled = false,\n  placeholder = 'Select...',\n  multiple = false,\n  fixedHeight = false,\n  style,\n  className // This className applies to the wrapper\n}) => {\n  const generatedId = useId();\n  const comboboxId = id ?? `select-${generatedId}`;\n  const listboxId = `${comboboxId}-listbox`;\n  const optionId = (option: Option) => `${listboxId}-${typeof option.value}-${encodeURIComponent(String(option.value))}`;\n  const [open, setIsOpen] = useState(false);\n  const isOpen = open && !disabled;\n  if (disabled && open) setIsOpen(false);\n  const [highlightedValue, setHighlightedValue] = useState<Option['value'] | null>(null);\n  const [tooltipText, setTooltipText] = useState('');\n  const [showArrow, setShowArrow] = useState(true);\n  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const comboboxRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null); // Ref for the header div\n  const optionsListRef = useRef<HTMLUListElement>(null);\n  // Tracks a touch/pen press on an option so a tap selects while a drag scrolls.\n  // (pointerdown on touch must NOT preventDefault — that blocks native scrolling.)\n  const touchPressRef = useRef<{ pointerId: number; x: number; y: number } | null>(null);\n  const touchTapRef = useRef(false);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (wrapperRef.current?.contains(target) || optionsListRef.current?.contains(target)) return;\n      setIsOpen(false);\n    };\n    document.addEventListener('pointerdown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown);\n    };\n  }, [isOpen]);\n\n  const selectedValuesArray = useMemo(() => Array.isArray(value) ? value : (value !== undefined && value !== null ? [value] : []), [value]);\n\n  const enabledIndices = options.flatMap((option, index) => option.disabled ? [] : [index]);\n  const selectedIndex = options.findIndex(option => !option.disabled && selectedValuesArray.includes(option.value));\n  const storedIndex = options.findIndex(option => !option.disabled && option.value === highlightedValue);\n  // Derive a valid active option even when options are removed, reordered or disabled.\n  const highlightedIndex = storedIndex >= 0 ? storedIndex : selectedIndex >= 0 ? selectedIndex : enabledIndices[0] ?? -1;\n\n\n  const handleBlur = (event: React.FocusEvent) => {\n    const next = event.relatedTarget as Node | null;\n    if (!next || (!wrapperRef.current?.contains(next) && !optionsListRef.current?.contains(next))) {\n      setIsOpen(false);\n    }\n  };\n\n  const updateDropdownPosition = useCallback(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    const rect = wrapper.getBoundingClientRect();\n    const estimatedHeight = Math.min(options.length, 8) * 36 + 8;\n    const fitsBelow = rect.bottom + 4 + estimatedHeight <= window.innerHeight;\n    setDropdownStyle({\n      position: 'fixed',\n      left: rect.left,\n      top: fitsBelow ? rect.bottom + 4 : Math.max(8, rect.top - estimatedHeight - 4),\n      width: rect.width,\n      zIndex: 10000,\n    });\n  }, [options.length]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    updateDropdownPosition();\n    window.addEventListener('resize', updateDropdownPosition);\n    window.addEventListener('scroll', updateDropdownPosition, true);\n    return () => {\n      window.removeEventListener('resize', updateDropdownPosition);\n      window.removeEventListener('scroll', updateDropdownPosition, true);\n    };\n  }, [isOpen, updateDropdownPosition]);\n\n  // Hide the decorative arrow when the control becomes too narrow to reserve\n  // space for both it and a useful amount of label text.\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    const update = () => setShowArrow(wrapper.clientWidth >= 88);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, []);\n\n  // Scroll after React commits the new active option, not using the previous index.\n  useEffect(() => {\n    if (isOpen && optionsListRef.current && highlightedIndex >= 0) {\n      const list = optionsListRef.current;\n      const optionElement = list.children[highlightedIndex] as HTMLLIElement;\n      if (optionElement) {\n        const listRect = list.getBoundingClientRect();\n        const optionRect = optionElement.getBoundingClientRect();\n\n        if (optionRect.bottom > listRect.bottom) {\n          list.scrollTop += optionRect.bottom - listRect.bottom;\n        } else if (optionRect.top < listRect.top) {\n          list.scrollTop -= listRect.top - optionRect.top;\n        }\n      }\n    }\n  }, [isOpen, highlightedIndex]);\n\n  const openDropdown = (edge: 'first' | 'last' = 'first') => {\n    if (disabled) return;\n    const index = selectedIndex >= 0 ? selectedIndex : edge === 'last' ? enabledIndices.at(-1) : enabledIndices[0];\n    setHighlightedValue(index !== undefined && index >= 0 ? options[index].value : null);\n    setIsOpen(true);\n    updateDropdownPosition();\n  };\n\n  const toggleDropdown = () => {\n    if (disabled) return;\n    comboboxRef.current?.focus({ preventScroll: true });\n    if (isOpen) setIsOpen(false);\n    else openDropdown();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Tab') {\n      setIsOpen(false); // Preserve native Tab / Shift+Tab focus traversal, including tag buttons.\n      return;\n    }\n    if (event.target !== comboboxRef.current || disabled || event.defaultPrevented || event.nativeEvent.isComposing || event.altKey || event.ctrlKey || event.metaKey) return;\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp': {\n        if (!isOpen) openDropdown(event.key === 'ArrowUp' ? 'last' : 'first');\n        else if (enabledIndices.length) {\n          const current = enabledIndices.indexOf(highlightedIndex);\n          const step = event.key === 'ArrowDown' ? 1 : -1;\n          const next = enabledIndices[(current + step + enabledIndices.length) % enabledIndices.length];\n          setHighlightedValue(options[next].value);\n        }\n        break;\n      }\n      case 'Home':\n      case 'End': {\n        if (!isOpen) openDropdown();\n        const next = event.key === 'Home' ? enabledIndices[0] : enabledIndices.at(-1);\n        setHighlightedValue(next === undefined ? null : options[next].value);\n        break;\n      }\n      case 'Enter':\n      case ' ':\n        if (!isOpen) openDropdown();\n        else if (highlightedIndex >= 0) handleOptionClick(options[highlightedIndex]);\n        break;\n      case 'Escape':\n        if (!isOpen) return;\n        setIsOpen(false);\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  const handleOptionClick = (option: Option) => {\n    if (disabled || option.disabled) return;\n    setHighlightedValue(option.value);\n    comboboxRef.current?.focus({ preventScroll: true });\n    if (multiple) {\n      const currentValues = Array.isArray(value) ? value : [];\n      let newValue;\n      if (currentValues.includes(option.value)) {\n        newValue = currentValues.filter(v => v !== option.value);\n      } else {\n        newValue = [...currentValues, option.value];\n      }\n      onChange(newValue);\n    } else {\n      onChange(option.value);\n      setIsOpen(false); // Close dropdown on single select\n    }\n  };\n\n  // Mouse: select immediately on press (existing desktop behavior).\n  // Touch/pen: confirm a tap on pointerup, then select on click. Unmounting the\n  // option on pointerup would send compatibility mouse events to the page behind\n  // the portal, stealing focus. preventDefault() on a\n  // touch pointerdown suppresses the browser's native pan gesture, which made\n  // long dropdowns impossible to scroll on mobile (and every scroll attempt\n  // selected an option instead).\n  const handleOptionPointerDown = (event: React.PointerEvent<HTMLLIElement>, option: Option) => {\n    touchTapRef.current = false;\n    if (event.pointerType === 'mouse') {\n      event.preventDefault();\n      event.stopPropagation();\n      handleOptionClick(option);\n      return;\n    }\n    event.stopPropagation();\n    touchPressRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };\n  };\n\n  const handleOptionPointerUp = (event: React.PointerEvent<HTMLLIElement>) => {\n    const press = touchPressRef.current;\n    touchPressRef.current = null;\n    if (!press || event.pointerId !== press.pointerId) return;\n    // Select only if the finger did not move much — otherwise it was a scroll.\n    const moved = Math.hypot(event.clientX - press.x, event.clientY - press.y);\n    touchTapRef.current = moved < 10;\n    event.stopPropagation();\n  };\n\n  const handleOptionPointerCancel = () => {\n    touchPressRef.current = null;\n    touchTapRef.current = false;\n  };\n\n  const handleRemoveItem = (e: React.MouseEvent, itemValue: string | number) => {\n    e.stopPropagation(); // Prevent dropdown from opening/closing\n    if (disabled || options.find(option => option.value === itemValue)?.disabled) return;\n    comboboxRef.current?.focus({ preventScroll: true });\n    const currentValues = Array.isArray(value) ? value : [];\n    onChange(currentValues.filter(v => v !== itemValue));\n  };\n\n  // Update tooltip text and check for overflow\n  useEffect(() => {\n    if (multiple && headerRef.current) {\n      const header = headerRef.current;\n      const selectedLabels = options\n        .filter(opt => selectedValuesArray.includes(opt.value))\n        .map(opt => opt.label)\n        .join(', ');\n\n      // Check if the content (scrollWidth) exceeds the visible area (clientWidth)\n      const isOverflowing = header.scrollWidth > header.clientWidth;\n      setTooltipText(isOverflowing ? selectedLabels : ''); // Only set text if overflowing\n    } else {\n      setTooltipText(''); // Clear tooltip for single select or empty multi-select\n    }\n  }, [multiple, options, selectedValuesArray]);\n\n\n  const renderSelectedValue = () => {\n    if (selectedValuesArray.length === 0) {\n      return <span className=\"text-base-content/60 italic\">{placeholder}</span>;\n    }\n\n    const selectedOptions = options.filter(opt => selectedValuesArray.includes(opt.value));\n\n    if (multiple) {\n      const isFixed = fixedHeight;\n      // Apply overflow-x-auto for horizontal scrolling in fixedHeight mode\n      const containerClasses = `\n        flex gap-1 \n        ${isFixed ? 'flex-nowrap overflow-x-auto overflow-y-hidden' : 'flex-wrap overflow-hidden'} // Enable horizontal scroll, hide vertical scrollbar if any\n        ${tooltipText ? 'tooltip tooltip-bottom' : ''} // Keep tooltip for overflow\n      `;\n      // Removed showEllipsisPrefix\n\n      return (\n        <div\n          ref={headerRef}\n          className={containerClasses}\n          data-tip={tooltipText ? tooltipText : undefined} // Keep tooltip logic\n          // Add scrollbar styling if desired (e.g., using ::-webkit-scrollbar pseudo-element via CSS or a utility)\n          style={{\n            scrollbarWidth: 'thin',\n            // 为固定高度模式添加右侧内边距，避免与下拉图标重叠\n            ...(isFixed ? { paddingRight: '1.75rem' } : {})\n          }}\n        >\n          {/* Removed wrapper for ellipsis and its popup */}\n\n          {/* Render the badges */}\n          {selectedOptions.map(option => (\n            <span key={optionId(option)} className=\"badge badge-ghost gap-1 text-xs items-center whitespace-nowrap flex-shrink-0\">\n              {option.label}\n              <button\n                type=\"button\"\n                disabled={disabled || option.disabled}\n                onClick={(e) => handleRemoveItem(e, option.value)}\n                className=\"btn btn-xs btn-ghost btn-circle p-0 m-0 hover:bg-error hover:text-error-content\"\n                aria-label={`Remove ${option.label}`}\n              >\n                <RemoveIcon />\n              </button>\n            </span>\n          ))}\n        </div>\n      );\n    } else {\n      const selectedOption = options.find(opt => opt.value === selectedValuesArray[0]);\n      return selectedOption ? <span className=\"truncate\">{selectedOption.label}</span> : <span className=\"text-base-content/60 italic\">{placeholder}</span>;\n    }\n  };\n\n  // Match the default control height to a normal line of form text. Multi-select\n  // may still grow when wrapping tags unless fixedHeight is requested.\n  const selectClasses = `\n    relative border border-base-300 rounded-lg bg-base-100 w-full\n    flex justify-between items-center cursor-pointer px-3 text-sm\n    focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50\n    hover:border-base-content/30\n    ${multiple\n      ? (fixedHeight ? 'h-8' : 'min-h-8 h-auto py-1')\n      : 'h-8'}\n  `;\n\n  return (\n    <div\n      ref={wrapperRef}\n      style={style}\n      className={`relative w-full font-sans select-none ${className || ''}`}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n    >\n      {/* Header */}\n      <div\n        ref={comboboxRef}\n        id={comboboxId}\n        tabIndex={disabled ? -1 : 0}\n        className={`${selectClasses} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n        onClick={toggleDropdown}\n\n        role=\"combobox\"\n        aria-label={ariaLabel ?? (ariaLabelledby ? undefined : placeholder)}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-disabled={disabled || undefined}\n        aria-controls={isOpen ? listboxId : undefined}\n        aria-activedescendant={isOpen && highlightedIndex >= 0 ? optionId(options[highlightedIndex]) : undefined}\n      >\n        <div\n          className=\"flex-1 min-w-0 overflow-hidden\"\n          style={{ paddingRight: showArrow ? 28 : 0 }}\n        >\n          {renderSelectedValue()}\n        </div>\n        {/* Inline positioning avoids utility CSS/theme overrides moving the icon. */}\n        {showArrow && (\n          <div\n            aria-hidden=\"true\"\n            style={{\n              position: 'absolute',\n              right: 10,\n              top: '50%',\n              transform: 'translateY(-50%)',\n              pointerEvents: 'none',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              width: 16,\n              height: 16,\n            }}\n          >\n            <DropdownArrow isOpen={isOpen} />\n          </div>\n        )}\n      </div>\n\n      {/* Dropdown Options */}\n      {isOpen && typeof document !== 'undefined' && createPortal(\n        <ul\n          ref={optionsListRef}\n          id={listboxId}\n          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\"\n          style={{ ...dropdownStyle, touchAction: 'pan-y' }}\n          onPointerDown={(event) => event.stopPropagation()}\n          role=\"listbox\"\n          aria-labelledby={ariaLabelledby ?? comboboxId}\n          aria-multiselectable={multiple || undefined}\n          // Keep DOM focus on the combobox even when touch focuses the portal.\n          onFocus={() => comboboxRef.current?.focus({ preventScroll: true })}\n          tabIndex={-1}\n        >\n          {options.length > 0 ? (\n            options.map((option, index) => (\n              <li\n                key={optionId(option)}\n                id={optionId(option)}\n                className={`p-2 ${option.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-base-200'} whitespace-nowrap overflow-hidden text-ellipsis ${index === highlightedIndex ? 'bg-base-300' : '' // Highlight style\n                  } ${selectedValuesArray.includes(option.value) && !multiple ? 'font-semibold bg-base-200' : '' // Style for selected single item\n                  } ${selectedValuesArray.includes(option.value) && multiple ? 'font-semibold' : '' // Style for selected multi items (less prominent background)\n                  }`}\n                onPointerDown={(event) => handleOptionPointerDown(event, option)}\n                onPointerUp={handleOptionPointerUp}\n                onPointerCancel={handleOptionPointerCancel}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (touchTapRef.current || event.detail === 0) handleOptionClick(option);\n                  touchTapRef.current = false;\n                }}\n                onPointerMove={event => {\n                  // Scrolling under a stationary pointer must not undo keyboard navigation.\n                  if (event.pointerType === 'mouse' && (event.movementX || event.movementY) && !option.disabled) {\n                    setHighlightedValue(option.value);\n                  }\n                }}\n                role=\"option\"\n                aria-disabled={option.disabled || undefined}\n                aria-selected={selectedValuesArray.includes(option.value)}\n              >\n                {/* Optional: Add a checkmark or similar for selected items, especially in multi-select */}\n                {option.label}\n              </li>\n            ))\n          ) : (\n            <li className=\"p-2 text-base-content/60 italic\">\n              No options available\n            </li>\n          )}\n        </ul>,\n        document.body,\n      )}\n    </div>\n  );\n};\n\nexport default Select; "],"mappings":";;;;AA4BA,IAAM,KAAgD,EAAE,gBACtD,kBAAC,OAAD;CACE,OAAM;CACN,MAAK;CACL,SAAQ;CACR,QAAO;CACP,aAAa;CACb,OAAO;EACL,SAAS;EACT,OAAO;EACP,QAAQ;EACR,WAAW,IAAS,mBAAmB;EACvC,YAAY;CACd;CAEA,UAAA,kBAAC,QAAD;EAAM,eAAc;EAAQ,gBAAe;EAAQ,GAAE;CAAkB,CAAA;AACpE,CAAA,GAID,UACJ,kBAAC,OAAD;CAAK,OAAM;CAA6B,WAAU;CAAU,MAAK;CAAO,SAAQ;CAAY,QAAO;CAAe,aAAa;CAC7H,UAAA,kBAAC,QAAD;EAAM,eAAc;EAAQ,gBAAe;EAAQ,GAAE;CAAwB,CAAA;AAC1E,CAAA,GAID,KAAiC,EACrC,YACA,UACA,aACA,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,OACA,cAAW,IACX,iBAAc,aACd,cAAW,IACX,iBAAc,IACd,UACA,mBACI;CACJ,IAAM,IAAc,EAAM,GACpB,IAAa,KAAM,UAAU,KAC7B,IAAY,GAAG,EAAW,WAC1B,KAAY,MAAmB,GAAG,EAAU,GAAG,OAAO,EAAO,MAAM,GAAG,mBAAmB,OAAO,EAAO,KAAK,CAAC,KAC7G,CAAC,GAAM,KAAa,EAAS,EAAK,GAClC,IAAS,KAAQ,CAAC;CACxB,AAAI,KAAY,KAAM,EAAU,EAAK;CACrC,IAAM,CAAC,GAAkB,KAAuB,EAAiC,IAAI,GAC/E,CAAC,GAAa,KAAkB,EAAS,EAAE,GAC3C,CAAC,GAAW,KAAgB,EAAS,EAAI,GACzC,CAAC,GAAe,KAAoB,EAA8B,CAAC,CAAC,GACpE,IAAa,EAAuB,IAAI,GACxC,IAAc,EAAuB,IAAI,GACzC,IAAY,EAAuB,IAAI,GACvC,IAAiB,EAAyB,IAAI,GAG9C,IAAgB,EAA2D,IAAI,GAC/E,IAAc,EAAO,EAAK;CAEhC,QAAgB;EACd,IAAI,CAAC,GAAQ;EACb,IAAM,KAAqB,MAAsB;GAC/C,IAAM,IAAS,EAAM;GACjB,EAAW,SAAS,SAAS,CAAM,KAAK,EAAe,SAAS,SAAS,CAAM,KACnF,EAAU,EAAK;EACjB;EAGA,OAFA,SAAS,iBAAiB,eAAe,CAAiB,SAE7C;GACX,SAAS,oBAAoB,eAAe,CAAiB;EAC/D;CACF,GAAG,CAAC,CAAM,CAAC;CAEX,IAAM,IAAsB,QAAc,MAAM,QAAQ,CAAK,IAAI,IAAS,KAAiC,OAAiB,CAAC,IAAX,CAAC,CAAK,GAAS,CAAC,CAAK,CAAC,GAElI,IAAiB,EAAQ,SAAS,GAAQ,MAAU,EAAO,WAAW,CAAC,IAAI,CAAC,CAAK,CAAC,GAClF,IAAgB,EAAQ,WAAU,MAAU,CAAC,EAAO,YAAY,EAAoB,SAAS,EAAO,KAAK,CAAC,GAC1G,IAAc,EAAQ,WAAU,MAAU,CAAC,EAAO,YAAY,EAAO,UAAU,CAAgB,GAE/F,IAAmB,KAAe,IAAI,IAAc,KAAiB,IAAI,IAAgB,EAAe,MAAM,IAG9G,KAAc,MAA4B;EAC9C,IAAM,IAAO,EAAM;EACnB,CAAI,CAAC,KAAS,CAAC,EAAW,SAAS,SAAS,CAAI,KAAK,CAAC,EAAe,SAAS,SAAS,CAAI,MACzF,EAAU,EAAK;CAEnB,GAEM,IAAyB,QAAkB;EAC/C,IAAM,IAAU,EAAW;EAC3B,IAAI,CAAC,GAAS;EACd,IAAM,IAAO,EAAQ,sBAAsB,GACrC,IAAkB,KAAK,IAAI,EAAQ,QAAQ,CAAC,IAAI,KAAK,GACrD,IAAY,EAAK,SAAS,IAAI,KAAmB,OAAO;EAC9D,EAAiB;GACf,UAAU;GACV,MAAM,EAAK;GACX,KAAK,IAAY,EAAK,SAAS,IAAI,KAAK,IAAI,GAAG,EAAK,MAAM,IAAkB,CAAC;GAC7E,OAAO,EAAK;GACZ,QAAQ;EACV,CAAC;CACH,GAAG,CAAC,EAAQ,MAAM,CAAC;CA0BnB,AAxBA,QAAgB;EACT,OAIL,OAHA,EAAuB,GACvB,OAAO,iBAAiB,UAAU,CAAsB,GACxD,OAAO,iBAAiB,UAAU,GAAwB,EAAI,SACjD;GAEX,AADA,OAAO,oBAAoB,UAAU,CAAsB,GAC3D,OAAO,oBAAoB,UAAU,GAAwB,EAAI;EACnE;CACF,GAAG,CAAC,GAAQ,CAAsB,CAAC,GAInC,QAAgB;EACd,IAAM,IAAU,EAAW;EAC3B,IAAI,CAAC,GAAS;EACd,IAAM,UAAe,EAAa,EAAQ,eAAe,EAAE;EAC3D,EAAO;EACP,IAAM,IAAW,IAAI,eAAe,CAAM;EAE1C,OADA,EAAS,QAAQ,CAAO,SACX,EAAS,WAAW;CACnC,GAAG,CAAC,CAAC,GAGL,QAAgB;EACd,IAAI,KAAU,EAAe,WAAW,KAAoB,GAAG;GAC7D,IAAM,IAAO,EAAe,SACtB,IAAgB,EAAK,SAAS;GACpC,IAAI,GAAe;IACjB,IAAM,IAAW,EAAK,sBAAsB,GACtC,IAAa,EAAc,sBAAsB;IAEvD,AAAI,EAAW,SAAS,EAAS,SAC/B,EAAK,aAAa,EAAW,SAAS,EAAS,SACtC,EAAW,MAAM,EAAS,QACnC,EAAK,aAAa,EAAS,MAAM,EAAW;GAEhD;EACF;CACF,GAAG,CAAC,GAAQ,CAAgB,CAAC;CAE7B,IAAM,KAAgB,IAAyB,YAAY;EACzD,IAAI,GAAU;EACd,IAAM,IAAQ,KAAiB,IAAI,IAAgB,MAAS,SAAS,EAAe,GAAG,EAAE,IAAI,EAAe;EAG5G,AAFA,EAAoB,MAAU,KAAA,KAAa,KAAS,IAAI,EAAQ,EAAM,CAAC,QAAQ,IAAI,GACnF,EAAU,EAAI,GACd,EAAuB;CACzB,GAEM,WAAuB;EACvB,MACJ,EAAY,SAAS,MAAM,EAAE,eAAe,GAAK,CAAC,GAC9C,IAAQ,EAAU,EAAK,IACtB,EAAa;CACpB,GAEM,MAAiB,MAA+C;EACpE,IAAI,EAAM,QAAQ,OAAO;GACvB,EAAU,EAAK;GACf;EACF;EACI,QAAM,WAAW,EAAY,WAAW,KAAY,EAAM,oBAAoB,EAAM,YAAY,eAAe,EAAM,UAAU,EAAM,WAAW,EAAM,UAC1J;WAAQ,EAAM,KAAd;IACE,KAAK;IACL,KAAK;KACH,IAAI,CAAC,GAAQ,EAAa,EAAM,QAAQ,YAAY,SAAS,OAAO;UAC/D,IAAI,EAAe,QAAQ;MAC9B,IAAM,IAAU,EAAe,QAAQ,CAAgB,GACjD,IAAO,EAAM,QAAQ,cAAc,IAAI,IACvC,IAAO,GAAgB,IAAU,IAAO,EAAe,UAAU,EAAe;MACtF,EAAoB,EAAQ,EAAK,CAAC,KAAK;KACzC;KACA;IAEF,KAAK;IACL,KAAK,OAAO;KACV,AAAK,KAAQ,EAAa;KAC1B,IAAM,IAAO,EAAM,QAAQ,SAAS,EAAe,KAAK,EAAe,GAAG,EAAE;KAC5E,EAAoB,MAAS,KAAA,IAAY,OAAO,EAAQ,EAAK,CAAC,KAAK;KACnE;IACF;IACA,KAAK;IACL,KAAK;KACH,AAAK,IACI,KAAoB,KAAG,EAAkB,EAAQ,EAAiB,IAD9D,EAAa;KAE1B;IACF,KAAK;KACH,IAAI,CAAC,GAAQ;KACb,EAAU,EAAK;KACf;IACF,SACE;GACJ;GAEA,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;EAFtB;CAGF,GAEM,KAAqB,MAAmB;EACxC,WAAY,EAAO,WAGvB;OAFA,EAAoB,EAAO,KAAK,GAChC,EAAY,SAAS,MAAM,EAAE,eAAe,GAAK,CAAC,GAC9C,GAAU;IACZ,IAAM,IAAgB,MAAM,QAAQ,CAAK,IAAI,IAAQ,CAAC,GAClD;IAMJ,AALA,AAGE,IAHE,EAAc,SAAS,EAAO,KAAK,IAC1B,EAAc,QAAO,MAAK,MAAM,EAAO,KAAK,IAE5C,CAAC,GAAG,GAAe,EAAO,KAAK,GAE5C,EAAS,CAAQ;GACnB,OAEE,AADA,EAAS,EAAO,KAAK,GACrB,EAAU,EAAK;EACjB;CACF,GASM,MAA2B,GAA0C,MAAmB;EAE5F,IADA,EAAY,UAAU,IAClB,EAAM,gBAAgB,SAAS;GAGjC,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAkB,CAAM;GACxB;EACF;EAEA,AADA,EAAM,gBAAgB,GACtB,EAAc,UAAU;GAAE,WAAW,EAAM;GAAW,GAAG,EAAM;GAAS,GAAG,EAAM;EAAQ;CAC3F,GAEM,MAAyB,MAA6C;EAC1E,IAAM,IAAQ,EAAc;EAE5B,IADA,EAAc,UAAU,MACpB,CAAC,KAAS,EAAM,cAAc,EAAM,WAAW;EAEnD,IAAM,IAAQ,KAAK,MAAM,EAAM,UAAU,EAAM,GAAG,EAAM,UAAU,EAAM,CAAC;EAEzE,AADA,EAAY,UAAU,IAAQ,IAC9B,EAAM,gBAAgB;CACxB,GAEM,WAAkC;EAEtC,AADA,EAAc,UAAU,MACxB,EAAY,UAAU;CACxB,GAEM,MAAoB,GAAqB,MAA+B;EAC5E,EAAE,gBAAgB,GACd,OAAY,EAAQ,MAAK,MAAU,EAAO,UAAU,CAAS,CAAC,EAAE,cACpE,EAAY,SAAS,MAAM,EAAE,eAAe,GAAK,CAAC,GAElD,GADsB,MAAM,QAAQ,CAAK,IAAI,IAAQ,CAAC,EAAA,CAC/B,QAAO,MAAK,MAAM,CAAS,CAAC;CACrD;CAGA,QAAgB;EACd,IAAI,KAAY,EAAU,SAAS;GACjC,IAAM,IAAS,EAAU,SACnB,IAAiB,EACpB,QAAO,MAAO,EAAoB,SAAS,EAAI,KAAK,CAAC,CAAC,CACtD,KAAI,MAAO,EAAI,KAAK,CAAC,CACrB,KAAK,IAAI,GAGN,IAAgB,EAAO,cAAc,EAAO;GAClD,EAAe,IAAgB,IAAiB,EAAE;EACpD,OACE,EAAe,EAAE;CAErB,GAAG;EAAC;EAAU;EAAS;CAAmB,CAAC;CAG3C,IAAM,WAA4B;EAChC,IAAI,EAAoB,WAAW,GACjC,OAAO,kBAAC,QAAD;GAAM,WAAU;GAA+B,UAAA;EAAkB,CAAA;EAG1E,IAAM,IAAkB,EAAQ,QAAO,MAAO,EAAoB,SAAS,EAAI,KAAK,CAAC;EAErF,IAAI,GAAU;GACZ,IAAM,IAAU;GAShB,OACE,kBAAC,OAAD;IACE,KAAK;IACL,WAAW;;UARX,IAAU,kDAAkD,4BAA4B;UACxF,IAAc,2BAA2B,GAAG;;IAQ5C,YAAU,KAA4B,KAAA;IAEtC,OAAO;KACL,gBAAgB;KAEhB,GAAI,IAAU,EAAE,cAAc,UAAU,IAAI,CAAC;IAC/C;IAKC,UAAA,EAAgB,KAAI,MACnB,kBAAC,QAAD;KAA6B,WAAU;KAAvC,UAAA,CACG,EAAO,OACR,kBAAC,UAAD;MACE,MAAK;MACL,UAAU,KAAY,EAAO;MAC7B,UAAU,MAAM,GAAiB,GAAG,EAAO,KAAK;MAChD,WAAU;MACV,cAAY,UAAU,EAAO;MAE7B,UAAA,kBAAC,GAAD,CAAa,CAAA;KACP,CAAA,CACJ;IAXK,GAAA,EAAS,CAAM,CAWpB,CACP;GACE,CAAA;EAET;EAAO;GACL,IAAM,IAAiB,EAAQ,MAAK,MAAO,EAAI,UAAU,EAAoB,EAAE;GAC/E,OAAO,IAAiB,kBAAC,QAAD;IAAM,WAAU;IAAY,UAAA,EAAe;GAAY,CAAA,IAAI,kBAAC,QAAD;IAAM,WAAU;IAA+B,UAAA;GAAkB,CAAA;EACtJ;CACF,GAIM,KAAgB;;;;;MAKlB,IACG,IAAc,QAAQ,wBACvB,MAAM;;CAGZ,OACE,kBAAC,OAAD;EACE,KAAK;EACE;EACP,WAAW,yCAAyC,KAAa;EACjE,QAAQ;EACR,WAAW;EALb,UAAA,CAQE,kBAAC,OAAD;GACE,KAAK;GACL,IAAI;GACJ,UAAU,IAAW,KAAK;GAC1B,WAAW,GAAG,GAAc,GAAG,IAAW,kCAAkC;GAC5E,SAAS;GAET,MAAK;GACL,cAAY,MAAc,IAAiB,KAAA,IAAY;GACvD,mBAAiB;GACjB,oBAAkB;GAClB,iBAAc;GACd,iBAAe;GACf,iBAAe,KAAY,KAAA;GAC3B,iBAAe,IAAS,IAAY,KAAA;GACpC,yBAAuB,KAAU,KAAoB,IAAI,EAAS,EAAQ,EAAiB,IAAI,KAAA;GAfjG,UAAA,CAiBE,kBAAC,OAAD;IACE,WAAU;IACV,OAAO,EAAE,cAAc,IAAY,KAAK,EAAE;IAEzC,UAAA,GAAoB;GAClB,CAAA,GAEJ,KACC,kBAAC,OAAD;IACE,eAAY;IACZ,OAAO;KACL,UAAU;KACV,OAAO;KACP,KAAK;KACL,WAAW;KACX,eAAe;KACf,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,OAAO;KACP,QAAQ;IACV;IAEA,UAAA,kBAAC,GAAD,EAAuB,UAAS,CAAA;GAC7B,CAAA,CAEJ;EAGJ,CAAA,GAAA,KAAU,OAAO,WAAa,OAAe,EAC5C,kBAAC,MAAD;GACE,KAAK;GACL,IAAI;GACJ,WAAU;GACV,OAAO;IAAE,GAAG;IAAe,aAAa;GAAQ;GAChD,gBAAgB,MAAU,EAAM,gBAAgB;GAChD,MAAK;GACL,mBAAiB,KAAkB;GACnC,wBAAsB,KAAY,KAAA;GAElC,eAAe,EAAY,SAAS,MAAM,EAAE,eAAe,GAAK,CAAC;GACjE,UAAU;GAET,UAAA,EAAQ,SAAS,IAChB,EAAQ,KAAK,GAAQ,MACnB,kBAAC,MAAD;IAEE,IAAI,EAAS,CAAM;IACnB,WAAW,OAAO,EAAO,WAAW,kCAAkC,mCAAmC,mDAAmD,MAAU,IAAmB,gBAAgB,GACtM,GAAG,EAAoB,SAAS,EAAO,KAAK,KAAK,CAAC,IAAW,8BAA8B,GAC3F,GAAG,EAAoB,SAAS,EAAO,KAAK,KAAK,IAAW,kBAAkB;IAEjF,gBAAgB,MAAU,GAAwB,GAAO,CAAM;IAC/D,aAAa;IACb,iBAAiB;IACjB,UAAU,MAAU;KAIlB,AAHA,EAAM,eAAe,GACrB,EAAM,gBAAgB,IAClB,EAAY,WAAW,EAAM,WAAW,MAAG,EAAkB,CAAM,GACvE,EAAY,UAAU;IACxB;IACA,gBAAe,MAAS;KAEtB,AAAI,EAAM,gBAAgB,YAAY,EAAM,aAAa,EAAM,cAAc,CAAC,EAAO,YACnF,EAAoB,EAAO,KAAK;IAEpC;IACA,MAAK;IACL,iBAAe,EAAO,YAAY,KAAA;IAClC,iBAAe,EAAoB,SAAS,EAAO,KAAK;IAGvD,UAAA,EAAO;GACN,GA3BG,EAAS,CAAM,CA2BlB,CACL,IAED,kBAAC,MAAD;IAAI,WAAU;IAAkC,UAAA;GAE5C,CAAA;EAEJ,CAAA,GACJ,SAAS,IACX,CACG;;AAET"}

package/dist/components/Table/index.d.ts

@@ -1,11 +1,26 @@
 import React from 'react';
+export type TableCardOptions = {
+    /** Applied to each Table.Body grid. */
+    gridClassName?: string;
+    gridStyle?: React.CSSProperties;
+    /** Applied to each body row card. */
+    className?: string;
+    style?: React.CSSProperties;
+    fieldClassName?: string;
+    fieldStyle?: React.CSSProperties;
+    labelClassName?: string;
+    labelStyle?: React.CSSProperties;
+};
 export type TableProps = {
     children: React.ReactNode;
+    card?: boolean;
+    cardOptions?: TableCardOptions;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
     onMouseEnter?: (e: React.MouseEvent) => void;
     onMouseLeave?: (e: React.MouseEvent) => void;
 } & React.TableHTMLAttributes<HTMLTableElement>;
+declare const Table: ({ children, className, card, cardOptions, onClick, onMouseEnter, onMouseLeave, ...rest }: TableProps) => React.JSX.Element;
 export type TableHeadProps = React.HTMLAttributes<HTMLTableSectionElement>;
 export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 export type TableRowProps = {
@@ -19,6 +34,8 @@ export type TableRowProps = {
 } & Omit<React.HTMLAttributes<HTMLTableRowElement>, 'className' | 'onClick' | 'onDoubleClick' | 'onMouseEnter' | 'onMouseLeave'>;
 export type TableCellProps = {
     children?: React.ReactNode;
+    /** Visible field label in card body cells only. */
+    label?: React.ReactNode;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
     colSpan?: number;
@@ -42,7 +59,8 @@ export type TableHeaderCellProps = {
 } & React.ThHTMLAttributes<HTMLTableCellElement>;
 export type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
 export type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
-interface TableCompound extends React.FC<TableProps> {
+export type TableCardProps = Omit<TableProps, 'card'>;
+interface TableSubcomponents {
     Caption: React.FC<TableCaptionProps>;
     Footer: React.FC<TableFooterProps>;
     Head: React.FC<TableHeadProps>;
@@ -51,5 +69,8 @@ interface TableCompound extends React.FC<TableProps> {
     Cell: React.FC<TableCellProps>;
     HeaderCell: React.FC<TableHeaderCellProps>;
 }
-declare const TableWithCompounds: TableCompound;
+declare const TableCard: (props: TableCardProps) => React.JSX.Element;
+declare const TableWithCompounds: typeof Table & TableSubcomponents & {
+    Card: typeof TableCard & TableSubcomponents;
+};
 export default TableWithCompounds;