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

package/dist/bubblesLoader-a7e709d4.js

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

package/dist/bubblesLoader.js

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

package/dist/button-497b4d19.js

@@ -0,0 +1,62 @@
+import { jsxs as z, jsx as p } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { c as l } from "./bind-06a7ff84.js";
+const u = "_button_3xwzb_1", f = "_primary_3xwzb_19", g = "_disabled_3xwzb_24", y = "_ghost_3xwzb_36", N = "_danger_3xwzb_54", B = "_text_3xwzb_70", $ = "_icon_3xwzb_116", j = {
+  button: u,
+  primary: f,
+  disabled: g,
+  ghost: y,
+  danger: N,
+  text: B,
+  "width-wide-content": "_width-wide-content_3xwzb_106",
+  "width-parent": "_width-parent_3xwzb_111",
+  icon: $,
+  "icon-start": "_icon-start_3xwzb_122",
+  "icon-end": "_icon-end_3xwzb_126"
+}, c = l.bind(j), q = h(
+  ({
+    variant: t = "primary",
+    icon: e,
+    iconPlace: n = "start",
+    adjustWidthOn: o = "content",
+    type: r = "button",
+    children: i,
+    disabled: s = !1,
+    onClick: a,
+    title: b,
+    className: w,
+    ...x
+  }, d) => {
+    const m = c("button", t, w, {
+      disabled: s,
+      [`width-${o}`]: o
+    }), _ = t === "text" && e;
+    return /* @__PURE__ */ z(
+      "button",
+      {
+        ref: d,
+        type: r,
+        disabled: s,
+        className: m,
+        onClick: a,
+        title: b,
+        ...x,
+        children: [
+          _ && /* @__PURE__ */ p(
+            "i",
+            {
+              className: c("icon", {
+                [`icon-${n}`]: n
+              }),
+              children: _
+            }
+          ),
+          i
+        ]
+      }
+    );
+  }
+);
+export {
+  q as B
+};

package/dist/button.js

@@ -1,4 +1,4 @@
-import { B as o } from "./button-d4944dbc.js";
+import { B as o } from "./button-497b4d19.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";

package/dist/{checkbox-fdc44740.js → checkbox-1e21cf3e.js}

@@ -1,29 +1,29 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { jsxs as u, jsx as t } 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 = {
+import { K as _ } from "./keyCodes-f63c0e11.js";
+const m = "_checkbox_l76v2_1", f = "_disabled_l76v2_11", y = "_input_l76v2_16", C = "_control_l76v2_23", E = "_children_l76v2_77", D = {
   checkbox: m,
   disabled: f,
-  input: g,
-  control: y,
-  children: C
-}, e = x.bind(E), j = ({
-  children: t,
+  input: y,
+  control: C,
+  children: E
+}, e = x.bind(D), j = ({
+  children: l,
   disabled: c = !1,
-  onChange: _,
+  onChange: p,
   className: b,
   value: s,
   ...h
 }) => {
   const o = d(null), k = (n) => {
     var a, i;
-    const { keyCode: l } = n;
-    if (l === p.SPACE_KEY_CODE) {
+    const { keyCode: r } = n;
+    if (r === _.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());
+    r === _.ENTER_KEY_CODE && (n.preventDefault(), (i = o.current) == null || i.click());
   };
   return /* @__PURE__ */ u(
     "label",
@@ -33,7 +33,7 @@ const m = "_checkbox_1ggpr_1", f = "_disabled_1ggpr_12", g = "_input_1ggpr_17",
         disabled: c
       }),
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t(
           "input",
           {
             ref: o,
@@ -42,12 +42,12 @@ const m = "_checkbox_1ggpr_1", f = "_disabled_1ggpr_12", g = "_input_1ggpr_17",
             onKeyDown: k,
             className: e("input"),
             disabled: c,
-            onChange: _,
+            onChange: p,
             checked: s,
             ...h
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t(
           "span",
           {
             "aria-labelledby": "rp-ui-kit-checkbox-label",
@@ -58,7 +58,7 @@ const m = "_checkbox_1ggpr_1", f = "_disabled_1ggpr_12", g = "_input_1ggpr_17",
             })
           }
         ),
-        t && /* @__PURE__ */ r("span", { className: e("children", { disabled: c }), children: t })
+        l && /* @__PURE__ */ t("span", { className: e("children", { disabled: c }), children: l })
       ]
     }
   );

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-import { C as r } from "./checkbox-fdc44740.js";
+import { C as r } from "./checkbox-1e21cf3e.js";
 import "react/jsx-runtime";
 import "./bind-06a7ff84.js";
 import "react";

package/dist/components/button/button.d.ts

@@ -6,7 +6,6 @@ export interface ButtonProps extends ComponentPropsWithRef<'button'> {
     children?: ReactNode;
     icon?: ReactNode;
     iconPlace?: IconPlace;
-    dataAutomationId?: string;
     adjustWidthOn?: ButtonWidth;
     disabled?: boolean;
     type?: 'submit' | 'reset' | 'button';

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

@@ -1,4 +1,4 @@
-import { Button } from './button';
+import { Button, ButtonProps } from './button';
 export { Button };
-export type { ButtonProps } from './button';
+export type { ButtonProps };
 export default Button;

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

@@ -1,3 +1,7 @@
 import { KeyCodes } from '../../common/constants/keyCodes';
 export declare const OPEN_DROPDOWN_KEY_CODES: KeyCodes[];
 export declare const CLOSE_DROPDOWN_KEY_CODES: KeyCodes[];
+export declare enum EventName {
+    ON_KEY_DOWN = "onKeyDown",
+    ON_CLICK = "onClick"
+}

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

@@ -11,7 +11,6 @@ interface DropdownProps {
     icon?: ReactNode;
     variant?: DropdownVariant;
     placeholder?: string;
-    defaultWidth?: boolean;
     transparentBackground?: boolean;
     className?: string;
     toggleButtonClassName?: string;

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

@@ -4,7 +4,7 @@ interface FieldNumberProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onCha
     onChange: (value: number | string) => void;
     value?: FieldNumberValue;
     placeholder?: string;
-    disabled: boolean;
+    disabled?: boolean;
     label?: string;
     postfix?: string;
     min?: number;

package/dist/components/fieldTextFlex/fieldTextFlex.d.ts

@@ -0,0 +1,14 @@
+import { ChangeEventHandler, ComponentPropsWithRef, FC, FocusEventHandler, KeyboardEventHandler } from 'react';
+export interface FieldTextFlexProps extends ComponentPropsWithRef<'textarea'> {
+    value: string;
+    readonly?: boolean;
+    error?: string;
+    touched?: boolean;
+    label?: string;
+    helpText?: string;
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;
+}
+export declare const FieldTextFlex: FC<FieldTextFlexProps>;

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

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

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

@@ -0,0 +1,8 @@
+import { FC, MouseEventHandler, ReactNode, HTMLAttributes } from 'react';
+export interface BaseIconButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const BaseIconButton: FC<BaseIconButtonProps>;

package/dist/components/icons/baseIconButton/index.d.ts

@@ -0,0 +1,4 @@
+import { BaseIconButton, BaseIconButtonProps } from './baseIconButton';
+export { BaseIconButton };
+export type { BaseIconButtonProps };
+export default BaseIconButton;

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

@@ -0,0 +1,7 @@
+export { BaseIconButton } from './baseIconButton';
+export { default as ClearIcon } from './svg/clear.svg';
+export { default as CloseIcon } from './svg/close.svg';
+export { default as PlusIcon } from './svg/plus.svg';
+export { default as MinusIcon } from './svg/minus.svg';
+export { default as DeleteIcon } from './svg/delete.svg';
+export { default as DropdownIcon } from './svg/dropdown.svg';

package/dist/components/index.d.ts

@@ -6,6 +6,6 @@ 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';
+export * from './icons';

package/dist/components/modal/modal.d.ts

@@ -3,17 +3,19 @@ import { ButtonProps } from '../button';
 import { ModalSize } from './modalFooter';
 type ModalOverlay = 'default' | 'light-cyan';
 interface ModalProps {
+    onClose: () => void;
     title?: ReactNode;
     headerNode?: ReactNode;
     children?: ReactNode;
     footerNode?: ReactNode;
     className?: string;
+    zIndex?: number;
     size?: ModalSize;
     overlay?: ModalOverlay;
     allowCloseOutside?: boolean;
     okButton?: ButtonProps;
     cancelButton?: ButtonProps;
-    onClose: () => void;
+    scrollable?: boolean;
 }
 export declare const Modal: FC<ModalProps>;
 export {};

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

@@ -0,0 +1,4 @@
+import { Radio, RadioProps } from './radio.js';
+export { Radio };
+export type { RadioProps };
+export default Radio;

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,16 @@
+import { ChangeEventHandler, HTMLAttributes, ReactNode, FC } from 'react';
+export type RadioValue = string | number;
+export type RadioOption = {
+    value: RadioValue;
+    label: string;
+    disabled: boolean;
+};
+export interface RadioProps extends HTMLAttributes<HTMLInputElement> {
+    option: RadioOption;
+    value?: RadioValue;
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const Radio: FC<RadioProps>;

package/dist/components/radio/radioGroup.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { RadioProps } from './index';
+import { RadioOption } from './radio';
+interface RadioGroupProps extends Omit<RadioProps, 'option'> {
+    options: RadioOption[];
+}
+export declare const RadioGroup: FC<RadioGroupProps>;
+export {};

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

@@ -7,6 +7,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/dropdown-e07f2a71.js

@@ -0,0 +1,212 @@
+import { jsx as a, jsxs as L } from "react/jsx-runtime";
+import * as R from "react";
+import { forwardRef as F, useState as Y, useRef as B } from "react";
+import { c as A } from "./bind-06a7ff84.js";
+import { useFloating as ee, offset as te, flip as ne } from "@floating-ui/react-dom";
+import { useSelect as x } from "downshift";
+import { Scrollbars as de } from "rc-scrollbars";
+import { u as oe } from "./useOnClickOutside-c332f7d3.js";
+import { K as f } from "./keyCodes-f63c0e11.js";
+import { B as se } from "./baseIconButton-7bc53dec.js";
+const ae = (t) => /* @__PURE__ */ R.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ R.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" })), le = "_disabled_nx3fh_13", re = "_hidden_nx3fh_17", ie = "_selected_nx3fh_23", ce = "_hover_nx3fh_26", _e = {
+  "dropdown-option": "_dropdown-option_nx3fh_1",
+  disabled: le,
+  hidden: re,
+  selected: ie,
+  hover: ce,
+  "single-option": "_single-option_nx3fh_39",
+  "sub-option": "_sub-option_nx3fh_45"
+}, P = A.bind(_e), he = F(
+  (t, n) => {
+    const {
+      option: { value: s, disabled: i, hidden: O, label: l, title: d, groupRef: E },
+      selected: D,
+      onChange: p,
+      render: g,
+      highlightHovered: b,
+      onMouseEnter: w
+    } = t, N = () => {
+      p && p(s);
+    };
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: P("dropdown-option", {
+          selected: D,
+          disabled: i,
+          hidden: O,
+          hover: b
+        }),
+        title: i && d || void 0,
+        onClick: N,
+        ref: n,
+        onMouseEnter: w,
+        children: /* @__PURE__ */ a("div", { className: P("single-option", { "sub-option": !!E }), children: g ? g(t) : l })
+      }
+    );
+  }
+), fe = [
+  f.ENTER_KEY_CODE,
+  f.SPACE_KEY_CODE,
+  f.ARROW_DOWN_KEY_CODE
+], ge = [f.ESCAPE_KEY_CODE, f.TAB_KEY_CODE];
+var h = /* @__PURE__ */ ((t) => (t.ON_KEY_DOWN = "onKeyDown", t.ON_CLICK = "onClick", t))(h || {});
+const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t % n + n) % n, v = (t, n = 0, s = 1) => {
+  if (!t[n].disabled)
+    return n;
+  const i = t.length;
+  return v(
+    t,
+    we(n + s, i),
+    s
+  );
+}, me = (t, n) => v(t, n), ue = (t, n) => v(t, n, -1), Ce = "_container_3wi7d_1", Oe = "_icon_3wi7d_7", Ee = "_arrow_3wi7d_13", De = "_dropdown_3wi7d_19", be = "_disabled_3wi7d_36", Ne = "_value_3wi7d_43", xe = "_error_3wi7d_46", ve = "_touched_3wi7d_46", Ke = "_opened_3wi7d_50", ye = "_placeholder_3wi7d_72", Ie = "_ghost_3wi7d_108", ke = {
+  container: Ce,
+  icon: Oe,
+  arrow: Ee,
+  dropdown: De,
+  "transparent-background": "_transparent-background_3wi7d_33",
+  disabled: be,
+  value: Ne,
+  error: xe,
+  touched: ve,
+  opened: Ke,
+  placeholder: ye,
+  "mobile-disabled": "_mobile-disabled_3wi7d_87",
+  "select-list": "_select-list_3wi7d_92",
+  ghost: Ie
+}, _ = A.bind(ke), $e = ({
+  value: t = "",
+  options: n = [],
+  disabled: s = !1,
+  error: i,
+  onChange: O,
+  onFocus: l,
+  onBlur: d,
+  mobileDisabled: E,
+  title: D,
+  touched: p = !1,
+  icon: g,
+  variant: b,
+  placeholder: w = "",
+  renderOption: N,
+  transparentBackground: T = !1,
+  className: W,
+  toggleButtonClassName: H
+}) => {
+  const [r, c] = Y(!1), K = B(null), [M, m] = Y(null), { refs: y, floatingStyles: $ } = ee({
+    middleware: [
+      te(5),
+      ne({
+        fallbackPlacements: ["bottom", "top"]
+      })
+    ]
+  });
+  oe(K, () => {
+    r && (c(!1), d == null || d());
+  });
+  const I = (e) => {
+    e.disabled || (O(e.value), c((o) => !o));
+  }, j = () => n.find(({ value: e }) => e === t), k = pe(n, t), {
+    getToggleButtonProps: V,
+    getMenuProps: U,
+    getItemProps: Z,
+    setHighlightedIndex: u,
+    highlightedIndex: S,
+    selectedItem: C
+  } = x({
+    items: n,
+    itemToString: (e) => (e != null && e.label ? String(e.label) : w) || "",
+    selectedItem: j(),
+    isOpen: r,
+    circularNavigation: !0,
+    defaultHighlightedIndex: k,
+    onHighlightedIndexChange: (e) => {
+      switch (e.type) {
+        case x.stateChangeTypes.MenuKeyDownArrowUp:
+          return m(h.ON_KEY_DOWN), u(ue(n, e.highlightedIndex)), e;
+        case x.stateChangeTypes.MenuKeyDownArrowDown:
+          return m(h.ON_KEY_DOWN), u(me(n, e.highlightedIndex)), e;
+        default:
+          return e;
+      }
+    }
+  }), q = () => {
+    s || (c((e) => !e), r ? d == null || d() : l == null || l(), m(h.ON_CLICK));
+  }, z = () => {
+    if (!t && t !== !1)
+      return w;
+    let e = t;
+    return n.forEach((o) => {
+      o.value === t && (e = o.label);
+    }), e;
+  }, G = (e) => {
+    const { keyCode: o } = e;
+    fe.includes(o) && !r && (e.preventDefault(), u(k), c(!0), l == null || l(), m(h.ON_KEY_DOWN));
+  }, J = (e) => {
+    const { keyCode: o } = e;
+    if (o === f.ENTER_KEY_CODE) {
+      const X = n[S];
+      I(X), c(!1), d == null || d();
+      return;
+    }
+    ge.includes(o) && (e.stopPropagation(), c(!1), d == null || d());
+  }, Q = () => n.map((e, o) => /* @__PURE__ */ a(
+    he,
+    {
+      ...Z({
+        item: e,
+        index: o
+      }),
+      selected: e.value === ((C == null ? void 0 : C.value) ?? C),
+      option: e,
+      highlightHovered: S === o && M !== h.ON_CLICK,
+      render: N,
+      onChange: e.disabled ? null : () => I(e),
+      onMouseEnter: () => u(o)
+    },
+    e.value
+  ));
+  return /* @__PURE__ */ L("div", { ref: K, className: _("container", W), title: D, children: [
+    /* @__PURE__ */ L(
+      "button",
+      {
+        disabled: s,
+        ...V({
+          className: _("dropdown", b, H, {
+            "transparent-background": T,
+            opened: r,
+            disabled: s,
+            error: i,
+            touched: p,
+            "mobile-disabled": E
+          }),
+          onClick: q,
+          onKeyDown: G,
+          ref: y.setReference
+        }),
+        children: [
+          g && /* @__PURE__ */ a("span", { className: _("icon"), children: g }),
+          /* @__PURE__ */ a("span", { className: _("value", { placeholder: !t }), children: z() }),
+          /* @__PURE__ */ a(se, { className: _("arrow"), tabIndex: -1, children: /* @__PURE__ */ a(ae, {}) })
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ a(
+      "div",
+      {
+        style: $,
+        className: _("select-list", { opened: r }),
+        ...U({
+          onKeyDown: J,
+          ref: y.setFloating
+        }),
+        children: /* @__PURE__ */ a(de, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: Q() })
+      }
+    )
+  ] });
+};
+export {
+  $e as D,
+  ae as S
+};

package/dist/dropdown.js

@@ -1,14 +1,13 @@
-import { D as r } from "./dropdown-45e7bc7d.js";
+import { D as r } from "./dropdown-e07f2a71.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-7bc53dec.js";
 export {
   r as Dropdown,
   r as default