@reportportal/ui-kit 0.0.1-alpha.5 → 0.0.1-alpha.7

package/dist/bubblesLoader-9bec3797.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as r } from "./bind-06a7ff84.js";
+const a = "_bubble_1wrm9_1", c = "_bubbles_1wrm9_1", _ = {
+  "bubbles-loader": "_bubbles-loader_1wrm9_1",
+  "color-topaz": "_color-topaz_1wrm9_4",
+  bubble: a,
+  bubbles: c
+}, l = r.bind(_), t = 7, i = ({
+  color: b = "topaz",
+  className: o
+}) => /* @__PURE__ */ s("div", { className: l("bubbles-loader", o, { [`color-${b}`]: b }), children: Array(t).fill(void 0).map((m, e) => (
+  // eslint-disable-next-line react/no-array-index-key
+  /* @__PURE__ */ s("div", { className: l("bubble") }, e)
+)) });
+export {
+  i as B
+};

package/dist/bubblesLoader.js

@@ -0,0 +1,7 @@
+import { B as r } from "./bubblesLoader-9bec3797.js";
+import "react/jsx-runtime";
+import "./bind-06a7ff84.js";
+export {
+  r as BubblesLoader,
+  r as default
+};

package/dist/checkbox-fdc44740.js

@@ -0,0 +1,68 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { c as x } from "./bind-06a7ff84.js";
+import { useRef as d } from "react";
+import { K as p } from "./keyCodes-f63c0e11.js";
+const m = "_checkbox_1ggpr_1", f = "_disabled_1ggpr_12", g = "_input_1ggpr_17", y = "_control_1ggpr_24", C = "_children_1ggpr_78", E = {
+  checkbox: m,
+  disabled: f,
+  input: g,
+  control: y,
+  children: C
+}, e = x.bind(E), j = ({
+  children: t,
+  disabled: c = !1,
+  onChange: _,
+  className: b,
+  value: s,
+  ...h
+}) => {
+  const o = d(null), k = (n) => {
+    var a, i;
+    const { keyCode: l } = n;
+    if (l === p.SPACE_KEY_CODE) {
+      n.preventDefault(), (a = o.current) == null || a.click();
+      return;
+    }
+    l === p.ENTER_KEY_CODE && (n.preventDefault(), (i = o.current) == null || i.click());
+  };
+  return /* @__PURE__ */ u(
+    "label",
+    {
+      id: "rp-ui-kit-checkbox-label",
+      className: e("checkbox", b, {
+        disabled: c
+      }),
+      children: [
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: o,
+            tabIndex: 0,
+            type: "checkbox",
+            onKeyDown: k,
+            className: e("input"),
+            disabled: c,
+            onChange: _,
+            checked: s,
+            ...h
+          }
+        ),
+        /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-labelledby": "rp-ui-kit-checkbox-label",
+            role: "checkbox",
+            "aria-checked": s,
+            className: e("control", {
+              disabled: c
+            })
+          }
+        ),
+        t && /* @__PURE__ */ r("span", { className: e("children", { disabled: c }), children: t })
+      ]
+    }
+  );
+};
+export {
+  j as C
+};

package/dist/checkbox.js

@@ -1,8 +1,8 @@
-import { C as r } from "./checkbox-7736509c.js";
+import { C as r } from "./checkbox-fdc44740.js";
 import "react/jsx-runtime";
 import "./bind-06a7ff84.js";
 import "react";
-import "./key-codes-abbe7725.js";
+import "./keyCodes-f63c0e11.js";
 export {
   r as Checkbox,
   r as default

package/dist/clear-4963efcd.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { width: 16.2089, height: 16.1568, rx: 8.07842, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.14768 5.14645C4.95077 5.34171 4.95077 5.65829 5.14768 5.85355L7.49578 8.18198L5.35655 10.3033C5.15963 10.4986 5.15963 10.8151 5.35655 11.0104C5.55346 11.2057 5.87271 11.2057 6.06962 11.0104L8.20886 8.88909L10.1392 10.8033C10.3361 10.9986 10.6554 10.9986 10.8523 10.8033C11.0492 10.608 11.0492 10.2915 10.8523 10.0962L8.92193 8.18198L11.0612 6.06065C11.2581 5.86539 11.2581 5.54881 11.0612 5.35355C10.8643 5.15828 10.545 5.15828 10.3481 5.35355L8.20886 7.47487L5.86076 5.14645C5.66385 4.95118 5.34459 4.95118 5.14768 5.14645Z", fill: "white" }));
+export {
+  l as S
+};

package/dist/common/constants/keyCodes.d.ts

@@ -0,0 +1,24 @@
+export declare enum KeyCodes {
+    BACKSPACE_KEY_CODE = 8,
+    TAB_KEY_CODE = 9,
+    ENTER_KEY_CODE = 13,
+    ESCAPE_KEY_CODE = 27,
+    SPACE_KEY_CODE = 32,
+    ARROW_LEFT_KEY_CODE = 37,
+    ARROW_UP_KEY_CODE = 38,
+    ARROW_RIGHT_KEY_CODE = 39,
+    ARROW_DOWN_KEY_CODE = 40,
+    DELETE_KEY_CODE = 46,
+    NUMBER_START_KEY_CODE = 48,
+    NUMBER_END_KEY_CODE = 57,
+    NUM_LOCK_0_KEY_CODE = 96,
+    NUM_LOCK_1_KEY_CODE = 97,
+    NUM_LOCK_2_KEY_CODE = 98,
+    NUM_LOCK_3_KEY_CODE = 99,
+    NUM_LOCK_4_KEY_CODE = 100,
+    NUM_LOCK_5_KEY_CODE = 101,
+    NUM_LOCK_6_KEY_CODE = 102,
+    NUM_LOCK_7_KEY_CODE = 103,
+    NUM_LOCK_8_KEY_CODE = 104,
+    NUM_LOCK_9_KEY_CODE = 105
+}

package/dist/components/bubblesLoader/bubblesLoader.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface BubblesLoaderProps {
+    color?: string;
+    className?: string;
+}
+export declare const BubblesLoader: FC<BubblesLoaderProps>;
+export {};

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

@@ -0,0 +1,3 @@
+import { BubblesLoader } from './bubblesLoader';
+export { BubblesLoader };
+export default BubblesLoader;

package/dist/components/checkbox/checkbox.d.ts

@@ -4,7 +4,6 @@ interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
     children?: ReactNode;
     disabled?: boolean;
     className?: string;
-    dataAutomationId?: string;
     onChange?: ChangeEventHandler<HTMLInputElement>;
 }
 export declare const Checkbox: FC<CheckboxProps>;

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

@@ -0,0 +1,3 @@
+import { KeyCodes } from '../../common/constants/keyCodes';
+export declare const OPEN_DROPDOWN_KEY_CODES: KeyCodes[];
+export declare const CLOSE_DROPDOWN_KEY_CODES: KeyCodes[];

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

@@ -0,0 +1,24 @@
+import { ReactNode, FC } from 'react';
+import { DropdownVariant, RenderDropdownOption, DropdownOptionType, DropdownValue } from './types';
+interface DropdownProps {
+    options: DropdownOptionType[];
+    value: DropdownValue;
+    disabled?: boolean;
+    error?: string;
+    mobileDisabled?: boolean;
+    title?: string;
+    touched?: boolean;
+    icon?: ReactNode;
+    variant?: DropdownVariant;
+    placeholder?: string;
+    defaultWidth?: boolean;
+    transparentBackground?: boolean;
+    className?: string;
+    toggleButtonClassName?: string;
+    onChange: (value: DropdownValue) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    renderOption?: RenderDropdownOption;
+}
+export declare const Dropdown: FC<DropdownProps>;
+export {};

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DropdownOptionProps } from '../types';
+export declare const DropdownOption: FC<DropdownOptionProps>;

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

@@ -0,0 +1,3 @@
+import { DropdownOption } from './dropdownOption';
+export { DropdownOption };
+export default DropdownOption;

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

@@ -0,0 +1,3 @@
+import { Dropdown } from './dropdown';
+export { Dropdown };
+export default Dropdown;

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

@@ -0,0 +1,20 @@
+import { MouseEventHandler, ReactNode } from 'react';
+export type DropdownVariant = 'default' | 'ghost';
+export type DropdownValue = string | boolean | number;
+export type RenderDropdownOption = (props: DropdownOptionProps) => ReactNode;
+export type DropdownOptionType = {
+    value: DropdownValue;
+    label: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    title?: string;
+    groupRef?: string;
+};
+export interface DropdownOptionProps {
+    selected?: boolean;
+    onChange?: (value: DropdownValue) => void;
+    highlightHovered?: boolean;
+    render?: RenderDropdownOption;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    option: DropdownOptionType;
+}

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

@@ -0,0 +1,4 @@
+import { DropdownValue, DropdownOptionType } from './types';
+export declare const calculateDefaultIndex: (options: DropdownOptionType[], selectedValue: DropdownValue) => number;
+export declare const calculateNextIndex: (options: DropdownOptionType[], index?: number) => number;
+export declare const calculatePrevIndex: (options: DropdownOptionType[], index?: number) => number;

package/dist/components/fieldNumber/constants.d.ts

@@ -0,0 +1,4 @@
+import { KeyCodes } from '../../common/constants/keyCodes';
+export declare const DEFAULT_WIDTH_CH = 5;
+export declare const MAX_WIDTH_CH = 16;
+export declare const ALLOWED_KEY_CODES: KeyCodes[];

package/dist/components/fieldNumber/fieldNumber.d.ts

@@ -0,0 +1,18 @@
+import { FC, HTMLAttributes, FocusEventHandler } from 'react';
+type FieldNumberValue = number | string;
+interface FieldNumberProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> {
+    onChange: (value: number | string) => void;
+    value?: FieldNumberValue;
+    placeholder?: string;
+    disabled?: boolean;
+    label?: string;
+    postfix?: string;
+    min?: number;
+    max?: number;
+    title?: string;
+    error?: string;
+    touched?: boolean;
+    onFocus?: () => void | FocusEventHandler<HTMLInputElement>;
+}
+export declare const FieldNumber: FC<FieldNumberProps>;
+export {};

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

@@ -0,0 +1,3 @@
+import { FieldNumber } from './fieldNumber.js';
+export { FieldNumber };
+export default FieldNumber;

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,11 @@
+import { FC, MouseEventHandler } from 'react';
+import { icons } from './icons';
+type IconName = keyof typeof icons;
+interface IconProps {
+    icon: IconName;
+    className?: string;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+}
+export declare const Icon: FC<IconProps>;
+export {};

package/dist/components/icon/icons.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const icons: {
+    clear: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+    close: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+    dropdown: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+    delete: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+    plus: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+    minus: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+};

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

@@ -0,0 +1,3 @@
+import { Icon } from './icon';
+export { Icon };
+export default Icon;

package/dist/components/index.d.ts

@@ -4,3 +4,8 @@ export { SystemMessage } from './systemMessage';
 export { FieldText } from './fieldText';
 export { ThemeProvider } from './themeProvider';
 export { Modal } from './modal';
+export { Dropdown } from './dropdown';
+export { Toggle } from './toggle';
+export { Icon } from './icon';
+export { FieldNumber } from './fieldNumber';
+export { BubblesLoader } from './bubblesLoader';

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

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

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

@@ -0,0 +1,11 @@
+import { ChangeEventHandler, FC, HTMLAttributes, ReactNode } from 'react';
+interface ToggleProps extends HTMLAttributes<HTMLInputElement> {
+    value: boolean;
+    title?: string;
+    children?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const Toggle: FC<ToggleProps>;
+export {};

package/dist/dropdown-45e7bc7d.js

@@ -0,0 +1,204 @@
+import { jsx as d, jsxs as R } from "react/jsx-runtime";
+import { forwardRef as Q, useState as X, useRef as S } from "react";
+import { c as H } from "./bind-06a7ff84.js";
+import { Manager as Z, Reference as U, Popper as F } from "react-popper";
+import { useSelect as N } from "downshift";
+import { Scrollbars as B } from "rc-scrollbars";
+import { u as ee } from "./useOnClickOutside-c332f7d3.js";
+import { K as u } from "./keyCodes-f63c0e11.js";
+import { I as ne } from "./icon-71262f5c.js";
+const te = "_disabled_ev7l2_13", oe = "_hidden_ev7l2_17", de = "_selected_ev7l2_23", re = "_hover_ev7l2_26", le = {
+  "dropdown-option": "_dropdown-option_ev7l2_1",
+  disabled: te,
+  hidden: oe,
+  selected: de,
+  hover: re,
+  "single-option": "_single-option_ev7l2_39",
+  "sub-option": "_sub-option_ev7l2_45"
+}, T = H.bind(le), se = Q(
+  (t, n) => {
+    const {
+      option: { value: l, disabled: a, hidden: m, label: i, title: r, groupRef: b },
+      selected: w,
+      onChange: g,
+      render: f,
+      highlightHovered: E,
+      onMouseEnter: p
+    } = t, C = () => {
+      g && g(l);
+    };
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        className: T("dropdown-option", {
+          selected: w,
+          disabled: a,
+          hidden: m,
+          hover: E
+        }),
+        title: a && r || void 0,
+        onClick: C,
+        ref: n,
+        onMouseEnter: p,
+        children: /* @__PURE__ */ d("div", { className: T("single-option", { "sub-option": !!b }), children: f ? f(t) : i })
+      }
+    );
+  }
+), ae = [
+  u.ENTER_KEY_CODE,
+  u.SPACE_KEY_CODE,
+  u.ARROW_DOWN_KEY_CODE
+], ie = [u.ESCAPE_KEY_CODE, u.TAB_KEY_CODE], ce = (t, n) => t.map(({ value: l }) => l).indexOf(n), _e = (t, n) => (t % n + n) % n, x = (t, n = 0, l = 1) => {
+  if (!t[n].disabled)
+    return n;
+  const a = t.length;
+  return x(t, _e(n + l, a));
+}, he = (t, n) => x(t, n), ue = (t, n) => x(t, n, -1), fe = "_container_1d54v_1", ge = "_icon_1d54v_10", pe = "_arrow_1d54v_16", ve = "_dropdown_1d54v_22", me = "_disabled_1d54v_39", be = "_error_1d54v_43", we = "_touched_1d54v_43", Ee = "_opened_1d54v_47", Ce = "_placeholder_1d54v_72", De = "_value_1d54v_75", Oe = "_ghost_1d54v_113", Ne = {
+  container: fe,
+  "default-width": "_default-width_1d54v_6",
+  icon: ge,
+  arrow: pe,
+  dropdown: ve,
+  "transparent-background": "_transparent-background_1d54v_36",
+  disabled: me,
+  error: be,
+  touched: we,
+  opened: Ee,
+  placeholder: Ce,
+  value: De,
+  "mobile-disabled": "_mobile-disabled_1d54v_87",
+  "select-list": "_select-list_1d54v_92",
+  ghost: Oe
+}, h = H.bind(Ne), Pe = ({
+  value: t = "",
+  options: n = [],
+  disabled: l = !1,
+  error: a,
+  onChange: m,
+  onFocus: i,
+  onBlur: r,
+  mobileDisabled: b,
+  title: w,
+  touched: g = !1,
+  icon: f,
+  variant: E,
+  placeholder: p = "",
+  defaultWidth: C = !0,
+  renderOption: M,
+  transparentBackground: P = !1,
+  className: Y,
+  toggleButtonClassName: A
+}) => {
+  const [c, _] = X(!1), y = S(null), s = S(null);
+  ee(y, () => {
+    c && (_(!1), r && r());
+  });
+  const I = (e) => {
+    e.disabled || (m(e.value), _((o) => !o));
+  }, W = () => n.find(({ value: e }) => e === t), K = ce(n, t), {
+    getToggleButtonProps: $,
+    getMenuProps: j,
+    getItemProps: V,
+    setHighlightedIndex: v,
+    highlightedIndex: k,
+    selectedItem: D
+  } = N({
+    items: n,
+    itemToString: (e) => (e != null && e.label ? String(e.label) : p) || "",
+    selectedItem: W(),
+    isOpen: c,
+    circularNavigation: !0,
+    defaultHighlightedIndex: K,
+    onHighlightedIndexChange: (e) => {
+      switch (e.type) {
+        case N.stateChangeTypes.MenuKeyDownArrowUp:
+          return v(ue(n, e.highlightedIndex)), e;
+        case N.stateChangeTypes.MenuKeyDownArrowDown:
+          return v(he(n, e.highlightedIndex)), e;
+        default:
+          return e;
+      }
+    }
+  }), L = () => {
+    l || (s != null && s.current && s.current(), _((e) => !e), c ? r && r() : i && i());
+  }, q = () => {
+    if (!t && t !== !1)
+      return p;
+    let e = t;
+    return n.forEach((o) => {
+      o.value === t && (e = o.label);
+    }), e;
+  }, z = (e) => {
+    const { keyCode: o } = e;
+    ae.includes(o) && !c && (e.preventDefault(), v(K), s != null && s.current && s.current(), _(!0), i && i());
+  }, G = (e) => {
+    const { keyCode: o } = e;
+    if (o === u.ENTER_KEY_CODE) {
+      const O = n[k];
+      I(O), _(!1), r && r();
+      return;
+    }
+    ie.includes(o) && (e.stopPropagation(), _(!1), r && r());
+  }, J = () => n.map((e, o) => /* @__PURE__ */ d(
+    se,
+    {
+      ...V({
+        item: e,
+        index: o
+      }),
+      selected: e.value === (D == null ? void 0 : D.value),
+      option: e,
+      highlightHovered: k === o,
+      render: M,
+      onChange: e.disabled ? null : () => I(e),
+      onMouseEnter: () => v(o)
+    },
+    e.value
+  ));
+  return /* @__PURE__ */ d(Z, { children: /* @__PURE__ */ R(
+    "div",
+    {
+      ref: y,
+      className: h("container", { "default-width": C }, Y),
+      title: w,
+      children: [
+        /* @__PURE__ */ d(U, { children: ({ ref: e }) => /* @__PURE__ */ R(
+          "button",
+          {
+            ...$({
+              ref: e,
+              tabIndex: l ? -1 : 0,
+              className: h("dropdown", E, A, {
+                "transparent-background": P,
+                opened: c,
+                disabled: l,
+                error: a,
+                touched: g,
+                "mobile-disabled": b
+              }),
+              onClick: L,
+              onKeyDown: z
+            }),
+            children: [
+              f && /* @__PURE__ */ d("span", { className: h("icon"), children: f }),
+              /* @__PURE__ */ d("span", { className: h("value", { placeholder: !t }), children: q() }),
+              /* @__PURE__ */ d(ne, { icon: "dropdown", className: h("arrow") })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ d(F, { placement: "bottom-start", children: ({ ref: e, style: o, update: O }) => (s.current = O, /* @__PURE__ */ d(
+          "div",
+          {
+            className: h("select-list", { opened: c }),
+            style: o,
+            ...j({ ref: e, onKeyDown: G }),
+            children: /* @__PURE__ */ d(B, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: J() })
+          }
+        )) })
+      ]
+    }
+  ) });
+};
+export {
+  Pe as D
+};

package/dist/dropdown.js

@@ -0,0 +1,15 @@
+import { D as r } from "./dropdown-45e7bc7d.js";
+import "react/jsx-runtime";
+import "react";
+import "./bind-06a7ff84.js";
+import "react-popper";
+import "downshift";
+import "rc-scrollbars";
+import "./useOnClickOutside-c332f7d3.js";
+import "./keyCodes-f63c0e11.js";
+import "./icon-71262f5c.js";
+import "./clear-4963efcd.js";
+export {
+  r as Dropdown,
+  r as default
+};