@t-headless-ui/react 1.1.1 → 1.1.3

package/dist/es/select/components/select-root.mjs

@@ -0,0 +1,335 @@
+"use client";
+import { jsx as te } from "react/jsx-runtime";
+import { useMemo as ke, useRef as h, useEffect as O, useCallback as we, useImperativeHandle as Ae } from "react";
+import { getHotkeyHandler as Ce } from "../../utils/getHotkeyHandler.mjs";
+import { Esc as Ie, Enter as Oe, ArrowUp as xe, ArrowDown as Te, Tab as Pe } from "../../utils/keycode.mjs";
+import { flatChildren as Se } from "../utils/flat-children.mjs";
+import { SelectInnerContext as Fe } from "../inner-context.mjs";
+import { Popover as Ee } from "../../popover/index.mjs";
+import { getValidValue as ie } from "../utils/get-valid-value.mjs";
+import { isEmptyValue as le } from "../utils/is-empty-value.mjs";
+import { useMergeValue as x } from "../../hooks/use-merge-value.mjs";
+import { isArray as ne, isFunction as Ge, isObject as T } from "../../utils/is.mjs";
+function qe(s) {
+  const {
+    children: re,
+    renderFormat: B,
+    disabled: N,
+    readOnly: _,
+    showSearch: $,
+    tokenSeparators: P,
+    options: q,
+    labelInValue: w,
+    // trigger = 'click',
+    filterOption: z = !0,
+    onChange: J,
+    onSelect: ae,
+    onDeselect: oe,
+    onClear: S,
+    onSearch: F,
+    onFocus: se,
+    onBlur: E,
+    onVisibleChange: A,
+    onInputValueChange: G,
+    onPaste: L,
+    onKeyDown: M,
+    isMultiple: K,
+    offsetDistance: ue = 4,
+    offsetSkidding: ce,
+    destroyOnClose: fe = !0,
+    ref: de
+  } = s, o = K, [n, H] = x(o ? [] : void 0, {
+    value: "value" in s ? ie(s.value, o, w) : void 0,
+    defaultValue: "defaultValue" in s ? ie(s.defaultValue, o, w) : void 0
+  }), [v, pe, ve] = x("", {
+    value: "inputValue" in s ? s.inputValue || "" : void 0
+  }), [c, be] = x(!1, {
+    defaultValue: s.defaultPopupVisible,
+    value: s.popupVisible
+  }), [V, f] = x(void 0, {}), { childrenList: r, optionInfoMap: p } = ke(() => {
+    const e = Se(
+      { options: q, filterOption: z },
+      {
+        inputValue: v
+      }
+    ), t = e.childrenList.find((l) => !l.isGroupTitle && !l.disabled);
+    return f(t ? t.value : void 0), e;
+  }, [q, z, v, f]), C = h(null), m = h([]), Q = h(v), D = h(null), I = h(0), me = le(n, o), g = (e, t) => {
+    (e !== Q.current || t !== D.current) && (pe(e), Q.current = e, D.current = t, G == null || G(e, t));
+  }, b = (e, t) => {
+    (t == null ? void 0 : t.trigger) === "trigger-element-click" && c && e === !1 && $ || c !== e && (be(e), A == null || A(e));
+  };
+  O(() => {
+    o ? Array.isArray(n) || H(n === void 0 ? [] : [n]) : Array.isArray(n) && H(n.length === 0 ? void 0 : n[0]);
+  }, [o, n]), O(() => {
+    m.current = m.current.filter((e) => o ? ne(n) && n.indexOf(e.value) > -1 : e.value === n);
+  }, [n, o]), O(() => {
+    const { current: e } = D;
+    ve === v && (e === "manual" || e === "optionListHide") && (F == null || F(v, e));
+  }, [v]);
+  const W = h(c);
+  O(() => {
+    if (c && !W.current) {
+      let e;
+      if (o) {
+        const i = n;
+        i.length > 0 && (e = i[i.length - 1]);
+      } else
+        n != null && (e = n);
+      let t = !1;
+      if (e !== void 0) {
+        const i = p.get(e);
+        i && !i.disabled && !i.isGroupTitle && (t = !0);
+      }
+      let l;
+      t && (l = e), f(l !== void 0 ? l : void 0);
+    }
+    W.current = c;
+  }, [c, n, o, r, p, f]);
+  const R = we(
+    (e) => {
+      const t = p.get(e);
+      if (t) {
+        const i = m.current.findIndex((a) => a.value === e);
+        return i > -1 ? m.current.splice(i, 1, { value: e, option: t }) : m.current.push({ value: e, option: t }), t;
+      }
+      const l = m.current.find((i) => i.value === e);
+      return l && l.option;
+    },
+    [p]
+  ), U = (e, t = le(e, o)) => {
+    let l = e;
+    const i = e === void 0 ? void 0 : Array.isArray(e) ? e.map(R) : R(e);
+    if (w && !t) {
+      const a = (u, d) => {
+        if (d)
+          return d.label;
+        const k = "value" in s ? s.value : "defaultValue" in s ? s.defaultValue : null;
+        if (Array.isArray(k)) {
+          for (const j of k)
+            if (T(j) && j.value === u)
+              return j.label;
+        } else if (T(k) && k.value === u)
+          return k.label;
+      };
+      Array.isArray(e) ? l = e.map((u, d) => ({
+        value: u,
+        label: a(u, i[d])
+      })) : l = { value: e, label: a(e, i) };
+    }
+    return { option: i, value: l };
+  }, y = (e) => {
+    if (H(e), J) {
+      const t = U(e);
+      J(t.value, t.option);
+    }
+  }, X = (e, t) => {
+    if (t === "remove" || t === "add" && p.get(e)) {
+      const l = t === "add" ? n.concat(e) : n.filter((a) => a !== e), i = t === "add" ? ae : oe;
+      if (y(l), typeof i == "function") {
+        const a = U(e, !1);
+        i(a.value, a.option);
+      }
+    }
+  }, Y = (e, t) => {
+    t || (o ? (X(e, n.indexOf(e) === -1 ? "add" : "remove"), g("", "optionChecked")) : (e !== n && y(e), g("", "optionChecked"), setTimeout(() => {
+      b(!1);
+    })));
+  }, Z = Ce(
+    /* @__PURE__ */ new Map([
+      [Ie.code, () => b(!1)],
+      [
+        Oe.code,
+        () => {
+          if (c) {
+            const e = p.get(V);
+            e && Y(V, e.disabled);
+          } else
+            b(!0);
+        }
+      ],
+      [
+        xe.code,
+        () => {
+          if (c && r.length > 0) {
+            const e = r.findIndex((i) => i.value === V);
+            if (e === -1) {
+              const i = r.find((a) => !a.isGroupTitle && !a.disabled);
+              return i && f(i.value), !1;
+            }
+            let t = e - 1;
+            const l = e;
+            for (; t >= 0 && (r[t].isGroupTitle || r[t].disabled); )
+              t--;
+            if (t < 0) {
+              for (t = r.length - 1; t >= 0 && (r[t].isGroupTitle || r[t].disabled); )
+                t--;
+              if (t < 0 || t === l) return !1;
+            }
+            return f(r[t].value), !1;
+          }
+        }
+      ],
+      [
+        Te.code,
+        () => {
+          if (c && r.length > 0) {
+            const e = r.findIndex((i) => i.value === V);
+            if (e === -1) {
+              const i = r.find((a) => !a.isGroupTitle && !a.disabled);
+              return i && f(i.value), !1;
+            }
+            let t = e + 1;
+            const l = e;
+            for (; t < r.length && (r[t].isGroupTitle || r[t].disabled); )
+              t++;
+            if (t >= r.length) {
+              for (t = 0; t < r.length && (r[t].isGroupTitle || r[t].disabled); )
+                t++;
+              if (t >= r.length || t === l) return !1;
+            }
+            return f(r[t].value), !1;
+          }
+        }
+      ],
+      [
+        Pe.code,
+        // 按tab键切换，关闭开启的弹出框
+        () => b(!1)
+      ]
+    ])
+  ), ee = (e) => {
+    if (I.current = null, o && ne(P) && P.length) {
+      const t = e.split(new RegExp(`[${P.join("")}]`));
+      if (t.length > 1) {
+        I.current = Date.now();
+        const l = t.filter((u, d) => u && t.indexOf(u) === d), i = n.slice(0);
+        let a = !1;
+        l.forEach((u) => {
+          i.indexOf(u) === -1 && p.get(u) && (i.push(u), a = !0);
+        }), a && y(i);
+      }
+    }
+    return !!I.current;
+  }, ge = {
+    onFocus: se,
+    onBlur: (e) => {
+      E == null || E(e), c || g("", "optionListHide");
+    },
+    onKeyDown: (e) => {
+      Z(e), M == null || M(e);
+    },
+    onChangeInputValue: (e, { nativeEvent: { inputType: t } }) => {
+      t !== "insertFromPaste" && ee(e), I.current ? g("", "tokenSeparator") : g(e, "manual"), !c && e && b(!0);
+    },
+    onPaste: (e) => {
+      ee(e.clipboardData.getData("text")), L == null || L(e);
+    },
+    // Option Items
+    onRemoveCheckedItem: (e, t, l) => {
+      l.stopPropagation(), X(n[t], "remove");
+    }
+  }, he = (e) => {
+    if (e.stopPropagation(), o) {
+      const t = n.filter((l) => {
+        const i = p.get(l);
+        return i && i.disabled;
+      });
+      y(t);
+    } else
+      y(void 0);
+    g("", "manual"), f(void 0), S == null || S(c);
+  };
+  Ae(
+    de,
+    () => {
+      var e;
+      return {
+        dom: (e = C.current) == null ? void 0 : e.dom,
+        focus() {
+          var t, l;
+          (l = (t = C.current) == null ? void 0 : t.focus) == null || l.call(t);
+        },
+        blur() {
+          var t, l;
+          (l = (t = C.current) == null ? void 0 : t.blur) == null || l.call(t);
+        }
+      };
+    },
+    []
+  );
+  const Ve = (e) => {
+    const t = R(e);
+    let l;
+    if (Ge(B)) {
+      const i = U(e, !1);
+      l = B(i.option || null, i.value);
+    } else {
+      let i = !1;
+      if (w) {
+        const a = s.value || s.defaultValue;
+        if (Array.isArray(a)) {
+          const u = a.find((d) => T(d) && d.value === e);
+          u && (l = u.label, i = !0);
+        } else T(a) && (l = a.label, i = !0);
+      }
+      !i && t && "label" in t && (l = t.label);
+    }
+    return {
+      text: l,
+      disabled: t == null ? void 0 : t.disabled
+    };
+  }, ye = {
+    childrenList: r,
+    // 这是经过 filterOption 筛选后的列表
+    selectedValue: n,
+    // 当前选中的值
+    isMultipleMode: o,
+    handleClearClick: he,
+    handleOptionClick: Y,
+    valueActive: V,
+    setValueActive: f
+  };
+  return /* @__PURE__ */ te(
+    Fe.Provider,
+    {
+      value: {
+        // trigger,
+        disabled: N,
+        readOnly: _,
+        popupVisible: c,
+        onVisibleChange: A,
+        tryUpdatePopupVisible: b,
+        selectViewEventHandlers: ge,
+        refSelectView: C,
+        value: n,
+        inputValue: v,
+        isNoOptionSelected: me,
+        isMultipleMode: o,
+        renderText: Ve,
+        hotkeyHandler: Z,
+        showSearch: $,
+        isMultiple: K,
+        ...ye
+      },
+      children: /* @__PURE__ */ te(
+        Ee.Root,
+        {
+          trigger: "click",
+          disabled: N,
+          readOnly: _,
+          offsetDistance: ue,
+          offsetSkidding: ce,
+          visible: c,
+          onVisibleChange: b,
+          placement: "bottom-start",
+          destroyOnClose: fe,
+          children: re
+        }
+      )
+    }
+  );
+}
+export {
+  qe as SelectRoot
+};

package/dist/es/select/components/select-view.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { useSelectInnerContext as w } from "../inner-context.mjs";
+import { Popover as x } from "../../popover/index.mjs";
+import { SelectInputRoot as v } from "../../select-input/select-input-root.mjs";
+const I = ({ id: t, style: r, className: o, placeholder: i, maxTagCount: l, children: n }) => {
+  const {
+    selectViewEventHandlers: p,
+    refSelectView: s,
+    value: c,
+    inputValue: u,
+    popupVisible: m,
+    isNoOptionSelected: a,
+    renderText: d,
+    showSearch: S,
+    readOnly: f,
+    disabled: V,
+    isMultiple: h
+  } = w();
+  return /* @__PURE__ */ e(x.Trigger, { children: /* @__PURE__ */ e(
+    v,
+    {
+      id: t,
+      showSearch: !!S,
+      className: o,
+      readOnly: f,
+      disabled: V,
+      placeholder: i,
+      style: r,
+      isMultiple: h,
+      ...p,
+      ref: s,
+      value: c,
+      inputValue: u,
+      popupVisible: m,
+      isEmptyValue: a,
+      maxTagCount: l,
+      renderText: d,
+      children: n
+    }
+  ) });
+};
+export {
+  I as SelectView
+};

package/dist/es/select/context.mjs

@@ -0,0 +1,12 @@
+"use client";
+import { useContext as e, createContext as o } from "react";
+const n = o(null), r = () => {
+  const t = e(n);
+  if (!t)
+    throw new Error("Select components must be used within <Select.Root>");
+  return t;
+};
+export {
+  n as SelectContext,
+  r as useSelectContext
+};

package/dist/es/select/index.mjs

@@ -0,0 +1,28 @@
+import { SelectMultiInput as o } from "../select-input/select-multi-input.mjs";
+import { SelectMultiTag as e } from "../select-input/select-multi-tag.mjs";
+import { SelectClear as m } from "./components/select-clear.mjs";
+import { SelectEmpty as r } from "./components/select-empty.mjs";
+import { SelectView as i } from "./components/select-view.mjs";
+import { SelectContent as p } from "./components/select-content.mjs";
+import { SelectOption as l } from "./components/select-option.mjs";
+import { SelectList as f } from "./components/select-list.mjs";
+import { SelectAffix as n } from "./components/select-affix.mjs";
+import { SelectInputComponent as t } from "./components/select-input.mjs";
+import { SelectRoot as c } from "./components/select-root.mjs";
+const y = {
+  Root: c,
+  Input: t,
+  MultiInputRoot: t,
+  Affix: n,
+  List: f,
+  Option: l,
+  Content: p,
+  View: i,
+  Empty: r,
+  Clear: m,
+  MultiTag: e,
+  MultiInput: o
+};
+export {
+  y as Select
+};

package/dist/es/select/inner-context.mjs

@@ -0,0 +1,12 @@
+"use client";
+import { useContext as t, createContext as n } from "react";
+const o = n(null), c = () => {
+  const e = t(o);
+  if (!e)
+    throw new Error("Select components must be used within <Select.Root>");
+  return e;
+};
+export {
+  o as SelectInnerContext,
+  c as useSelectInnerContext
+};

package/dist/es/select/utils/flat-children.mjs

@@ -0,0 +1,73 @@
+import { isArray as _, isString as y, isNumber as w } from "../../utils/is.mjs";
+import { fillNBSP as L } from "../../utils/fillNBSP.mjs";
+function S({ options: h, filterOption: c }, {
+  inputValue: t = ""
+}, {
+  optionInfoMap: a = /* @__PURE__ */ new Map(),
+  optionValueList: u = [],
+  customNodeCount: d = 0,
+  isGroup: f = !1
+} = {}) {
+  let i = [];
+  const b = ({ label: e, value: r }, l, s) => !e && !r && !l ? (d++, `custom_node_${d}`) : s ? `group_${d}` : `option_${d}`, g = (e, r) => {
+    const l = e.value;
+    let s = !0;
+    if (c === !0 ? s = l !== void 0 && String(l).toLowerCase().indexOf(t.toLowerCase()) !== -1 : typeof c == "function" && (s = !t || c(t, e)), !a.get(l)) {
+      const v = b(e), n = a.size, x = {
+        label: e.label,
+        value: l,
+        disabled: e.disabled,
+        extra: e.extra,
+        _key: v,
+        _index: n,
+        _origin: r,
+        _valid: s,
+        // 【新增】如果是后代元素，增加 grouped 属性
+        grouped: f ? !0 : void 0
+      };
+      a.set(l, x), u.push(l), s && i.push(x);
+    }
+  };
+  return _(h) && h.length && h.forEach((e) => {
+    if ((y(e) || w(e)) && (e = {
+      label: e,
+      value: e
+    }), e.children && _(e.children)) {
+      const { childrenList: r } = S(
+        { options: e.children, filterOption: c },
+        { inputValue: t },
+        { optionInfoMap: a, optionValueList: u, customNodeCount: d, isGroup: !0 }
+      );
+      if (r.length) {
+        const l = b(e, null, !0);
+        i.push({
+          label: e.label,
+          value: l,
+          disabled: e.disabled === !0,
+          extra: e.extra,
+          _key: l,
+          _index: -1,
+          _origin: "options",
+          _valid: !0,
+          isGroupTitle: !0
+        }), i = i.concat(r);
+      }
+    } else
+      g(
+        {
+          label: L(e.label),
+          value: e.value,
+          disabled: e.disabled === !0,
+          extra: e.extra
+        },
+        "options"
+      );
+  }), {
+    childrenList: i,
+    optionInfoMap: a,
+    optionValueList: u
+  };
+}
+export {
+  S as flatChildren
+};

package/dist/es/select/utils/get-valid-value.mjs

@@ -0,0 +1,8 @@
+import { isEmptyValue as m } from "./is-empty-value.mjs";
+import { isObject as i } from "../../utils/is.mjs";
+function y(r, f, n) {
+  return n && (f ? r = Array.isArray(r) ? r.map((o) => i(o) && "value" in o ? o.value : o) : r : r = i(r) && "value" in r ? r.value : r), m(r, f) ? f ? [] : void 0 : r;
+}
+export {
+  y as getValidValue
+};

package/dist/es/select/utils/is-empty-value.mjs

@@ -0,0 +1,6 @@
+function t(r, n) {
+  return n ? !Array.isArray(r) || r.length === 0 : r == null;
+}
+export {
+  t as isEmptyValue
+};

package/dist/es/select-input/inner-context.mjs

@@ -0,0 +1,12 @@
+"use client";
+import { useContext as e, createContext as n } from "react";
+const o = n(null), c = () => {
+  const t = e(o);
+  if (!t)
+    throw new Error("Select components must be used within <Select.Root>");
+  return t;
+};
+export {
+  o as SelectInputInnerContext,
+  c as useSelectInnerContext
+};

package/dist/es/select-input/select-input-root.mjs

@@ -0,0 +1,128 @@
+"use client";
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as J, useRef as C, useState as I, useEffect as Q, useImperativeHandle as U } from "react";
+import { Enter as X } from "../utils/keycode.mjs";
+import { SelectInputInnerContext as Y } from "./inner-context.mjs";
+const a = {
+  SEARCHING: 1,
+  NONE: 2
+}, oe = J((x, w) => {
+  const {
+    id: R,
+    style: F,
+    className: P,
+    inputValue: T,
+    value: D,
+    popupVisible: r,
+    isEmptyValue: H,
+    renderText: M,
+    onRemoveCheckedItem: O,
+    onChangeInputValue: c,
+    onPaste: k,
+    onFocus: l,
+    onBlur: i,
+    isMultiple: A,
+    placeholder: G,
+    showSearch: v,
+    readOnly: K,
+    disabled: n,
+    maxTagCount: V,
+    renderTag: j,
+    onClick: d,
+    onKeyDown: f,
+    onMouseEnter: B,
+    onMouseLeave: L,
+    children: W
+  } = x, p = C(null), s = C(null), [h, b] = I(!1), [q, g] = I(a.NONE), S = v, t = S || A, E = h || r, m = (e) => {
+    const o = t ? p.current : s.current;
+    o && (e === "focus" ? o.focus() : o.blur());
+  }, u = (e, o) => {
+    t && o.target === s.current || (e === "focus" ? (b(!0), l == null || l(o)) : (b(!1), i == null || i(o)));
+  }, N = (e) => {
+    if (t && e.currentTarget === s.current)
+      return;
+    (e.keyCode || e.which) === X.code && e.preventDefault(), f == null || f(e);
+  };
+  Q(() => {
+    m(r ? "focus" : "blur"), t && g(r ? a.SEARCHING : a.NONE);
+  }, [r]), U(w, () => ({
+    dom: s.current,
+    getRootDOMNode: () => s.current,
+    focus: m.bind(null, "focus"),
+    blur: m.bind(null, "blur")
+  }));
+  const z = {
+    onPaste: k,
+    onKeyDown: N,
+    onFocus: (e) => {
+      e.stopPropagation(), u("focus", e);
+    },
+    onBlur: (e) => {
+      e.stopPropagation(), u("blur", e);
+    },
+    onChange: (e, o) => {
+      g(a.SEARCHING), c == null || c(e, o);
+    }
+  };
+  return /* @__PURE__ */ y(
+    Y.Provider,
+    {
+      value: {
+        inputValue: T,
+        isEmptyValue: H,
+        onRemoveCheckedItem: O,
+        placeholder: G,
+        readOnly: K,
+        disabled: n,
+        maxTagCount: V,
+        renderTag: j,
+        searchStatus: q,
+        mergedFocused: E,
+        canFocusInput: t,
+        inputEventHandlers: z,
+        refInput: p,
+        showSearch: S,
+        focused: h,
+        renderText: M,
+        value: D,
+        popupVisible: r
+      },
+      children: /* @__PURE__ */ y(
+        "div",
+        {
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-autocomplete": "list",
+          "aria-expanded": !!r,
+          "aria-disabled": !!n,
+          onClick: (e) => {
+            r && t && e.stopPropagation(), d == null || d(e);
+          },
+          onMouseEnter: B,
+          onMouseLeave: L,
+          onMouseDown: (e) => {
+            e == null || e.stopPropagation();
+          },
+          ref: s,
+          tabIndex: n ? -1 : 0,
+          id: R,
+          style: F,
+          onKeyDown: N,
+          onFocus: (e) => {
+            var o;
+            n || (t ? (o = p.current) == null || o.focus() : u("focus", e));
+          },
+          onBlur: (e) => u("blur", e),
+          className: P,
+          "data-visible": !!r,
+          "data-focused": !!E,
+          children: W
+        }
+      )
+    }
+  );
+});
+export {
+  a as SearchStatusEnum,
+  oe as SelectInputRoot
+};

package/dist/es/select-input/select-multi-input.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { InputTag as l } from "../input-tag/index.mjs";
+import { useSelectInnerContext as i } from "./inner-context.mjs";
+import { useInputInnerTagContext as I } from "../input-tag/inner-context.mjs";
+const y = ({ className: o }) => {
+  const { inputEventHandlers: n, placeholder: e, mergedFocused: t, canFocusInput: u, isEmptyValue: r } = i(), { disableInput: s } = I(), p = {
+    onPaste: n.onPaste,
+    onKeyDown: n.onKeyDown,
+    onFocus: n.onFocus,
+    onBlur: n.onBlur,
+    onInputChange: n.onChange
+  }, a = !!(t && u || r);
+  return /* @__PURE__ */ c(
+    l.Input,
+    {
+      placeholder: e,
+      ...p,
+      className: o,
+      style: {
+        pointerEvents: s ? "none" : "auto",
+        outline: "none",
+        backgroundColor: "transparent",
+        ...a ? {} : { position: "absolute", opacity: 0, zIndex: -1 }
+      }
+    }
+  );
+};
+export {
+  y as SelectMultiInput
+};