nntc-ui 0.2.4 → 0.2.6

package/src/components/view/VirtualTable/constants/baseColumns.ts

@@ -0,0 +1,39 @@
+import dayjs from 'dayjs';
+
+import { TableColumn } from '../models/TableColumn';
+
+export const baseColumns: TableColumn[] = [
+  { id: 'id', label: 'ID', accessorKey: 'id', sortable: true, filtrationByNumber: true, width: 120 },
+  { id: 'name', label: 'Имя', accessorKey: 'name', sortable: true, filtrationByValue: true, width: 200 },
+  { id: 'age', label: 'Возраст', accessorKey: 'age', sortable: true, filtrationByNumber: true, width: 150 },
+  { id: 'email', label: 'Email', accessorKey: 'email', sortable: true, filtrationByValue: true, width: 250 },
+  { id: 'status', label: 'Статус', accessorKey: 'status', sortable: true, filtrationByValue: true, width: 150 },
+  {
+    id: 'birthday',
+    label: 'Дата рождения',
+    accessorKey: 'birthday',
+    sortable: true,
+    filtrationByValue: true,
+    filtrationByDate: true,
+    valueFormat: (value) => dayjs(value).format('DD.MM.YYYY HH:mm'),
+    width: 200,
+  },
+  {
+    id: 'prop2',
+    label: 'Поле 2',
+    accessorKey: 'prop2',
+    sortable: true,
+    filtrationByValue: true,
+    width: 200,
+    onClick(payload) {
+      alert('Payload:\r\n' + JSON.stringify(payload));
+    },
+  },
+  { id: 'prop3', label: 'Поле 3', accessorKey: 'prop3', sortable: true, filtrationByValue: true, width: 150 },
+  { id: 'prop4', label: 'Поле 4', accessorKey: 'prop4', sortable: true, filtrationByValue: true, width: 250 },
+  { id: 'prop5', label: 'Поле 5', accessorKey: 'prop5', sortable: true, filtrationByValue: true, width: 150 },
+  { id: 'prop6', label: 'Поле 6', accessorKey: 'prop6', sortable: true, filtrationByValue: true, width: 130 },
+  { id: 'prop7', label: 'Поле 7', accessorKey: 'prop7', sortable: true, filtrationByValue: true, width: 200 },
+  { id: 'prop8', label: 'Поле 8', accessorKey: 'prop8', sortable: true, filtrationByValue: true, width: 150 },
+  { id: 'prop9', label: 'Поле 9', accessorKey: 'prop9', sortable: true, filtrationByValue: true, width: 250 },
+];

package/src/components/view/VirtualTable/constants/bigBaseColumns.ts

@@ -0,0 +1,35 @@
+import dayjs from 'dayjs';
+
+import { TableColumn } from '../models/TableColumn';
+
+export const bigBaseColumns: TableColumn[] = [
+  { id: 'id', label: 'ID', accessorKey: 'id', sortable: true, filtrationByNumber: true, width: 120 },
+  { id: 'name', label: 'Имя', accessorKey: 'name', sortable: true, filtrationByValue: true, width: 200 },
+  { id: 'age', label: 'Возраст', accessorKey: 'age', sortable: true, filtrationByNumber: true, width: 150 },
+  { id: 'email', label: 'Email', accessorKey: 'email', sortable: true, filtrationByValue: true, width: 250 },
+  { id: 'status', label: 'Статус', accessorKey: 'status', sortable: true, filtrationByValue: true, width: 150 },
+  {
+    id: 'birthday',
+    label: 'Дата рождения',
+    accessorKey: 'birthday',
+    sortable: true,
+    filtrationByValue: true,
+    filtrationByDate: true,
+    valueFormat: (value) => dayjs(value).format('DD.MM.YYYY'),
+    width: 200,
+  },
+  { id: 'prop2', label: 'Поле 2', accessorKey: 'prop2', sortable: true, filtrationByValue: true, width: 200 },
+  { id: 'prop3', label: 'Поле 3', accessorKey: 'prop3', sortable: true, filtrationByValue: true, width: 150 },
+  { id: 'prop4', label: 'Поле 4', accessorKey: 'prop4', sortable: true, filtrationByValue: true, width: 250 },
+  { id: 'prop5', label: 'Поле 5', accessorKey: 'prop5', sortable: true, filtrationByValue: true, width: 150 },
+  { id: 'prop6', label: 'Поле 6', accessorKey: 'prop6', sortable: true, filtrationByValue: true, width: 130 },
+  { id: 'prop7', label: 'Поле 7', accessorKey: 'prop7', sortable: true, filtrationByValue: true, width: 200 },
+  { id: 'prop8', label: 'Поле 8', accessorKey: 'prop8', sortable: true, filtrationByValue: true, width: 150 },
+  { id: 'prop9', label: 'Поле 9', accessorKey: 'prop9', sortable: true, filtrationByValue: true, width: 250 },
+  { id: 'prop10', label: 'Поле 10', accessorKey: 'prop10', sortable: true, filtrationByValue: true, width: 150 },
+  { id: 'prop11', label: 'Поле 11', accessorKey: 'prop11', sortable: true, filtrationByValue: true, width: 130 },
+  { id: 'prop12', label: 'Поле 12', accessorKey: 'prop12', sortable: true, filtrationByValue: true, width: 200 },
+  { id: 'prop13', label: 'Поле 13', accessorKey: 'prop13', sortable: true, filtrationByValue: true, width: 150 },
+  { id: 'prop14', label: 'Поле 14', accessorKey: 'prop14', sortable: true, filtrationByValue: true, width: 250 },
+  { id: 'prop15', label: 'Поле 15', accessorKey: 'prop15', sortable: true, filtrationByValue: true, width: 150 },
+];

package/src/components/view/VirtualTable/constants/bigSampleData.ts

@@ -0,0 +1,92 @@
+import dayjs from 'dayjs';
+
+import { TableRow } from '../models/TableRow';
+
+const ROWS_COUNT = 1000;
+
+const generateRandomName = (): string => {
+  const firstNames = ['Иван', 'Петр', 'Анна', 'Мария', 'Алексей', 'Елена', 'Дмитрий', 'Ольга', 'Сергей', 'Татьяна'];
+  const lastNames = [
+    'Иванов',
+    'Петров',
+    'Сидоров',
+    'Козлов',
+    'Новиков',
+    'Морозов',
+    'Петухов',
+    'Волков',
+    'Соловьев',
+    'Васильев',
+  ];
+  const middleNames = [
+    'Иванович',
+    'Петрович',
+    'Сидорович',
+    'Александрович',
+    'Владимирович',
+    'Сергеевич',
+    'Андреевич',
+    'Николаевич',
+    'Дмитриевич',
+    'Михайлович',
+  ];
+
+  const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+  const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+  const middleName = middleNames[Math.floor(Math.random() * middleNames.length)];
+
+  return `${lastName} ${firstName} ${middleName}`;
+};
+
+const generateRandomEmail = (): string => {
+  const domains = ['example.com', 'test.ru', 'demo.org', 'sample.net'];
+  const names = ['user', 'test', 'demo', 'sample', 'admin', 'guest'];
+  const numbers = Math.floor(Math.random() * 1000);
+  const domain = domains[Math.floor(Math.random() * domains.length)];
+  const name = names[Math.floor(Math.random() * names.length)];
+
+  return `${name}${numbers}@${domain}`;
+};
+
+const generateRandomBirthday = (): string => {
+  const start = new Date(1950, 0, 1);
+  const end = new Date(2010, 11, 31);
+  const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+  return dayjs(randomDate).toISOString();
+};
+
+const generateRandomAge = (): number => {
+  return Math.floor(Math.random() * 50) + 18;
+};
+
+const generateRandomStatus = (): string => {
+  const statuses = ['Активен', 'Неактивен'];
+  return statuses[Math.floor(Math.random() * statuses.length)];
+};
+
+const generateSampleData = (count: number): TableRow[] => {
+  return Array.from({ length: count }, (_, index) => ({
+    id: { value: (index + 1).toString() },
+    name: { value: generateRandomName() },
+    age: { value: generateRandomAge() },
+    email: { value: generateRandomEmail() },
+    status: { value: generateRandomStatus() },
+    birthday: { value: generateRandomBirthday() },
+    prop2: { value: `Свойство 2` },
+    prop3: { value: `Свойство 3` },
+    prop4: { value: `Свойство 4` },
+    prop5: { value: `Свойство 5` },
+    prop6: { value: `Свойство 6` },
+    prop7: { value: `Свойство 7` },
+    prop8: { value: `Свойство 8` },
+    prop9: { value: `Свойство 9` },
+    prop10: { value: `Свойство 10` },
+    prop11: { value: `Свойство 11` },
+    prop12: { value: `Свойство 12` },
+    prop13: { value: `Свойство 13` },
+    prop14: { value: `Свойство 14` },
+    prop15: { value: `Свойство 15` },
+  }));
+};
+
+export const bigSampleData: TableRow[] = generateSampleData(ROWS_COUNT);

package/src/components/view/VirtualTable/constants/defaultRowHeight.ts

@@ -0,0 +1 @@
+export const defaultRowHeight = 32;

package/src/components/view/VirtualTable/constants/sampleData.ts

@@ -0,0 +1,213 @@
+import dayjs from 'dayjs';
+
+import { TableRow } from '../models/TableRow';
+
+export const sampleData: TableRow[] = [
+  {
+    id: { value: '1' },
+    name: { value: 'Иванов Иван' },
+    age: { value: 25 },
+    email: { value: 'ivan@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: dayjs('1991-12-24').toISOString() },
+    prop2: { value: 'Свойство 2', payload: { index: '1', name: 'Иванов Иван' } },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: 'Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '2' },
+    name: { value: 'Петров Петр' },
+    age: { value: 30 },
+    email: { value: 'petr@example.com' },
+    status: { value: 'Неактивен' },
+    birthday: { value: dayjs('1984-10-10').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: '- Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '3' },
+    name: { value: 'Сидорова Анна' },
+    age: { value: 28 },
+    email: { value: 'anna@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: dayjs('1995-01-01').toISOString() },
+    prop2: { value: 'Свойство 2', payload: { index: '3', name: 'Сидорова Анна' } },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: '' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '4' },
+    name: { value: 'Иванов Илья' },
+    age: { value: 25 },
+    email: { value: 'ivan@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: dayjs('1993-05-23').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: 'Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '5' },
+    name: { value: 'Петров Петр' },
+    age: { value: 30 },
+    email: { value: 'petr@example.com' },
+    status: { value: 'Неактивен' },
+    birthday: { value: dayjs('2000-02-18').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '6' },
+    name: { value: 'Сидорова Анна' },
+    age: { value: 28 },
+    email: { value: 'anna@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: dayjs('1991-07-07').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: '-2 Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '7' },
+    name: { value: 'Иванов Игнат' },
+    age: { value: 27 },
+    email: { value: 'ivan@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: dayjs('1991-12-24').toISOString() },
+    prop2: { value: 'Свойство 2', payload: { index: '7', name: 'Иванов Игнат' } },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: '% Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '8' },
+    name: { value: 'Петров Петр' },
+    age: { value: 26 },
+    email: { value: 'petr@example.com' },
+    status: { value: 'Неактивен' },
+    birthday: { value: dayjs('1990-05-18').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: 'Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '9' },
+    name: { value: 'Сидорова Анна' },
+    age: { value: 15 },
+    email: { value: 'anna@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: dayjs('2000-01-10').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: 'Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '10' },
+    name: { value: 'Иванов Иоан' },
+    age: { value: 26 },
+    email: { value: 'ivan@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: dayjs('2007-07-07').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: 'Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '11' },
+    name: { value: 'Петров Петр' },
+    age: { value: 29 },
+    email: { value: 'petr@example.com' },
+    status: { value: 'Неактивен' },
+    birthday: { value: dayjs('1995-08-26').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: 'Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '12' },
+    name: { value: 'Сидорова Анна' },
+    age: { value: 28 },
+    email: { value: 'anna@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: dayjs('1987-09-30').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: 'Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+  {
+    id: { value: '13' },
+    name: { value: 'Иванов Иван' },
+    age: { value: 25 },
+    email: { value: 'ivan@example.com' },
+    status: { value: 'Активен' },
+    birthday: { value: dayjs('2001-01-01').toISOString() },
+    prop2: { value: 'Свойство 2' },
+    prop3: { value: 'Свойство 3' },
+    prop4: { value: 'Свойство 4' },
+    prop5: { value: 'Свойство 5' },
+    prop6: { value: 'Свойство 6' },
+    prop7: { value: 'Свойство 7' },
+    prop8: { value: 'Свойство 8' },
+    prop9: { value: 'Свойство 9' },
+  },
+];

package/{components/view/VirtualTable/index.d.ts → src/components/view/VirtualTable/index.ts}

@@ -1,4 +1,5 @@
 export { VirtualTable } from './VirtualTable';
+
 export type { AdditionalButton } from './models/AdditionalButton';
 export type { ColumnAlign } from './models/ColumnAlign';
 export type { FilterBy } from './models/FilterBy';
@@ -10,5 +11,5 @@ export type { TableRow } from './models/TableRow';
 export type { VerticalAlign } from './models/VerticalAlign';
 export type { VirtualTableRef } from './models/VirtualTableRef';
 export type { VirtualTableBorders } from './models/VirtualTableBorders';
+
 export { defaultRowHeight } from './constants/defaultRowHeight';
-//# sourceMappingURL=index.d.ts.map

package/src/components/view/VirtualTable/models/AdditionalButton.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+import { TableRow } from './TableRow';
+
+export interface AdditionalButton {
+  title: string;
+  onClick?: (rowIndex: number, original: TableRow) => void;
+  icon: ReactNode;
+  template?: (props: AdditionalButton) => ReactNode;
+}

package/{components/view/VirtualTable/models/ColumnAlign.d.ts → src/components/view/VirtualTable/models/ColumnAlign.ts}

@@ -1,2 +1 @@
 export type ColumnAlign = 'Left' | 'Right' | 'Center';
-//# sourceMappingURL=ColumnAlign.d.ts.map

package/src/components/view/VirtualTable/models/FilterBy.ts

@@ -0,0 +1,11 @@
+/** Активный фильтр по столбцу таблицы */
+export interface FilterBy {
+  /** Имя столбца для фильтрации (id колонки или sortAnotherName, если задан) */
+  columnName: string;
+  /** Тип фильтра: по значениям, числовому диапазону или диапазону дат */
+  type: 'value' | 'numberRange' | 'dateRange';
+  /** Выбранные значения: строки для type=value, [min, max] для numberRange, [startISO, endISO] для dateRange */
+  values: (string | number)[];
+  /** Только для type=value: оставить первую строку для каждого уникального значения столбца */
+  uniqueFirstPerValue?: boolean;
+}

package/src/components/view/VirtualTable/models/SortBy.ts

@@ -0,0 +1,11 @@
+import { SortType } from './SortType';
+
+/** Активная сортировка по столбцу таблицы */
+export interface SortBy {
+  /** Имя столбца для сортировки (id колонки или sortAnotherName, если задан) */
+  columnName: string;
+  /** Направление сортировки */
+  direction: 'asc' | 'desc';
+  /** Тип сравнения значений: alphanumeric — с учётом чисел в строках, locale — лексикографически (по умолчанию) */
+  sortType?: SortType;
+}

package/{components/view/VirtualTable/models/SortType.d.ts → src/components/view/VirtualTable/models/SortType.ts}

@@ -1,2 +1 @@
 export type SortType = 'alphanumeric' | 'locale';
-//# sourceMappingURL=SortType.d.ts.map

package/src/components/view/VirtualTable/models/TableCell.ts

@@ -0,0 +1,12 @@
+export interface TableCell {
+  /** Отображаемое значение ячейки */
+  value?: string | number;
+  /** Дополнительные произвольные данные ячейки (например, для обработчиков событий) */
+  payload?: { [key: string]: string };
+  /** Текст всплывающей подсказки при наведении на ячейку */
+  tooltip?: string;
+  /** Цветовая заливка ячейки: ошибка (красный) или успех (зелёный) */
+  fill?: 'error' | 'success';
+  /** Количество строк, которые объединяет ячейка по вертикали */
+  rowspan?: number;
+}

package/src/components/view/VirtualTable/models/TableColumn.ts

@@ -0,0 +1,52 @@
+import { HTMLInputTypeAttribute } from 'react';
+
+import { ColumnAlign } from './ColumnAlign';
+import { SortType } from './SortType';
+import { VerticalAlign } from './VerticalAlign';
+
+export interface TableColumn {
+  /** Уникальный идентификатор столбца */
+  id: string;
+  /** Ключ доступа к данным строки (по какому полю брать значение для ячейки) */
+  accessorKey?: string;
+  /** Заголовок столбца, отображаемый пользователю */
+  label: string;
+
+  /** Дочерние столбцы (для группировки столбцов под общим заголовком) */
+  columns?: TableColumn[];
+  /** Можно ли редактировать значения ячеек в этом столбце */
+  editable?: boolean;
+  /** Можно ли сортировать таблицу по этому столбцу */
+  sortable?: boolean;
+  /** Тип сортировки (например, по числу, строке или дате) */
+  sortType?: SortType;
+  /** Альтернативное имя поля, используемое при сортировке (если отличается от accessorKey).
+   * Очень специфичная логика, поэтому если не нужно, то не используйте. */
+  sortAnotherName?: string;
+  /** Включить фильтрацию по числовому диапазону */
+  filtrationByNumber?: boolean;
+  /** Включить фильтрацию по дате */
+  filtrationByDate?: boolean;
+  /** Включить фильтрацию по значению */
+  filtrationByValue?: boolean;
+  /** Показывать в фильтре только уникальные значения для выбора */
+  selectUnique?: boolean;
+  /** Ширина столбца в пикселях */
+  width?: number;
+  /** Горизонтальное выравнивание содержимого в заголовке столбца */
+  headerAlign?: ColumnAlign;
+  /** Горизонтальное выравнивание содержимого в ячейках столбца */
+  rowsAlign?: ColumnAlign;
+  /** Функция форматирования значения перед отображением */
+  valueFormat?: (value: string | number | undefined) => string;
+  /** Показывать ли этот столбец в модальном окне */
+  showInModal?: boolean;
+  /** Обработчик клика по ячейке столбца (получает payload ячейки) */
+  onClick?: (payload: { [key: string]: string }) => void;
+  /** Вертикальное выравнивание содержимого в ячейках столбца */
+  verticalAlign?: VerticalAlign;
+  /** Количество знаков после запятой для округления числовых значений */
+  toFixed?: number;
+  /** Тип HTML-поля ввода при редактировании ячейки (text, number, date и т.д.) */
+  inputType?: HTMLInputTypeAttribute;
+}

package/src/components/view/VirtualTable/models/TableRow.ts

@@ -0,0 +1,6 @@
+import { TableCell } from './TableCell';
+
+export interface TableRow {
+  /** Строка таблицы: ключ — идентификатор столбца, значение — ячейка этого столбца */
+  [keys: string]: TableCell;
+}

package/{components/view/VirtualTable/models/VerticalAlign.d.ts → src/components/view/VirtualTable/models/VerticalAlign.ts}

@@ -1,2 +1 @@
 export type VerticalAlign = 'FlexStart' | 'Center' | 'FlexEnd';
-//# sourceMappingURL=VerticalAlign.d.ts.map

package/{components/view/VirtualTable/models/VirtualTableBorders.d.ts → src/components/view/VirtualTable/models/VirtualTableBorders.ts}

@@ -1,2 +1 @@
 export type VirtualTableBorders = 'all' | 'horizontal' | 'vertical' | 'none';
-//# sourceMappingURL=VirtualTableBorders.d.ts.map

package/src/components/view/VirtualTable/models/VirtualTableRef.ts

@@ -0,0 +1,7 @@
+/** Методы, доступные через ref компонента VirtualTable */
+export interface VirtualTableRef {
+  /** Сбросить все активные фильтры */
+  resetFilters: () => void;
+  /** Сбросить пользовательские сортировки (остаётся только внутренняя сортировка по isNew) */
+  resetSorts: () => void;
+}

package/src/components/view/VirtualTable/ui/DateFiltration/DateFiltration.tsx

@@ -0,0 +1,56 @@
+import classnames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+import { Button } from '@components/common/Button';
+import { DateTime } from '@components/common/DateTime';
+import { Tooltip } from '@components/view/Tooltip';
+import { CloseIcon } from '@icons/CloseIcon';
+
+import * as styles from './dateFiltration.module.css';
+
+interface Props {
+  defaultValues?: (string | undefined)[];
+  actionWithSelected: (values: (string | undefined)[]) => void;
+}
+
+export function DateFiltration(props: Props) {
+  const { defaultValues = [undefined, undefined], actionWithSelected } = props;
+  const [values, setValues] = useState<(string | undefined)[]>(defaultValues);
+
+  const handleChangeDates = (newValues: (string | undefined)[]) => {
+    setValues(newValues);
+  };
+
+  useEffect(() => {
+    actionWithSelected(values);
+  }, [values]);
+
+  const resetValues = useCallback(() => {
+    setValues([undefined, undefined]);
+    actionWithSelected([undefined, undefined]);
+  }, []);
+
+  return (
+    <div className={classnames(styles.root)}>
+      <DateTime
+        isPeriod
+        componentSize="small"
+        variant="outlined"
+        fullWidth
+        values={values}
+        onValueChange={handleChangeDates}
+        tabIndex={-1}
+      />
+      <Tooltip label="Сбросить">
+        <Button
+          onClick={resetValues}
+          className={classnames(styles.button)}
+          variant="text"
+          componentSize="small"
+          textSecondary
+          icon={<CloseIcon />}
+        />
+      </Tooltip>
+    </div>
+  );
+}

package/src/components/view/VirtualTable/ui/DateFiltration/dateFiltration.module.css

@@ -0,0 +1,10 @@
+.root {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 16px 8px 0 8px;
+}
+
+.button {
+  flex-shrink: 0;
+}

package/{components/view/VirtualTable/ui/DateFiltration/index.d.ts → src/components/view/VirtualTable/ui/DateFiltration/index.ts}

@@ -1,2 +1 @@
 export { DateFiltration } from './DateFiltration';
-//# sourceMappingURL=index.d.ts.map