@unicom-cloud/ui 0.8.61 → 0.8.62

package/SelectView.js

@@ -1,296 +1,342 @@
-import { jsx as r, jsxs as R } from "react/jsx-runtime";
-import Ie, { useRef as se, useContext as Ue, useState as ge, useEffect as We, useImperativeHandle as ve, useMemo as ze } from "react";
-import { y as N } from "./chunk/BzPkh4Zv.js";
+import { jsx as n, jsxs as k, Fragment as Xe } from "react/jsx-runtime";
+import Ee, { useRef as ue, useContext as Je, useState as Ie, useEffect as Qe, useImperativeHandle as De, useMemo as Ye, createElement as Ze } from "react";
+import { y as A } from "./chunk/BzPkh4Zv.js";
 import "./utils/is.js";
-import { pickDataAttributes as je } from "./utils/pick.js";
-import { e as Ge, I as He } from "./chunk/BHn4xgbv.js";
-import { I as Ke } from "./chunk/BDjXkzNj.js";
-import { I as Le } from "./chunk/Dx_5J4fO.js";
-import _e from "lodash/isFunction";
-import we from "lodash/isUndefined";
-import { d as Ye, I as qe } from "./chunk/Bdh4XVuf.js";
-import { useForceUpdate as Je } from "./hooks/useForceUpdate.js";
-import { usePersistCallback as Qe } from "./hooks/usePersistCallback.js";
-import { I as Xe } from "./chunk/C_S5Mdvd.js";
-import { I as Ze } from "./chunk/gIbzjQ-X.js";
-import eo from "./Tag.js";
-import be from "./utils/fillNBSP.js";
-import oo from "./utils/include.js";
-import { E as to, B as ro } from "./chunk/C2lIz2F9.js";
-import C from "lodash/isPlainObject";
-const v = {
+import { pickDataAttributes as eo } from "./utils/pick.js";
+import oo from "@unicom-cloud/icons/IconUiClose";
+import to from "@unicom-cloud/icons/IconUiDown";
+import ro from "@unicom-cloud/icons/IconUiLoading";
+import no from "@unicom-cloud/icons/IconUiSearch";
+import so from "lodash/isFunction";
+import $e from "lodash/isUndefined";
+import { d as ao, I as lo } from "./chunk/CV1kLw5Z.js";
+import { useForceUpdate as co } from "./hooks/useForceUpdate.js";
+import { usePersistCallback as io } from "./hooks/usePersistCallback.js";
+import { I as uo } from "./chunk/C8o-VGyc.js";
+import { I as fo } from "./chunk/Dtm4BmKB.js";
+import po from "./Popover.js";
+import Te from "./Tag.js";
+import ye from "./utils/fillNBSP.js";
+import mo from "./utils/include.js";
+import { E as ho, B as go } from "./chunk/C2lIz2F9.js";
+import "./chunk/Cqyp4qni.js";
+import T from "lodash/isPlainObject";
+import Se from "lodash/isNumber";
+const ie = "__pqb_value_tag_placeholder", $ = {
   BEFORE: 0,
   EDITING: 1,
   NONE: 2
-}, no = 1, so = Ie.forwardRef(function(d, x) {
+}, bo = Ee.forwardRef(function(m, y) {
   const {
-    id: M,
-    style: O,
-    className: U,
-    size: $,
-    bordered: W,
-    allowClear: k,
-    allowCreate: y,
-    status: z,
-    loading: E,
-    disabled: l,
+    id: W,
+    style: z,
+    className: L,
+    size: S,
+    bordered: j,
+    allowClear: F,
+    allowCreate: E,
+    status: H,
+    loading: R,
+    disabled: i,
     animation: V,
     prefixCls: o,
-    suffixIcon: f,
-    arrowIcon: p,
-    removeIcon: P,
-    clearIcon: m,
-    placeholder: ae,
-    renderText: le,
-    value: w,
-    inputValue: j,
-    popupVisible: h,
-    maxTagCount: s,
+    suffixIcon: h,
+    arrowIcon: g,
+    removeIcon: O,
+    clearIcon: b,
+    placeholder: de,
+    renderText: fe,
+    value: C,
+    inputValue: G,
+    popupVisible: v,
+    maxTagCount: a,
     isMultiple: I,
-    isEmptyValue: G,
-    prefix: H,
-    ariaControls: Ne,
-    renderTag: ie,
-    dragToSort: ce,
-    rtl: Ce,
-    htmlDataAttributes: xe,
-    onKeyDown: K,
-    onChangeInputValue: L,
-    onPaste: $e,
-    onClear: ye,
-    onFocus: _,
-    onBlur: Y,
-    onRemoveCheckedItem: q,
-    onSort: ue,
-    ...Se
-  } = d, S = se(null), g = se(null), { size: Te, getPrefixCls: de } = Ue(Ye), [De, fe] = ge(v.NONE), [J, pe] = ge(!1), ke = Je(), T = "showSearch" in d ? d.showSearch : I, c = T || y, A = $ || Te, Q = J || h, Ee = C(T) && T.retainInputValue, b = !I && w !== void 0 ? le(w).text : "", X = (e) => {
+    isEmptyValue: K,
+    prefix: q,
+    ariaControls: Pe,
+    renderTag: X,
+    dragToSort: pe,
+    rtl: ke,
+    htmlDataAttributes: Ae,
+    onKeyDown: J,
+    onChangeInputValue: Q,
+    onPaste: Fe,
+    onClear: Re,
+    onFocus: Y,
+    onBlur: Z,
+    onRemoveCheckedItem: ee,
+    onSort: oe,
+    ...Ve
+  } = m, D = ue(null), w = ue(null), { size: Oe, getPrefixCls: me } = Je(ao), [Be, he] = Ie($.NONE), [te, ge] = Ie(!1), Me = co(), P = "showSearch" in m ? m.showSearch : I, f = P || E, B = S || Oe, re = te || v, _e = T(P) && P.retainInputValue, x = !I && C !== void 0 ? fe(C).text : "", ne = (e) => {
     e && e.preventDefault();
-  }, Z = (e) => {
-    const t = c ? S.current : g.current;
+  }, se = (e) => {
+    const t = f ? D.current : w.current;
     t && (e === "focus" ? t.focus() : t.blur());
-  }, F = (e, t) => {
-    c && t.target === g.current || (e === "focus" ? (pe(!0), _ == null || _(t)) : (pe(!1), Y == null || Y(t)));
-  }, me = (e) => {
-    if (c && e.currentTarget === g.current)
+  }, M = (e, t) => {
+    f && t.target === w.current || (e === "focus" ? (ge(!0), Y == null || Y(t)) : (ge(!1), Z == null || Z(t)));
+  }, be = (e) => {
+    if (f && e.currentTarget === w.current)
       return;
-    e.key === to.key && e.preventDefault(), K == null || K(e);
+    e.key === ho.key && e.preventDefault(), J == null || J(e);
   };
-  We(() => {
-    Z(h ? "focus" : "blur"), c && fe(h ? v.BEFORE : v.NONE);
-  }, [h]), ve(x, () => ({
-    dom: g.current,
-    getRootDOMNode: () => g.current,
-    focus: Z.bind(null, "focus"),
-    blur: Z.bind(null, "blur"),
-    getWidth: () => g.current && g.current.clientWidth
+  Qe(() => {
+    se(v ? "focus" : "blur"), f && he(v ? $.BEFORE : $.NONE);
+  }, [v]), De(y, () => ({
+    dom: w.current,
+    getRootDOMNode: () => w.current,
+    focus: se.bind(null, "focus"),
+    blur: se.bind(null, "blur"),
+    getWidth: () => w.current && w.current.clientWidth
   }));
-  const Ve = "arrowIcon" in d ? p === null ? null : /* @__PURE__ */ r("div", { className: `${o}-arrow-icon`, children: p }) : /* @__PURE__ */ r("div", { className: `${o}-arrow-icon`, children: /* @__PURE__ */ r(Ke, {}) }), Pe = E ? /* @__PURE__ */ r("span", { className: `${o}-loading-icon`, children: /* @__PURE__ */ r(Ge, {}) }) : f ? /* @__PURE__ */ r("span", { className: `${o}-suffix-icon`, children: f }) : d.showSearch && h ? /* @__PURE__ */ r("div", { className: `${o}-search-icon`, children: /* @__PURE__ */ r(Le, {}) }) : Ve, i = {
-    paste: $e,
-    keyDown: me,
+  const Ue = "arrowIcon" in m ? g === null ? null : /* @__PURE__ */ n("div", { className: `${o}-arrow-icon`, children: g }) : /* @__PURE__ */ n("div", { className: `${o}-arrow-icon`, children: /* @__PURE__ */ n(to, {}) }), We = R ? /* @__PURE__ */ n("span", { className: `${o}-loading-icon`, children: /* @__PURE__ */ n(ro, {}) }) : h ? /* @__PURE__ */ n("span", { className: `${o}-suffix-icon`, children: h }) : m.showSearch && v ? /* @__PURE__ */ n("div", { className: `${o}-search-icon`, children: /* @__PURE__ */ n(no, {}) }) : Ue, u = {
+    paste: Fe,
+    keyDown: be,
     focus: (e) => {
-      e.stopPropagation(), F("focus", e);
+      e.stopPropagation(), M("focus", e);
     },
     blur: (e) => {
-      e.stopPropagation(), F("blur", e);
+      e.stopPropagation(), M("blur", e);
     },
     change: (e, t) => {
-      fe(v.EDITING), L == null || L(e, t);
+      he($.EDITING), Q == null || Q(e, t);
     }
-  }, Ae = () => {
+  }, ze = () => {
     let e;
-    switch (De) {
-      case v.BEFORE:
-        e = j || (Ee ? b : "");
+    switch (Be) {
+      case $.BEFORE:
+        e = G || (_e ? x : "");
         break;
-      case v.EDITING:
-        e = j || "";
+      case $.EDITING:
+        e = G || "";
         break;
       default:
-        e = b;
+        e = x;
         break;
     }
-    const t = !!(Q && c || G), n = {
+    const t = !!(re && f || K), s = {
       style: { width: "100%" },
       // _inputValue after renderText(value) may be rich text, but the value of <input> cannot be object
       value: t && typeof e != "object" ? e : "",
       // Allow placeholder to display the selected value first when searching
-      placeholder: c && b && typeof b != "object" ? b : ae
+      placeholder: f && x && typeof x != "object" ? x : de
     };
-    return c ? (n.onPaste = i.paste, n.onKeyDown = i.keyDown, n.onFocus = i.focus, n.onBlur = i.blur, n.onChange = i.change) : (n.tabIndex = -1, n.style.pointerEvents = "none"), /* @__PURE__ */ R("span", { className: `${o}-view-selector`, children: [
-      /* @__PURE__ */ r(
-        Ze,
+    return f ? (s.onPaste = u.paste, s.onKeyDown = u.keyDown, s.onFocus = u.focus, s.onBlur = u.blur, s.onChange = u.change) : (s.tabIndex = -1, s.style.pointerEvents = "none"), /* @__PURE__ */ k("span", { className: `${o}-view-selector`, children: [
+      /* @__PURE__ */ n(
+        fo,
         {
           "aria-hidden": !t || void 0,
-          ref: S,
-          disabled: l,
-          className: N(`${o}-view-input`, {
+          ref: D,
+          disabled: i,
+          className: A(`${o}-view-input`, {
             [`${o}-hidden`]: !t
           }),
           autoComplete: "off",
-          ...n
+          ...s
         }
       ),
-      t ? /* @__PURE__ */ r("span", { className: `${o}-view-value-mirror`, children: be(n.value ? e : n.placeholder) }) : null,
-      /* @__PURE__ */ r(
+      t ? /* @__PURE__ */ n("span", { className: `${o}-view-value-mirror`, children: ye(s.value ? e : s.placeholder) }) : null,
+      /* @__PURE__ */ n(
         "span",
         {
           style: t ? { display: "none" } : {},
           className: `${o}-view-value`,
-          children: be(G ? n.placeholder : e)
+          children: ye(K ? s.placeholder : e)
         }
       )
     ] });
-  }, ee = Qe(le), Fe = ze(() => {
+  }, ae = io(fe), ve = T(a) ? a.count : a, we = (e) => {
+    const t = ae(e);
+    return { value: e, label: t.text, closable: !t.disabled };
+  }, le = Ye(() => {
     if (!I)
       return [];
-    const e = we(w) ? [] : [].concat(w), t = [], n = C(s) ? s.count : s, oe = typeof n == "number";
-    for (let D = 0; D < e.length && !(oe && t.length >= n + no); D++) {
-      const te = e[D], a = ee(te);
-      t.push({
-        value: te,
-        label: a.text,
-        closable: !a.disabled
-      });
-    }
-    return t;
-  }, [w, I, s, ee]), Re = () => {
-    const e = we(w) ? [] : [].concat(w), t = C(s) ? s.count : s, n = (a) => {
-      const u = C(s) && _e(s.render) ? s.render(a) : `+${a}...`;
-      return ie ? u : /* @__PURE__ */ r(
-        eo,
-        {
-          className: N(`${de("input-tag")}-tag`, `${o}-tag`),
-          children: u
-        }
-      );
-    }, oe = () => {
-      for (let a = e.length - 1; a >= 0; a--) {
-        const u = e[a];
-        if (!ee(u).disabled)
-          return a;
+    const e = $e(C) ? [] : [].concat(C);
+    return (Se(ve) ? e.slice(0, ve) : e).map((_) => we(_));
+  }, [C, I, a, ae]), Le = () => {
+    const e = T(a) ? a.count : a, t = T(a) && a.showPopover, s = me("input-tag"), _ = (r) => T(a) && so(a.render) ? a.render(r) : e === "responsive" ? /* @__PURE__ */ k(
+      Te,
+      {
+        className: `${s}-tag`,
+        children: [
+          "+",
+          r,
+          "..."
+        ]
+      },
+      ie
+    ) : `+${r}...`, N = $e(C) ? [] : [].concat(C), Ge = () => {
+      for (let r = N.length - 1; r >= 0; r--) {
+        const c = N[r];
+        if (!ae(c).disabled)
+          return r;
       }
       return -1;
-    }, D = {
-      onPaste: i.paste,
-      onKeyDown: i.keyDown,
-      onFocus: i.focus,
-      onBlur: i.blur,
-      onInputChange: i.change,
-      onRemove: (a, u, re) => {
-        const Oe = re.key;
-        let ne = -1;
-        Oe === ro.key && (ne = oe()) !== -1 && (a = e[ne], u = ne), s && ke(), q == null || q(a, u, re);
+    }, xe = {
+      onPaste: u.paste,
+      onKeyDown: u.keyDown,
+      onFocus: u.focus,
+      onBlur: u.blur,
+      onInputChange: u.change,
+      onRemove: (r, c, d) => {
+        const p = d.key;
+        let l = -1;
+        p === go.key && (l = Ge()) !== -1 && (r = N[l], c = l), a && Me(), ee == null || ee(r, c, d);
       }
-    };
-    return /* @__PURE__ */ r(
-      Xe,
+    }, Ke = {
+      suffix: null,
+      prefix: null,
+      addBefore: null,
+      addAfter: null,
+      allowClear: !1,
+      labelInValue: !1
+    }, Ne = (() => {
+      if (Se(e)) {
+        const r = N.length - e;
+        if (r > 0) {
+          const c = {
+            label: _(r),
+            closable: !1,
+            // InputTag needs to extract value as key
+            value: ie
+          };
+          if (t) {
+            const d = N.map((p, l) => ({ val: p, index: l })).slice(e).map((p) => {
+              const l = we(p.val);
+              return X ? X(
+                { ...l, onClose: () => {
+                } },
+                p.index,
+                le.concat(c)
+              ) : /* @__PURE__ */ Ze(
+                Te,
+                {
+                  ...l,
+                  key: l.value,
+                  className: `${s}-tag`,
+                  onClose: (ce) => xe.onRemove(l.value, p.index, ce)
+                },
+                l.label
+              );
+            });
+            c.label = /* @__PURE__ */ n(po, { content: !!d.length && /* @__PURE__ */ n(Xe, { children: d }), children: c.label });
+          }
+          return c;
+        }
+      }
+    })(), qe = Ne ? le.concat(Ne) : le;
+    return /* @__PURE__ */ n(
+      uo,
       {
-        ...{
-          suffix: null,
-          prefix: null,
-          addBefore: null,
-          addAfter: null,
-          allowClear: !1,
-          labelInValue: !1
-        },
-        className: Q ? `${de("input-tag")}-focus` : "",
-        ref: S,
-        disabled: l,
-        dragToSort: ce,
-        disableInput: !T,
+        ...Ke,
+        className: re ? `${me("input-tag")}-focus` : "",
+        ref: D,
+        disabled: i,
+        dragToSort: pe,
+        disableInput: !P,
         animation: V,
-        placeholder: ae,
-        value: Fe,
-        inputValue: j,
-        size: A,
+        placeholder: de,
+        value: qe,
+        inputValue: G,
+        size: B,
         tagClassName: `${o}-tag`,
-        renderTag: ie,
-        icon: { removeIcon: P },
-        maxTagCount: s ? {
-          count: C(s) ? s.count : s,
-          render: t === "responsive" ? n : () => n(e.length - t),
-          popoverProps: { disabled: !0 }
+        renderTag: X,
+        icon: { removeIcon: O },
+        maxTagCount: e === "responsive" ? {
+          count: e,
+          render: _,
+          popoverProps: t ? {} : { disabled: !0 }
         } : void 0,
-        onChange: (a, u) => {
-          ue && u === "sort" && ue(a);
+        onChange: (r, c) => {
+          if (oe && c === "sort") {
+            const d = r.indexOf(
+              ie
+            );
+            if (d > -1) {
+              const p = r.slice(0, d), l = r.slice(d + 1), ce = N.slice(
+                r.length - 1 - N.length
+              );
+              oe(p.concat(ce, l));
+            } else
+              oe(r);
+          }
         },
-        ...D
+        ...xe
       }
     );
-  }, he = z || (d.error ? "error" : void 0), Be = !l && !G && k ? /* @__PURE__ */ r(
-    qe,
+  }, Ce = H || (m.error ? "error" : void 0), je = !i && !K && F ? /* @__PURE__ */ n(
+    lo,
     {
-      size: A,
+      size: B,
       className: `${o}-clear-icon`,
-      onClick: ye,
-      onMouseDown: X,
-      children: m ?? /* @__PURE__ */ r(He, {})
+      onClick: Re,
+      onMouseDown: ne,
+      children: b ?? /* @__PURE__ */ n(oo, {})
     },
     "clearIcon"
-  ) : null, Me = N(
+  ) : null, He = A(
     o,
     `${o}-${I ? "multiple" : "single"}`,
     {
-      [`${o}-show-search`]: T,
-      [`${o}-open`]: h,
-      [`${o}-size-${A}`]: A,
-      [`${o}-focused`]: Q,
-      [`${o}-${he}`]: he,
-      [`${o}-disabled`]: l,
-      [`${o}-no-border`]: !W,
-      [`${o}-rtl`]: Ce
+      [`${o}-show-search`]: P,
+      [`${o}-open`]: v,
+      [`${o}-size-${B}`]: B,
+      [`${o}-focused`]: re,
+      [`${o}-${Ce}`]: Ce,
+      [`${o}-disabled`]: i,
+      [`${o}-no-border`]: !j,
+      [`${o}-rtl`]: ke
     },
-    U
+    L
   );
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ n(
     "div",
     {
       role: "combobox",
       "aria-haspopup": "listbox",
       "aria-autocomplete": "list",
-      "aria-expanded": h,
-      "aria-disabled": l,
-      "aria-controls": Ne,
-      ...oo(Se, ["onClick", "onMouseEnter", "onMouseLeave"]),
-      ...xe,
-      ref: g,
-      tabIndex: l ? -1 : 0,
-      id: M,
-      style: O,
-      className: Me,
-      onKeyDown: me,
+      "aria-expanded": v,
+      "aria-disabled": i,
+      "aria-controls": Pe,
+      ...mo(Ve, ["onClick", "onMouseEnter", "onMouseLeave"]),
+      ...Ae,
+      ref: w,
+      tabIndex: i ? -1 : 0,
+      id: W,
+      style: z,
+      className: He,
+      onKeyDown: be,
       onFocus: (e) => {
-        !l && !ce && (c ? S.current && S.current.focus() : F("focus", e));
+        !i && !pe && (f ? D.current && D.current.focus() : M("focus", e));
       },
-      onBlur: (e) => F("blur", e),
-      children: /* @__PURE__ */ R(
+      onBlur: (e) => M("blur", e),
+      children: /* @__PURE__ */ k(
         "div",
         {
-          title: typeof b == "string" ? b : void 0,
-          className: N(`${o}-view`, {
-            [`${o}-view-with-prefix`]: H
+          title: typeof x == "string" ? x : void 0,
+          className: A(`${o}-view`, {
+            [`${o}-view-with-prefix`]: q
           }),
-          onClick: (e) => h && c && e.stopPropagation(),
+          onClick: (e) => v && f && e.stopPropagation(),
           children: [
-            H && /* @__PURE__ */ r(
+            q && /* @__PURE__ */ n(
               "div",
               {
                 "aria-hidden": "true",
-                className: N(`${o}-prefix`),
-                onMouseDown: (e) => J && X(e),
-                children: H
+                className: A(`${o}-prefix`),
+                onMouseDown: (e) => te && ne(e),
+                children: q
               }
             ),
-            I ? Re() : Ae(),
-            /* @__PURE__ */ R(
+            I ? Le() : ze(),
+            /* @__PURE__ */ k(
               "div",
               {
                 "aria-hidden": "true",
                 className: `${o}-suffix`,
-                onMouseDown: (e) => J && X(e),
+                onMouseDown: (e) => te && ne(e),
                 children: [
-                  Be,
-                  Pe
+                  je,
+                  We
                 ]
               }
             )
@@ -299,63 +345,63 @@ const v = {
       )
     }
   );
-}), ao = (B, d) => {
+}), vo = (U, m) => {
   const {
-    prefixCls: x,
-    id: M,
-    style: O,
-    className: U,
-    addBefore: $,
-    rtl: W,
-    renderView: k,
-    autoWidth: y,
-    ...z
-  } = B, E = y ? {
+    prefixCls: y,
+    id: W,
+    style: z,
+    className: L,
+    addBefore: S,
+    rtl: j,
+    renderView: F,
+    autoWidth: E,
+    ...H
+  } = U, R = E ? {
     minWidth: 0,
     maxWidth: "100%",
-    ...C(y) ? y : {}
-  } : null, l = se(null), V = $ != null, f = V || !1, p = {
-    id: M,
-    style: { ...E, width: E ? "auto" : void 0, ...O },
-    className: U
-  }, P = je(z);
-  ve(
-    d,
-    () => l.current
+    ...T(E) ? E : {}
+  } : null, i = ue(null), V = S != null, h = V || !1, g = {
+    id: W,
+    style: { ...R, width: R ? "auto" : void 0, ...z },
+    className: L
+  }, O = eo(H);
+  De(
+    m,
+    () => i.current
   );
-  let m = /* @__PURE__ */ r(
-    so,
+  let b = /* @__PURE__ */ n(
+    bo,
     {
-      ...B,
-      ref: l,
-      id: f ? void 0 : p.id,
-      style: f ? void 0 : p.style,
-      className: f ? void 0 : p.className,
-      htmlDataAttributes: f ? {} : P
+      ...U,
+      ref: i,
+      id: h ? void 0 : g.id,
+      style: h ? void 0 : g.style,
+      className: h ? void 0 : g.className,
+      htmlDataAttributes: h ? {} : O
     }
   );
-  return typeof k == "function" && (m = k(m)), f ? /* @__PURE__ */ R(
+  return typeof F == "function" && (b = F(b)), h ? /* @__PURE__ */ k(
     "div",
     {
-      ...P,
-      ...p,
-      className: N(
-        `${x}-wrapper`,
+      ...O,
+      ...g,
+      className: A(
+        `${y}-wrapper`,
         {
-          [`${x}-wrapper-rtl`]: W
+          [`${y}-wrapper-rtl`]: j
         },
-        p.className
+        g.className
       ),
       children: [
-        V && /* @__PURE__ */ r("div", { className: `${x}-addbefore`, children: $ }),
-        m
+        V && /* @__PURE__ */ n("div", { className: `${y}-addbefore`, children: S }),
+        b
       ]
     }
-  ) : m;
-}, lo = Ie.forwardRef(
-  ao
+  ) : b;
+}, wo = Ee.forwardRef(
+  vo
 );
-lo.displayName = "SelectView";
+wo.displayName = "SelectView";
 export {
-  lo as default
+  wo as default
 };