@livechat/design-system-react-components 2.10.0 → 2.11.0

package/dist/components/Avatar/Avatar.d.ts

@@ -38,5 +38,9 @@ export interface AvatarProps extends ComponentCoreProps {
      * Displays rim
      */
     withRim?: boolean;
+    /**
+     * Custom style for the avatar
+     */
+    style?: React.CSSProperties;
 }
 export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/SelectableCard/SelectableCard.d.ts

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

package/dist/components/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.components.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IRadioCardsProps {
+    withIcon: boolean;
+    withCustomElement: boolean;
+}
+export declare const RadioCards: React.FC<IRadioCardsProps>;
+interface ICheckboxCardsProps {
+    withIcon: boolean;
+    withCustomElement: boolean;
+}
+export declare const CheckboxCards: React.FC<ICheckboxCardsProps>;
+export {};

package/dist/components/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.d.ts

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

package/dist/components/SelectableCard/components/GallerySelectableCard/types.d.ts

@@ -0,0 +1,30 @@
+import { ISelectableCardCoreProps } from '../../types';
+import * as React from 'react';
+type BaseProps = {
+    /**
+     * The label of the card
+     */
+    label?: string;
+};
+type WithIcon = BaseProps & {
+    /**
+     * The icon of the card
+     */
+    icon: React.ReactNode;
+    /**
+     * The custom element of the card
+     */
+    customElement?: never;
+};
+type WithCustomElement = BaseProps & {
+    /**
+     * The icon of the card
+     */
+    icon?: never;
+    /**
+     * The custom element of the card
+     */
+    customElement: React.ReactNode;
+};
+export type IGallerySelectableCardProps = (WithIcon | WithCustomElement) & Omit<ISelectableCardCoreProps, 'children'>;
+export {};

package/dist/components/SelectableCard/components/InteractiveSelectableCard/InteractiveGrid/InteractiveGrid.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ComponentCoreProps } from '../../../../../utils/types';
+
+interface IGridComponentProps extends ComponentCoreProps {
+}
+export declare const GridWrapper: FC<IGridComponentProps>;
+export declare const GridRow: FC<IGridComponentProps>;
+export declare const GridCol: FC<IGridComponentProps>;
+export {};

package/dist/components/SelectableCard/components/InteractiveSelectableCard/InteractiveGrid/index.d.ts

@@ -0,0 +1 @@
+export { GridCol, GridRow, GridWrapper } from './InteractiveGrid';

package/dist/components/SelectableCard/components/InteractiveSelectableCard/InteractiveSelectableCard.components.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IRadioCardsProps {
+    children: React.ReactNode;
+}
+export declare const RadioCards: React.FC<IRadioCardsProps>;
+interface ICheckboxCardsProps {
+    children: React.ReactNode;
+}
+export declare const CheckboxCards: React.FC<ICheckboxCardsProps>;
+export {};

package/dist/components/SelectableCard/components/InteractiveSelectableCard/InteractiveSelectableCard.d.ts

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

package/dist/components/SelectableCard/components/InteractiveSelectableCard/types.d.ts

@@ -0,0 +1,4 @@
+import { ISelectableCardCoreProps } from '../../types';
+
+export interface IInteractiveSelectableCardProps extends ISelectableCardCoreProps {
+}

package/dist/components/SelectableCard/components/ThumbnailSelectableCard/ThumbnailSelectableCard.components.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface IRadioCardsProps {
+    withDescription?: boolean;
+    withIcon?: boolean;
+    withCustomElement?: boolean;
+}
+export declare const RadioCards: React.FC<IRadioCardsProps>;
+interface ICheckboxCardsProps {
+    withDescription?: boolean;
+    withIcon?: boolean;
+    withCustomElement?: boolean;
+}
+export declare const CheckboxCards: React.FC<ICheckboxCardsProps>;
+export {};

package/dist/components/SelectableCard/components/ThumbnailSelectableCard/ThumbnailSelectableCard.d.ts

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

package/dist/components/SelectableCard/components/ThumbnailSelectableCard/types.d.ts

@@ -0,0 +1,20 @@
+import { ISelectableCardCoreProps } from '../../types';
+import * as React from 'react';
+export interface IThumbnailSelectableCardProps extends Omit<ISelectableCardCoreProps, 'children'> {
+    /**
+     * The label of the card
+     */
+    label: string;
+    /**
+     * The description of the card
+     */
+    description?: string;
+    /**
+     * The icon of the card
+     */
+    icon?: React.ReactNode;
+    /**
+     * The custom element of the card
+     */
+    customElement?: React.ReactNode;
+}

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

@@ -0,0 +1,4 @@
+export { ThumbnailSelectableCard } from './ThumbnailSelectableCard/ThumbnailSelectableCard';
+export { GallerySelectableCard } from './GallerySelectableCard/GallerySelectableCard';
+export { InteractiveSelectableCard } from './InteractiveSelectableCard/InteractiveSelectableCard';
+export { GridWrapper, GridCol, GridRow, } from './InteractiveSelectableCard/InteractiveGrid';

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

@@ -0,0 +1,2 @@
+export { SelectableCard } from './SelectableCard';
+export { ThumbnailSelectableCard, GallerySelectableCard, InteractiveSelectableCard, GridWrapper, GridCol, GridRow, } from './components/';

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

@@ -0,0 +1,26 @@
+import { ComponentCoreProps } from '../../utils/types';
+import * as React from 'react';
+export interface ISelectableCardCoreProps extends ComponentCoreProps {
+    /**
+     * The CSS class name for card content
+     */
+    contentClassName?: string;
+    /**
+     * Set the selection type of the card
+     */
+    selectionType: 'radio' | 'checkbox';
+    /**
+     * Set the card selection state
+     */
+    isSelected?: boolean;
+    /**
+     * Set the card onClick handler
+     */
+    onClick: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export interface ISelectableCardProps extends ISelectableCardCoreProps {
+    /**
+     * Set the card type
+     */
+    kind?: 'thumbnail' | 'gallery' | 'interactive';
+}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,3 @@
+import { ITableProps } from './types';
+
+export declare const Table: <T>({ data, columns, stripped, size, pin, selectable, getRowId, resizable, selectedRows, onSelectionChange, rowSelectionMessage, rowActions, testId, }: ITableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/TableBody.d.ts

@@ -0,0 +1,13 @@
+import { Column } from './types';
+
+interface TableBodyProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    getRowId: (row: T) => string | number;
+    columnWidths: (number | undefined)[];
+    selectable?: boolean;
+    isSelected: (id: string | number) => boolean;
+    toggleRowSelection: (id: string | number) => void;
+}
+export declare const TableBody: <T>({ data, columns, getRowId, columnWidths, selectable, isSelected, toggleRowSelection, }: TableBodyProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,18 @@
+import { Column, SortOrder } from './types';
+import * as React from 'react';
+interface TableHeaderProps<T> {
+    columns: Column<T>[];
+    sortConfig: {
+        key: keyof T | null;
+        direction: SortOrder;
+    };
+    handleSort: (key: keyof T) => void;
+    resizable?: boolean;
+    handleMouseDown: (index: number, event: React.MouseEvent) => void;
+    columnRefs: React.RefObject<(HTMLTableCellElement | null)[]>;
+    selectable?: boolean;
+    hoveredColumnIndex: number | null;
+    setHoveredColumnIndex: (index: number | null) => void;
+}
+export declare const TableHeader: <T>({ columns, sortConfig, handleSort, resizable, handleMouseDown, columnRefs, selectable, hoveredColumnIndex, setHoveredColumnIndex, }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/TableRow.d.ts

@@ -0,0 +1,13 @@
+import { Column } from './types';
+
+interface TableRowProps<T> {
+    row: T;
+    columns: Column<T>[];
+    columnWidths: (number | undefined)[];
+    selectable?: boolean;
+    isSelected: (id: string | number) => boolean;
+    toggleRowSelection: (id: string | number) => void;
+    rowId: string | number;
+}
+export declare const TableRow: <T>({ row, columns, columnWidths, selectable, isSelected, toggleRowSelection, rowId, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/hooks.d.ts

@@ -0,0 +1,14 @@
+interface UseTableProps<T> {
+    data: T[];
+    getRowId: (row: T) => string | number;
+    selectedRows?: Set<string | number>;
+    onSelectionChange?: (selectedIds: Set<string | number>) => void;
+}
+interface IUseTable {
+    isSelected: (id: string | number) => boolean;
+    toggleRowSelection: (id: string | number) => void;
+    toggleSelectAll: () => void;
+    selectedCount?: number;
+}
+export declare const useTable: <T>({ data, getRowId, selectedRows, onSelectionChange, }: UseTableProps<T>) => IUseTable;
+export {};

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

@@ -0,0 +1,3 @@
+export { Table } from './Table';
+export type { ITableProps, Column } from './types';
+export { useTable } from './hooks';

package/dist/components/Table/stories-constants.d.ts

@@ -0,0 +1,4 @@
+import { Column, DataForPinningExample } from './types';
+
+export declare const columnsForPinningExample: Column<DataForPinningExample>[];
+export declare const dataForPinningExample: DataForPinningExample[];

package/dist/components/Table/stories-helpers.d.ts

@@ -0,0 +1,3 @@
+import { Data } from './types';
+
+export declare const generateData: (length: number) => Data[];

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+export type Column<T> = {
+    key: keyof T;
+    header: string;
+    sortable?: boolean;
+    sortValue?: (item: T) => string | number;
+};
+export type TableSize = 'small' | 'medium' | 'large';
+export type PinOptions = 'header' | 'leftColumn';
+export type StrippedOptions = 'rows' | 'columns';
+export declare enum SortOrder {
+    Ascending = "asc",
+    Descending = "desc",
+    None = "none"
+}
+export interface ITableProps<T> {
+    /**
+     * The data to be displayed in the table. Each item represents a row.
+     */
+    data: T[];
+    /**
+     * The configuration for table columns, including keys, headers, and optional sorting logic.
+     */
+    columns: Column<T>[];
+    /**
+     * The parameter allows you to customize alternating background colors for rows
+     * or columns in the table, enhancing readability and visual separation. Allowed values
+     * are 'rows' or 'columns'
+     */
+    stripped?: StrippedOptions;
+    /**
+     * Specifies the size of the table, which affects row height and spacing.
+     * Options: 'small', 'medium', 'large'.
+     */
+    size?: TableSize;
+    /**
+     * Determines if certain table features, like the header, should remain pinned.
+     * Currently supports only `header` and `leftColumn` pinning.
+     */
+    pin?: PinOptions;
+    /**
+     * A function that returns a unique identifier for each row, used for selection and key assignment.
+     * @param item - The data item representing a row.
+     * @returns A unique identifier (string or number) for the row.
+     */
+    getRowId: (item: T) => string | number;
+    /**
+     * Enables or disables the ability to resize columns by dragging the edges of headers.
+     */
+    resizable?: boolean;
+    /**
+     * Enables row selection mode, adding checkboxes to each row and the header for selection.
+     */
+    selectable?: true;
+    /**
+     * A set of currently selected row IDs. Useful for controlling the selection state externally.
+     */
+    selectedRows?: Set<string | number>;
+    /**
+     * A callback function triggered when the selected rows change.
+     * @param selectedIds - A set of selected row IDs.
+     */
+    onSelectionChange?: (selectedIds: Set<string | number>) => void;
+    /**
+     * Defines a customizable message to display the count of selected rows in the table. By default,
+     * the message appears as "{count} selected items".
+     */
+    rowSelectionMessage?: string | React.ReactNode;
+    /**
+     * Allows you to define a custom action bar that appears when rows are selected. The action bar
+     * can contain buttons or other UI elements for performing bulk operations on the selected rows,
+     * such as "Delete All" or "Export."
+     */
+    rowActions?: React.ReactNode;
+    /**
+     * Sets the `data-testid` attribute, allowing the table to be easily selected in automated tests.
+     */
+    testId?: string;
+}
+export interface SortConfig<T> {
+    key: keyof T | null;
+    direction: SortOrder;
+}
+export type Data = {
+    id: number;
+    name: string;
+    age: number;
+    role: string;
+    action: React.ReactNode;
+};
+export interface DataForPinningExample {
+    userId: number;
+    fullName: string;
+    years: number;
+    jobTitle: string;
+    team: string;
+    office: string;
+    availability: string;
+    workExperience: string;
+    income: string;
+    controls: React.ReactNode;
+}

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useAnimations } from './useAnimations';
 export { useHeightResizer } from './useHeightResizer';
 export { useMobileViewDetector } from './useMobileViewDetector';
+export { useInteractive } from './useInteractive';

package/dist/hooks/types.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export type NODE = HTMLDivElement | null;
 export type CALLBACK = (newSize: DOMRectReadOnly) => void;
 export interface IUseHeightResizer {
@@ -11,3 +12,9 @@ export interface IUseMobileViewDetector {
     isMobile: boolean;
     handleResizeRef: (node: NODE) => void;
 }
+export interface UseInteractiveProps {
+    onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export interface IUseInteractive {
+    handleInteractiveClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}

package/dist/hooks/useInteractive.d.ts

@@ -0,0 +1,3 @@
+import { IUseInteractive, UseInteractiveProps } from './types';
+
+export declare const useInteractive: ({ onClick, }: UseInteractiveProps) => IUseInteractive;