@reapit/elements 5.0.0-beta.80 → 5.0.0-beta.82

package/dist/js/lab/select-custom.js

@@ -1,246 +1,259 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
-import { L as S } from "../label-text-CdSGzVDN.js";
-import { s as p } from "../index-AHmiDD3r.js";
-import "../button-base-BxF98pDk.js";
-import { createContext as _, useContext as H, useRef as U, useState as b, useEffect as E } from "react";
-import { B as J } from "../button-DYIdjjTt.js";
-import { CheckIcon as Q } from "../icons/check.js";
-import { B as X } from "../badge-C_Za5PMD.js";
-import { T as z } from "../text-Ceho0w2U.js";
-import { CloseIcon as Y } from "../icons/close.js";
-import { ChevronDownIcon as Z } from "../icons/chevron-down.js";
-import { C as T } from "../chip-group-DqeYXW9V.js";
-import { P as D } from "../popover-dzUc2bK7.js";
-const M = /* @__PURE__ */ p("div")({
-  name: "ElExperimentalSelectCustomContainer",
-  class: "el-experimental-select-custom-container",
-  propsAsIs: !1
-}), ee = () => J, te = /* @__PURE__ */ p(ee())({
-  name: "ElExperimentalSelectCustomInputField",
-  class: "el-experimental-select-custom-input-field",
-  propsAsIs: !0
-}), oe = /* @__PURE__ */ p("div")({
-  name: "ElExperimentalSelectCustomContent",
-  class: "el-experimental-select-custom-content",
-  propsAsIs: !1
-}), le = /* @__PURE__ */ p("div")({
-  name: "ElExperimentalSelectCustomPlaceholder",
-  class: "el-experimental-select-custom-placeholder",
-  propsAsIs: !1
-}), re = "el-experimental-select-custom-popover", ne = /* @__PURE__ */ p("div")({
-  name: "ElExperimentalSelectCustomOptionGroup",
-  class: "el-experimental-select-custom-option-group",
-  propsAsIs: !1
-}), Oe = "el-experimental-select-custom-group-title", se = /* @__PURE__ */ p("li")({
-  name: "ElExperimentalSelectCustomOption",
-  class: "el-experimental-select-custom-option",
-  propsAsIs: !1
-}), ce = /* @__PURE__ */ p("div")({
-  name: "ElExperimentalSelectCustomLabelContainer",
-  class: "el-experimental-select-custom-label-container",
-  propsAsIs: !1
-}), ae = /* @__PURE__ */ p("div")({
-  name: "ElExperimentalSelectCustomLabelItem",
-  class: "el-experimental-select-custom-label-item",
-  propsAsIs: !1
-}), ie = /* @__PURE__ */ p("div")({
-  name: "ElExperimentalSelectCustomAdditionalInfo1",
-  class: "el-experimental-select-custom-additional-info1",
-  propsAsIs: !1
-}), pe = /* @__PURE__ */ p("div")({
-  name: "ElExperimentalSelectCustomAdditionalInfo2",
-  class: "el-experimental-select-custom-additional-info2",
-  propsAsIs: !1
-}), I = ({ label: r, children: c }) => /* @__PURE__ */ x(ne, { role: "group", children: [
-  r && /* @__PURE__ */ n(S, { size: "xs", children: r }),
-  c
-] }), G = _({
-  selectedValues: [],
-  onSelect: () => {
-  },
-  isMultiple: !1
+import { t as e } from "../dist-DLc9lUhF.js";
+import "../make-icon-Cez0iOAn.js";
+import { t } from "../chevron-down-BJacFTxw.js";
+import { t as n } from "../close-DmeJ8DiA.js";
+import { t as r } from "../button-jgaS-YWF.js";
+import { t as i } from "../check-DeyRulIx.js";
+import { t as a } from "../popover-DY4LMxoS.js";
+import "../anchor-positioning-XqfCUAUX.js";
+import { t as o } from "../chip-group-BQqToHL0.js";
+import { LabelText as s } from "../core/label-text.js";
+import { Badge as c } from "../core/badge.js";
+import { Text as l } from "../utils/text.js";
+import { createContext as u, useContext as d, useEffect as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/lab/select-custom/styles.tsx
+var _ = /* @__PURE__ */ e("div")({
+	name: "ElExperimentalSelectCustomContainer",
+	class: "el-experimental-select-custom-container",
+	propsAsIs: !1
+}), v = /* @__PURE__ */ e(r)({
+	name: "ElExperimentalSelectCustomInputField",
+	class: "el-experimental-select-custom-input-field",
+	propsAsIs: !0
+}), y = /* @__PURE__ */ e("div")({
+	name: "ElExperimentalSelectCustomContent",
+	class: "el-experimental-select-custom-content",
+	propsAsIs: !1
+}), b = /* @__PURE__ */ e("div")({
+	name: "ElExperimentalSelectCustomPlaceholder",
+	class: "el-experimental-select-custom-placeholder",
+	propsAsIs: !1
+}), x = "el-experimental-select-custom-popover", S = /* @__PURE__ */ e("div")({
+	name: "ElExperimentalSelectCustomOptionGroup",
+	class: "el-experimental-select-custom-option-group",
+	propsAsIs: !1
+}), C = "el-experimental-select-custom-group-title", w = /* @__PURE__ */ e("li")({
+	name: "ElExperimentalSelectCustomOption",
+	class: "el-experimental-select-custom-option",
+	propsAsIs: !1
+}), T = /* @__PURE__ */ e("div")({
+	name: "ElExperimentalSelectCustomLabelContainer",
+	class: "el-experimental-select-custom-label-container",
+	propsAsIs: !1
+}), E = /* @__PURE__ */ e("div")({
+	name: "ElExperimentalSelectCustomLabelItem",
+	class: "el-experimental-select-custom-label-item",
+	propsAsIs: !1
+}), D = /* @__PURE__ */ e("div")({
+	name: "ElExperimentalSelectCustomAdditionalInfo1",
+	class: "el-experimental-select-custom-additional-info1",
+	propsAsIs: !1
+}), O = /* @__PURE__ */ e("div")({
+	name: "ElExperimentalSelectCustomAdditionalInfo2",
+	class: "el-experimental-select-custom-additional-info2",
+	propsAsIs: !1
+}), k = ({ label: e, children: t }) => /* @__PURE__ */ g(S, {
+	role: "group",
+	children: [e && /* @__PURE__ */ h(s, {
+		size: "xs",
+		children: e
+	}), t]
+}), A = u({
+	selectedValues: [],
+	onSelect: () => {},
+	isMultiple: !1
 });
-function me() {
-  return H(G);
+function j() {
+	return d(A);
 }
-const A = ({
-  value: r,
-  label: c,
-  badge: l,
-  additionalInfo1: o,
-  additionalInfo2: e
-}) => {
-  const { selectedValues: s, onSelect: t } = me(), i = s.some((v) => v.value === r);
-  return /* @__PURE__ */ x(se, { role: "option", "aria-selected": i, tabIndex: -1, onClick: () => t({ value: r, label: c }), children: [
-    /* @__PURE__ */ x(ce, { children: [
-      /* @__PURE__ */ x(ae, { children: [
-        /* @__PURE__ */ n(S, { size: "xs", children: c }),
-        l && /* @__PURE__ */ n(X, { colour: "neutral", children: l })
-      ] }),
-      i && /* @__PURE__ */ n(Q, { size: "md", color: "secondary" })
-    ] }),
-    o && /* @__PURE__ */ n(ie, { children: o }),
-    e && /* @__PURE__ */ n(pe, { children: e })
-  ] });
-}, ue = (r) => {
-  const c = U(null), [l, o] = b(0);
-  return E(() => {
-    const e = c.current;
-    if (!e) return;
-    const s = (t) => {
-      const i = e.querySelectorAll('[role="option"]');
-      i.length && (t.key === "ArrowDown" ? (t.preventDefault(), o((u) => (u + 1) % i.length)) : t.key === "ArrowUp" ? (t.preventDefault(), o((u) => (u - 1 + i.length) % i.length)) : t.key === "Enter" ? (t.preventDefault(), i[l]?.click()) : t.key === "Escape" && (t.preventDefault(), document.getElementById(r)?.hidePopover?.()));
-    };
-    return e.addEventListener("keydown", s), () => e.removeEventListener("keydown", s);
-  }, [l, r]), E(() => {
-    const e = c.current;
-    if (!e) return;
-    const s = e.querySelectorAll('[role="option"]');
-    s.forEach((t, i) => {
-      t.setAttribute("tabindex", i === l ? "0" : "-1");
-    }), s[l]?.focus();
-  }, [l]), E(() => {
-    const e = document.getElementById(r);
-    if (!e) return;
-    const s = new MutationObserver(() => {
-      if (e.matches(":popover-open")) {
-        const t = c.current?.querySelectorAll('[role="option"]');
-        t && t.length > 0 && (o(0), t[0].focus());
-      }
-    });
-    return s.observe(e, { attributes: !0, attributeFilter: ["popover"] }), () => s.disconnect();
-  }, [r]), c;
-}, de = (r, c) => {
-  const l = [], o = (e) => {
-    if (e) {
-      if (Array.isArray(e))
-        e.forEach(o);
-      else if (typeof e == "object" && "props" in e) {
-        const s = e.props;
-        e.type === A && s.selected && l.push({ value: s.value, label: s.label }), e.type === I && o(s.children);
-      }
-    }
-  };
-  return o(r), !c && l.length > 1 ? [l[0]] : l;
-}, fe = (r) => {
-  let c = 0;
-  const l = (o) => {
-    if (o) {
-      if (Array.isArray(o))
-        o.forEach(l);
-      else if (typeof o == "object" && "props" in o) {
-        const e = o.props;
-        o.type === A && (c += 1), o.type === I && l(e.children);
-      }
-    }
-  };
-  return l(r), c;
+//#endregion
+//#region src/lab/select-custom/option/option.tsx
+var M = ({ value: e, label: t, badge: n, additionalInfo1: r, additionalInfo2: a }) => {
+	let { selectedValues: o, onSelect: l } = j(), u = o.some((t) => t.value === e), d = () => l({
+		value: e,
+		label: t
+	});
+	return /* @__PURE__ */ g(w, {
+		role: "option",
+		"aria-selected": u,
+		tabIndex: -1,
+		onClick: d,
+		children: [
+			/* @__PURE__ */ g(T, { children: [/* @__PURE__ */ g(E, { children: [/* @__PURE__ */ h(s, {
+				size: "xs",
+				children: t
+			}), n && /* @__PURE__ */ h(c, {
+				colour: "neutral",
+				children: n
+			})] }), u && /* @__PURE__ */ h(i, {
+				size: "md",
+				color: "secondary"
+			})] }),
+			r && /* @__PURE__ */ h(D, { children: r }),
+			a && /* @__PURE__ */ h(O, { children: a })
+		]
+	});
+}, N = (e) => {
+	let t = p(null), [n, r] = m(0);
+	return f(() => {
+		let i = t.current;
+		if (!i) return;
+		let a = (t) => {
+			let a = i.querySelectorAll("[role=\"option\"]");
+			a.length && (t.key === "ArrowDown" ? (t.preventDefault(), r((e) => (e + 1) % a.length)) : t.key === "ArrowUp" ? (t.preventDefault(), r((e) => (e - 1 + a.length) % a.length)) : t.key === "Enter" ? (t.preventDefault(), a[n]?.click()) : t.key === "Escape" && (t.preventDefault(), document.getElementById(e)?.hidePopover?.()));
+		};
+		return i.addEventListener("keydown", a), () => i.removeEventListener("keydown", a);
+	}, [n, e]), f(() => {
+		let e = t.current;
+		if (!e) return;
+		let r = e.querySelectorAll("[role=\"option\"]");
+		r.forEach((e, t) => {
+			e.setAttribute("tabindex", t === n ? "0" : "-1");
+		}), r[n]?.focus();
+	}, [n]), f(() => {
+		let n = document.getElementById(e);
+		if (!n) return;
+		let i = new MutationObserver(() => {
+			if (n.matches(":popover-open")) {
+				let e = t.current?.querySelectorAll("[role=\"option\"]");
+				e && e.length > 0 && (r(0), e[0].focus());
+			}
+		});
+		return i.observe(n, {
+			attributes: !0,
+			attributeFilter: ["popover"]
+		}), () => i.disconnect();
+	}, [e]), t;
+}, P = (e, t) => {
+	let n = [], r = (e) => {
+		if (e) {
+			if (Array.isArray(e)) e.forEach(r);
+			else if (typeof e == "object" && "props" in e) {
+				let t = e.props;
+				e.type === M && t.selected && n.push({
+					value: t.value,
+					label: t.label
+				}), e.type === k && r(t.children);
+			}
+		}
+	};
+	return r(e), !t && n.length > 1 ? [n[0]] : n;
+}, F = (e) => {
+	let t = 0, n = (e) => {
+		if (e) {
+			if (Array.isArray(e)) e.forEach(n);
+			else if (typeof e == "object" && "props" in e) {
+				let r = e.props;
+				e.type === M && (t += 1), e.type === k && n(r.children);
+			}
+		}
+	};
+	return n(e), t;
 };
-function V({
-  id: r,
-  size: c = "medium",
-  label: l,
-  children: o,
-  helperText: e,
-  errorMessage: s,
-  isMultiple: t = !1,
-  isClearable: i = !1,
-  isRequired: u = !1,
-  isDisabled: v = !1,
-  popoverMaxHeight: W,
-  popoverPlacement: $
-}) {
-  const [d, k] = b(() => de(o, t)), [j, R] = b(0), C = `select-popover-${r.replace(/\s+/g, "-").toLowerCase()}`, h = `select-input-${r.replace(/\s+/g, "-").toLowerCase()}`, q = ue(C), w = () => {
-    document.getElementById(C)?.hidePopover?.();
-  }, O = (a) => {
-    k((m) => t ? m.find((f) => f.value === a.value) ? m.filter((f) => f.value !== a.value) : [...m, a] : [a]), t || w();
-  }, F = () => k([]), P = t ? "" : d[0]?.label || "", K = D.getTriggerProps({
-    id: h,
-    popoverTarget: C,
-    popoverTargetAction: "toggle"
-  }), L = `${r}-description`, g = s || e, B = !!s, N = fe(o), y = t && d.length >= N;
-  return E(() => {
-    y && w();
-  }, [y]), E(() => {
-    const a = document.getElementById(h);
-    if (!a) return;
-    const m = () => R(a.offsetWidth);
-    m();
-    const f = new ResizeObserver(m);
-    return f.observe(a), () => f.disconnect();
-  }, [h]), /* @__PURE__ */ x(M, { id: r, children: [
-    l && /* @__PURE__ */ n(S, { size: c === "large" ? "sm" : "xs", isRequired: u, children: l }),
-    /* @__PURE__ */ x(
-      te,
-      {
-        variant: "secondary",
-        size: c,
-        ...K,
-        type: "button",
-        role: "combobox",
-        "aria-expanded": "false",
-        "aria-disabled": v || y,
-        "aria-describedby": g ? L : void 0,
-        "aria-invalid": B || !1,
-        children: [
-          P ? /* @__PURE__ */ n(oe, { children: /* @__PURE__ */ n(z, { as: "span", colour: "primary", font: "text-xs/regular", overflow: "truncate", children: P }) }) : /* @__PURE__ */ n(le, { children: /* @__PURE__ */ n(z, { as: "span", colour: "placeholder", font: "text-xs/regular", overflow: "truncate", children: "Select an option" }) }),
-          i && !t && d.length > 0 ? /* @__PURE__ */ n(
-            Y,
-            {
-              color: "primary",
-              size: "sm",
-              onClick: (a) => {
-                a.stopPropagation(), F();
-              }
-            }
-          ) : /* @__PURE__ */ n(Z, { size: "sm", color: "primary" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ n(
-      D,
-      {
-        id: C,
-        anchorId: h,
-        placement: $ || "bottom-start",
-        popover: "auto",
-        className: re,
-        maxHeight: W,
-        style: { minWidth: j },
-        gap: "var(--spacing-1)",
-        children: /* @__PURE__ */ n(G.Provider, { value: { selectedValues: d, onSelect: O, isMultiple: t }, children: /* @__PURE__ */ n("ul", { role: "listbox", ref: q, tabIndex: -1, children: o }) })
-      }
-    ),
-    g && /* @__PURE__ */ n(S, { id: L, size: "xs", "data-error": !!B, children: g }),
-    t && d.length > 0 && /* @__PURE__ */ n(T, { variant: "selection", children: d.map((a, m) => /* @__PURE__ */ n(
-      T.Item,
-      {
-        variant: "filter",
-        onClick: () => O(a),
-        "aria-disabled": v,
-        children: a.label
-      },
-      `${a.value}-${m}`
-    )) })
-  ] });
+//#endregion
+//#region src/lab/select-custom/select-custom.tsx
+function I({ id: e, size: r = "medium", label: i, children: c, helperText: u, errorMessage: d, isMultiple: p = !1, isClearable: S = !1, isRequired: C = !1, isDisabled: w = !1, popoverMaxHeight: T, popoverPlacement: E }) {
+	let [D, O] = m(() => P(c, p)), [k, j] = m(0), M = `select-popover-${e.replace(/\s+/g, "-").toLowerCase()}`, I = `select-input-${e.replace(/\s+/g, "-").toLowerCase()}`, L = N(M), R = () => {
+		document.getElementById(M)?.hidePopover?.();
+	}, z = (e) => {
+		O((t) => p ? t.find((t) => t.value === e.value) ? t.filter((t) => t.value !== e.value) : [...t, e] : [e]), p || R();
+	}, B = () => O([]), V = p ? "" : D[0]?.label || "", H = a.getTriggerProps({
+		id: I,
+		popoverTarget: M,
+		popoverTargetAction: "toggle"
+	}), U = `${e}-description`, W = d || u, G = !!d, K = F(c), q = p && D.length >= K;
+	return f(() => {
+		q && R();
+	}, [q]), f(() => {
+		let e = document.getElementById(I);
+		if (!e) return;
+		let t = () => j(e.offsetWidth);
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [I]), /* @__PURE__ */ g(_, {
+		id: e,
+		children: [
+			i && /* @__PURE__ */ h(s, {
+				size: r === "large" ? "sm" : "xs",
+				isRequired: C,
+				children: i
+			}),
+			/* @__PURE__ */ g(v, {
+				variant: "secondary",
+				size: r,
+				...H,
+				type: "button",
+				role: "combobox",
+				"aria-expanded": "false",
+				"aria-disabled": w || q,
+				"aria-describedby": W ? U : void 0,
+				"aria-invalid": G || !1,
+				children: [V ? /* @__PURE__ */ h(y, { children: /* @__PURE__ */ h(l, {
+					as: "span",
+					colour: "primary",
+					font: "text-xs/regular",
+					overflow: "truncate",
+					children: V
+				}) }) : /* @__PURE__ */ h(b, { children: /* @__PURE__ */ h(l, {
+					as: "span",
+					colour: "placeholder",
+					font: "text-xs/regular",
+					overflow: "truncate",
+					children: "Select an option"
+				}) }), S && !p && D.length > 0 ? /* @__PURE__ */ h(n, {
+					color: "primary",
+					size: "sm",
+					onClick: (e) => {
+						e.stopPropagation(), B();
+					}
+				}) : /* @__PURE__ */ h(t, {
+					size: "sm",
+					color: "primary"
+				})]
+			}),
+			/* @__PURE__ */ h(a, {
+				id: M,
+				anchorId: I,
+				placement: E || "bottom-start",
+				popover: "auto",
+				className: x,
+				maxHeight: T,
+				style: { minWidth: k },
+				gap: "var(--spacing-1)",
+				children: /* @__PURE__ */ h(A.Provider, {
+					value: {
+						selectedValues: D,
+						onSelect: z,
+						isMultiple: p
+					},
+					children: /* @__PURE__ */ h("ul", {
+						role: "listbox",
+						ref: L,
+						tabIndex: -1,
+						children: c
+					})
+				})
+			}),
+			W && /* @__PURE__ */ h(s, {
+				id: U,
+				size: "xs",
+				"data-error": !!G,
+				children: W
+			}),
+			p && D.length > 0 && /* @__PURE__ */ h(o, {
+				variant: "selection",
+				children: D.map((e, t) => /* @__PURE__ */ h(o.Item, {
+					variant: "filter",
+					onClick: () => z(e),
+					"aria-disabled": w,
+					children: e.label
+				}, `${e.value}-${t}`))
+			})
+		]
+	});
 }
-V.Group = I;
-V.Option = A;
-export {
-  ie as ElExperimentalSelectCustomAdditionalInfo1,
-  pe as ElExperimentalSelectCustomAdditionalInfo2,
-  M as ElExperimentalSelectCustomContainer,
-  oe as ElExperimentalSelectCustomContent,
-  te as ElExperimentalSelectCustomInputField,
-  ce as ElExperimentalSelectCustomLabelContainer,
-  ae as ElExperimentalSelectCustomLabelItem,
-  se as ElExperimentalSelectCustomOption,
-  ne as ElExperimentalSelectCustomOptionGroup,
-  le as ElExperimentalSelectCustomPlaceholder,
-  A as ExperimentalSelectCustomOption,
-  I as ExperimentalSelectCustomOptionGroup,
-  V as SelectCustom,
-  Oe as elExperimentalSelectCustomGroupTitle,
-  re as elExperimentalSelectCustomPopover,
-  ue as useSelectKeyboardNavigation
-};
+I.Group = k, I.Option = M;
+//#endregion
+export { D as ElExperimentalSelectCustomAdditionalInfo1, O as ElExperimentalSelectCustomAdditionalInfo2, _ as ElExperimentalSelectCustomContainer, y as ElExperimentalSelectCustomContent, v as ElExperimentalSelectCustomInputField, T as ElExperimentalSelectCustomLabelContainer, E as ElExperimentalSelectCustomLabelItem, w as ElExperimentalSelectCustomOption, S as ElExperimentalSelectCustomOptionGroup, b as ElExperimentalSelectCustomPlaceholder, M as ExperimentalSelectCustomOption, k as ExperimentalSelectCustomOptionGroup, I as SelectCustom, C as elExperimentalSelectCustomGroupTitle, x as elExperimentalSelectCustomPopover, N as useSelectKeyboardNavigation };