@datavac/ui-kit 1.7.1 → 1.8.0-data-table.1

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,2 @@
+import { DataTableProps } from './types';
+export declare function DataTable<T = Record<string, unknown>>({ columns, rows, isRowDisabled, onRowClick, getRowKey, sortField, sortDirection, onSortChange, mobileActionLabel, mobileDisabledLabel, tabletColumns, desktopBreakpoint, className, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/DataTableRow.d.ts

@@ -0,0 +1,18 @@
+import { DataTableColumn, DesktopBreakpoint } from './types';
+interface DataTableRowProps<T> {
+    row: T;
+    index: number;
+    columns: DataTableColumn<T>[];
+    isDisabled?: boolean;
+    hasAction?: boolean;
+    mobileActionLabel?: string;
+    /** @default "Нет сведений" */
+    mobileDisabledLabel?: string;
+    /** @default 3 */
+    tabletColumns?: number;
+    /** @default 'md' */
+    desktopBreakpoint?: DesktopBreakpoint;
+    onClick?: () => void;
+}
+export declare function DataTableRow<T>({ row, index, columns, isDisabled, hasAction, mobileActionLabel, mobileDisabledLabel, tabletColumns, desktopBreakpoint, onClick, }: DataTableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { DataTable } from './DataTable';
+export type { DataTableColumn, DataTableProps, SortDirection } from './types';

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

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+import { SortDirection } from '../SortControl';
+export type { SortDirection };
+/**
+ * Viewport-ширина, при которой включается desktop-layout (горизонтальная таблица).
+ * Используйте 'lg' для таблиц с 5+ колонками.
+ * @default 'md' (768px)
+ */
+export type DesktopBreakpoint = 'md' | 'lg';
+/**
+ * Дескриптор колонки. Передайте дженерик-параметр для типизированного `render`:
+ * @example
+ * const columns: DataTableColumn<VaccineData>[] = [
+ *   { key: 'name', label: 'Название', render: (row) => row.name },
+ * ]
+ */
+export interface DataTableColumn<T = Record<string, unknown>> {
+    key: string;
+    label: string;
+    /** Фиксированная ширина колонки в px или любая CSS-строка */
+    width?: string | number;
+    /** flex-grow для колонки (растягивается пропорционально) */
+    flex?: number;
+    /** Показать SortControl в заголовке (desktop) и включить колонку в мобильный Select */
+    sortable?: boolean;
+    /** Подсказка, которая появляется при наведении на иконку ⓘ в заголовке колонки. */
+    tooltip?: ReactNode;
+    /** Кастомный рендер ячейки. Если не задан — выводится значение row[key] */
+    render?: (row: T, index: number) => ReactNode;
+    /**
+     * Показывать колонку только в desktop-таблице.
+     * В планшетных и мобильных карточках колонка скрывается.
+     */
+    desktopOnly?: boolean;
+}
+export interface DataTableProps<T = Record<string, unknown>> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    /** Делает строку недоступной для клика; меняет стиль на fgMuted */
+    isRowDisabled?: (row: T) => boolean;
+    /** Вызывается только для активных строк */
+    onRowClick?: (row: T) => void;
+    /** Уникальный ключ строки для React; по умолчанию — индекс */
+    getRowKey?: (row: T, index: number) => string;
+    /** Текущее поле сортировки */
+    sortField?: string;
+    /** Текущее направление сортировки */
+    sortDirection?: SortDirection;
+    /** Сортировку данных делает родитель; DataTable лишь сигнализирует об изменении */
+    onSortChange?: (field: string, direction: SortDirection) => void;
+    /**
+     * Текст бейджа в мобильной карточке (< 480px) для активной строки.
+     * Показывается в правом верхнем углу первого поля, когда задан onRowClick.
+     * На планшете бейдж не показывается — только стрелка.
+     * @default "Подробнее"
+     */
+    mobileActionLabel?: string;
+    /**
+     * Текст бейджа в мобильной карточке (< 480px) для disabled-строки.
+     * Показывается вместо mobileActionLabel когда строка недоступна.
+     * @default "Нет сведений"
+     */
+    mobileDisabledLabel?: string;
+    /**
+     * Количество колонок в строке планшетной карточки.
+     * Если колонок больше — они переносятся на новые строки с тем же шагом.
+     * @default 3
+     */
+    tabletColumns?: number;
+    /**
+     * Viewport-ширина, при которой включается desktop-layout.
+     * Используйте 'lg' (1024px) для таблиц с 5+ колонками.
+     * @default 'md' (768px)
+     */
+    desktopBreakpoint?: DesktopBreakpoint;
+    className?: string;
+}

package/dist/components/SortControl/SortControl.d.ts

@@ -0,0 +1,10 @@
+export type SortDirection = 'asc' | 'desc';
+export interface SortControlProps {
+    label: string;
+    field: string;
+    active: boolean;
+    direction: SortDirection;
+    onChange: (field: string, direction: SortDirection) => void;
+    className?: string;
+}
+export declare function SortControl({ label, field, active, direction, onChange, className, }: SortControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { SortControl } from './SortControl';
+export type { SortControlProps, SortDirection } from './SortControl';

package/dist/icons/index.d.ts

@@ -3,6 +3,7 @@ export type IconProps = SVGProps<SVGSVGElement>;
 export declare function ArrowDownArrowUpIcon({ width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowDownToBracketIcon({ width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowUpRightFromSquareIcon({ width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowIcon({ width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowsIcon({ width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function BottleIcon({ width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronDownIcon({ width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;