@reportportal/ui-kit 0.0.1-alpha.155 → 0.0.1-alpha.156

package/dist/common/utils/htmlAttributes.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Splits object properties into HTML attributes and remaining props.
+ * Transforms camelCase data-* and aria-* attributes to kebab-case format
+ * as required by HTML specification.
+ *
+ * @param attrs - Object containing properties to split
+ * @returns Object with two properties:
+ *   - transformed: data-* and aria-* attributes converted to kebab-case
+ *   - remaining: all other properties unchanged
+ *
+ * @example
+ * const props = { dataTestId: 'test', ariaLabel: 'Label', className: 'container' };
+ * const { transformed, remaining } = splitHtmlAttributes(props);
+ * // transformed: { 'data-test-id': 'test', 'aria-label': 'Label' }
+ * // remaining: { className: 'container' }
+ */
+export declare const splitHtmlAttributes: (attrs: Record<string, unknown>) => {
+    transformed: Record<string, unknown>;
+    remaining: Record<string, unknown>;
+};

package/dist/common/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { getFileExtension } from './getFileExtension';
 export { isString } from './isString';
 export { getAlignmentAxisOffset } from './floatingUi';
+export { splitHtmlAttributes } from './htmlAttributes';

package/dist/components/dropdown/dropdown.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode, FC } from 'react';
+import { ReactNode, FC, ComponentPropsWithRef } from 'react';
 import { DropdownVariant, RenderDropdownOption, DropdownOptionType, DropdownValue } from './types';
 
-export interface DropdownProps {
+export interface DropdownProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'onFocus' | 'onBlur' | 'title'> {
     options: DropdownOptionType[];
     value: DropdownValue | DropdownValue[];
     disabled?: boolean;

package/dist/{datePicker-3881a2d6.js → datePicker-37854acd.js}

@@ -3,7 +3,7 @@ import B from "react-datepicker/dist/es/index.js";
 import { c as R } from "./bind-06a7ff84.js";
 import { useMemo as P, useRef as D } from "react";
 import { F as I } from "./fieldText-1749da7a.js";
-import { D as E } from "./dropdown-b63f2137.js";
+import { D as E } from "./dropdown-ae695766.js";
 import { S as T } from "./calendarArrow-44c7e60e.js";
 import { registerLocale as j } from "react-datepicker";
 const ie = (n, s) => {

package/dist/datePicker.js

@@ -1,5 +1,5 @@
-import { D as t } from "./datePicker-3881a2d6.js";
-import { r as A } from "./datePicker-3881a2d6.js";
+import { D as t } from "./datePicker-37854acd.js";
+import { r as A } from "./datePicker-37854acd.js";
 import "react/jsx-runtime";
 import "react-datepicker/dist/es/index.js";
 import "./bind-06a7ff84.js";
@@ -11,7 +11,7 @@ import "./baseIconButton-251479f7.js";
 import "./spinLoader-c4a53718.js";
 import "./maxValueDisplay-9be01a75.js";
 import "./fieldLabel.js";
-import "./dropdown-b63f2137.js";
+import "./dropdown-ae695766.js";
 import "react-dom";
 import "@floating-ui/react-dom";
 import "downshift";

package/dist/dropdown-ae695766.js

@@ -0,0 +1,642 @@
+import { jsxs as R, jsx as u, Fragment as Ve } from "react/jsx-runtime";
+import { forwardRef as wr, useState as ne, useRef as K, useMemo as C, useCallback as N, useLayoutEffect as Se, useEffect as V } from "react";
+import { createPortal as Er } from "react-dom";
+import { c as We } from "./bind-06a7ff84.js";
+import { useFloating as yr, offset as Cr, flip as Ar, size as Or, autoUpdate as vr } from "@floating-ui/react-dom";
+import { useSelect as pe } from "downshift";
+import { Scrollbars as Dr } from "rc-scrollbars";
+import { K as p } from "./keyCodes-f63c0e11.js";
+import { B as br } from "./baseIconButton-251479f7.js";
+import { S as Nr } from "./clear-53660571.js";
+import { S as Ir } from "./dropdown-0260bb66.js";
+import { FieldLabel as Kr } from "./fieldLabel.js";
+import { AdaptiveTagList as Lr } from "./adaptiveTagList.js";
+import { C as Tr } from "./checkbox-ed6cc375.js";
+import { i as se } from "./isEmpty-ccacb5ff.js";
+const xr = (n) => {
+  const r = {}, c = {};
+  return Object.entries(n).forEach(([a, h]) => {
+    if (/^data[A-Z]/.test(a) || /^aria[A-Z]/.test(a)) {
+      const m = a.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+      r[m] = h;
+    } else
+      c[a] = h;
+  }), { transformed: r, remaining: c };
+}, kr = "_disabled_14s7v_12", Rr = "_hidden_14s7v_16", Pr = "_hover_14s7v_22", Yr = "_selected_14s7v_38", Vr = {
+  "dropdown-option": "_dropdown-option_14s7v_1",
+  disabled: kr,
+  hidden: Rr,
+  hover: Pr,
+  "depth-1": "_depth-1_14s7v_32",
+  selected: Yr,
+  "multi-select": "_multi-select_14s7v_38",
+  "single-option": "_single-option_14s7v_43",
+  "sub-option": "_sub-option_14s7v_50"
+}, He = We.bind(Vr), $e = wr(
+  (n, r) => {
+    const {
+      option: { value: c, disabled: a, hidden: h, label: m, title: A, groupRef: O },
+      selected: F,
+      onChange: H,
+      render: U,
+      highlightHovered: B,
+      onMouseEnter: ae,
+      multiSelect: g,
+      isPartiallyChecked: j = !1,
+      depth: q = 0,
+      hasChildren: oe = !1
+    } = n, ie = (Z) => {
+      (Z.target instanceof HTMLDivElement || Z.target instanceof HTMLInputElement) && (H == null || H(c));
+    };
+    return /* @__PURE__ */ R(
+      "div",
+      {
+        className: He("dropdown-option", {
+          selected: F,
+          disabled: a,
+          hidden: h,
+          hover: B,
+          "multi-select": g,
+          "has-children": oe,
+          [`depth-${q}`]: q > 0
+        }),
+        title: A,
+        onClick: ie,
+        ref: r,
+        onMouseEnter: ae,
+        children: [
+          g && /* @__PURE__ */ u(Tr, { value: !!F, partiallyChecked: j }),
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: He("single-option", {
+                "sub-option": !!O
+              }),
+              children: U ? U(n) : m
+            }
+          )
+        ]
+      }
+    );
+  }
+), Sr = [
+  p.ENTER_KEY_CODE,
+  p.SPACE_KEY_CODE,
+  p.ARROW_DOWN_KEY_CODE
+], Hr = [p.ESCAPE_KEY_CODE, p.TAB_KEY_CODE];
+var S = /* @__PURE__ */ ((n) => (n.ON_KEY_DOWN = "onKeyDown", n.ON_CLICK = "onClick", n))(S || {});
+const $r = 240, Wr = "data-dropdown-portal-menu", Mr = 10, zr = (n, r) => {
+  const c = Array.isArray(r) ? r : [r];
+  return n.findIndex(({ value: a }) => c.includes(a));
+}, Fr = (n, r) => (n % r + r) % r, me = (n, r = 0, c = 1) => {
+  var h;
+  if (n.length === 0)
+    return 0;
+  if (!((h = n[r]) != null && h.disabled))
+    return r;
+  const a = n.length;
+  return me(
+    n,
+    Fr(r + c, a),
+    c
+  );
+}, Ur = (n, r) => me(n, r), Br = (n, r) => me(n, r, -1), Me = (n, r = 0, c) => !n || n.length === 0 ? [] : n.reduce((a, h) => {
+  var m;
+  return h && (a.push({ option: h, depth: r, parent: c }), (m = h.children) != null && m.length && a.push(...Me(h.children, r + 1, h))), a;
+}, []), ze = (n) => !n || n.length === 0 ? [] : n.reduce((r, c) => {
+  var a;
+  return c && ((a = c.children) != null && a.length ? r.push(...ze(c.children)) : r.push(c)), r;
+}, []), Fe = (n) => {
+  var r;
+  return n ? (r = n.children) != null && r.length ? n.children.reduce((c, a) => (a && c.push(...Fe(a)), c), []) : [n.value] : [];
+}, jr = "_container_1lti6_1", qr = "_icon_1lti6_7", Zr = "_arrow_1lti6_15", Gr = "_dropdown_1lti6_33", Xr = "_disabled_1lti6_53", Jr = "_value_1lti6_60", Qr = "_error_1lti6_63", et = "_touched_1lti6_63", rt = "_opened_1lti6_67", tt = "_placeholder_1lti6_101", nt = "_ghost_1lti6_184", st = "_divider_1lti6_202", at = {
+  container: jr,
+  icon: qr,
+  arrow: Zr,
+  "clear-button": "_clear-button_1lti6_23",
+  dropdown: Gr,
+  "multi-select-with-tags": "_multi-select-with-tags_1lti6_47",
+  "transparent-background": "_transparent-background_1lti6_50",
+  disabled: Xr,
+  value: Jr,
+  error: Qr,
+  touched: et,
+  opened: rt,
+  placeholder: tt,
+  "mobile-disabled": "_mobile-disabled_1lti6_105",
+  "value-wrapper": "_value-wrapper_1lti6_110",
+  "tags-wrapper": "_tags-wrapper_1lti6_116",
+  "with-search": "_with-search_1lti6_121",
+  "search-input": "_search-input_1lti6_128",
+  "select-list": "_select-list_1lti6_146",
+  "limited-width": "_limited-width_1lti6_163",
+  "options-container": "_options-container_1lti6_167",
+  "empty-list-message": "_empty-list-message_1lti6_172",
+  ghost: nt,
+  divider: st
+}, _ = We.bind(at), At = ({
+  multiSelect: n = !1,
+  value: r = n ? [] : "",
+  options: c = [],
+  disabled: a = !1,
+  error: h,
+  onChange: m,
+  onFocus: A,
+  onBlur: O,
+  mobileDisabled: F,
+  title: H,
+  touched: U = !1,
+  icon: B,
+  variant: ae,
+  placeholder: g = "",
+  label: j = "",
+  renderOption: q,
+  transparentBackground: oe = !1,
+  className: ie,
+  toggleButtonClassName: Z,
+  selectListClassName: Ue,
+  isListWidthLimited: Be = !1,
+  optionAll: le = { value: "all", label: "All" },
+  isOptionAllVisible: ge = !1,
+  onSelectAll: je = () => {
+  },
+  formatDisplayedValue: we,
+  notScrollable: $ = !1,
+  footer: G,
+  includeGroupValue: Ee = !1,
+  clearable: qe = !1,
+  onClear: ye = () => {
+  },
+  clearButtonAriaLabel: Ze = "Clear selection",
+  menuPortalRoot: w,
+  isMultiSelectWithTags: v = !1,
+  noMatchesMessage: Ge = "No matches found",
+  ...Xe
+}) => {
+  const { transformed: Je, remaining: Qe } = xr(Xe), [l, X] = ne(!1), [I, Ce] = ne(""), Ae = K(null), Oe = K(null), W = K(null), ce = K(0), de = K(null), ue = K(null), fe = K(""), [er, ve] = ne(!1), [rr, J] = ne(null), L = K(null), M = C(() => Me(c), [c]), T = C(() => {
+    if (!v || !I.trim())
+      return M;
+    const e = I.toLowerCase();
+    return M.filter(
+      ({ option: t }) => t.label.toLowerCase().includes(e)
+    );
+  }, [M, I, v]), E = C(
+    () => T.map(({ option: e }) => e),
+    [T]
+  ), De = C(
+    () => M.map(({ option: e }) => e),
+    [M]
+  ), Q = C(() => T.filter(({ option: e }) => {
+    var t;
+    return (t = e.children) == null ? void 0 : t.length;
+  }).map(({ option: e }) => e), [T]), be = C(() => ze(c), [c]), D = C(
+    () => be.map(({ value: e }) => e),
+    [be]
+  ), ee = C(() => {
+    const e = /* @__PURE__ */ new Map();
+    return Q.forEach((t) => {
+      e.set(t.value, Fe(t));
+    }), e;
+  }, [Q]), z = N(
+    (e) => (Q.forEach((t) => {
+      const s = ee.get(t.value) ?? [], i = s.length > 0 && s.every((d) => e.has(d));
+      Ee && i ? e.add(t.value) : e.delete(t.value);
+    }), e),
+    [Q, Ee, ee]
+  ), x = C(() => !n || !Array.isArray(r) ? /* @__PURE__ */ new Set() : z(new Set(r)), [n, r, z]), Ne = n ? Array.isArray(r) && r.length > 0 : r || r === !1 || r === 0, tr = qe && Ne && !a, nr = N((e) => {
+    ce.current = e.scrollTop;
+  }, []);
+  Se(() => {
+    l && !$ && W.current && !(n && L.current !== null) && W.current.scrollTop(ce.current);
+  }, [l, $, r, n]);
+  const { refs: P, floatingStyles: Ie } = yr({
+    placement: "bottom-start",
+    middleware: [
+      Cr(5),
+      Ar({
+        fallbackPlacements: ["bottom-start", "top-start", "bottom", "top"],
+        ...w && {
+          boundary: document.documentElement,
+          rootBoundary: "viewport"
+        }
+      }),
+      w ? Or({
+        apply({ rects: e, elements: t }) {
+          const s = e.reference.width;
+          Object.assign(t.floating.style, {
+            width: `${s}px`,
+            minWidth: `${s}px`,
+            maxWidth: `${s}px`
+          });
+        }
+      }) : null
+    ].filter(Boolean),
+    whileElementsMounted: l ? (e, t, s) => vr(e, t, s, {
+      animationFrame: !0
+    }) : void 0
+  }), sr = () => {
+    if (!ge)
+      return;
+    const e = Array.isArray(r) ? r : [], t = new Set(e), s = D.some((d) => !t.has(d));
+    D.forEach((d) => {
+      s ? t.add(d) : t.delete(d);
+    });
+    const i = z(t);
+    m(Array.from(i)), je();
+  }, re = N(() => {
+    l || (X(!0), A == null || A());
+  }, [l, A]), y = N(() => {
+    X(!1), Ce(""), fe.current = "", O == null || O();
+  }, [O]), he = N(() => {
+    if (a)
+      return;
+    m(n ? [] : ""), ye(), y(), requestAnimationFrame(() => {
+      const t = P.reference.current;
+      t && t instanceof HTMLElement && t.focus();
+    });
+  }, [a, n, m, ye, y, P]), ar = N(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), he();
+    },
+    [he]
+  ), Ke = N(
+    (e) => {
+      var d, o;
+      if (!l)
+        return;
+      const t = e == null ? void 0 : e.target;
+      if (!t)
+        return;
+      const s = (d = Ae.current) == null ? void 0 : d.contains(t), i = (o = Oe.current) == null ? void 0 : o.contains(t);
+      !s && !i && y();
+    },
+    [l, y]
+  );
+  V(() => {
+    if (!l)
+      return;
+    const e = (t) => {
+      Ke(t);
+    };
+    return document.addEventListener("pointerdown", e), () => {
+      document.removeEventListener("pointerdown", e);
+    };
+  }, [l, Ke]);
+  const Le = (e) => {
+    var t;
+    if (!e.disabled) {
+      if (n) {
+        const s = Array.isArray(r) ? r : [], i = new Set(s);
+        if ((t = e.children) != null && t.length) {
+          const o = ee.get(e.value) ?? [], f = o.some((b) => !i.has(b));
+          o.forEach((b) => {
+            f ? i.add(b) : i.delete(b);
+          });
+        } else
+          i.has(e.value) ? i.delete(e.value) : i.add(e.value);
+        const d = z(i);
+        m(Array.from(d));
+      } else
+        m(e.value);
+      X((s) => n || !s);
+    }
+  }, or = () => E.find(({ value: e }) => e === r), Te = zr(E, r), {
+    getToggleButtonProps: ir,
+    getLabelProps: lr,
+    getMenuProps: xe,
+    getItemProps: cr,
+    setHighlightedIndex: k,
+    highlightedIndex: _e
+  } = pe({
+    items: E,
+    itemToString: (e) => (e != null && e.label ? String(e.label) : g) || "",
+    selectedItem: or(),
+    isOpen: l,
+    circularNavigation: !0,
+    defaultHighlightedIndex: Te,
+    onHighlightedIndexChange: (e) => {
+      switch (e.type) {
+        case pe.stateChangeTypes.MenuKeyDownArrowUp:
+          return J(S.ON_KEY_DOWN), k(Br(E, e.highlightedIndex)), e;
+        case pe.stateChangeTypes.MenuKeyDownArrowDown:
+          return J(S.ON_KEY_DOWN), k(Ur(E, e.highlightedIndex)), e;
+        default:
+          return e;
+      }
+    }
+  }), ke = N(
+    (e) => {
+      Oe.current = e, P.setFloating(e);
+    },
+    [P]
+  ), dr = N(
+    (e = {}) => {
+      const t = xe(e), s = t.ref;
+      return {
+        ...t,
+        ref: (i) => {
+          ke(i), typeof s == "function" ? s(i) : s && (s.current = i);
+        }
+      };
+    },
+    [xe, ke]
+  );
+  V(() => {
+    n && l && L.current !== null && L.current >= 0 && L.current < E.length && (k(L.current), L.current = null, requestAnimationFrame(() => {
+      W.current && !$ && W.current.scrollTop(ce.current);
+    }));
+  }, [n, l, r, E.length, k, $]), V(() => {
+    l && v && requestAnimationFrame(() => {
+      var e;
+      (e = ue.current) == null || e.focus();
+    });
+  }, [l, v]), V(() => {
+    v && l && I !== fe.current && (fe.current = I, I && k(0));
+  }, [I, v, l]), Se(() => {
+    if (!l || !w)
+      return;
+    let e = window.scrollY, t = !0;
+    const s = 300, i = () => {
+      if (!t)
+        return;
+      window.scrollY !== e && window.scrollTo(0, e);
+    }, d = (f) => {
+      t && (f.preventDefault(), f.stopImmediatePropagation(), i());
+    };
+    e = window.scrollY, window.addEventListener("scroll", d, { passive: !1, capture: !0 }), requestAnimationFrame(() => {
+      e = window.scrollY, i();
+    });
+    const o = setTimeout(() => {
+      t = !1;
+    }, s);
+    return () => {
+      clearTimeout(o), window.removeEventListener("scroll", d, { capture: !0 });
+    };
+  }, [l, w]), V(() => {
+    if (!l || !w)
+      return;
+    const e = () => {
+      y();
+    };
+    return window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, [l, w, y]);
+  const Re = () => {
+    a || (X((e) => !e), l ? O == null || O() : A == null || A(), J(S.ON_CLICK));
+  }, te = C(() => {
+    if (n && Array.isArray(r) && D.length > 0 && D.every((t) => x.has(t)))
+      return le.label;
+    const e = E.reduce((t, s) => ((Array.isArray(r) && r.includes(s.value) || s.value === r) && t.push(s.label), t), []);
+    return e.length > 0 ? e.join(", ") : !r && r !== !1 && r !== 0 || Array.isArray(r) && !r.length ? g : typeof r == "string" && r.length > 0 && !g ? r : g || void 0;
+  }, [
+    n,
+    r,
+    D,
+    x,
+    le.label,
+    E,
+    g
+  ]);
+  V(() => {
+    if (de.current) {
+      const { offsetWidth: e, scrollWidth: t } = de.current;
+      ve(t > e);
+    } else
+      ve(!1);
+  }, [te]);
+  const ur = (e) => {
+    const { keyCode: t } = e;
+    Sr.includes(t) && e.target === e.currentTarget && (e.preventDefault(), e.stopPropagation(), !l && (k(Te), re(), J(S.ON_KEY_DOWN)));
+  }, fr = (e) => {
+    const { keyCode: t } = e;
+    if (t === p.ENTER_KEY_CODE || t === p.SPACE_KEY_CODE) {
+      const s = E[_e];
+      if (!s)
+        return;
+      n && (L.current = _e), Le(s), n || y();
+      return;
+    }
+    Hr.includes(t) && (e.stopPropagation(), y());
+  }, Pe = () => /* @__PURE__ */ R("div", { className: _("options-container"), children: [
+    n && ge && !se(T) && /* @__PURE__ */ R(Ve, { children: [
+      /* @__PURE__ */ u(
+        $e,
+        {
+          option: le,
+          selected: Array.isArray(r) && D.length > 0 && D.every((e) => x.has(e)),
+          onChange: sr,
+          multiSelect: n,
+          isPartiallyChecked: D.some((e) => x.has(e)) && !D.every((e) => x.has(e))
+        }
+      ),
+      /* @__PURE__ */ u("div", { className: _("divider") }),
+      " "
+    ] }),
+    se(T) ? /* @__PURE__ */ u("div", { className: _("empty-list-message"), children: Ge }) : T.map(({ option: e, depth: t }, s) => {
+      var f, b;
+      const i = ee.get(e.value) ?? [e.value], d = n && i.every((Y) => x.has(Y)), o = n && ((f = e.children) == null ? void 0 : f.length) && i.some((Y) => x.has(Y)) && !d;
+      return /* @__PURE__ */ u(
+        $e,
+        {
+          ...cr({
+            item: e,
+            index: s
+          }),
+          multiSelect: n,
+          selected: n ? d : e.value === r,
+          option: { title: e.label, ...e },
+          highlightHovered: _e === s && rr !== S.ON_CLICK,
+          render: q,
+          onChange: e.disabled ? null : () => Le(e),
+          onMouseEnter: () => k(s),
+          depth: t,
+          hasChildren: !!((b = e.children) != null && b.length),
+          isPartiallyChecked: o
+        },
+        e.value
+      );
+    }),
+    G && /* @__PURE__ */ R(Ve, { children: [
+      /* @__PURE__ */ u("div", { className: _("divider") }),
+      typeof G == "function" ? G(y) : G
+    ] })
+  ] }), hr = () => {
+    const e = De.reduce((o, f) => (Array.isArray(r) && r.includes(f.value) && o.push(f.label), o), []), t = (o) => {
+      const f = De.find(
+        ({ label: gr }) => gr === o
+      );
+      if (!f)
+        return;
+      const b = Array.isArray(r) ? r : [], Y = new Set(b);
+      Y.delete(f.value);
+      const mr = z(Y);
+      m(Array.from(mr));
+    }, s = (o) => {
+      const f = o.target;
+      Ce(f.value), l || (re(), requestAnimationFrame(() => {
+        f.focus();
+      }));
+    }, i = (o) => {
+      if (o.keyCode === p.ESCAPE_KEY_CODE) {
+        o.stopPropagation(), y();
+        return;
+      }
+      o.keyCode === p.ENTER_KEY_CODE || o.keyCode === p.SPACE_KEY_CODE || (o.keyCode === p.ARROW_DOWN_KEY_CODE || o.keyCode === p.ARROW_UP_KEY_CODE) && (o.preventDefault(), re());
+    }, d = /* @__PURE__ */ u(
+      "input",
+      {
+        ref: ue,
+        type: "text",
+        className: _("search-input"),
+        value: I,
+        onChange: s,
+        onKeyDown: i,
+        onClick: (o) => {
+          o.stopPropagation(), re();
+        },
+        placeholder: se(e) ? g : "",
+        autoComplete: "off"
+      }
+    );
+    return se(e) ? /* @__PURE__ */ u("div", { className: _("tags-wrapper", "with-search"), children: d }) : /* @__PURE__ */ R("div", { className: _("tags-wrapper", "with-search"), children: [
+      /* @__PURE__ */ u(
+        Lr,
+        {
+          tags: e,
+          onRemoveTag: t,
+          isShowAllView: !0,
+          defaultVisibleLines: Mr
+        }
+      ),
+      d
+    ] });
+  }, _r = () => {
+    if (v && n && Array.isArray(r))
+      return hr();
+    const e = we ? we(te) : te, t = Ne && !!e && er;
+    return /* @__PURE__ */ u(
+      "span",
+      {
+        ref: de,
+        className: _("value", {
+          placeholder: te === g
+        }),
+        title: t ? e : void 0,
+        children: e
+      }
+    );
+  }, pr = ir({
+    className: _("dropdown", ae, Z, {
+      "transparent-background": oe,
+      opened: l,
+      disabled: a,
+      error: h,
+      touched: U,
+      "mobile-disabled": F,
+      "multi-select-with-tags": v
+    }),
+    onClick: Re,
+    onKeyDown: ur,
+    ref: P.setReference
+  }), { type: ot, ...Ye } = pr;
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      ref: Ae,
+      className: _("container", ie),
+      title: H,
+      ...Qe,
+      ...Je,
+      children: [
+        j && /* @__PURE__ */ u(
+          Kr,
+          {
+            ...lr(),
+            onClick: () => !a && Re(),
+            style: { cursor: a ? "default" : "pointer" },
+            children: j
+          }
+        ),
+        /* @__PURE__ */ R(
+          "div",
+          {
+            ...Ye,
+            role: "button",
+            "aria-disabled": a,
+            tabIndex: a ? -1 : Ye.tabIndex ?? 0,
+            children: [
+              B && /* @__PURE__ */ u("span", { className: _("icon"), children: B }),
+              /* @__PURE__ */ u("div", { className: _("value-wrapper"), children: _r() }),
+              tr && /* @__PURE__ */ u(
+                br,
+                {
+                  className: _("clear-button"),
+                  onClick: ar,
+                  onKeyDown: (e) => {
+                    const { keyCode: t } = e;
+                    (t === p.ENTER_KEY_CODE || t === p.SPACE_KEY_CODE) && (e.preventDefault(), e.stopPropagation(), he());
+                  },
+                  "aria-label": Ze,
+                  children: /* @__PURE__ */ u(Nr, {})
+                }
+              ),
+              /* @__PURE__ */ u("span", { className: _("arrow"), "aria-hidden": "true", children: /* @__PURE__ */ u(Ir, {}) })
+            ]
+          }
+        ),
+        l && (() => {
+          var i;
+          const e = (i = P.reference.current) == null ? void 0 : i.getBoundingClientRect().width, t = w && e ? {
+            ...Ie,
+            width: `${e}px`,
+            minWidth: `${e}px`,
+            maxWidth: `${e}px`
+          } : Ie, s = /* @__PURE__ */ u(
+            "div",
+            {
+              style: t,
+              className: _(
+                "select-list",
+                {
+                  opened: l,
+                  "limited-width": Be
+                },
+                Ue
+              ),
+              ...w && { [Wr]: "" },
+              ...dr({
+                onKeyDown: fr,
+                ...v && {
+                  tabIndex: -1,
+                  onFocus: (d) => {
+                    var o;
+                    d.preventDefault(), (o = ue.current) == null || o.focus();
+                  }
+                }
+              }),
+              children: $ ? Pe() : /* @__PURE__ */ u(
+                Dr,
+                {
+                  autoHeight: !0,
+                  autoHeightMax: $r,
+                  hideTracksWhenNotNeeded: !0,
+                  ref: (d) => {
+                    W.current = d;
+                  },
+                  onScrollFrame: nr,
+                  children: Pe()
+                }
+              )
+            }
+          );
+          return w ? Er(s, w) : s;
+        })()
+      ]
+    }
+  );
+};
+export {
+  At as D,
+  Wr as a
+};

package/dist/dropdown.js

@@ -1,5 +1,5 @@
-import { D as r } from "./dropdown-b63f2137.js";
-import { a as n } from "./dropdown-b63f2137.js";
+import { D as r } from "./dropdown-ae695766.js";
+import { a as n } from "./dropdown-ae695766.js";
 import "react/jsx-runtime";
 import "react";
 import "react-dom";

package/dist/index.js

@@ -6,9 +6,9 @@ import { B as M } from "./bubblesLoader-f3ffa240.js";
 import { B as w } from "./button-97d9e587.js";
 import { C as k } from "./checkbox-ed6cc375.js";
 import { Chip as O } from "./chip.js";
-import { D as z } from "./datePicker-3881a2d6.js";
+import { D as z } from "./datePicker-37854acd.js";
 import "react-datepicker";
-import { D as J } from "./dropdown-b63f2137.js";
+import { D as J } from "./dropdown-ae695766.js";
 import { FieldLabel as G } from "./fieldLabel.js";
 import { F as X } from "./fieldNumber-d1b5a7a1.js";
 import { F as q } from "./fieldText-1749da7a.js";

package/dist/modal.js

@@ -5,7 +5,7 @@ import { AnimatePresence as Y, motion as X } from "framer-motion";
 import { c as b } from "./bind-06a7ff84.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import { a as q } from "./dropdown-b63f2137.js";
+import { a as q } from "./dropdown-ae695766.js";
 import { K as J } from "./keyCodes-f63c0e11.js";
 import { B as D } from "./button-97d9e587.js";
 import { Tooltip as Q } from "./tooltip.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.155",
+  "version": "0.0.1-alpha.156",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {

package/dist/dropdown-b63f2137.js

@@ -1,625 +0,0 @@
-import { jsxs as R, jsx as u, Fragment as Ve } from "react/jsx-runtime";
-import { forwardRef as pr, useState as ne, useRef as K, useMemo as E, useCallback as N, useLayoutEffect as Se, useEffect as V } from "react";
-import { createPortal as mr } from "react-dom";
-import { c as Me } from "./bind-06a7ff84.js";
-import { useFloating as gr, offset as wr, flip as yr, size as Er, autoUpdate as Cr } from "@floating-ui/react-dom";
-import { useSelect as pe } from "downshift";
-import { Scrollbars as Or } from "rc-scrollbars";
-import { K as _ } from "./keyCodes-f63c0e11.js";
-import { B as vr } from "./baseIconButton-251479f7.js";
-import { S as Ar } from "./clear-53660571.js";
-import { S as Dr } from "./dropdown-0260bb66.js";
-import { FieldLabel as Nr } from "./fieldLabel.js";
-import { AdaptiveTagList as br } from "./adaptiveTagList.js";
-import { C as Ir } from "./checkbox-ed6cc375.js";
-import { i as se } from "./isEmpty-ccacb5ff.js";
-const Kr = "_disabled_14s7v_12", Lr = "_hidden_14s7v_16", Tr = "_hover_14s7v_22", kr = "_selected_14s7v_38", xr = {
-  "dropdown-option": "_dropdown-option_14s7v_1",
-  disabled: Kr,
-  hidden: Lr,
-  hover: Tr,
-  "depth-1": "_depth-1_14s7v_32",
-  selected: kr,
-  "multi-select": "_multi-select_14s7v_38",
-  "single-option": "_single-option_14s7v_43",
-  "sub-option": "_sub-option_14s7v_50"
-}, He = Me.bind(xr), We = pr(
-  (n, t) => {
-    const {
-      option: { value: d, disabled: l, hidden: p, label: m, title: C, groupRef: O },
-      selected: F,
-      onChange: H,
-      render: U,
-      highlightHovered: B,
-      onMouseEnter: ae,
-      multiSelect: b,
-      isPartiallyChecked: q = !1,
-      depth: j = 0,
-      hasChildren: oe = !1
-    } = n, le = (G) => {
-      (G.target instanceof HTMLDivElement || G.target instanceof HTMLInputElement) && (H == null || H(d));
-    };
-    return /* @__PURE__ */ R(
-      "div",
-      {
-        className: He("dropdown-option", {
-          selected: F,
-          disabled: l,
-          hidden: p,
-          hover: B,
-          "multi-select": b,
-          "has-children": oe,
-          [`depth-${j}`]: j > 0
-        }),
-        title: C,
-        onClick: le,
-        ref: t,
-        onMouseEnter: ae,
-        children: [
-          b && /* @__PURE__ */ u(Ir, { value: !!F, partiallyChecked: q }),
-          /* @__PURE__ */ u(
-            "div",
-            {
-              className: He("single-option", {
-                "sub-option": !!O
-              }),
-              children: U ? U(n) : m
-            }
-          )
-        ]
-      }
-    );
-  }
-), Rr = [
-  _.ENTER_KEY_CODE,
-  _.SPACE_KEY_CODE,
-  _.ARROW_DOWN_KEY_CODE
-], Yr = [_.ESCAPE_KEY_CODE, _.TAB_KEY_CODE];
-var S = /* @__PURE__ */ ((n) => (n.ON_KEY_DOWN = "onKeyDown", n.ON_CLICK = "onClick", n))(S || {});
-const Pr = 240, Vr = "data-dropdown-portal-menu", Sr = 10, Hr = (n, t) => {
-  const d = Array.isArray(t) ? t : [t];
-  return n.findIndex(({ value: l }) => d.includes(l));
-}, Wr = (n, t) => (n % t + t) % t, me = (n, t = 0, d = 1) => {
-  var p;
-  if (n.length === 0)
-    return 0;
-  if (!((p = n[t]) != null && p.disabled))
-    return t;
-  const l = n.length;
-  return me(
-    n,
-    Wr(t + d, l),
-    d
-  );
-}, Mr = (n, t) => me(n, t), $r = (n, t) => me(n, t, -1), $e = (n, t = 0, d) => !n || n.length === 0 ? [] : n.reduce((l, p) => {
-  var m;
-  return p && (l.push({ option: p, depth: t, parent: d }), (m = p.children) != null && m.length && l.push(...$e(p.children, t + 1, p))), l;
-}, []), ze = (n) => !n || n.length === 0 ? [] : n.reduce((t, d) => {
-  var l;
-  return d && ((l = d.children) != null && l.length ? t.push(...ze(d.children)) : t.push(d)), t;
-}, []), Fe = (n) => {
-  var t;
-  return n ? (t = n.children) != null && t.length ? n.children.reduce((d, l) => (l && d.push(...Fe(l)), d), []) : [n.value] : [];
-}, zr = "_container_1lti6_1", Fr = "_icon_1lti6_7", Ur = "_arrow_1lti6_15", Br = "_dropdown_1lti6_33", qr = "_disabled_1lti6_53", jr = "_value_1lti6_60", Gr = "_error_1lti6_63", Xr = "_touched_1lti6_63", Jr = "_opened_1lti6_67", Qr = "_placeholder_1lti6_101", Zr = "_ghost_1lti6_184", et = "_divider_1lti6_202", rt = {
-  container: zr,
-  icon: Fr,
-  arrow: Ur,
-  "clear-button": "_clear-button_1lti6_23",
-  dropdown: Br,
-  "multi-select-with-tags": "_multi-select-with-tags_1lti6_47",
-  "transparent-background": "_transparent-background_1lti6_50",
-  disabled: qr,
-  value: jr,
-  error: Gr,
-  touched: Xr,
-  opened: Jr,
-  placeholder: Qr,
-  "mobile-disabled": "_mobile-disabled_1lti6_105",
-  "value-wrapper": "_value-wrapper_1lti6_110",
-  "tags-wrapper": "_tags-wrapper_1lti6_116",
-  "with-search": "_with-search_1lti6_121",
-  "search-input": "_search-input_1lti6_128",
-  "select-list": "_select-list_1lti6_146",
-  "limited-width": "_limited-width_1lti6_163",
-  "options-container": "_options-container_1lti6_167",
-  "empty-list-message": "_empty-list-message_1lti6_172",
-  ghost: Zr,
-  divider: et
-}, h = Me.bind(rt), wt = ({
-  multiSelect: n = !1,
-  value: t = n ? [] : "",
-  options: d = [],
-  disabled: l = !1,
-  error: p,
-  onChange: m,
-  onFocus: C,
-  onBlur: O,
-  mobileDisabled: F,
-  title: H,
-  touched: U = !1,
-  icon: B,
-  variant: ae,
-  placeholder: b = "",
-  label: q = "",
-  renderOption: j,
-  transparentBackground: oe = !1,
-  className: le,
-  toggleButtonClassName: G,
-  selectListClassName: Ue,
-  isListWidthLimited: Be = !1,
-  optionAll: ie = { value: "all", label: "All" },
-  isOptionAllVisible: ge = !1,
-  onSelectAll: qe = () => {
-  },
-  formatDisplayedValue: we,
-  notScrollable: W = !1,
-  footer: X,
-  includeGroupValue: ye = !1,
-  clearable: je = !1,
-  onClear: Ee = () => {
-  },
-  clearButtonAriaLabel: Ge = "Clear selection",
-  menuPortalRoot: g,
-  isMultiSelectWithTags: v = !1,
-  noMatchesMessage: Xe = "No matches found"
-}) => {
-  const [i, J] = ne(!1), [I, Ce] = ne(""), Oe = K(null), ve = K(null), M = K(null), ce = K(0), de = K(null), ue = K(null), fe = K(""), [Je, Ae] = ne(!1), [Qe, Q] = ne(null), L = K(null), $ = E(() => $e(d), [d]), T = E(() => {
-    if (!v || !I.trim())
-      return $;
-    const e = I.toLowerCase();
-    return $.filter(
-      ({ option: r }) => r.label.toLowerCase().includes(e)
-    );
-  }, [$, I, v]), w = E(
-    () => T.map(({ option: e }) => e),
-    [T]
-  ), De = E(
-    () => $.map(({ option: e }) => e),
-    [$]
-  ), Z = E(() => T.filter(({ option: e }) => {
-    var r;
-    return (r = e.children) == null ? void 0 : r.length;
-  }).map(({ option: e }) => e), [T]), Ne = E(() => ze(d), [d]), A = E(
-    () => Ne.map(({ value: e }) => e),
-    [Ne]
-  ), ee = E(() => {
-    const e = /* @__PURE__ */ new Map();
-    return Z.forEach((r) => {
-      e.set(r.value, Fe(r));
-    }), e;
-  }, [Z]), z = N(
-    (e) => (Z.forEach((r) => {
-      const s = ee.get(r.value) ?? [], o = s.length > 0 && s.every((c) => e.has(c));
-      ye && o ? e.add(r.value) : e.delete(r.value);
-    }), e),
-    [Z, ye, ee]
-  ), k = E(() => !n || !Array.isArray(t) ? /* @__PURE__ */ new Set() : z(new Set(t)), [n, t, z]), be = n ? Array.isArray(t) && t.length > 0 : t || t === !1 || t === 0, Ze = je && be && !l, er = N((e) => {
-    ce.current = e.scrollTop;
-  }, []);
-  Se(() => {
-    i && !W && M.current && !(n && L.current !== null) && M.current.scrollTop(ce.current);
-  }, [i, W, t, n]);
-  const { refs: Y, floatingStyles: Ie } = gr({
-    placement: "bottom-start",
-    middleware: [
-      wr(5),
-      yr({
-        fallbackPlacements: ["bottom-start", "top-start", "bottom", "top"],
-        ...g && {
-          boundary: document.documentElement,
-          rootBoundary: "viewport"
-        }
-      }),
-      g ? Er({
-        apply({ rects: e, elements: r }) {
-          const s = e.reference.width;
-          Object.assign(r.floating.style, {
-            width: `${s}px`,
-            minWidth: `${s}px`,
-            maxWidth: `${s}px`
-          });
-        }
-      }) : null
-    ].filter(Boolean),
-    whileElementsMounted: i ? (e, r, s) => Cr(e, r, s, {
-      animationFrame: !0
-    }) : void 0
-  }), rr = () => {
-    if (!ge)
-      return;
-    const e = Array.isArray(t) ? t : [], r = new Set(e), s = A.some((c) => !r.has(c));
-    A.forEach((c) => {
-      s ? r.add(c) : r.delete(c);
-    });
-    const o = z(r);
-    m(Array.from(o)), qe();
-  }, re = N(() => {
-    i || (J(!0), C == null || C());
-  }, [i, C]), y = N(() => {
-    J(!1), Ce(""), fe.current = "", O == null || O();
-  }, [O]), he = N(() => {
-    if (l)
-      return;
-    m(n ? [] : ""), Ee(), y(), requestAnimationFrame(() => {
-      const r = Y.reference.current;
-      r && r instanceof HTMLElement && r.focus();
-    });
-  }, [l, n, m, Ee, y, Y]), tr = N(
-    (e) => {
-      e.preventDefault(), e.stopPropagation(), he();
-    },
-    [he]
-  ), Ke = N(
-    (e) => {
-      var c, a;
-      if (!i)
-        return;
-      const r = e == null ? void 0 : e.target;
-      if (!r)
-        return;
-      const s = (c = Oe.current) == null ? void 0 : c.contains(r), o = (a = ve.current) == null ? void 0 : a.contains(r);
-      !s && !o && y();
-    },
-    [i, y]
-  );
-  V(() => {
-    if (!i)
-      return;
-    const e = (r) => {
-      Ke(r);
-    };
-    return document.addEventListener("pointerdown", e), () => {
-      document.removeEventListener("pointerdown", e);
-    };
-  }, [i, Ke]);
-  const Le = (e) => {
-    var r;
-    if (!e.disabled) {
-      if (n) {
-        const s = Array.isArray(t) ? t : [], o = new Set(s);
-        if ((r = e.children) != null && r.length) {
-          const a = ee.get(e.value) ?? [], f = a.some((D) => !o.has(D));
-          a.forEach((D) => {
-            f ? o.add(D) : o.delete(D);
-          });
-        } else
-          o.has(e.value) ? o.delete(e.value) : o.add(e.value);
-        const c = z(o);
-        m(Array.from(c));
-      } else
-        m(e.value);
-      J((s) => n || !s);
-    }
-  }, nr = () => w.find(({ value: e }) => e === t), Te = Hr(w, t), {
-    getToggleButtonProps: sr,
-    getLabelProps: ar,
-    getMenuProps: ke,
-    getItemProps: or,
-    setHighlightedIndex: x,
-    highlightedIndex: _e
-  } = pe({
-    items: w,
-    itemToString: (e) => (e != null && e.label ? String(e.label) : b) || "",
-    selectedItem: nr(),
-    isOpen: i,
-    circularNavigation: !0,
-    defaultHighlightedIndex: Te,
-    onHighlightedIndexChange: (e) => {
-      switch (e.type) {
-        case pe.stateChangeTypes.MenuKeyDownArrowUp:
-          return Q(S.ON_KEY_DOWN), x($r(w, e.highlightedIndex)), e;
-        case pe.stateChangeTypes.MenuKeyDownArrowDown:
-          return Q(S.ON_KEY_DOWN), x(Mr(w, e.highlightedIndex)), e;
-        default:
-          return e;
-      }
-    }
-  }), xe = N(
-    (e) => {
-      ve.current = e, Y.setFloating(e);
-    },
-    [Y]
-  ), lr = N(
-    (e = {}) => {
-      const r = ke(e), s = r.ref;
-      return {
-        ...r,
-        ref: (o) => {
-          xe(o), typeof s == "function" ? s(o) : s && (s.current = o);
-        }
-      };
-    },
-    [ke, xe]
-  );
-  V(() => {
-    n && i && L.current !== null && L.current >= 0 && L.current < w.length && (x(L.current), L.current = null, requestAnimationFrame(() => {
-      M.current && !W && M.current.scrollTop(ce.current);
-    }));
-  }, [n, i, t, w.length, x, W]), V(() => {
-    i && v && requestAnimationFrame(() => {
-      var e;
-      (e = ue.current) == null || e.focus();
-    });
-  }, [i, v]), V(() => {
-    v && i && I !== fe.current && (fe.current = I, I && x(0));
-  }, [I, v, i]), Se(() => {
-    if (!i || !g)
-      return;
-    let e = window.scrollY, r = !0;
-    const s = 300, o = () => {
-      if (!r)
-        return;
-      window.scrollY !== e && window.scrollTo(0, e);
-    }, c = (f) => {
-      r && (f.preventDefault(), f.stopImmediatePropagation(), o());
-    };
-    e = window.scrollY, window.addEventListener("scroll", c, { passive: !1, capture: !0 }), requestAnimationFrame(() => {
-      e = window.scrollY, o();
-    });
-    const a = setTimeout(() => {
-      r = !1;
-    }, s);
-    return () => {
-      clearTimeout(a), window.removeEventListener("scroll", c, { capture: !0 });
-    };
-  }, [i, g]), V(() => {
-    if (!i || !g)
-      return;
-    const e = () => {
-      y();
-    };
-    return window.addEventListener("resize", e), () => {
-      window.removeEventListener("resize", e);
-    };
-  }, [i, g, y]);
-  const Re = () => {
-    l || (J((e) => !e), i ? O == null || O() : C == null || C(), Q(S.ON_CLICK));
-  }, te = E(() => {
-    if (n && Array.isArray(t) && A.length > 0 && A.every((r) => k.has(r)))
-      return ie.label;
-    const e = w.reduce((r, s) => ((Array.isArray(t) && t.includes(s.value) || s.value === t) && r.push(s.label), r), []);
-    if (e.length > 0)
-      return e.join(", ");
-    if (!t && t !== !1 && t !== 0 || Array.isArray(t) && !t.length)
-      return b;
-  }, [
-    n,
-    t,
-    A,
-    k,
-    ie.label,
-    w,
-    b
-  ]);
-  V(() => {
-    if (de.current) {
-      const { offsetWidth: e, scrollWidth: r } = de.current;
-      Ae(r > e);
-    } else
-      Ae(!1);
-  }, [te]);
-  const ir = (e) => {
-    const { keyCode: r } = e;
-    Rr.includes(r) && e.target === e.currentTarget && (e.preventDefault(), e.stopPropagation(), !i && (x(Te), re(), Q(S.ON_KEY_DOWN)));
-  }, cr = (e) => {
-    const { keyCode: r } = e;
-    if (r === _.ENTER_KEY_CODE || r === _.SPACE_KEY_CODE) {
-      const s = w[_e];
-      if (!s)
-        return;
-      n && (L.current = _e), Le(s), n || y();
-      return;
-    }
-    Yr.includes(r) && (e.stopPropagation(), y());
-  }, Ye = () => /* @__PURE__ */ R("div", { className: h("options-container"), children: [
-    n && ge && !se(T) && /* @__PURE__ */ R(Ve, { children: [
-      /* @__PURE__ */ u(
-        We,
-        {
-          option: ie,
-          selected: Array.isArray(t) && A.length > 0 && A.every((e) => k.has(e)),
-          onChange: rr,
-          multiSelect: n,
-          isPartiallyChecked: A.some((e) => k.has(e)) && !A.every((e) => k.has(e))
-        }
-      ),
-      /* @__PURE__ */ u("div", { className: h("divider") }),
-      " "
-    ] }),
-    se(T) ? /* @__PURE__ */ u("div", { className: h("empty-list-message"), children: Xe }) : T.map(({ option: e, depth: r }, s) => {
-      var f, D;
-      const o = ee.get(e.value) ?? [e.value], c = n && o.every((P) => k.has(P)), a = n && ((f = e.children) == null ? void 0 : f.length) && o.some((P) => k.has(P)) && !c;
-      return /* @__PURE__ */ u(
-        We,
-        {
-          ...or({
-            item: e,
-            index: s
-          }),
-          multiSelect: n,
-          selected: n ? c : e.value === t,
-          option: { title: e.label, ...e },
-          highlightHovered: _e === s && Qe !== S.ON_CLICK,
-          render: j,
-          onChange: e.disabled ? null : () => Le(e),
-          onMouseEnter: () => x(s),
-          depth: r,
-          hasChildren: !!((D = e.children) != null && D.length),
-          isPartiallyChecked: a
-        },
-        e.value
-      );
-    }),
-    X && /* @__PURE__ */ R(Ve, { children: [
-      /* @__PURE__ */ u("div", { className: h("divider") }),
-      typeof X == "function" ? X(y) : X
-    ] })
-  ] }), dr = () => {
-    const e = De.reduce((a, f) => (Array.isArray(t) && t.includes(f.value) && a.push(f.label), a), []), r = (a) => {
-      const f = De.find(
-        ({ label: _r }) => _r === a
-      );
-      if (!f)
-        return;
-      const D = Array.isArray(t) ? t : [], P = new Set(D);
-      P.delete(f.value);
-      const hr = z(P);
-      m(Array.from(hr));
-    }, s = (a) => {
-      const f = a.target;
-      Ce(f.value), i || (re(), requestAnimationFrame(() => {
-        f.focus();
-      }));
-    }, o = (a) => {
-      if (a.keyCode === _.ESCAPE_KEY_CODE) {
-        a.stopPropagation(), y();
-        return;
-      }
-      a.keyCode === _.ENTER_KEY_CODE || a.keyCode === _.SPACE_KEY_CODE || (a.keyCode === _.ARROW_DOWN_KEY_CODE || a.keyCode === _.ARROW_UP_KEY_CODE) && (a.preventDefault(), re());
-    }, c = /* @__PURE__ */ u(
-      "input",
-      {
-        ref: ue,
-        type: "text",
-        className: h("search-input"),
-        value: I,
-        onChange: s,
-        onKeyDown: o,
-        onClick: (a) => {
-          a.stopPropagation(), re();
-        },
-        placeholder: se(e) ? b : "",
-        autoComplete: "off"
-      }
-    );
-    return se(e) ? /* @__PURE__ */ u("div", { className: h("tags-wrapper", "with-search"), children: c }) : /* @__PURE__ */ R("div", { className: h("tags-wrapper", "with-search"), children: [
-      /* @__PURE__ */ u(
-        br,
-        {
-          tags: e,
-          onRemoveTag: r,
-          isShowAllView: !0,
-          defaultVisibleLines: Sr
-        }
-      ),
-      c
-    ] });
-  }, ur = () => {
-    if (v && n && Array.isArray(t))
-      return dr();
-    const e = we ? we(te) : te, r = be && !!e && Je;
-    return /* @__PURE__ */ u(
-      "span",
-      {
-        ref: de,
-        className: h("value", {
-          placeholder: te === b
-        }),
-        title: r ? e : void 0,
-        children: e
-      }
-    );
-  }, fr = sr({
-    className: h("dropdown", ae, G, {
-      "transparent-background": oe,
-      opened: i,
-      disabled: l,
-      error: p,
-      touched: U,
-      "mobile-disabled": F,
-      "multi-select-with-tags": v
-    }),
-    onClick: Re,
-    onKeyDown: ir,
-    ref: Y.setReference
-  }), { type: tt, ...Pe } = fr;
-  return /* @__PURE__ */ R("div", { ref: Oe, className: h("container", le), title: H, children: [
-    q && /* @__PURE__ */ u(
-      Nr,
-      {
-        ...ar(),
-        onClick: () => !l && Re(),
-        style: { cursor: l ? "default" : "pointer" },
-        children: q
-      }
-    ),
-    /* @__PURE__ */ R(
-      "div",
-      {
-        ...Pe,
-        role: "button",
-        "aria-disabled": l,
-        tabIndex: l ? -1 : Pe.tabIndex ?? 0,
-        children: [
-          B && /* @__PURE__ */ u("span", { className: h("icon"), children: B }),
-          /* @__PURE__ */ u("div", { className: h("value-wrapper"), children: ur() }),
-          Ze && /* @__PURE__ */ u(
-            vr,
-            {
-              className: h("clear-button"),
-              onClick: tr,
-              onKeyDown: (e) => {
-                const { keyCode: r } = e;
-                (r === _.ENTER_KEY_CODE || r === _.SPACE_KEY_CODE) && (e.preventDefault(), e.stopPropagation(), he());
-              },
-              "aria-label": Ge,
-              children: /* @__PURE__ */ u(Ar, {})
-            }
-          ),
-          /* @__PURE__ */ u("span", { className: h("arrow"), "aria-hidden": "true", children: /* @__PURE__ */ u(Dr, {}) })
-        ]
-      }
-    ),
-    i && (() => {
-      var o;
-      const e = (o = Y.reference.current) == null ? void 0 : o.getBoundingClientRect().width, r = g && e ? {
-        ...Ie,
-        width: `${e}px`,
-        minWidth: `${e}px`,
-        maxWidth: `${e}px`
-      } : Ie, s = /* @__PURE__ */ u(
-        "div",
-        {
-          style: r,
-          className: h(
-            "select-list",
-            {
-              opened: i,
-              "limited-width": Be
-            },
-            Ue
-          ),
-          ...g && { [Vr]: "" },
-          ...lr({
-            onKeyDown: cr,
-            ...v && {
-              tabIndex: -1,
-              onFocus: (c) => {
-                var a;
-                c.preventDefault(), (a = ue.current) == null || a.focus();
-              }
-            }
-          }),
-          children: W ? Ye() : /* @__PURE__ */ u(
-            Or,
-            {
-              autoHeight: !0,
-              autoHeightMax: Pr,
-              hideTracksWhenNotNeeded: !0,
-              ref: (c) => {
-                M.current = c;
-              },
-              onScrollFrame: er,
-              children: Ye()
-            }
-          )
-        }
-      );
-      return g ? mr(s, g) : s;
-    })()
-  ] });
-};
-export {
-  wt as D,
-  Vr as a
-};