@reportportal/ui-kit 0.0.1-alpha.12 → 0.0.1-alpha.121

package/dist/autocompletes.js

@@ -0,0 +1,729 @@
+import { jsx as s, jsxs as M, Fragment as ee } from "react/jsx-runtime";
+import { useState as de, useCallback as Y, forwardRef as xe, useRef as Ee, useEffect as Ie } from "react";
+import { c as H } from "./bind-06a7ff84.js";
+import { Scrollbars as Se } from "rc-scrollbars";
+import { B as Be } from "./bubblesLoader-f3ffa240.js";
+import { B as Fe } from "./button-97d9e587.js";
+import { S as Me } from "./plus-199fb2a8.js";
+import { i as qe } from "./isEmpty-ccacb5ff.js";
+import U from "downshift";
+import { useFloating as he, autoUpdate as be } from "@floating-ui/react";
+import { F as Ae } from "./fieldText-2c4790e1.js";
+import { S as ve } from "./dropdown-0260bb66.js";
+import { S as $e } from "./close-4d480ef7.js";
+import { S as De } from "./clear-53660571.js";
+import "./openEye-950159cb.js";
+import "./baseIconButton-251479f7.js";
+import "./spinLoader-c4a53718.js";
+import "./maxValueDisplay-9be01a75.js";
+import "./fieldLabel.js";
+const Ce = "_disabled_18ek6_43", Re = "_input_18ek6_97", Oe = {
+  "selected-item": "_selected-item_18ek6_16",
+  "validation-error": "_validation-error_18ek6_35",
+  "highlight-un-stored-item": "_highlight-un-stored-item_18ek6_40",
+  disabled: Ce,
+  "mobile-disabled": "_mobile-disabled_18ek6_48",
+  "cross-icon": "_cross-icon_18ek6_54",
+  input: Re
+}, ae = H.bind(Oe), je = ({
+  item: o,
+  onRemoveItem: e,
+  disabled: a = !1,
+  mobileDisabled: r = !1,
+  parseValueToString: n,
+  error: i = !1,
+  editItem: p,
+  editable: u = !1,
+  getAdditionalCreationCondition: g = () => !0,
+  storedOption: N = !0,
+  highlightUnStoredItem: b = !1,
+  variant: E = "light",
+  getItemName: w
+}) => {
+  const [f, I] = de(!1), [k, _] = de(""), y = () => {
+    !a && u && !N && (_((w == null ? void 0 : w(o)) || (n == null ? void 0 : n(o)) || ""), I(!0));
+  }, B = (t) => {
+    _(t.target.value);
+  }, $ = (t) => {
+    const l = g(k);
+    t.key === "Enter" && l && (p(o, k), I(!1), _(""));
+  }, c = () => {
+    I(!1), _("");
+  }, d = (t) => {
+    t.stopPropagation(), e(o);
+  };
+  return f ? /* @__PURE__ */ s(
+    "input",
+    {
+      autoFocus: !0,
+      value: k,
+      onChange: B,
+      onKeyDown: $,
+      onBlur: c,
+      className: ae("input")
+    }
+  ) : /* @__PURE__ */ M(
+    "div",
+    {
+      className: ae("selected-item", E, {
+        [`validation-${i}`]: i,
+        disabled: a,
+        "mobile-disabled": r,
+        "highlight-un-stored-item": b && !N
+      }),
+      onClick: y,
+      children: [
+        n == null ? void 0 : n(o),
+        !a && /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: ae("cross-icon", {
+              [`validation-${i}`]: i,
+              "mobile-disabled": r,
+              disabled: a
+            }),
+            onClick: d,
+            children: /* @__PURE__ */ s($e, {})
+          }
+        )
+      ]
+    }
+  );
+}, He = ({
+  items: o = [],
+  parseValueToString: e,
+  getItemValidationErrorType: a,
+  storedItemsMap: r = {},
+  highlightUnStoredItem: n = !1,
+  renderCustomSelectedItem: i,
+  ...p
+}) => o.map((u) => i ? i(u) : /* @__PURE__ */ s(
+  je,
+  {
+    parseValueToString: e,
+    error: (a == null ? void 0 : a(u)) || "",
+    item: u,
+    storedOption: !!r[e(u)],
+    highlightUnStoredItem: n,
+    ...p
+  },
+  e == null ? void 0 : e(u)
+)), Le = "_prompt_1xfmd_16", Pe = {
+  prompt: Le
+}, We = H.bind(Pe), ze = ({ children: o = null }) => /* @__PURE__ */ s("div", { className: We("prompt"), children: o }), Ke = "_item_1qhaq_16", Ye = "_divider_1qhaq_24", Xe = "_active_1qhaq_48", Ge = "_value_1qhaq_60", Je = "_tag_1qhaq_78", Qe = "_disabled_1qhaq_89", Te = {
+  item: Ke,
+  divider: Ye,
+  "new-item": "_new-item_1qhaq_31",
+  active: Xe,
+  value: Ge,
+  "key-variant": "_key-variant_1qhaq_75",
+  tag: Je,
+  "button-active": "_button-active_1qhaq_89",
+  disabled: Qe,
+  "value-variant": "_value-variant_1qhaq_109"
+}, X = H.bind(Te), fe = ({
+  isActive: o = !1,
+  isSelected: e = !1,
+  isNew: a = !1,
+  children: r = null,
+  disabled: n = !1,
+  optionVariant: i = "",
+  newItemButtonText: p = "",
+  ...u
+}) => {
+  const g = () => p || (i === "key-variant" ? "New key" : "New value");
+  return a ? /* @__PURE__ */ M(ee, { children: [
+    /* @__PURE__ */ s("div", { className: X("divider") }),
+    /* @__PURE__ */ M(
+      "li",
+      {
+        className: X("new-item", i, {
+          active: o,
+          selected: e,
+          disabled: n
+        }),
+        ...u,
+        children: [
+          /* @__PURE__ */ s("span", { className: X("value"), children: r }),
+          /* @__PURE__ */ s(
+            Fe,
+            {
+              ...!n && u,
+              className: X({ "button-active": o }),
+              icon: /* @__PURE__ */ s(Me, {}),
+              variant: "text",
+              children: g()
+            }
+          )
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ s(
+    "li",
+    {
+      className: X("item", i, {
+        active: o,
+        selected: e,
+        disabled: n
+      }),
+      ...n ? {} : u,
+      children: /* @__PURE__ */ s("span", { className: X("label", "tag"), children: r })
+    }
+  );
+}, Ze = "_container_igshu_16", Ue = {
+  container: Ze
+}, ie = H.bind(Ue), Ve = (o) => {
+  const {
+    options: e,
+    async: a,
+    inputValue: r,
+    loading: n,
+    createWithoutConfirmation: i,
+    customEmptyListMessage: p,
+    customNoMatchesMessage: u,
+    optionVariant: g,
+    newItemButtonText: N,
+    renderOption: b,
+    getUniqKey: E,
+    getItemProps: w,
+    parseValueToString: f
+  } = o, I = Y(() => (e || []).filter((t) => f(t).toUpperCase().indexOf((r.toUpperCase() || "").trim()) > -1), [r, e, f]), k = Y(
+    (t, l, h = !1) => b ? b(t, l, h, w) : /* @__PURE__ */ s(
+      fe,
+      {
+        optionVariant: g,
+        ...w({ item: t, index: l }),
+        isNew: h,
+        newItemButtonText: N,
+        children: f(t)
+      },
+      (E == null ? void 0 : E(t)) || f(t)
+    ),
+    [w, E, N, g, f, b]
+  ), _ = Y(
+    (t) => t.length ? t.map((l, h) => k(l, h)) : "",
+    [k]
+  ), y = Y(
+    (t) => {
+      const l = t.length;
+      return /* @__PURE__ */ s("div", { className: ie({ container: !l }), children: /* @__PURE__ */ s(
+        fe,
+        {
+          optionVariant: g,
+          isNew: !0,
+          ...w({ item: r, index: l }),
+          children: f(r)
+        },
+        f(r)
+      ) });
+    },
+    [w, r, g, f]
+  ), B = Y(
+    (t) => n ? /* @__PURE__ */ M(ee, { children: [
+      /* @__PURE__ */ s(ze, { children: /* @__PURE__ */ s(Be, {}) }),
+      !i && y(t)
+    ] }) : "",
+    [i, n, y]
+  ), $ = Y(() => {
+    const t = (e == null ? void 0 : e.length) === 0 ? p || "No available options" : u || "No matches found";
+    return /* @__PURE__ */ s("div", { className: ie("empty-list-message"), children: t });
+  }, [p, u, e == null ? void 0 : e.length]), c = a ? e : I(), d = B(e);
+  return d || /* @__PURE__ */ M("div", { className: ie({ container: e.length }), children: [
+    /* @__PURE__ */ s(Se, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: qe(c) ? $() : _(c) }),
+    !i && y(c)
+  ] });
+}, et = "_menu_1bgrz_16", tt = "_opened_1bgrz_35", ot = "_dark_1bgrz_38", nt = {
+  menu: et,
+  opened: tt,
+  dark: ot
+}, st = H.bind(nt), rt = (o, e) => !o || o <= e.trim().length, ge = xe(
+  ({
+    isOpen: o = !1,
+    style: e = {},
+    minLength: a = 1,
+    isDropdownMode: r,
+    inputValue: n = "",
+    className: i = "",
+    ...p
+  }, u) => /* @__PURE__ */ s(
+    "ul",
+    {
+      ref: u,
+      className: st(
+        "menu",
+        { opened: o && (r || rt(a, n)) },
+        i
+      ),
+      style: e,
+      children: /* @__PURE__ */ s(Ve, { inputValue: n, ...p })
+    }
+  )
+), _e = (o, e) => typeof o == "string" ? o : e ? String(o[e(o)]) : "", V = (o, e) => {
+  var r;
+  return o === e ? !0 : !!(o && e && typeof o == "object" && typeof e == "object" && Object.keys(o).length === Object.keys(e).length && ((r = Object.entries(o)) != null && r.every(([n, i]) => V(i, e[n]))));
+}, ct = (o, e, a) => typeof o == "string" ? o === e : a ? (() => {
+  const r = a(o);
+  return o[r] === e[r];
+})() : !1, lt = ({
+  options: o = [],
+  onChange: e,
+  selectedItems: a = [],
+  handleUnStoredItemCb: r = null,
+  existingItemsMap: n = {},
+  children: i,
+  customizeNewSelectedValue: p = (b) => b,
+  getOptionUniqKey: u,
+  getOptionUniqKeyValue: g,
+  ...N
+}) => {
+  const [b, E] = de(n), w = (c, d) => {
+    const t = {
+      ...b
+    };
+    c.forEach((l) => {
+      if (o.find((h) => ct(h, l, u))) {
+        const h = _e(l, u);
+        t[h] = !0;
+      }
+    }), E(t), d(t);
+  }, f = (c, d) => {
+    const t = _e(c, u);
+    if (t in b) {
+      const l = { ...b };
+      delete l[t], E(l), d(l);
+    } else
+      d(b);
+  }, I = (c, d) => {
+    const t = p(c), l = Array.isArray(t) ? t : [t], L = [...a.filter((C) => l.indexOf(C) < 0), ...l];
+    e == null || e(L, d), w(l, (C) => r == null ? void 0 : r(L, C));
+  }, k = (c, d) => {
+    const t = a.indexOf(c), l = [...a];
+    l.splice(t, 1, d), e == null || e(l, null);
+  }, _ = (c, d) => {
+    const t = a.filter((h) => !V(h, c));
+    e == null || e(t, d), f(c, (h) => r == null ? void 0 : r(t, h));
+  }, y = (c, d) => {
+    c && I(c, d);
+  }, B = (c) => ({
+    removeItem: _,
+    editItem: k,
+    handleChange: e,
+    getOptionUniqKeyValue: g,
+    storedItemsMap: b,
+    ...c
+  });
+  return /* @__PURE__ */ s(
+    U,
+    {
+      ...N,
+      stateReducer: (c, d) => {
+        switch (d.type) {
+          case U.stateChangeTypes.keyDownEnter:
+          case U.stateChangeTypes.clickItem:
+            return {
+              ...d,
+              highlightedIndex: c.highlightedIndex,
+              inputValue: ""
+            };
+          default:
+            return d;
+        }
+      },
+      onChange: y,
+      selectedItem: null,
+      children: (c) => i == null ? void 0 : i(B(c))
+    }
+  );
+}, at = "_autocomplete_w0t1o_16", it = "_disabled_w0t1o_32", dt = "_error_w0t1o_35", ut = "_touched_w0t1o_35", mt = "_input_w0t1o_74", ft = {
+  autocomplete: at,
+  "autocomplete-wrapper": "_autocomplete-wrapper_w0t1o_28",
+  disabled: it,
+  error: dt,
+  touched: ut,
+  "clear-icon": "_clear-icon_w0t1o_46",
+  "clear-icon--disabled": "_clear-icon--disabled_w0t1o_56",
+  "autocomplete-input": "_autocomplete-input_w0t1o_60",
+  "mobile-disabled": "_mobile-disabled_w0t1o_69",
+  input: mt,
+  "type-number": "_type-number_w0t1o_98",
+  "error-text": "_error-text_w0t1o_109",
+  "dropdown-button": "_dropdown-button_w0t1o_118",
+  "icon-reversed": "_icon-reversed_w0t1o_126"
+}, j = H.bind(ft), jt = (o) => {
+  const {
+    options: e = [],
+    loading: a = !1,
+    onStateChange: r = () => {
+    },
+    value: n = [],
+    placeholder: i = "",
+    error: p = "",
+    touched: u = !1,
+    creatable: g = !1,
+    editable: N = !1,
+    onChange: b = () => {
+    },
+    onFocus: E = () => {
+    },
+    onBlur: w = () => {
+    },
+    disabled: f = !1,
+    isDropdownMode: I = !1,
+    mobileDisabled: k = !1,
+    inputProps: _ = {},
+    parseValueToString: y = (m) => m == null ? "" : String(m),
+    maxLength: B = null,
+    async: $ = !1,
+    customClass: c = "",
+    createWithoutConfirmation: d = !1,
+    getItemValidationErrorType: t = null,
+    clearItemsError: l = () => {
+    },
+    getAdditionalCreationCondition: h = () => !0,
+    highlightUnStoredItem: L = !1,
+    parseInputValueFn: G = null,
+    handleUnStoredItemCb: C = null,
+    dataAutomationId: te = "",
+    existingItemsMap: Z = {},
+    customizeNewSelectedValue: oe = (m) => m,
+    renderCustomSelectedItem: ne,
+    useFixedPositioning: se,
+    newItemButtonText: S = "",
+    ...R
+  } = o, { refs: O, floatingStyles: P } = he({
+    placement: "bottom-start",
+    strategy: se ? "fixed" : "absolute",
+    whileElementsMounted: be
+  }), q = n.length === 0 && !f ? i : "", A = Ee(null);
+  Ie(() => {
+    l();
+  }, [l, n]);
+  const re = (m, v) => {
+    b(m, v);
+  }, ce = (m, v, F) => ({ item: x, index: T, ...z }) => m({
+    item: x,
+    index: T,
+    isSelected: F.some((le) => V(le, x)),
+    ...z,
+    isActive: v === T
+  }), J = ({
+    event: m,
+    removeItem: v,
+    inputValue: F
+  }) => {
+    m.key === "Backspace" && !F && n.length && v(n[n.length - 1], null);
+  }, D = ({
+    inputValue: m,
+    selectItem: v,
+    clearSelection: F
+  }) => {
+    if (G) {
+      const x = G(m);
+      (x.length ? x : [m]).forEach((z) => v(z)), F();
+    } else
+      v(m), F();
+  }, W = (m) => (v) => {
+    m(v, null), A.current && A.current.focus();
+  }, Q = e.filter((m) => n.every((v) => !V(v, m)));
+  return /* @__PURE__ */ s(
+    lt,
+    {
+      onChange: re,
+      itemToString: y,
+      selectedItems: n,
+      onStateChange: r,
+      options: e,
+      existingItemsMap: Z,
+      handleUnStoredItemCb: C,
+      customizeNewSelectedValue: oe,
+      children: ({
+        getInputProps: m,
+        getItemProps: v,
+        isOpen: F,
+        inputValue: x,
+        highlightedIndex: T,
+        removeItem: z,
+        editItem: le,
+        openMenu: we,
+        selectItem: ue,
+        clearSelection: me,
+        toggleMenu: ye,
+        storedItemsMap: Ne,
+        getRootProps: ke
+      }) => /* @__PURE__ */ M(
+        "div",
+        {
+          ...ke(void 0, { suppressRefError: !0 }),
+          className: j("autocomplete-wrapper"),
+          ref: O.setReference,
+          children: [
+            /* @__PURE__ */ M(ee, { children: [
+              /* @__PURE__ */ M(
+                "div",
+                {
+                  className: j("autocomplete", c, {
+                    "mobile-disabled": k,
+                    error: p,
+                    touched: u,
+                    disabled: f
+                  }),
+                  children: [
+                    /* @__PURE__ */ M(
+                      "div",
+                      {
+                        className: j("autocomplete-input", {
+                          "mobile-disabled": k
+                        }),
+                        children: [
+                          /* @__PURE__ */ s(
+                            He,
+                            {
+                              items: n,
+                              onRemoveItem: W(z),
+                              disabled: f,
+                              mobileDisabled: k,
+                              parseValueToString: y,
+                              getItemValidationErrorType: t,
+                              renderCustomSelectedItem: ne,
+                              editItem: le,
+                              editable: N,
+                              getAdditionalCreationCondition: h,
+                              storedItemsMap: Ne,
+                              highlightUnStoredItem: L
+                            }
+                          ),
+                          /* @__PURE__ */ s(
+                            "input",
+                            {
+                              ...m({
+                                ref: A,
+                                placeholder: q,
+                                maxLength: B,
+                                onFocus: () => {
+                                  we(), E();
+                                },
+                                onKeyDown: (K) => {
+                                  K.key === "Enter" && x && g && h(x) && D({
+                                    inputValue: x,
+                                    selectItem: ue,
+                                    clearSelection: me
+                                  }), J({ event: K, removeItem: z, inputValue: x });
+                                },
+                                onBlur: () => {
+                                  w(), x && g && h(x) && D({
+                                    inputValue: x,
+                                    selectItem: ue,
+                                    clearSelection: me
+                                  });
+                                },
+                                disabled: f,
+                                ..._
+                              }),
+                              className: j("input", { disabled: f }),
+                              "data-automation-id": te
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    (_ == null ? void 0 : _.clearable) && (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ s(
+                      "button",
+                      {
+                        className: j("clear-icon", { "clear-icon--disabled": f }),
+                        onClick: () => {
+                          var K;
+                          return !f && ((K = _ == null ? void 0 : _.onClear) == null ? void 0 : K.call(_));
+                        },
+                        children: /* @__PURE__ */ s(De, {})
+                      }
+                    ),
+                    I && /* @__PURE__ */ s(
+                      "button",
+                      {
+                        type: "button",
+                        className: j("dropdown-button", { "icon-reversed": F }),
+                        onClick: () => ye(),
+                        "aria-label": "Toggle dropdown",
+                        "aria-expanded": F,
+                        children: /* @__PURE__ */ s(ve, {})
+                      }
+                    )
+                  ]
+                }
+              ),
+              p && u && /* @__PURE__ */ s("span", { className: j("error-text"), children: p })
+            ] }),
+            /* @__PURE__ */ s(
+              ge,
+              {
+                isOpen: F,
+                loading: a,
+                async: $,
+                ref: O.setFloating,
+                newItemButtonText: S,
+                isDropdownMode: I,
+                style: P,
+                inputValue: (x || "").trim(),
+                getItemProps: ce(v, T, n),
+                parseValueToString: y,
+                createWithoutConfirmation: d,
+                options: Q,
+                ...R
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, _t = "Enter", pt = "Tab", ht = {
+  "input-wrapper": "_input-wrapper_d9vma_1",
+  "dropdown-button": "_dropdown-button_d9vma_6",
+  "icon-reversed": "_icon-reversed_d9vma_14"
+}, pe = H.bind(ht), bt = 0, Ht = (o) => {
+  const {
+    options: e = [],
+    value: a,
+    placeholder: r = "",
+    onChange: n = () => {
+    },
+    onFocus: i = () => {
+    },
+    onBlur: p = () => {
+    },
+    disabled: u = !1,
+    inputProps: g = {},
+    parseValueToString: N = (S) => S === null ? "" : String(S),
+    minLength: b = 1,
+    skipOptionCreation: E = !1,
+    maxLength: w = null,
+    optionVariant: f = "",
+    isRequired: I = !1,
+    error: k = "",
+    touched: _ = !1,
+    setTouch: y = () => {
+    },
+    createWithoutConfirmation: B = !1,
+    menuClassName: $ = "",
+    icon: c,
+    isDropdownMode: d = !1,
+    isOptionUnique: t,
+    refFunction: l,
+    stateReducer: h,
+    onStateChange: L,
+    useFixedPositioning: G,
+    newItemButtonText: C = "",
+    ...te
+  } = o, { refs: Z, floatingStyles: oe } = he({
+    placement: "bottom-start",
+    strategy: G ? "fixed" : "absolute",
+    whileElementsMounted: be
+  }), ne = (S, R, O) => ({ item: P, index: q, ...A }) => S({
+    item: P,
+    index: q,
+    isSelected: O !== null && O === P,
+    ...A,
+    isActive: R === q
+  }), se = (S, R) => {
+    S.key === pt && (S.preventDefault(), R(e.length));
+  };
+  return /* @__PURE__ */ s(
+    U,
+    {
+      onChange: n,
+      itemToString: N,
+      selectedItem: a,
+      onStateChange: L,
+      defaultHighlightedIndex: bt,
+      stateReducer: h,
+      children: ({
+        getInputProps: S,
+        getItemProps: R,
+        setHighlightedIndex: O,
+        toggleMenu: P,
+        isOpen: q,
+        inputValue: A,
+        highlightedIndex: re,
+        getRootProps: ce,
+        selectItem: J
+      }) => /* @__PURE__ */ s(ee, { children: /* @__PURE__ */ M(
+        "div",
+        {
+          className: pe("input-wrapper"),
+          ...ce(void 0, { suppressRefError: !0 }),
+          ref: Z.setReference,
+          children: [
+            /* @__PURE__ */ s(
+              Ae,
+              {
+                ...S({
+                  placeholder: u ? "" : r,
+                  maxLength: w || void 0,
+                  onFocus: () => {
+                    i();
+                  },
+                  refFunction: l,
+                  onKeyDown: (D) => {
+                    D.key === _t && D.preventDefault(), A && q && se(D, O);
+                  },
+                  onBlur: (D) => {
+                    const W = (A ?? "").trim(), Q = !!W, m = Q ? e.find((v) => N(v) === W) : void 0;
+                    J(m || (!E && B && Q ? W : null)), p(D), t == null || t(
+                      Q ? !e.some((v) => N(v) === W) : null
+                    ), y == null || y(!0);
+                  },
+                  disabled: u,
+                  defaultWidth: !1,
+                  isRequired: I,
+                  touched: _,
+                  error: k,
+                  ...g,
+                  endIcon: d && !c ? /* @__PURE__ */ s(
+                    "button",
+                    {
+                      type: "button",
+                      className: pe("dropdown-button", { "icon-reversed": q }),
+                      onClick: () => P(),
+                      "aria-label": "Toggle dropdown",
+                      "aria-expanded": q,
+                      children: /* @__PURE__ */ s(ve, {})
+                    }
+                  ) : c,
+                  minLength: d ? 0 : b
+                })
+              }
+            ),
+            /* @__PURE__ */ s(
+              ge,
+              {
+                isOpen: q,
+                isDropdownMode: d,
+                style: oe,
+                ref: Z.setFloating,
+                minLength: b,
+                inputValue: (A || "").trim(),
+                getItemProps: ne(R, re, a),
+                parseValueToString: N,
+                optionVariant: f,
+                createWithoutConfirmation: B,
+                className: $,
+                options: e,
+                newItemButtonText: C,
+                ...te
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+};
+export {
+  ge as AutocompleteMenu,
+  fe as AutocompleteOption,
+  Ve as AutocompleteOptions,
+  ze as AutocompletePrompt,
+  jt as MultipleAutocomplete,
+  Ht as SingleAutocomplete
+};