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

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

@@ -0,0 +1,5 @@
+export { SortableItem } from './sortableItem';
+export { SortableList } from './sortableList';
+export { DragLayer } from './dragLayer';
+export { TreeSortableItem } from './treeSortableItem';
+export { TreeSortableContainer } from './treeSortableContainer';

package/dist/components/sortable/sortableItem/index.d.ts

@@ -0,0 +1 @@
+export { SortableItem } from './sortableItem';

package/dist/components/sortable/sortableItem/sortableItem.d.ts

@@ -0,0 +1,3 @@
+import { SortableItemProps } from '../../../common/types';
+
+export declare const SortableItem: ({ id, index, type, isDisabled, className, draggingClassName, dropTargetClassName, onDrop, hideDefaultPreview, dropDetectionMode, orientation, isLast, children, }: SortableItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/sortable/sortableList/index.d.ts

@@ -0,0 +1 @@
+export { SortableList } from './sortableList';

package/dist/components/sortable/sortableList/sortableList.d.ts

@@ -0,0 +1,5 @@
+import { SortableListProps } from '../../../common/types';
+
+export declare const SortableList: <T extends {
+    id: string | number;
+}>({ items, type, isDisabled, className, itemClassName, onReorder, renderItem, keyExtractor, }: SortableListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/sortable/treeSortableContainer/TreeSortableContext.d.ts

@@ -0,0 +1,11 @@
+import { TreeDragItem, TreeDropPosition } from '../../../common/types';
+
+export interface TreeSortableContextValue {
+    showDropConfirmation: boolean;
+    pendingDraggedItemId: string | number | null;
+    pendingTargetId: string | number | null;
+    pendingDropPosition: TreeDropPosition;
+    requestDrop: (draggedItem: TreeDragItem, targetId: string | number, position: TreeDropPosition, dropElement: HTMLElement) => void;
+}
+export declare const TreeSortableContext: import('react').Context<TreeSortableContextValue | null>;
+export declare const useTreeSortableContext: () => TreeSortableContextValue | null;

package/dist/components/sortable/treeSortableContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeSortableContainer } from './treeSortableContainer';
+export { useTreeSortableContext } from './TreeSortableContext';

package/dist/components/sortable/treeSortableContainer/treeSortableContainer.d.ts

@@ -0,0 +1,3 @@
+import { TreeSortableContainerProps } from '../../../common/types';
+
+export declare const TreeSortableContainer: ({ children, showDropConfirmation, confirmationLabels, portalTarget, onMove, onDuplicate, onMoveExternal, onDuplicateExternal, onCancel, }: TreeSortableContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/sortable/treeSortableItem/index.d.ts

@@ -0,0 +1 @@
+export { TreeSortableItem } from './treeSortableItem';

package/dist/components/sortable/treeSortableItem/treeSortableItem.d.ts

@@ -0,0 +1,3 @@
+import { TreeSortableItemProps } from '../../../common/types';
+
+export declare const TreeSortableItem: ({ id, index, parentId, type, isDisabled, acceptDrop, isLast, canDropOn, acceptExternalDrop, externalDropType, className, style, draggingClassName, dropBeforeClassName, dropInsideClassName, dropAfterClassName, onDrop, hideDefaultPreview, children, }: TreeSortableItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { SpinLoader } from './spinLoader';
+
+export { SpinLoader };
+export default SpinLoader;

package/dist/components/spinLoader/spinLoader.d.ts

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

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

@@ -0,0 +1 @@
+export { SystemAlert } from './systemAlert';

package/dist/components/systemAlert/systemAlert.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SystemAlertProps } from './types';
+
+export declare const SystemAlert: FC<SystemAlertProps>;

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

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+
+export declare enum SystemAlertType {
+    INFO = "info",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}
+export declare enum SystemAlertTypographyColorType {
+    WHITE = "white",
+    BLACK = "black"
+}
+export interface SystemAlertProps {
+    title: string;
+    onClose: () => void;
+    icon?: ReactElement | null;
+    type?: SystemAlertType;
+    typographyColor?: SystemAlertTypographyColorType;
+    duration?: number;
+    className?: string;
+    dataAutomationId?: string;
+}

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

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

package/dist/components/systemMessage/systemMessage.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+
 type Mode = 'info' | 'warning' | 'error';
 interface SystemMessageProps {
     children?: ReactNode;

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

@@ -0,0 +1,6 @@
+export declare const ASC = "asc";
+export declare const DESC = "desc";
+export declare const EXPANDABLE_CHECKBOX_COLUMN_WIDTH = 32;
+export declare const PRIMARY_COLUMN_DEFAULT_WIDTH = 100;
+export declare const ACTION_MENU_COLUMN_WIDTH = 48;
+export declare const GRADIENT_OVERLAY_WIDTH = 48;

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

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+
+export interface GradientOverlayProps {
+    portalContainer?: HTMLElement | null;
+    visible: boolean;
+    position: {
+        top: number;
+        left?: number;
+        right?: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    direction: 'left' | 'right';
+    className?: string;
+    dataTestId?: string;
+}
+export declare const GradientOverlay: ({ portalContainer, visible, position, size, direction, className, dataTestId, }: GradientOverlayProps) => ReactElement | null;

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

@@ -0,0 +1,2 @@
+export { GradientOverlay } from './gradientOverlay';
+export type { GradientOverlayProps } from './gradientOverlay';

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

@@ -0,0 +1,8 @@
+export { useTableColumns } from './useTableColumns';
+export { useTableHover } from './useTableHover';
+export { useTableExpansion } from './useTableExpansion';
+export { useColumnWidths } from './useColumnWidths';
+export { useColumnResize } from './useColumnResize';
+export { useRightGradientPosition, usePinnedGradientPosition } from './useGradientPosition';
+export type { RightGradientPosition, PinnedGradientPosition } from './useGradientPosition';
+export { useCheckboxRowSync } from './useCheckboxRowSync';

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

@@ -0,0 +1,10 @@
+interface UseCheckboxRowSyncProps {
+    enabled: boolean;
+    rowCount: number;
+}
+export declare const useCheckboxRowSync: ({ enabled, rowCount }: UseCheckboxRowSyncProps) => {
+    setTableRowRef: (rowId: string | number) => (el: HTMLElement | null) => void;
+    setCheckboxRowRef: (rowId: string | number) => (el: HTMLElement | null) => void;
+    syncAllHeights: () => void;
+};
+export {};

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

@@ -0,0 +1,21 @@
+import { MutableRefObject } from 'react';
+import { ResizeCallbackData } from 'react-resizable';
+import { PrimaryColumn, FixedColumn } from '../types';
+
+interface UseColumnResizeProps {
+    enabled?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    columns?: (PrimaryColumn | FixedColumn)[];
+    columnWidthsRef?: MutableRefObject<Map<string, number>>;
+    onColumnResize?: (columnKey: string, width: number) => void;
+    initialColumnWidths?: Record<string, number>;
+}
+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, columns, columnWidthsRef, onColumnResize, initialColumnWidths, }: 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

@@ -0,0 +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

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

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

@@ -0,0 +1,85 @@
+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;
+    minWidth?: number;
+    maxWidth?: number;
+}
+export interface FixedColumn extends Column {
+    width: string | number;
+    align?: 'left' | 'center' | 'right';
+    minWidth?: number;
+    maxWidth?: number;
+}
+export interface PinnedColumn extends FixedColumn {
+    pinned: boolean;
+    pinnedPosition?: number;
+}
+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 type SortingDirection = typeof ASC | typeof DESC | Uppercase<typeof ASC | typeof DESC>;
+export interface SortConfig {
+    key: string;
+    direction: SortingDirection;
+}
+export interface TableComponentProps {
+    data: RowData[];
+    primaryColumn: Column | Column[];
+    fixedColumns: FixedColumn[];
+    renderRowActions?: (metaData?: MetaData) => ReactNode;
+    selectable?: boolean;
+    isCheckboxOutside?: boolean;
+    className?: string;
+    wrapperClassName?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    rowClassName?: string;
+    selectedRowIds?: (string | number)[];
+    sortingDirection?: SortingDirection;
+    sortingColumn?: Column;
+    sortableColumns?: string[];
+    isHeaderFixed?: boolean;
+    isHorizontallyScrollable?: boolean;
+    pinnedColumnKeys?: string[];
+    isRowsExpandable?: boolean;
+    expandedRowIds?: (string | number)[];
+    isSelectAllCheckboxAlwaysVisible?: boolean;
+    disabledRowIds?: (string | number)[];
+    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;
+    getRowCheckboxTooltip?: (rowId: string | number) => ReactNode;
+    externalScrollContainerRef?: RefObject<HTMLElement> | RefObject<Element> | null | undefined;
+    portalContainer?: HTMLElement | null;
+    rightGradientClassName?: string;
+    pinnedGradientClassName?: string;
+}

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

@@ -0,0 +1,12 @@
+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;
@@ -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

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

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

@@ -0,0 +1,12 @@
+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,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 {};