@reportportal/ui-kit 0.0.1-alpha.2 → 0.0.1-alpha.21

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

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

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

@@ -0,0 +1 @@
+export { ModalContent } from './modalContent';

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

@@ -0,0 +1,7 @@
+import { ReactNode, FC } from 'react';
+interface ModalContentProps {
+    scrollable?: boolean;
+    children?: ReactNode;
+}
+export declare const ModalContent: FC<ModalContentProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export { ModalFooter } from './modalFooter';
+export type { ModalSize } from './modalFooter';

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

@@ -0,0 +1,12 @@
+import { ReactNode, FC, MouseEventHandler } from 'react';
+import { ButtonProps } from '../../button';
+export type ModalSize = 'default' | 'small' | 'large';
+interface ModalFooterProps {
+    closeHandler: MouseEventHandler<HTMLButtonElement>;
+    footerNode?: ReactNode;
+    okButton?: ButtonProps;
+    cancelButton?: ButtonProps;
+    size?: ModalSize;
+}
+export declare const ModalFooter: FC<ModalFooterProps>;
+export {};

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

@@ -0,0 +1 @@
+export { ModalHeader } from './modalHeader';

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

@@ -0,0 +1,8 @@
+import { ReactNode, FC } from 'react';
+interface ModalHeaderProps {
+    title?: ReactNode;
+    onClose: () => void;
+    withDescription?: boolean;
+}
+export declare const ModalHeader: FC<ModalHeaderProps>;
+export {};

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

@@ -0,0 +1,4 @@
+import { Pagination, PaginationProps } from './pagination';
+export { Pagination };
+export type { PaginationProps };
+export default Pagination;

package/dist/components/pagination/itemsCounter/index.d.ts

@@ -0,0 +1 @@
+export { ItemCounter } from './itemCounter';

package/dist/components/pagination/itemsCounter/itemCounter.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface ItemCounterProps {
+    activePage: number;
+    pageSize: number;
+    totalItems: number;
+    ofText: string;
+    itemsText: string;
+}
+export declare const ItemCounter: FC<ItemCounterProps>;

package/dist/components/pagination/pageControls/activePage/activePage.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { ChangePage } from '../../types';
+interface ActivePageProps {
+    activePage: number;
+    totalPages: number;
+    pageText: string;
+    goToText: string;
+    goActionText: string;
+    changePage: ChangePage;
+}
+export declare const ActivePage: FC<ActivePageProps>;
+export {};

package/dist/components/pagination/pageControls/activePage/index.d.ts

@@ -0,0 +1 @@
+export { ActivePage } from './activePage';

package/dist/components/pagination/pageControls/activePage/pageSelector/index.d.ts

@@ -0,0 +1 @@
+export { PageSelector } from './pageSelector';

package/dist/components/pagination/pageControls/activePage/pageSelector/pageSelector.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ChangePage } from '../../../types';
+interface PageSelectorProps {
+    pageText: string;
+    goActionText: string;
+    totalPages: number;
+    selectPage: ChangePage;
+}
+export declare const PageSelector: FC<PageSelectorProps>;
+export {};

package/dist/components/pagination/pageControls/index.d.ts

@@ -0,0 +1 @@
+export { PageControls } from './pageControls';

package/dist/components/pagination/pageControls/pageControls.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { ChangePage } from '../types';
+type PageControlsCaptions = {
+    page: string;
+    goTo: string;
+    goAction: string;
+    of: string;
+};
+export interface PageControlsProps {
+    activePage: number;
+    totalPages: number;
+    changePage: ChangePage;
+    captions: PageControlsCaptions;
+}
+export declare const PageControls: FC<PageControlsProps>;
+export {};

package/dist/components/pagination/pageControls/pageNavigator/bar/bar.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ChangePage } from '../../../types';
+export interface BarProps {
+    totalPages: number;
+    activePage: number;
+    changePage: ChangePage;
+    captions: {
+        goTo: string;
+    };
+}
+export declare const Bar: FC<BarProps>;

package/dist/components/pagination/pageControls/pageNavigator/bar/index.d.ts

@@ -0,0 +1 @@
+export { Bar } from './bar';

package/dist/components/pagination/pageControls/pageNavigator/index.d.ts

@@ -0,0 +1 @@
+export { PageNavigator } from './pageNavigator';

package/dist/components/pagination/pageControls/pageNavigator/pageNavigator.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ChangePage } from '../../types';
+export interface PageNavigatorProps {
+    activePage: number;
+    totalPages: number;
+    changePage: ChangePage;
+    captions: {
+        goTo: string;
+    };
+}
+export declare const PageNavigator: FC<PageNavigatorProps>;

package/dist/components/pagination/pageSizeControl/index.d.ts

@@ -0,0 +1 @@
+export { PageSizeControl } from './pageSizeControl';

package/dist/components/pagination/pageSizeControl/pageSizeControl.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ChangePageSize } from '../types';
+interface PageSizeControlProps {
+    size: number;
+    sizeOptions: number[];
+    perPageText: string;
+    changeSize: ChangePageSize;
+}
+export declare const PageSizeControl: FC<PageSizeControlProps>;
+export {};

package/dist/components/pagination/pageSizeControl/sizeSelector/index.d.ts

@@ -0,0 +1 @@
+export { SizeSelector } from './sizeSelector';

package/dist/components/pagination/pageSizeControl/sizeSelector/sizeSelector.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ChangePageSize } from '../../types';
+export interface SizeSelectorProps {
+    currentSize: number;
+    options: number[];
+    onClickOption: ChangePageSize;
+}
+export declare const SizeSelector: FC<SizeSelectorProps>;

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { ChangePageSize, ChangePage } from './types';
+type PaginationCaptions = {
+    items?: string;
+    of?: string;
+    page?: string;
+    goTo?: string;
+    goAction?: string;
+    perPage?: string;
+};
+export interface PaginationProps {
+    activePage: number;
+    totalPages: number;
+    pageSize: number;
+    totalItems: number;
+    pageSizeOptions: number[];
+    changePage: ChangePage;
+    changePageSize: ChangePageSize;
+    captions?: PaginationCaptions;
+}
+export declare const Pagination: FC<PaginationProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export type ChangePage = (page: number) => void;
+export type ChangePageSize = (size: number) => void;

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

@@ -0,0 +1 @@
+export { Popover } from './popover';

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+import { Placement } from '@floating-ui/react';
+interface PopoverProps {
+    className?: string;
+    content: ReactNode;
+    children: ReactNode;
+    placement?: Placement;
+    fallbackPlacements?: Placement[];
+    title?: string;
+    arrowOffset?: number;
+    safeZone?: number;
+    arrowColor?: string;
+    dataAutomationId?: string;
+    isOpened?: boolean;
+    setIsOpened?: (isOpened: boolean) => void;
+}
+export declare const Popover: FC<PopoverProps>;
+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/table/index.d.ts

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

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

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

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

@@ -0,0 +1,49 @@
+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 RowData {
+    id: string | number;
+    [key: string]: DetailedCellData | RowConfigs | string | number | any;
+    rowConfigs?: RowConfigs;
+}
+export declare enum SortDirection {
+    ASC = "asc",
+    DESC = "desc"
+}
+export interface SortConfig {
+    key: string;
+    direction: SortDirection;
+}
+export interface TableComponentProps {
+    data: RowData[];
+    primaryColumn: Column;
+    fixedColumns: FixedColumn[];
+    rowActionMenu?: 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,3 @@
+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/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/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/components/tooltip/index.d.ts

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

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

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+import { Placement } from '@floating-ui/react-dom';
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    wrapperClassName?: string;
+    contentClassName?: string;
+    dynamicWidth?: boolean;
+    width?: number;
+    placement?: Placement;
+    dataAutomationId?: string;
+}
+export declare const Tooltip: FC<TooltipProps>;
+export {};

package/dist/dropdown-c21b0d67.js

@@ -0,0 +1,216 @@
+import { jsx as d, jsxs as L } from "react/jsx-runtime";
+import * as R from "react";
+import { forwardRef as B, useState as Y, useRef as ee } from "react";
+import { c as A } from "./bind-06a7ff84.js";
+import { useFloating as te, offset as ne, flip as oe } from "@floating-ui/react-dom";
+import { useSelect as N } from "downshift";
+import { Scrollbars as se } from "rc-scrollbars";
+import { u as ae } from "./useOnClickOutside-c332f7d3.js";
+import { K as h } from "./keyCodes-f63c0e11.js";
+import { B as de } from "./baseIconButton-b6adc843.js";
+const le = (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" })), re = "_disabled_f4c9h_11", ie = "_hidden_f4c9h_15", ce = "_selected_f4c9h_21", _e = "_hover_f4c9h_24", he = {
+  "dropdown-option": "_dropdown-option_f4c9h_1",
+  disabled: re,
+  hidden: ie,
+  selected: ce,
+  hover: _e,
+  "single-option": "_single-option_f4c9h_37",
+  "sub-option": "_sub-option_f4c9h_45"
+}, P = A.bind(he), fe = B(
+  (t, n) => {
+    const {
+      option: { value: a, disabled: f, hidden: w, label: l, title: o, groupRef: O },
+      selected: b,
+      onChange: g,
+      render: p,
+      highlightHovered: E,
+      onMouseEnter: m
+    } = t, D = () => {
+      g && g(a);
+    };
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        className: P("dropdown-option", {
+          selected: b,
+          disabled: f,
+          hidden: w,
+          hover: E
+        }),
+        title: o,
+        onClick: D,
+        ref: n,
+        onMouseEnter: m,
+        children: /* @__PURE__ */ d("div", { className: P("single-option", { "sub-option": !!O }), children: p ? p(t) : l })
+      }
+    );
+  }
+), pe = [
+  h.ENTER_KEY_CODE,
+  h.SPACE_KEY_CODE,
+  h.ARROW_DOWN_KEY_CODE
+], ge = [h.ESCAPE_KEY_CODE, h.TAB_KEY_CODE];
+var _ = /* @__PURE__ */ ((t) => (t.ON_KEY_DOWN = "onKeyDown", t.ON_CLICK = "onClick", t))(_ || {});
+const me = (t, n) => t.map(({ value: a }) => a).indexOf(n), ue = (t, n) => (t % n + n) % n, K = (t, n = 0, a = 1) => {
+  if (!t[n].disabled)
+    return n;
+  const f = t.length;
+  return K(
+    t,
+    ue(n + a, f),
+    a
+  );
+}, ve = (t, n) => K(t, n), Ce = (t, n) => K(t, n, -1), we = "_container_vh03o_1", Oe = "_icon_vh03o_7", be = "_arrow_vh03o_13", Ee = "_dropdown_vh03o_19", De = "_disabled_vh03o_36", Ne = "_value_vh03o_43", Ke = "_error_vh03o_46", ye = "_touched_vh03o_46", xe = "_opened_vh03o_50", Ie = "_placeholder_vh03o_72", ke = "_ghost_vh03o_118", Se = {
+  container: we,
+  icon: Oe,
+  arrow: be,
+  dropdown: Ee,
+  "transparent-background": "_transparent-background_vh03o_33",
+  disabled: De,
+  value: Ne,
+  error: Ke,
+  touched: ye,
+  opened: xe,
+  placeholder: Ie,
+  "mobile-disabled": "_mobile-disabled_vh03o_87",
+  "select-list": "_select-list_vh03o_92",
+  "limited-width": "_limited-width_vh03o_109",
+  "options-container": "_options-container_vh03o_113",
+  ghost: ke
+}, i = A.bind(Se), je = ({
+  value: t = "",
+  options: n = [],
+  disabled: a = !1,
+  error: f,
+  onChange: w,
+  onFocus: l,
+  onBlur: o,
+  mobileDisabled: O,
+  title: b,
+  touched: g = !1,
+  icon: p,
+  variant: E,
+  placeholder: m = "",
+  renderOption: D,
+  transparentBackground: T = !1,
+  className: W,
+  toggleButtonClassName: H,
+  isListWidthLimited: M = !1
+}) => {
+  const [r, c] = Y(!1), y = ee(null), [$, u] = Y(null), { refs: x, floatingStyles: j } = te({
+    middleware: [
+      ne(5),
+      oe({
+        fallbackPlacements: ["bottom", "top"]
+      })
+    ]
+  });
+  ae(y, () => {
+    r && (c(!1), o == null || o());
+  });
+  const I = (e) => {
+    e.disabled || (w(e.value), c((s) => !s));
+  }, V = () => n.find(({ value: e }) => e === t), k = me(n, t), {
+    getToggleButtonProps: U,
+    getMenuProps: Z,
+    getItemProps: q,
+    setHighlightedIndex: v,
+    highlightedIndex: S,
+    selectedItem: C
+  } = N({
+    items: n,
+    itemToString: (e) => (e != null && e.label ? String(e.label) : m) || "",
+    selectedItem: V(),
+    isOpen: r,
+    circularNavigation: !0,
+    defaultHighlightedIndex: k,
+    onHighlightedIndexChange: (e) => {
+      switch (e.type) {
+        case N.stateChangeTypes.MenuKeyDownArrowUp:
+          return u(_.ON_KEY_DOWN), v(Ce(n, e.highlightedIndex)), e;
+        case N.stateChangeTypes.MenuKeyDownArrowDown:
+          return u(_.ON_KEY_DOWN), v(ve(n, e.highlightedIndex)), e;
+        default:
+          return e;
+      }
+    }
+  }), z = () => {
+    a || (c((e) => !e), r ? o == null || o() : l == null || l(), u(_.ON_CLICK));
+  }, G = () => {
+    if (!t && t !== !1 && t !== 0)
+      return m;
+    let e = t;
+    return n.forEach((s) => {
+      s.value === t && (e = s.label);
+    }), e;
+  }, J = (e) => {
+    const { keyCode: s } = e;
+    pe.includes(s) && !r && (e.preventDefault(), v(k), c(!0), l == null || l(), u(_.ON_KEY_DOWN));
+  }, Q = (e) => {
+    const { keyCode: s } = e;
+    if (s === h.ENTER_KEY_CODE) {
+      const F = n[S];
+      I(F), c(!1), o == null || o();
+      return;
+    }
+    ge.includes(s) && (e.stopPropagation(), c(!1), o == null || o());
+  }, X = () => /* @__PURE__ */ d("div", { className: i("options-container"), children: n.map((e, s) => /* @__PURE__ */ d(
+    fe,
+    {
+      ...q({
+        item: e,
+        index: s
+      }),
+      selected: e.value === ((C == null ? void 0 : C.value) ?? C),
+      option: { title: e.label, ...e },
+      highlightHovered: S === s && $ !== _.ON_CLICK,
+      render: D,
+      onChange: e.disabled ? null : () => I(e),
+      onMouseEnter: () => v(s)
+    },
+    e.value
+  )) });
+  return /* @__PURE__ */ L("div", { ref: y, className: i("container", W), title: b, children: [
+    /* @__PURE__ */ L(
+      "button",
+      {
+        disabled: a,
+        ...U({
+          className: i("dropdown", E, H, {
+            "transparent-background": T,
+            opened: r,
+            disabled: a,
+            error: f,
+            touched: g,
+            "mobile-disabled": O
+          }),
+          onClick: z,
+          onKeyDown: J,
+          ref: x.setReference
+        }),
+        type: "button",
+        children: [
+          p && /* @__PURE__ */ d("span", { className: i("icon"), children: p }),
+          /* @__PURE__ */ d("span", { className: i("value", { placeholder: !t }), children: G() }),
+          /* @__PURE__ */ d(de, { className: i("arrow"), tabIndex: -1, children: /* @__PURE__ */ d(le, {}) })
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ d(
+      "div",
+      {
+        style: j,
+        className: i("select-list", { opened: r, "limited-width": M }),
+        ...Z({
+          onKeyDown: Q,
+          ref: x.setFloating
+        }),
+        children: /* @__PURE__ */ d(se, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: X() })
+      }
+    )
+  ] });
+};
+export {
+  je as D,
+  le as S
+};

package/dist/dropdown.js

@@ -0,0 +1,14 @@
+import { D as r } from "./dropdown-c21b0d67.js";
+import "react/jsx-runtime";
+import "react";
+import "./bind-06a7ff84.js";
+import "@floating-ui/react-dom";
+import "downshift";
+import "rc-scrollbars";
+import "./useOnClickOutside-c332f7d3.js";
+import "./keyCodes-f63c0e11.js";
+import "./baseIconButton-b6adc843.js";
+export {
+  r as Dropdown,
+  r as default
+};