@reportportal/ui-kit 0.0.1-alpha.59 → 0.0.1-alpha.60

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

@@ -24,7 +24,7 @@ export interface DropdownProps {
     optionAll?: DropdownOptionType;
     isOptionAllVisible?: boolean;
     onSelectAll?: () => void;
-    customDisplayedValue?: string;
+    formatDisplayedValue?: (value: string | undefined) => string;
     notScrollable?: boolean;
     footer?: ReactNode;
 }

package/dist/{datePicker-c93e0835.js → datePicker-5253e237.js}

@@ -4,7 +4,7 @@ import { c as R } from "./bind-06a7ff84.js";
 import { useMemo as P, useRef as B } from "react";
 import { F as D } from "./fieldText-10046ca8.js";
 import { a as E, S as G } from "./calendarArrow-3e1339ea.js";
-import { D as T } from "./dropdown-937ba0eb.js";
+import { D as T } from "./dropdown-d6aea1b9.js";
 import { registerLocale as H } from "react-datepicker";
 const pe = (r, s) => {
   H(r, s);

package/dist/datePicker.js

@@ -1,5 +1,5 @@
-import { D as t } from "./datePicker-c93e0835.js";
-import { r as q } from "./datePicker-c93e0835.js";
+import { D as t } from "./datePicker-5253e237.js";
+import { r as q } from "./datePicker-5253e237.js";
 import "react/jsx-runtime";
 import "react-datepicker/dist/es/index.js";
 import "./bind-06a7ff84.js";
@@ -10,7 +10,7 @@ import "./button-33c88abf.js";
 import "./spinLoader-c4a53718.js";
 import "./maxValueDisplay-9be01a75.js";
 import "./calendarArrow-3e1339ea.js";
-import "./dropdown-937ba0eb.js";
+import "./dropdown-d6aea1b9.js";
 import "@floating-ui/react-dom";
 import "downshift";
 import "rc-scrollbars";

package/dist/dropdown-d6aea1b9.js

@@ -0,0 +1,273 @@
+import { jsxs as f, jsx as d, Fragment as U } from "react/jsx-runtime";
+import { forwardRef as oe, useState as q, useRef as ce } from "react";
+import { c as J } from "./bind-06a7ff84.js";
+import { useFloating as _e, offset as he, flip as fe } from "@floating-ui/react-dom";
+import { useSelect as j } from "downshift";
+import { Scrollbars as ge } from "rc-scrollbars";
+import { u as ue } from "./useOnClickOutside-c332f7d3.js";
+import { K as u } from "./keyCodes-f63c0e11.js";
+import { B as ye } from "./baseIconButton-251479f7.js";
+import { S as pe } from "./dropdown-0260bb66.js";
+import { C as me } from "./checkbox-9a6c7ce1.js";
+const Ce = "_disabled_t3cjj_12", Oe = "_hidden_t3cjj_16", be = "_hover_t3cjj_22", Ne = {
+  "dropdown-option": "_dropdown-option_t3cjj_1",
+  disabled: Ce,
+  hidden: Oe,
+  hover: be,
+  "single-option": "_single-option_t3cjj_35",
+  "sub-option": "_sub-option_t3cjj_42"
+}, z = J.bind(Ne), G = oe(
+  (r, t) => {
+    const {
+      option: { value: n, disabled: l, hidden: w, label: y, title: c, groupRef: a },
+      selected: v,
+      onChange: p,
+      render: C,
+      highlightHovered: O,
+      onMouseEnter: K,
+      multiSelect: m,
+      isPartiallyChecked: A = !1
+    } = r, x = (b) => {
+      (b.target instanceof HTMLDivElement || b.target instanceof HTMLInputElement) && (p == null || p(n));
+    };
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        className: z("dropdown-option", {
+          disabled: l,
+          hidden: w,
+          hover: O
+        }),
+        title: c,
+        onClick: x,
+        ref: t,
+        onMouseEnter: K,
+        children: [
+          m && /* @__PURE__ */ d(me, { value: !!v, partiallyChecked: A }),
+          /* @__PURE__ */ d("div", { className: z("single-option", { "sub-option": !!a }), children: C ? C(r) : y })
+        ]
+      }
+    );
+  }
+), De = [
+  u.ENTER_KEY_CODE,
+  u.SPACE_KEY_CODE,
+  u.ARROW_DOWN_KEY_CODE
+], Ee = [u.ESCAPE_KEY_CODE, u.TAB_KEY_CODE];
+var g = /* @__PURE__ */ ((r) => (r.ON_KEY_DOWN = "onKeyDown", r.ON_CLICK = "onClick", r))(g || {});
+const we = (r, t) => {
+  const n = Array.isArray(t) ? t : [t];
+  return r.findIndex(({ value: l }) => n.includes(l));
+}, ve = (r, t) => (r % t + t) % t, P = (r, t = 0, n = 1) => {
+  if (!r[t].disabled)
+    return t;
+  const l = r.length;
+  return P(
+    r,
+    ve(t + n, l),
+    n
+  );
+}, Ke = (r, t) => P(r, t), Ae = (r, t) => P(r, t, -1), xe = "_container_1yr7u_1", Ie = "_icon_1yr7u_7", ke = "_arrow_1yr7u_13", je = "_dropdown_1yr7u_19", Pe = "_disabled_1yr7u_36", Ye = "_value_1yr7u_43", Re = "_error_1yr7u_46", Te = "_touched_1yr7u_46", He = "_opened_1yr7u_50", Me = "_placeholder_1yr7u_83", We = "_ghost_1yr7u_118", Le = "_divider_1yr7u_132", Se = {
+  container: xe,
+  icon: Ie,
+  arrow: ke,
+  dropdown: je,
+  "transparent-background": "_transparent-background_1yr7u_33",
+  disabled: Pe,
+  value: Ye,
+  error: Re,
+  touched: Te,
+  opened: He,
+  placeholder: Me,
+  "mobile-disabled": "_mobile-disabled_1yr7u_87",
+  "select-list": "_select-list_1yr7u_92",
+  "limited-width": "_limited-width_1yr7u_109",
+  "options-container": "_options-container_1yr7u_113",
+  ghost: We,
+  divider: Le
+}, o = J.bind(Se), tt = ({
+  multiSelect: r = !1,
+  value: t = r ? [] : "",
+  options: n = [],
+  disabled: l = !1,
+  error: w,
+  onChange: y,
+  onFocus: c,
+  onBlur: a,
+  mobileDisabled: v,
+  title: p,
+  touched: C = !1,
+  icon: O,
+  variant: K,
+  placeholder: m = "",
+  renderOption: A,
+  transparentBackground: x = !1,
+  className: b,
+  toggleButtonClassName: Q,
+  isListWidthLimited: X = !1,
+  optionAll: Y = { value: "all", label: "All" },
+  isOptionAllVisible: R = !1,
+  onSelectAll: Z = () => {
+  },
+  formatDisplayedValue: T,
+  notScrollable: F = !1,
+  footer: H
+}) => {
+  const [_, h] = q(!1), M = ce(null), [B, N] = q(null), I = r && Array.isArray(t) ? n.filter((e) => t.includes(e.value)) : null, { refs: W, floatingStyles: ee } = _e({
+    middleware: [
+      he(5),
+      fe({
+        fallbackPlacements: ["bottom", "top"]
+      })
+    ]
+  }), te = () => {
+    if (R && Array.isArray(t)) {
+      const e = n.map((s) => s.value);
+      y(t.length === n.length ? [] : e), Z();
+    }
+  };
+  ue(M, () => {
+    _ && (h(!1), a == null || a());
+  });
+  const L = (e) => {
+    if (!e.disabled) {
+      if (r) {
+        const s = Array.isArray(t) ? [...t] : [], i = s.indexOf(e.value);
+        i === -1 ? s.push(e.value) : s.splice(i, 1), y(s);
+      } else
+        y(e.value);
+      h((s) => r || !s);
+    }
+  }, re = () => n.find(({ value: e }) => e === t), S = we(n, t), {
+    getToggleButtonProps: ne,
+    getMenuProps: se,
+    getItemProps: ae,
+    setHighlightedIndex: D,
+    highlightedIndex: V,
+    selectedItem: E
+  } = j({
+    items: n,
+    itemToString: (e) => (e != null && e.label ? String(e.label) : m) || "",
+    selectedItem: re(),
+    isOpen: _,
+    circularNavigation: !0,
+    defaultHighlightedIndex: S,
+    onHighlightedIndexChange: (e) => {
+      switch (e.type) {
+        case j.stateChangeTypes.MenuKeyDownArrowUp:
+          return N(g.ON_KEY_DOWN), D(Ae(n, e.highlightedIndex)), e;
+        case j.stateChangeTypes.MenuKeyDownArrowDown:
+          return N(g.ON_KEY_DOWN), D(Ke(n, e.highlightedIndex)), e;
+        default:
+          return e;
+      }
+    }
+  }), de = () => {
+    l || (h((e) => !e), _ ? a == null || a() : c == null || c(), N(g.ON_CLICK));
+  }, k = (() => {
+    if (r && Array.isArray(t) && n.length === t.length)
+      return Y.label;
+    const e = n.reduce((s, i) => ((Array.isArray(t) && t.includes(i.value) || i.value === t) && s.push(i.label), s), []);
+    if (e.length > 0)
+      return e.join(", ");
+    if (!t && t !== !1 && t !== 0 || Array.isArray(t) && !t.length)
+      return m;
+  })(), ie = (e) => {
+    const { keyCode: s } = e;
+    De.includes(s) && !_ && (e.preventDefault(), D(S), h(!0), c == null || c(), N(g.ON_KEY_DOWN));
+  }, le = (e) => {
+    const { keyCode: s } = e;
+    if (s === u.ENTER_KEY_CODE) {
+      const i = n[V];
+      L(i), r || (h(!1), a == null || a());
+      return;
+    }
+    Ee.includes(s) && (e.stopPropagation(), h(!1), a == null || a());
+  }, $ = () => /* @__PURE__ */ f("div", { className: o("options-container"), children: [
+    r && R && Array.isArray(t) && /* @__PURE__ */ f(U, { children: [
+      /* @__PURE__ */ d(
+        G,
+        {
+          option: Y,
+          selected: t.length === n.length,
+          onChange: te,
+          multiSelect: r,
+          isPartiallyChecked: !!t.length
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: o("divider") }),
+      " "
+    ] }),
+    n.map((e, s) => /* @__PURE__ */ d(
+      G,
+      {
+        ...ae({
+          item: e,
+          index: s
+        }),
+        multiSelect: r,
+        selected: r ? I == null ? void 0 : I.some((i) => i.value === e.value) : e.value === ((E == null ? void 0 : E.value) ?? E),
+        option: { title: e.label, ...e },
+        highlightHovered: V === s && B !== g.ON_CLICK,
+        render: A,
+        onChange: e.disabled ? null : () => L(e),
+        onMouseEnter: () => D(s)
+      },
+      e.value
+    )),
+    H && /* @__PURE__ */ f(U, { children: [
+      /* @__PURE__ */ d("div", { className: o("divider") }),
+      H
+    ] })
+  ] });
+  return /* @__PURE__ */ f("div", { ref: M, className: o("container", b), title: p, children: [
+    /* @__PURE__ */ f(
+      "button",
+      {
+        disabled: l,
+        ...ne({
+          className: o("dropdown", K, Q, {
+            "transparent-background": x,
+            opened: _,
+            disabled: l,
+            error: w,
+            touched: C,
+            "mobile-disabled": v
+          }),
+          onClick: de,
+          onKeyDown: ie,
+          ref: W.setReference
+        }),
+        type: "button",
+        children: [
+          O && /* @__PURE__ */ d("span", { className: o("icon"), children: O }),
+          /* @__PURE__ */ d(
+            "span",
+            {
+              className: o("value", {
+                placeholder: k === m
+              }),
+              children: T ? T(k) : k
+            }
+          ),
+          /* @__PURE__ */ d(ye, { className: o("arrow"), tabIndex: -1, children: /* @__PURE__ */ d(pe, {}) })
+        ]
+      }
+    ),
+    _ && /* @__PURE__ */ d(
+      "div",
+      {
+        style: ee,
+        className: o("select-list", { opened: _, "limited-width": X }),
+        ...se({
+          onKeyDown: le,
+          ref: W.setFloating
+        }),
+        children: F ? $() : /* @__PURE__ */ d(ge, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: $() })
+      }
+    )
+  ] });
+};
+export {
+  tt as D
+};

package/dist/dropdown.js

@@ -1,4 +1,4 @@
-import { D as r } from "./dropdown-937ba0eb.js";
+import { D as r } from "./dropdown-d6aea1b9.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";

package/dist/index.js

@@ -5,7 +5,7 @@ import { S as B } from "./systemMessage-1ced6079.js";
 import { F as P } from "./fieldText-10046ca8.js";
 import { T as g } from "./themeProvider-46c2be7b.js";
 import { Modal as v } from "./modal.js";
-import { D as M } from "./dropdown-937ba0eb.js";
+import { D as M } from "./dropdown-d6aea1b9.js";
 import { T as A } from "./toggle-1a3aacb5.js";
 import { F as L } from "./fieldNumber-d81e551e.js";
 import { B as O } from "./bubblesLoader-a7e709d4.js";
@@ -16,7 +16,7 @@ import { Tooltip as J } from "./tooltip.js";
 import { Popover as Q } from "./popover.js";
 import { P as W } from "./pagination-2076b7b6.js";
 import { T as Y } from "./table-32fc8c70.js";
-import { D as _ } from "./datePicker-c93e0835.js";
+import { D as _ } from "./datePicker-5253e237.js";
 import "react-datepicker";
 import { SystemAlert as oo } from "./systemAlert.js";
 import { S as eo, a as to } from "./arrowUp-4a5caee7.js";

package/package.json

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

package/dist/dropdown-937ba0eb.js

@@ -1,265 +0,0 @@
-import { jsxs as f, jsx as d, Fragment as V } from "react/jsx-runtime";
-import { forwardRef as oe, useState as $, useRef as ce } from "react";
-import { c as z } from "./bind-06a7ff84.js";
-import { useFloating as _e, offset as he, flip as fe } from "@floating-ui/react-dom";
-import { useSelect as k } from "downshift";
-import { Scrollbars as ye } from "rc-scrollbars";
-import { u as ge } from "./useOnClickOutside-c332f7d3.js";
-import { K as g } from "./keyCodes-f63c0e11.js";
-import { B as ue } from "./baseIconButton-251479f7.js";
-import { S as pe } from "./dropdown-0260bb66.js";
-import { C as me } from "./checkbox-9a6c7ce1.js";
-const Ce = "_disabled_t3cjj_12", Oe = "_hidden_t3cjj_16", be = "_hover_t3cjj_22", Ne = {
-  "dropdown-option": "_dropdown-option_t3cjj_1",
-  disabled: Ce,
-  hidden: Oe,
-  hover: be,
-  "single-option": "_single-option_t3cjj_35",
-  "sub-option": "_sub-option_t3cjj_42"
-}, U = z.bind(Ne), q = oe(
-  (t, e) => {
-    const {
-      option: { value: n, disabled: l, hidden: w, label: u, title: c, groupRef: a },
-      selected: A,
-      onChange: p,
-      render: m,
-      highlightHovered: C,
-      onMouseEnter: K,
-      multiSelect: O,
-      isPartiallyChecked: v = !1
-    } = t, x = (b) => {
-      (b.target instanceof HTMLDivElement || b.target instanceof HTMLInputElement) && (p == null || p(n));
-    };
-    return /* @__PURE__ */ f(
-      "div",
-      {
-        className: U("dropdown-option", {
-          disabled: l,
-          hidden: w,
-          hover: C
-        }),
-        title: c,
-        onClick: x,
-        ref: e,
-        onMouseEnter: K,
-        children: [
-          O && /* @__PURE__ */ d(me, { value: !!A, partiallyChecked: v }),
-          /* @__PURE__ */ d("div", { className: U("single-option", { "sub-option": !!a }), children: m ? m(t) : u })
-        ]
-      }
-    );
-  }
-), De = [
-  g.ENTER_KEY_CODE,
-  g.SPACE_KEY_CODE,
-  g.ARROW_DOWN_KEY_CODE
-], Ee = [g.ESCAPE_KEY_CODE, g.TAB_KEY_CODE];
-var y = /* @__PURE__ */ ((t) => (t.ON_KEY_DOWN = "onKeyDown", t.ON_CLICK = "onClick", t))(y || {});
-const we = (t, e) => {
-  const n = Array.isArray(e) ? e : [e];
-  return t.findIndex(({ value: l }) => n.includes(l));
-}, Ae = (t, e) => (t % e + e) % e, j = (t, e = 0, n = 1) => {
-  if (!t[e].disabled)
-    return e;
-  const l = t.length;
-  return j(
-    t,
-    Ae(e + n, l),
-    n
-  );
-}, Ke = (t, e) => j(t, e), ve = (t, e) => j(t, e, -1), xe = "_container_1yr7u_1", Ie = "_icon_1yr7u_7", ke = "_arrow_1yr7u_13", je = "_dropdown_1yr7u_19", Pe = "_disabled_1yr7u_36", Ye = "_value_1yr7u_43", Re = "_error_1yr7u_46", Te = "_touched_1yr7u_46", He = "_opened_1yr7u_50", Me = "_placeholder_1yr7u_83", We = "_ghost_1yr7u_118", Le = "_divider_1yr7u_132", Se = {
-  container: xe,
-  icon: Ie,
-  arrow: ke,
-  dropdown: je,
-  "transparent-background": "_transparent-background_1yr7u_33",
-  disabled: Pe,
-  value: Ye,
-  error: Re,
-  touched: Te,
-  opened: He,
-  placeholder: Me,
-  "mobile-disabled": "_mobile-disabled_1yr7u_87",
-  "select-list": "_select-list_1yr7u_92",
-  "limited-width": "_limited-width_1yr7u_109",
-  "options-container": "_options-container_1yr7u_113",
-  ghost: We,
-  divider: Le
-}, o = z.bind(Se), er = ({
-  multiSelect: t = !1,
-  value: e = t ? [] : "",
-  options: n = [],
-  disabled: l = !1,
-  error: w,
-  onChange: u,
-  onFocus: c,
-  onBlur: a,
-  mobileDisabled: A,
-  title: p,
-  touched: m = !1,
-  icon: C,
-  variant: K,
-  placeholder: O = "",
-  renderOption: v,
-  transparentBackground: x = !1,
-  className: b,
-  toggleButtonClassName: G,
-  isListWidthLimited: J = !1,
-  optionAll: P = { value: "all", label: "All" },
-  isOptionAllVisible: Y = !1,
-  onSelectAll: Q = () => {
-  },
-  customDisplayedValue: X,
-  notScrollable: Z = !1,
-  footer: R
-}) => {
-  const [_, h] = $(!1), T = ce(null), [F, N] = $(null), I = t && Array.isArray(e) ? n.filter((r) => e.includes(r.value)) : null, { refs: H, floatingStyles: B } = _e({
-    middleware: [
-      he(5),
-      fe({
-        fallbackPlacements: ["bottom", "top"]
-      })
-    ]
-  }), ee = () => {
-    if (Y && Array.isArray(e)) {
-      const r = n.map((s) => s.value);
-      u(e.length === n.length ? [] : r), Q();
-    }
-  };
-  ge(T, () => {
-    _ && (h(!1), a == null || a());
-  });
-  const M = (r) => {
-    if (!r.disabled) {
-      if (t) {
-        const s = Array.isArray(e) ? [...e] : [], i = s.indexOf(r.value);
-        i === -1 ? s.push(r.value) : s.splice(i, 1), u(s);
-      } else
-        u(r.value);
-      h((s) => t || !s);
-    }
-  }, re = () => n.find(({ value: r }) => r === e), W = we(n, e), {
-    getToggleButtonProps: te,
-    getMenuProps: ne,
-    getItemProps: se,
-    setHighlightedIndex: D,
-    highlightedIndex: L,
-    selectedItem: E
-  } = k({
-    items: n,
-    itemToString: (r) => (r != null && r.label ? String(r.label) : O) || "",
-    selectedItem: re(),
-    isOpen: _,
-    circularNavigation: !0,
-    defaultHighlightedIndex: W,
-    onHighlightedIndexChange: (r) => {
-      switch (r.type) {
-        case k.stateChangeTypes.MenuKeyDownArrowUp:
-          return N(y.ON_KEY_DOWN), D(ve(n, r.highlightedIndex)), r;
-        case k.stateChangeTypes.MenuKeyDownArrowDown:
-          return N(y.ON_KEY_DOWN), D(Ke(n, r.highlightedIndex)), r;
-        default:
-          return r;
-      }
-    }
-  }), ae = () => {
-    l || (h((r) => !r), _ ? a == null || a() : c == null || c(), N(y.ON_CLICK));
-  }, de = () => !e && e !== !1 && e !== 0 || Array.isArray(e) && !e.length ? O : t && Array.isArray(e) && n.length === e.length ? P.label : n.reduce((s, i) => ((Array.isArray(e) && e.includes(i.value) || i.value === e) && s.push(i.label), s), []).join(", "), ie = (r) => {
-    const { keyCode: s } = r;
-    De.includes(s) && !_ && (r.preventDefault(), D(W), h(!0), c == null || c(), N(y.ON_KEY_DOWN));
-  }, le = (r) => {
-    const { keyCode: s } = r;
-    if (s === g.ENTER_KEY_CODE) {
-      const i = n[L];
-      M(i), t || (h(!1), a == null || a());
-      return;
-    }
-    Ee.includes(s) && (r.stopPropagation(), h(!1), a == null || a());
-  }, S = () => /* @__PURE__ */ f("div", { className: o("options-container"), children: [
-    t && Y && Array.isArray(e) && /* @__PURE__ */ f(V, { children: [
-      /* @__PURE__ */ d(
-        q,
-        {
-          option: P,
-          selected: e.length === n.length,
-          onChange: ee,
-          multiSelect: t,
-          isPartiallyChecked: !!e.length
-        }
-      ),
-      /* @__PURE__ */ d("div", { className: o("divider") }),
-      " "
-    ] }),
-    n.map((r, s) => /* @__PURE__ */ d(
-      q,
-      {
-        ...se({
-          item: r,
-          index: s
-        }),
-        multiSelect: t,
-        selected: t ? I == null ? void 0 : I.some((i) => i.value === r.value) : r.value === ((E == null ? void 0 : E.value) ?? E),
-        option: { title: r.label, ...r },
-        highlightHovered: L === s && F !== y.ON_CLICK,
-        render: v,
-        onChange: r.disabled ? null : () => M(r),
-        onMouseEnter: () => D(s)
-      },
-      r.value
-    )),
-    R && /* @__PURE__ */ f(V, { children: [
-      /* @__PURE__ */ d("div", { className: o("divider") }),
-      R
-    ] })
-  ] });
-  return /* @__PURE__ */ f("div", { ref: T, className: o("container", b), title: p, children: [
-    /* @__PURE__ */ f(
-      "button",
-      {
-        disabled: l,
-        ...te({
-          className: o("dropdown", K, G, {
-            "transparent-background": x,
-            opened: _,
-            disabled: l,
-            error: w,
-            touched: m,
-            "mobile-disabled": A
-          }),
-          onClick: ae,
-          onKeyDown: ie,
-          ref: H.setReference
-        }),
-        type: "button",
-        children: [
-          C && /* @__PURE__ */ d("span", { className: o("icon"), children: C }),
-          /* @__PURE__ */ d(
-            "span",
-            {
-              className: o("value", {
-                placeholder: !e || Array.isArray(e) && !e.length
-              }),
-              children: X || de()
-            }
-          ),
-          /* @__PURE__ */ d(ue, { className: o("arrow"), tabIndex: -1, children: /* @__PURE__ */ d(pe, {}) })
-        ]
-      }
-    ),
-    _ && /* @__PURE__ */ d(
-      "div",
-      {
-        style: B,
-        className: o("select-list", { opened: _, "limited-width": J }),
-        ...ne({
-          onKeyDown: le,
-          ref: H.setFloating
-        }),
-        children: Z ? S() : /* @__PURE__ */ d(ye, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: S() })
-      }
-    )
-  ] });
-};
-export {
-  er as D
-};