@reportportal/ui-kit 0.0.1-alpha.16 → 0.0.1-alpha.161

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

@@ -0,0 +1,18 @@
+import { MutableRefObject } from 'react';
+import { ResizeCallbackData } from 'react-resizable';
+
+interface UseColumnResizeProps {
+    enabled?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    columnWidthsRef?: MutableRefObject<Map<string, number>>;
+    onColumnResize?: (columnKey: string, width: number) => void;
+}
+interface UseColumnResizeReturn {
+    columnWidths: Record<string, number>;
+    handleResize: (columnKey: string) => (e: React.SyntheticEvent, data: ResizeCallbackData) => void;
+    handleResizeStop: (columnKey: string) => () => void;
+    handleResizeStart: () => void;
+}
+export declare const useColumnResize: ({ enabled, minWidth, maxWidth, columnWidthsRef, onColumnResize, }: UseColumnResizeProps) => UseColumnResizeReturn;
+export {};

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

@@ -0,0 +1,8 @@
+import { MutableRefObject } from 'react';
+
+interface UseColumnWidthsReturn {
+    columnWidthsRef: MutableRefObject<Map<string, number>>;
+    setCellRef: (columnKey: string) => (element: HTMLDivElement | null) => void;
+}
+export declare const useColumnWidths: () => UseColumnWidthsReturn;
+export {};

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

@@ -0,0 +1,24 @@
+export interface RightGradientPosition {
+    visible: boolean;
+    position: {
+        top: number;
+        left: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+}
+export interface PinnedGradientPosition {
+    visible: boolean;
+    position: {
+        top: number;
+        left: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+}
+export declare const useRightGradientPosition: (table: HTMLElement | null, header: HTMLElement | null, scrollContainer: HTMLElement | null, isHeaderPinned: boolean, scrollLeft: number, scrollTop: number, tableScrollWidth: number, gradientUpdateCounter: number) => RightGradientPosition;
+export declare const usePinnedGradientPosition: (table: HTMLElement | null, scrollLeft: number, header: HTMLElement | null, scrollContainer: HTMLElement | null, isHeaderPinned: boolean, scrollTop: number, tableScrollWidth: number, gradientUpdateCounter: number) => PinnedGradientPosition;

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

@@ -0,0 +1,13 @@
+import { PrimaryColumn, FixedColumn, Column } from '../types';
+
+interface UseTableColumnsProps {
+    primaryColumns: Column[];
+    fixedColumns: FixedColumn[];
+    pinnedColumnKeys: string[];
+}
+interface UseTableColumnsReturn {
+    pinnedColumns: (PrimaryColumn | FixedColumn)[];
+    scrollableColumns: (PrimaryColumn | FixedColumn)[];
+}
+export declare const useTableColumns: ({ primaryColumns, fixedColumns, pinnedColumnKeys, }: UseTableColumnsProps) => UseTableColumnsReturn;
+export {};

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

@@ -0,0 +1,15 @@
+import { Column, FixedColumn } from '../types';
+
+interface UseTableExpansionProps {
+    primaryColumns: Column[];
+    fixedColumns: FixedColumn[];
+    expandedRowIds: (string | number)[];
+    onToggleRowExpansion: (id: string | number) => void;
+}
+interface UseTableExpansionReturn {
+    expandedCells: Set<string>;
+    handleToggleRowExpansion: (id: string | number) => void;
+    isCellExpanded: (rowId: string | number, columnKey: string) => boolean;
+}
+export declare const useTableExpansion: ({ primaryColumns, fixedColumns, expandedRowIds, onToggleRowExpansion, }: UseTableExpansionProps) => UseTableExpansionReturn;
+export {};

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

@@ -0,0 +1,10 @@
+interface UseTableHoverReturn {
+    hoveredColumn: string | null;
+    hoveredRow: number | null;
+    handleColumnMouseEnter: (columnKey: string) => void;
+    handleColumnMouseLeave: () => void;
+    handleRowMouseEnter: (rowIndex: number) => void;
+    handleRowMouseLeave: () => void;
+}
+export declare const useTableHover: () => UseTableHoverReturn;
+export {};

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

@@ -1,3 +1,5 @@
 import { Table } from './table';
+
 export { Table };
+export type { RowData, Column, PrimaryColumn, FixedColumn, PinnedColumn, RowConfigs, DetailedCellData, MetaData, SortConfig, SortingDirection, TableComponentProps, } from './types';
 export default Table;

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

@@ -0,0 +1 @@
+export { ResizeHandle } from './resizeHandle';

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ResizeHandle: (props: import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | null;

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

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

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

@@ -1,15 +1,22 @@
-import { ReactNode } from 'react';
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
+import { ASC, DESC } from './constants';
+
 export interface Column {
     key: string;
     header: string;
 }
 export interface PrimaryColumn extends Column {
     primary: boolean;
+    width?: string | number;
 }
 export interface FixedColumn extends Column {
     width: string | number;
     align?: 'left' | 'center' | 'right';
 }
+export interface PinnedColumn extends FixedColumn {
+    pinned: boolean;
+    pinnedPosition?: number;
+}
 export interface RowConfigs {
     size?: 'small' | 'medium' | 'large';
 }
@@ -17,33 +24,56 @@ 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 type SortingDirection = typeof ASC | typeof DESC | Uppercase<typeof ASC | typeof DESC>;
 export interface SortConfig {
     key: string;
-    direction: SortDirection;
+    direction: SortingDirection;
 }
 export interface TableComponentProps {
     data: RowData[];
-    primaryColumn: Column;
+    primaryColumn: Column | Column[];
     fixedColumns: FixedColumn[];
-    rowActionMenu?: ReactNode;
+    renderRowActions?: (metaData?: MetaData) => ReactNode;
     selectable?: boolean;
+    isCheckboxOutside?: boolean;
     className?: string;
+    wrapperClassName?: string;
     headerClassName?: string;
+    bodyClassName?: string;
     rowClassName?: string;
     selectedRowIds?: (string | number)[];
-    sortingDirection?: SortDirection;
+    sortingDirection?: SortingDirection;
     sortingColumn?: Column;
     sortableColumns?: string[];
+    isHeaderFixed?: boolean;
+    isHorizontallyScrollable?: boolean;
+    pinnedColumnKeys?: string[];
+    isRowsExpandable?: boolean;
+    expandedRowIds?: (string | number)[];
+    isSelectAllCheckboxAlwaysVisible?: boolean;
+    setExpandedRowIds?: Dispatch<SetStateAction<Set<string | number>>>;
+    isAllExpandedByDefault?: boolean;
+    expandAllTooltip?: ReactNode;
+    isResizable?: boolean;
+    minColumnWidth?: number;
+    maxColumnWidth?: number;
     onChangeSorting?: (sortConfig?: SortConfig) => void;
     onToggleRowSelection?: (id: string | number) => void;
     onToggleAllRowsSelection?: () => void;
+    onToggleRowExpansion?: (id: string | number) => void;
+    onToggleAllRowsExpansion?: () => void;
+    onColumnResize?: (columnKey: string, width: number) => void;
+    externalScrollContainerRef?: RefObject<HTMLElement> | RefObject<Element> | null | undefined;
+    portalContainer?: HTMLElement | null;
+    rightGradientClassName?: string;
+    pinnedGradientClassName?: string;
 }

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

@@ -1,3 +1,12 @@
-import { Column, RowData, SortConfig } from './types';
+import { CSSProperties, MutableRefObject } from 'react';
+import { Column, RowData, SortConfig, SortingDirection, PrimaryColumn, FixedColumn } from './types';
+
+export declare const isAsc: (direction: SortingDirection) => boolean;
 export declare const sortTableData: (tableData: RowData[], sortConfig?: SortConfig) => RowData[];
 export declare const getColumnsKeys: (columns: Column[]) => string[];
+export declare const toggleDirection: (direction: SortingDirection) => "asc" | "desc";
+export declare const isPrimaryColumn: (column: PrimaryColumn | FixedColumn) => boolean;
+export declare const getRowSizeClassName: (rowData: RowData) => string;
+export declare const calculatePinnedPosition: (columnIndex: number, columns: (PrimaryColumn | FixedColumn)[], columnWidthsRef: MutableRefObject<Map<string, number>>, isRowsExpandable: boolean, selectable: boolean, isCheckboxOutside?: boolean) => number;
+export declare const getCellStyle: (column: FixedColumn | PrimaryColumn, isPinned: boolean, pinnedIndex: number | undefined, pinnedColumns: (PrimaryColumn | FixedColumn)[], columnWidthsRef: MutableRefObject<Map<string, number>>, isRowsExpandable: boolean, selectable: boolean, isCheckboxOutside?: boolean) => CSSProperties;
+export declare const getGridTemplateColumns: (pinnedColumns: (PrimaryColumn | FixedColumn)[], scrollableColumns: (PrimaryColumn | FixedColumn)[], isRowsExpandable: boolean, selectable: boolean, renderRowActions: boolean, isHeader?: boolean, columnWidths?: Record<string, number>, isResizable?: boolean, isCheckboxOutside?: boolean) => 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;

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/tooltip.d.ts

@@ -1,13 +1,23 @@
 import { FC, ReactNode } from 'react';
-import { Placement } from '@floating-ui/react-dom';
+import { Placement } from '@floating-ui/react';
+
 interface TooltipProps {
     content: ReactNode;
     children: ReactNode;
-    className?: string;
+    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-60b22314.js

@@ -0,0 +1,194 @@
+import { jsxs as F, Fragment as $, jsx as r } from "react/jsx-runtime";
+import B from "react-datepicker/dist/es/index.js";
+import { c as R } from "./bind-06a7ff84.js";
+import { useMemo as P, useRef as D } from "react";
+import { F as I } from "./fieldText-1749da7a.js";
+import { D as E } from "./dropdown-40fcc3ad.js";
+import { S as T } from "./calendarArrow-44c7e60e.js";
+import { registerLocale as j } from "react-datepicker";
+const ie = (n, s) => {
+  j(n, s);
+}, G = (n, s = 20) => {
+  const i = n + s;
+  return new Array(i - n).fill(void 0).map((g, t) => n - t);
+}, H = "_header_1q16i_1", V = "_disabled_1q16i_25", O = "_dropdown_1q16i_8", W = {
+  header: H,
+  "dropdowns-wrapper": "_dropdowns-wrapper_1q16i_8",
+  "button-prev": "_button-prev_1q16i_13",
+  "button-next": "_button-next_1q16i_14",
+  disabled: V,
+  dropdown: O,
+  "month-dropdown": "_month-dropdown_1q16i_44",
+  "toggle-button": "_toggle-button_1q16i_47"
+}, a = R.bind(W), z = ({
+  date: n = /* @__PURE__ */ new Date(),
+  changeYear: s = () => {
+  },
+  changeMonth: i = () => {
+  },
+  decreaseMonth: g = () => {
+  },
+  increaseMonth: t = () => {
+  },
+  prevMonthButtonDisabled: o = !1,
+  nextMonthButtonDisabled: h = !1,
+  headerNodes: b = null,
+  customClassName: w = "",
+  yearsOptions: p = [],
+  locale: y
+}) => {
+  const c = n.getFullYear(), C = n.getMonth(), f = P(() => {
+    const e = Array(12).keys(), l = new Intl.DateTimeFormat(y, {
+      month: "long"
+    }), d = (m) => l.format(new Date(c, m));
+    return Array.from(e, d).reduce((m, N, x) => m.concat({
+      value: x,
+      label: N
+    }), []);
+  }, [y, c]), v = P(() => (p.length > 0 ? p : G(c)).reduce(
+    (l, d) => l.concat({ value: d, label: `${d}` }),
+    []
+  ), [p, c]), A = (e) => {
+    i(e);
+  }, k = (e) => {
+    s(e);
+  };
+  return /* @__PURE__ */ F($, { children: [
+    b && /* @__PURE__ */ r("div", { className: a(w), children: b }),
+    /* @__PURE__ */ F("div", { className: a("header"), children: [
+      /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous Months",
+          disabled: o,
+          onClick: (e) => {
+            e.stopPropagation(), g();
+          },
+          className: a("button-prev", { disabled: o }),
+          children: /* @__PURE__ */ r(T, {})
+        }
+      ),
+      /* @__PURE__ */ F("div", { className: a("dropdowns-wrapper"), children: [
+        /* @__PURE__ */ r(
+          E,
+          {
+            options: f,
+            value: C,
+            onChange: A,
+            transparentBackground: !0,
+            className: a("dropdown", "month-dropdown"),
+            toggleButtonClassName: a("toggle-button")
+          }
+        ),
+        /* @__PURE__ */ r(
+          E,
+          {
+            options: v,
+            value: c,
+            onChange: k,
+            transparentBackground: !0,
+            className: a("dropdown"),
+            toggleButtonClassName: a("toggle-button")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next Months",
+          disabled: h,
+          onClick: (e) => {
+            e.stopPropagation(), t();
+          },
+          className: a("button-next", { disabled: h }),
+          children: /* @__PURE__ */ r(T, {})
+        }
+      )
+    ] })
+  ] });
+}, J = "_calendar_3ty6m_5", K = "_date_3ty6m_90", Q = "_disabled_3ty6m_203", X = "_popper_3ty6m_211", Z = "_input_3ty6m_215", ee = {
+  calendar: J,
+  "current-date": "_current-date_3ty6m_89",
+  date: K,
+  "selected-range": "_selected-range_3ty6m_119",
+  "end-date": "_end-date_3ty6m_119",
+  disabled: Q,
+  popper: X,
+  input: Z
+}, _ = R.bind(ee), te = "en", L = "MM-dd-yyyy", pe = ({
+  onChange: n = () => {
+  },
+  disabled: s = !1,
+  onBlur: i = () => {
+  },
+  onFocus: g = () => {
+  },
+  endDate: t = void 0,
+  startDate: o = void 0,
+  headerNodes: h = null,
+  customClassName: b = "",
+  customTimeInput: w = void 0,
+  shouldCloseOnSelect: p = !0,
+  popperClassName: y = "",
+  calendarClassName: c = "",
+  fixedHeight: C = !1,
+  language: f = te,
+  yearsOptions: v = [],
+  placeholder: A = L.toUpperCase(),
+  dateFormat: k = L,
+  selects: e = "start",
+  value: l = null
+}) => {
+  const d = D(null), S = o == null ? void 0 : o.toDateString(), m = t == null ? void 0 : t.toDateString(), N = t && o && t > o, x = (u) => {
+    const M = u.toDateString(), Y = M === S, q = N && M === m, U = o && t && u > o && u < t;
+    return _("date", {
+      "current-date": Y,
+      "selected-range": U && !q,
+      "end-date": q && N,
+      disabled: s
+    });
+  };
+  return /* @__PURE__ */ r(
+    B,
+    {
+      customInput: /* @__PURE__ */ r(I, { className: _("input"), defaultWidth: !1, ref: d }),
+      placeholderText: A,
+      selected: l,
+      startDate: o,
+      endDate: t,
+      disabled: s,
+      shouldCloseOnSelect: p,
+      fixedHeight: C,
+      locale: f,
+      showPopperArrow: !1,
+      dayClassName: x,
+      calendarClassName: _(c, "calendar"),
+      renderCustomHeader: (u) => /* @__PURE__ */ r(
+        z,
+        {
+          ...u,
+          headerNodes: h,
+          customClassName: b,
+          yearsOptions: v,
+          locale: f
+        }
+      ),
+      onChange: n,
+      onBlur: i,
+      onFocus: g,
+      customTimeInput: w,
+      showTimeInput: !!w,
+      popperClassName: _(y, "popper"),
+      dateFormat: k,
+      selectsStart: e === "start",
+      selectsEnd: e === "end",
+      className: _("datepicker")
+    }
+  );
+};
+export {
+  pe as D,
+  ie as r
+};

package/dist/datePicker.js

@@ -0,0 +1,32 @@
+import { D as t } from "./datePicker-60b22314.js";
+import { r as A } from "./datePicker-60b22314.js";
+import "react/jsx-runtime";
+import "react-datepicker/dist/es/index.js";
+import "./bind-06a7ff84.js";
+import "react";
+import "./fieldText-1749da7a.js";
+import "./clear-53660571.js";
+import "./openEye-950159cb.js";
+import "./baseIconButton-251479f7.js";
+import "./spinLoader-c4a53718.js";
+import "./maxValueDisplay-9be01a75.js";
+import "./fieldLabel.js";
+import "./dropdown-40fcc3ad.js";
+import "react-dom";
+import "@floating-ui/react-dom";
+import "downshift";
+import "rc-scrollbars";
+import "./keyCodes-f63c0e11.js";
+import "./dropdown-0260bb66.js";
+import "./adaptiveTagList.js";
+import "./button-97d9e587.js";
+import "./close-4d480ef7.js";
+import "./isEmpty-ccacb5ff.js";
+import "./checkbox-493fdc63.js";
+import "./calendarArrow-44c7e60e.js";
+import "react-datepicker";
+export {
+  t as DatePicker,
+  t as default,
+  A 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
+};