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

package/dist/components/table/types.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+
+export interface Column {
+    key: string;
+    header: string;
+}
+export interface PrimaryColumn extends Column {
+    primary: boolean;
+}
+export interface FixedColumn extends Column {
+    width: string | number;
+    align?: 'left' | 'center' | 'right';
+}
+export interface RowConfigs {
+    size?: 'small' | 'medium' | 'large';
+}
+export interface DetailedCellData {
+    content: string | number;
+    component: ReactNode;
+}
+export interface MetaData {
+    [key: string]: any;
+}
+export interface RowData {
+    id: string | number;
+    [key: string]: DetailedCellData | RowConfigs | string | number | any;
+    rowConfigs?: RowConfigs;
+    metaData?: MetaData;
+}
+export declare enum SortDirection {
+    ASC = "asc",
+    DESC = "desc"
+}
+export interface SortConfig {
+    key: string;
+    direction: SortDirection;
+}
+export interface TableComponentProps {
+    data: RowData[];
+    primaryColumn: Column;
+    fixedColumns: FixedColumn[];
+    renderRowActions?: (metaData?: MetaData) => ReactNode;
+    selectable?: boolean;
+    className?: string;
+    headerClassName?: string;
+    rowClassName?: string;
+    selectedRowIds?: (string | number)[];
+    sortingDirection?: SortDirection;
+    sortingColumn?: Column;
+    sortableColumns?: string[];
+    onChangeSorting?: (sortConfig?: SortConfig) => void;
+    onToggleRowSelection?: (id: string | number) => void;
+    onToggleAllRowsSelection?: () => void;
+}

package/dist/components/table/utils.d.ts

@@ -0,0 +1,4 @@
+import { Column, RowData, SortConfig } from './types';
+
+export declare const sortTableData: (tableData: RowData[], sortConfig?: SortConfig) => RowData[];
+export declare const getColumnsKeys: (columns: Column[]) => string[];

package/dist/components/themeProvider/index.d.ts

@@ -1,3 +1,4 @@
 import { ThemeProvider } from './themeProvider';
+
 export { ThemeProvider };
 export default ThemeProvider;

package/dist/components/themeProvider/themeProvider.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+
 type ThemeKey = 'light' | 'dark' | string;
 interface ITheme {
     [themeKey: ThemeKey]: string;
@@ -7,6 +8,7 @@ interface IThemeProviderProps {
     children?: ReactNode;
     theme?: ThemeKey;
     customThemes?: ITheme;
+    className?: string;
 }
-export declare function ThemeProvider({ children, theme, customThemes, }: IThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, theme, customThemes, className, }: IThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/toggle/index.d.ts

@@ -1,3 +1,4 @@
 import { Toggle } from './toggle';
+
 export { Toggle };
 export default Toggle;

package/dist/components/toggle/toggle.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, FC, HTMLAttributes, ReactNode } from 'react';
+
 interface ToggleProps extends HTMLAttributes<HTMLInputElement> {
     value: boolean;
     title?: string;

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './tooltip';

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import { Placement } from '@floating-ui/react';
+
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    wrapperClassName?: string;
+    tooltipClassName?: string;
+    contentClassName?: string;
+    dynamicWidth?: boolean;
+    width?: number;
+    minWidth?: number;
+    placement?: Placement;
+    dataAutomationId?: string;
+    arrowColor?: string;
+    safeZone?: number;
+    zIndex?: number;
+    mainAxis?: boolean;
+    portalRoot?: Element;
+    isFloating?: boolean;
+}
+export declare const Tooltip: FC<TooltipProps>;
+export {};

package/dist/datePicker-5253e237.js

@@ -0,0 +1,201 @@
+import { jsxs as S, Fragment as U, jsx as t } from "react/jsx-runtime";
+import $ from "react-datepicker/dist/es/index.js";
+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-d6aea1b9.js";
+import { registerLocale as H } from "react-datepicker";
+const pe = (r, s) => {
+  H(r, s);
+}, V = (r, s = 20) => {
+  const l = r + s;
+  return new Array(l - r).fill(void 0).map((g, o) => r - o);
+}, O = "_header_a3cjx_1", W = "_disabled_a3cjx_25", q = "_dropdown_a3cjx_8", z = {
+  header: O,
+  "dropdowns-wrapper": "_dropdowns-wrapper_a3cjx_8",
+  "button-prev": "_button-prev_a3cjx_13",
+  "button-next": "_button-next_a3cjx_14",
+  disabled: W,
+  dropdown: q,
+  "month-dropdown": "_month-dropdown_a3cjx_44",
+  "toggle-button": "_toggle-button_a3cjx_47"
+}, a = R.bind(z), J = ({
+  date: r = /* @__PURE__ */ new Date(),
+  changeYear: s = () => {
+  },
+  changeMonth: l = () => {
+  },
+  decreaseMonth: g = () => {
+  },
+  increaseMonth: o = () => {
+  },
+  prevMonthButtonDisabled: n = !1,
+  nextMonthButtonDisabled: h = !1,
+  headerNodes: b = null,
+  customClassName: w = "",
+  yearsOptions: i = [],
+  locale: x
+}) => {
+  const p = r.getFullYear(), C = r.getMonth(), f = P(() => {
+    const e = Array(12).keys(), c = new Intl.DateTimeFormat(x, {
+      month: "long"
+    }), d = (m) => c.format(new Date(p, m));
+    return Array.from(e, d).reduce((m, j, A) => m.concat({
+      value: A,
+      label: j
+    }), []);
+  }, []), N = P(() => (i.length > 0 ? i : V(p)).reduce(
+    (c, d) => c.concat({ value: d, label: `${d}` }),
+    []
+  ), [i]), v = (e) => {
+    l(e);
+  }, y = (e) => {
+    s(e);
+  };
+  return /* @__PURE__ */ S(U, { children: [
+    b && /* @__PURE__ */ t("div", { className: a(w), children: b }),
+    /* @__PURE__ */ S("div", { className: a("header"), children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          "aria-label": "Previous Months",
+          disabled: n,
+          onClick: (e) => {
+            e.stopPropagation(), g();
+          },
+          className: a("button-prev", { disabled: n }),
+          children: /* @__PURE__ */ t(E, {})
+        }
+      ),
+      /* @__PURE__ */ S("div", { className: a("dropdowns-wrapper"), children: [
+        /* @__PURE__ */ t(
+          T,
+          {
+            options: f,
+            value: C,
+            onChange: v,
+            transparentBackground: !0,
+            className: a("dropdown", "month-dropdown"),
+            toggleButtonClassName: a("toggle-button")
+          }
+        ),
+        /* @__PURE__ */ t(
+          T,
+          {
+            options: N,
+            value: p,
+            onChange: y,
+            transparentBackground: !0,
+            className: a("dropdown"),
+            toggleButtonClassName: a("toggle-button")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          "aria-label": "Next Months",
+          disabled: h,
+          onClick: (e) => {
+            e.stopPropagation(), o();
+          },
+          className: a("button-next", { disabled: h }),
+          children: /* @__PURE__ */ t(E, {})
+        }
+      )
+    ] })
+  ] });
+}, K = "_calendar_1jr94_5", Q = "_date_1jr94_90", X = "_disabled_1jr94_202", Z = "_popper_1jr94_210", ee = "_input_1jr94_214", oe = {
+  calendar: K,
+  "current-date": "_current-date_1jr94_89",
+  date: Q,
+  "selected-range": "_selected-range_1jr94_119",
+  "end-date": "_end-date_1jr94_119",
+  disabled: X,
+  popper: Z,
+  input: ee
+}, _ = R.bind(oe), ne = "en", L = "MM-dd-yyyy", me = ({
+  onChange: r = () => {
+  },
+  disabled: s = !1,
+  onBlur: l = () => {
+  },
+  onFocus: g = () => {
+  },
+  endDate: o = void 0,
+  startDate: n = void 0,
+  headerNodes: h = null,
+  customClassName: b = "",
+  customTimeInput: w = void 0,
+  shouldCloseOnSelect: i = !0,
+  popperClassName: x = "",
+  calendarClassName: p = "",
+  fixedHeight: C = !1,
+  language: f = ne,
+  yearsOptions: N = [],
+  placeholder: v = L.toUpperCase(),
+  dateFormat: y = L,
+  selects: e = "start",
+  value: c = null
+}) => {
+  const d = B(null), k = n == null ? void 0 : n.toDateString(), m = o == null ? void 0 : o.toDateString(), j = o && n && o > n, A = (u) => {
+    const F = u.toDateString(), Y = F === k, M = j && F === m, I = n && o && u > n && u < o;
+    return _("date", {
+      "current-date": Y,
+      "selected-range": I && !M,
+      "end-date": M && j,
+      disabled: s
+    });
+  };
+  return /* @__PURE__ */ t(
+    $,
+    {
+      customInput: /* @__PURE__ */ t(
+        D,
+        {
+          className: _("input"),
+          defaultWidth: !1,
+          endIcon: /* @__PURE__ */ t(G, {}),
+          ref: d
+        }
+      ),
+      placeholderText: v,
+      selected: c,
+      startDate: n,
+      endDate: o,
+      minDate: e === "end" ? n : void 0,
+      disabled: s,
+      shouldCloseOnSelect: i,
+      fixedHeight: C,
+      locale: f,
+      showPopperArrow: !1,
+      dayClassName: A,
+      calendarClassName: _(p, "calendar"),
+      renderCustomHeader: (u) => /* @__PURE__ */ t(
+        J,
+        {
+          ...u,
+          headerNodes: h,
+          customClassName: b,
+          yearsOptions: N,
+          locale: f
+        }
+      ),
+      onChange: r,
+      onBlur: l,
+      onFocus: g,
+      customTimeInput: w,
+      showTimeInput: !!w,
+      popperClassName: _(x, "popper"),
+      dateFormat: y,
+      selectsStart: e === "start",
+      selectsEnd: e === "end",
+      className: _("datepicker")
+    }
+  );
+};
+export {
+  me as D,
+  pe as r
+};

package/dist/datePicker.js

@@ -0,0 +1,27 @@
+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";
+import "react";
+import "./fieldText-10046ca8.js";
+import "./openEye-7b9cf080.js";
+import "./button-33c88abf.js";
+import "./spinLoader-c4a53718.js";
+import "./maxValueDisplay-9be01a75.js";
+import "./calendarArrow-3e1339ea.js";
+import "./dropdown-d6aea1b9.js";
+import "@floating-ui/react-dom";
+import "downshift";
+import "rc-scrollbars";
+import "./useOnClickOutside-c332f7d3.js";
+import "./keyCodes-f63c0e11.js";
+import "./baseIconButton-251479f7.js";
+import "./dropdown-0260bb66.js";
+import "./checkbox-9a6c7ce1.js";
+import "react-datepicker";
+export {
+  t as DatePicker,
+  t as default,
+  q as registerDatePickerLocale
+};

package/dist/dropdown-0260bb66.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M14.2174 5.82426C14.3736 5.66805 14.3736 5.41479 14.2174 5.25858L14.0759 5.11716C13.9197 4.96095 13.6665 4.96095 13.5103 5.11716L8.16726 10.4602L2.82426 5.11716C2.66805 4.96095 2.41479 4.96095 2.25858 5.11716L2.11716 5.25858C1.96095 5.41479 1.96095 5.66805 2.11716 5.82426L7.89176 11.5989C8.04797 11.7551 8.30124 11.7551 8.45745 11.5989L8.88171 11.1746L8.87436 11.1673L14.2174 5.82426Z", fill: "#A2AAB5" }));
+export {
+  o as S
+};

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,14 +1,15 @@
-import { D as r } from "./dropdown-45e7bc7d.js";
+import { D as r } from "./dropdown-d6aea1b9.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";
-import "react-popper";
+import "@floating-ui/react-dom";
 import "downshift";
 import "rc-scrollbars";
 import "./useOnClickOutside-c332f7d3.js";
 import "./keyCodes-f63c0e11.js";
-import "./icon-71262f5c.js";
-import "./clear-4963efcd.js";
+import "./baseIconButton-251479f7.js";
+import "./dropdown-0260bb66.js";
+import "./checkbox-9a6c7ce1.js";
 export {
   r as Dropdown,
   r as default