@danikokonn/yarik-frontend-lib 2.0.58-test9 → 2.1.0

package/README.md

@@ -1 +1,309 @@
-# YARIK-frontend-lib
+# YARIK-frontend-lib
+
+Библиотека переиспользуемых React-компонентов, утилит и провайдеров.
+
+[![NPM](https://img.shields.io/npm/v/@danikokonn/yarik-frontend-lib)](https://www.npmjs.com/package/@danikokonn/yarik-frontend-lib)
+[![License: Apache-2.0](https://img.shields.io/badge/License-Apache--2.0-blue.svg)](LICENSE)
+
+---
+
+## Содержание
+
+- [Установка](#установка)
+- [Требования](#требования)
+- [Использование](#использование)
+- [Компоненты](#компоненты)
+- [Провайдеры](#провайдеры)
+- [Утилиты и HTTP-клиент](#утилиты-и-http-клиент)
+- [Разработка](#разработка)
+- [Тестирование](#тестирование)
+- [Публикация](#публикация)
+- [Как дополнять README](#как-дополнять-readme)
+
+---
+
+## Установка
+
+```bash
+npm install @danikokonn/yarik-frontend-lib
+```
+
+---
+
+## Требования
+
+| Зависимость | Версия   |
+|-------------|----------|
+| React       | >=18 <20 |
+| react-dom   | >=18 <20 |
+
+MUI, Emotion и остальные зависимости устанавливаются автоматически.
+
+---
+
+## Использование
+
+### Импорт компонентов
+
+```tsx
+import { SmartTable, Navigation, PageWrapper } from '@danikokonn/yarik-frontend-lib';
+```
+
+### Импорт утилит
+
+```tsx
+import { prettyDatetime, getCSRFToken } from '@danikokonn/yarik-frontend-lib/utils';
+```
+
+### Импорт HTTP-клиента
+
+```tsx
+import { get, post } from '@danikokonn/yarik-frontend-lib/http';
+```
+
+### Импорт типов
+
+```tsx
+import type { Dag, DagRun, TaskInstance } from '@danikokonn/yarik-frontend-lib/types';
+```
+
+### Подключение провайдеров
+
+```tsx
+import { SnackBarProvider, SessionProvider } from '@danikokonn/yarik-frontend-lib';
+
+function App() {
+  return (
+    <SessionProvider>
+      <SnackBarProvider>
+        {/* ваше приложение */}
+      </SnackBarProvider>
+    </SessionProvider>
+  );
+}
+```
+
+---
+
+## Компоненты
+
+| Компонент                  | Описание                                                         |
+|----------------------------|------------------------------------------------------------------|
+| `ActionDialog`             | Диалог подтверждения действия с опциональной формой ввода       |
+| `ColumnSearchInput`        | Поле поиска для столбца таблицы                                 |
+| `DateTimeRangePicker`      | Выбор диапазона дат и времени                                   |
+| `DatetimeRangeInput`       | Ввод диапазона дата/время                                       |
+| `Footer`                   | Нижний колонтитул страницы                                      |
+| `IpAddressInput`           | Поле ввода IP-адреса с валидацией                               |
+| `IpAddressSwitchableInput` | Переключаемое поле ввода IP-адреса                              |
+| `LocalizedDatetimePicker`  | Выбор даты/времени с поддержкой часовых поясов                  |
+| `Navigation`               | Навигационная панель с поддержкой меню                          |
+| `NumberRangeInput`         | Ввод числового диапазона                                        |
+| `PageWrapper`              | Обёртка страницы (Navigation + контент + Footer)                |
+| `RichFilterTextField`      | Расширенное поле фильтрации с историей и подсказками            |
+| `SmartTable`               | Виртуализированная таблица с сортировкой, пагинацией, фильтрами |
+| `SortBtn`                  | Кнопка сортировки                                               |
+| `SubtaskItem`              | Отображение элемента подзадачи                                  |
+| `TaskLoader`               | Компонент состояния загрузки                                    |
+| `TaskStateDialog`          | Диалог отображения состояния задачи                             |
+
+### Иконки
+
+Доступны 9 SVG-иконок: `GenerateAndRunIcon`, `GenerateIcon`, `IntegerIcon`, `ProcessingIcon`, `QueueIcon`, `RangeIcon`, `RunIcon`, `TextModeIcon`, `TreeModeIcon`.
+
+```tsx
+import { RunIcon } from '@danikokonn/yarik-frontend-lib/components/icons/RunIcon';
+```
+
+---
+
+## Провайдеры
+
+### SnackBarProvider
+
+Контекст уведомлений на основе notistack.
+
+```tsx
+import { SnackBarProvider, useSnackbarContext } from '@danikokonn/yarik-frontend-lib';
+
+function MyComponent() {
+  const { enqueueSnackbar } = useSnackbarContext();
+
+  return (
+    <button onClick={() => enqueueSnackbar('Успешно!', { variant: 'success' })}>
+      Показать уведомление
+    </button>
+  );
+}
+```
+
+Доступные варианты: `default`, `error`, `success`, `warning`, `info`.
+
+### SessionProvider
+
+Управление состоянием сессии и аутентификации.
+
+### AirflowProvider
+
+Контекст интеграции с Apache Airflow.
+
+### DagStateProvider
+
+Управление состоянием DAG-рабочих процессов.
+
+---
+
+## Утилиты и HTTP-клиент
+
+### Утилиты (`/utils`)
+
+```tsx
+import {
+  prettyDatetime,   // форматирование даты/времени для отображения
+  formatDate,       // форматирование даты
+  formatDuration,   // форматирование длительности
+  getCSRFToken,     // получение CSRF-токена
+  setCSRFToken,     // установка CSRF-токена
+  useDebounce,      // хук debounce
+  gettextTS,        // i18n: перевод строки
+  ngettextTS,       // i18n: перевод с учётом числа
+} from '@danikokonn/yarik-frontend-lib/utils';
+```
+
+### HTTP-клиент (`/http`)
+
+Fetch-обёртка с поддержкой CSRF и автоматическим определением истечения сессии (401).
+
+```tsx
+import { get, post } from '@danikokonn/yarik-frontend-lib/http';
+
+const data = await get('/api/endpoint');
+await post('/api/endpoint', { key: 'value' });
+```
+
+---
+
+## Разработка
+
+### Установка зависимостей
+
+```bash
+npm install
+```
+
+### Сборка
+
+```bash
+npm run build
+```
+
+Компилирует TypeScript в `dist/`. Декларации типов генерируются автоматически.
+
+### Добавление нового компонента
+
+Создайте папку `src/components/<ComponentName>/` со структурой:
+
+```
+src/components/MyComponent/
+├── MyComponent.tsx       # компонент
+├── MyComponentProps.ts   # интерфейс пропсов
+├── MyComponent.test.tsx  # тесты (обязательно, см. раздел «Тестирование»)
+└── index.ts              # export { default } from './MyComponent'
+```
+
+Добавьте экспорт в `src/components/index.ts`.
+
+---
+
+## Тестирование
+
+Проект использует [Vitest](https://vitest.dev/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
+
+### Запуск тестов
+
+```bash
+npm test           # watch-режим (разработка)
+npm run test:run   # однократный запуск (CI)
+npm run coverage   # запуск с отчётом о покрытии
+```
+
+### Структура тестов
+
+Тестовые файлы располагаются рядом с компонентом (`*.test.tsx`) и автоматически подхватываются Vitest.
+
+```
+src/components/SortBtn/
+├── SortBtn.tsx
+├── SortBtnProps.ts
+├── SortBtn.test.tsx   ← тесты
+└── index.ts
+```
+
+### Обязательный плейсхолдер
+
+При создании нового компонента **всегда** создавайте файл `<ComponentName>.test.tsx` рядом с компонентом — даже если тесты пока не написаны:
+
+```tsx
+import { render } from '@testing-library/react'
+import MyComponent from './MyComponent'
+
+describe('MyComponent', () => {
+  /**
+   * Проверяем, что компонент рендерится без ошибок с обязательными пропсами.
+   * Базовая страховка от синтаксических и runtime-ошибок при первом рендере.
+   */
+  it.todo('renders correctly')
+})
+```
+
+Это сигнализирует о том, что компонент ещё не покрыт тестами, и не даёт файлу «потеряться».
+
+### Описание тест-кейсов
+
+Каждый блок `it` (в том числе `it.todo`) должен предваряться JSDoc-комментарием, объясняющим **что** тестируется и **зачем**. Названия теста недостаточно — комментарий должен отвечать на вопрос «что сломается в продакшене, если этот тест упадёт»:
+
+```tsx
+/**
+ * Проверяем, что первый клик из состояния "none" вызывает onToggleSort с направлением "asc".
+ * Это начало трёхступенчатого цикла: none → asc → desc → none.
+ * Callback должен получать и поле, и новое направление, чтобы родитель мог обновить свой стейт.
+ */
+it('calls onToggleSort with asc when order is none', async () => {
+  // ...
+})
+```
+
+Правило распространяется на все тесты — и реальные, и заглушки `it.todo`.
+
+### Конфигурация
+
+| Файл | Назначение |
+|------|------------|
+| `vitest.config.ts` | Основная конфигурация Vitest |
+| `src/test/setup.ts` | Подключение `@testing-library/jest-dom` |
+| `tsconfig.test.json` | TypeScript-конфигурация для тестов |
+
+---
+
+## Публикация
+
+Публикация выполняется автоматически через GitHub Actions при создании релиза.
+
+| Тип релиза  | NPM-тег  |
+|-------------|----------|
+| Pre-release | `test`   |
+| Release     | `latest` |
+
+Версия берётся из git-тега и подставляется в `package.json` во время CI-сборки.
+
+---
+
+## Как дополнять README
+
+Добавляйте информацию в соответствующий раздел. Если раздела нет — создайте новый перед этим разделом.
+
+**Рекомендации:**
+- Каждый новый компонент — строка в таблицу раздела «Компоненты» с кратким описанием.
+- Каждый новый провайдер — подраздел в «Провайдеры» с примером использования.
+- Новые утилиты — добавить в список импортов раздела «Утилиты».
+- Примеры кода должны быть минимальными и рабочими.

package/dist/components/ActionDialog/ActionDialog.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import ActionDialogProps from "./ActionDialogProps";
 /**
  * Диалоговое окно с подтверждением действия.
@@ -19,5 +18,5 @@ import ActionDialogProps from "./ActionDialogProps";
  * @param onClose Обработчик закрытия диалога
  * @param onConfirm Обработчик подтверждения
  */
-export default function ActionDialog({ open, fullWidth, maxWidth, title, contentText, contentInputForm, cancelText, confirmText, confirmAllowed, confirmTooltipTitle, onClose, onConfirm, }: ActionDialogProps): React.JSX.Element;
+export default function ActionDialog({ open, fullWidth, maxWidth, title, contentText, cancelText, confirmText, confirmAllowed, confirmTooltipTitle, children, onClose, onConfirm, }: ActionDialogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ActionDialog.d.ts.map

package/dist/components/ActionDialog/ActionDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDialog/ActionDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,OAAO,EACP,SAAS,GACV,EAAE,iBAAiB,qBAiDnB"}
+{"version":3,"file":"ActionDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDialog/ActionDialog.tsx"],"names":[],"mappings":"AASA,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,EACX,UAAU,EACV,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,iBAAiB,2CAiDnB"}

package/dist/components/ActionDialog/ActionDialog.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CloseIcon from "@mui/icons-material/Close";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -27,22 +27,11 @@ import Tooltip from "@mui/material/Tooltip";
  * @param onClose Обработчик закрытия диалога
  * @param onConfirm Обработчик подтверждения
  */
-export default function ActionDialog({ open, fullWidth, maxWidth, title, contentText, contentInputForm, cancelText, confirmText, confirmAllowed, confirmTooltipTitle, onClose, onConfirm, }) {
-    return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: maxWidth, fullWidth: fullWidth },
-        React.createElement(DialogTitle, null, title),
-        React.createElement(IconButton, { "aria-label": "close", onClick: onClose, sx: (theme) => ({
-                position: "absolute",
-                right: 8,
-                top: 8,
-                color: theme.palette.grey[500],
-            }) },
-            React.createElement(CloseIcon, null)),
-        React.createElement(DialogContent, null,
-            typeof contentText === "string" ? (React.createElement(DialogContentText, null, contentText)) : (contentText.map((t, idx) => (React.createElement(DialogContentText, { key: idx }, t)))),
-            contentInputForm),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { color: "secondary", onClick: onClose }, cancelText),
-            React.createElement(Tooltip, { title: confirmTooltipTitle, enterDelay: 400, placement: "top" },
-                React.createElement("span", { tabIndex: 0, style: { display: "inline-block" } },
-                    React.createElement(Button, { color: "primary", onClick: onConfirm, disabled: !confirmAllowed }, confirmText))))));
+export default function ActionDialog({ open, fullWidth, maxWidth, title, contentText, cancelText, confirmText, confirmAllowed, confirmTooltipTitle, children, onClose, onConfirm, }) {
+    return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: maxWidth, fullWidth: fullWidth, children: [_jsx(DialogTitle, { children: title }), _jsx(IconButton, { "aria-label": "close", onClick: onClose, sx: (theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    color: theme.palette.grey[500],
+                }), children: _jsx(CloseIcon, {}) }), _jsxs(DialogContent, { children: [typeof contentText === "string" ? (_jsx(DialogContentText, { children: contentText })) : (contentText.map((t, idx) => (_jsx(DialogContentText, { children: t }, idx)))), children] }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "secondary", onClick: onClose, children: cancelText }), _jsx(Tooltip, { title: confirmTooltipTitle, enterDelay: 400, placement: "top", children: _jsx("span", { tabIndex: 0, style: { display: "inline-block" }, children: _jsx(Button, { color: "primary", onClick: onConfirm, disabled: !confirmAllowed, children: confirmText }) }) })] })] }));
 }

package/dist/components/ActionDialog/ActionDialogProps.d.ts

@@ -1,4 +1,3 @@
-import { ReactNode } from "react";
 import { Breakpoint } from "@mui/material";
 /**
  * Пропсы для компонента ActionDialog.
@@ -14,8 +13,6 @@ export default interface ActionDialogProps {
     title: string;
     /** Основной текст диалога (строка или массив строк) */
     contentText: string | string[];
-    /** Необязательная форма или элемент ввода для отображения в диалоге */
-    contentInputForm?: ReactNode;
     /** Текст для кнопки отмены */
     cancelText: string;
     /** Текст для кнопки подтверждения */
@@ -28,5 +25,6 @@ export default interface ActionDialogProps {
     onConfirm(): void;
     /** Обработчик закрытия диалога */
     onClose(): void;
+    children?: React.ReactNode | React.ReactNode[];
 }
 //# sourceMappingURL=ActionDialogProps.d.ts.map

package/dist/components/ActionDialog/ActionDialogProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDialogProps.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDialog/ActionDialogProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,OAAO,WAAW,iBAAiB;IACxC,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,8BAA8B;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,cAAc,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+BAA+B;IAC/B,SAAS,IAAI,IAAI,CAAC;IAClB,kCAAkC;IAClC,OAAO,IAAI,IAAI,CAAC;CACjB"}
+{"version":3,"file":"ActionDialogProps.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDialog/ActionDialogProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,OAAO,WAAW,iBAAiB;IACxC,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,cAAc,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+BAA+B;IAC/B,SAAS,IAAI,IAAI,CAAC;IAClB,kCAAkC;IAClC,OAAO,IAAI,IAAI,CAAC;IAEhB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;CAChD"}

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

@@ -1,5 +1,5 @@
-export { default } from "./ActionDialog";
 export * from "./ActionDialog";
-export { default as ActionDialogProps } from "./ActionDialogProps";
+export { default } from "./ActionDialog";
 export * from "./ActionDialogProps";
+export { type default as ActionDialogProps } from "./ActionDialogProps";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ActionDialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAE/B,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,KAAK,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/ActionDialog/index.js

@@ -1,3 +1,3 @@
-export { default } from "./ActionDialog";
 export * from "./ActionDialog";
+export { default } from "./ActionDialog";
 export * from "./ActionDialogProps";

package/dist/components/ColumnSearchInput/ColumnSearchInput.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import ColumnSearchInputProps from "./ColumnSearchInputProps";
 /**
  * Компонент поля поиска для таблицы или списка.
@@ -12,5 +11,5 @@ import ColumnSearchInputProps from "./ColumnSearchInputProps";
  *
  * @returns {JSX.Element} Элемент поля поиска
  */
-export default function ColumnSearchInput({ field, searchStr, onInputSearch, }: ColumnSearchInputProps): React.JSX.Element;
+export default function ColumnSearchInput({ field, searchStr, onInputSearch, }: ColumnSearchInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ColumnSearchInput.d.ts.map

package/dist/components/ColumnSearchInput/ColumnSearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/ColumnSearchInput/ColumnSearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAE9D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,KAAK,EACL,SAAS,EACT,aAAa,GACd,EAAE,sBAAsB,qBA4BxB"}
+{"version":3,"file":"ColumnSearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/ColumnSearchInput/ColumnSearchInput.tsx"],"names":[],"mappings":"AAIA,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAE9D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,KAAK,EACL,SAAS,EACT,aAAa,GACd,EAAE,sBAAsB,2CA4BxB"}

package/dist/components/ColumnSearchInput/ColumnSearchInput.js

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import SearchIcon from "@mui/icons-material/Search";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
-import SearchIcon from "@mui/icons-material/Search";
+import { useState } from "react";
 /**
  * Компонент поля поиска для таблицы или списка.
  *
@@ -21,10 +22,9 @@ export default function ColumnSearchInput({ field, searchStr, onInputSearch, })
         onInputSearch([{ field: field, search: newSearch }]);
         setSearch(newSearch);
     }
-    return (React.createElement(TextField, { size: "small", type: "search", value: search, onChange: handleChange, variant: "standard", fullWidth: true, slotProps: {
+    return (_jsx(TextField, { size: "small", type: "search", value: search, onChange: handleChange, variant: "standard", fullWidth: true, slotProps: {
             input: {
-                startAdornment: (React.createElement(InputAdornment, { position: "start" },
-                    React.createElement(SearchIcon, null))),
+                startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, {}) })),
             },
         } }));
 }

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

@@ -1,5 +1,5 @@
-export { default } from "./ColumnSearchInput";
 export * from "./ColumnSearchInput";
-export { default as ColumnSearchInputProps } from "./ColumnSearchInputProps";
+export { default } from "./ColumnSearchInput";
 export * from "./ColumnSearchInputProps";
+export { type default as ColumnSearchInputProps } from "./ColumnSearchInputProps";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ColumnSearchInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColumnSearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AAEpC,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColumnSearchInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,KAAK,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/ColumnSearchInput/index.js

@@ -1,3 +1,3 @@
-export { default } from "./ColumnSearchInput";
 export * from "./ColumnSearchInput";
+export { default } from "./ColumnSearchInput";
 export * from "./ColumnSearchInputProps";

package/dist/components/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
-import DateTimeRangePickerProps from "./DateTimeRangePickerProps";
 import "moment/locale/ru";
-export default function DateTimeRangePicker({ disableFuture, disabled, fromDatetime, toDateTime, required, error, onStartDateSet, onEndDateSet, }: DateTimeRangePickerProps): React.JSX.Element;
+import DateTimeRangePickerProps from "./DateTimeRangePickerProps";
+export default function DateTimeRangePicker({ disableFuture, disabled, fromDatetime, toDateTime, required, error, onStartDateSet, onEndDateSet, }: DateTimeRangePickerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateTimeRangePicker.d.ts.map

package/dist/components/DateTimeRangePicker/DateTimeRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAElE,OAAO,kBAAkB,CAAC;AAU1B,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,KAAK,EACL,cAAc,EACd,YAAY,GACb,EAAE,wBAAwB,qBAmF1B"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAOA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,KAAK,EACL,cAAc,EACd,YAAY,GACb,EAAE,wBAAwB,2CAmF1B"}

package/dist/components/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,51 +1,48 @@
-import React, { useState } from "react";
-import moment from "moment-timezone";
-import "moment/locale/ru";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Stack from "@mui/material/Stack";
 import { DesktopDateTimePicker, LocalizationProvider, } from "@mui/x-date-pickers";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
-import { useDebounce } from "../../utils";
+import moment from "moment-timezone";
+import "moment/locale/ru";
+import { useState } from "react";
 export default function DateTimeRangePicker({ disableFuture, disabled, fromDatetime, toDateTime, required, error, onStartDateSet, onEndDateSet, }) {
     const [fromDatetimePickerOpen, setFromDatetimePickerOpen] = useState(false);
     const [toDatetimePickerOpen, setToDatetimePickerOpen] = useState(false);
     const fromDttm = fromDatetime.length > 0 ? moment(fromDatetime) : null;
     const toDttm = toDateTime.length > 0 ? moment(toDateTime) : null;
-    return (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, adapterLocale: "ru", dateLibInstance: moment },
-        React.createElement(Stack, { direction: "row", sx: { m: 2 }, spacing: 2 },
-            React.createElement(DesktopDateTimePicker, { disabled: disabled, open: fromDatetimePickerOpen, reduceAnimations: true, onChange: useDebounce((v, _c) => {
-                    onStartDateSet((v && v.toISOString(true)) || "");
-                }, 200), disableFuture: disableFuture, views: ["year", "month", "day", "hours", "minutes", "seconds"], timezone: "Europe/Moscow", ampm: false, ampmInClock: false, value: fromDttm, timeSteps: { hours: 1, minutes: 1, seconds: 1 }, slotProps: {
-                    field: {
-                        clearable: true,
-                    },
-                    textField: {
-                        label: "С",
-                        variant: "standard",
-                        required: required,
-                        helperText: required && fromDttm == null && "Введите дату начала интервала",
-                        error: error || (required && toDttm == null),
-                    },
-                    inputAdornment: {
-                        position: "start",
-                        onClick: () => setFromDatetimePickerOpen(true),
-                    },
-                }, onClose: () => setFromDatetimePickerOpen(false) }),
-            React.createElement(DesktopDateTimePicker, { disabled: disabled, open: toDatetimePickerOpen, reduceAnimations: true, onChange: useDebounce((v, _c) => {
-                    onEndDateSet((v && v.toISOString(true)) || "");
-                }, 200), disableFuture: disableFuture, views: ["year", "month", "day", "hours", "minutes", "seconds"], timezone: "Europe/Moscow", ampm: false, ampmInClock: false, timeSteps: { hours: 1, minutes: 1, seconds: 1 }, value: toDttm, slotProps: {
-                    field: {
-                        clearable: true,
-                    },
-                    textField: {
-                        label: "По",
-                        variant: "standard",
-                        required: required,
-                        helperText: required && toDttm == null && "Введите дату конца интервала",
-                        error: error || (required && toDttm == null),
-                    },
-                    inputAdornment: {
-                        onClick: () => setToDatetimePickerOpen(true),
-                        position: "start",
-                    },
-                }, onClose: () => setToDatetimePickerOpen(false) }))));
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterMoment, adapterLocale: "ru", dateLibInstance: moment, children: _jsxs(Stack, { direction: "row", sx: { m: 2 }, spacing: 2, children: [_jsx(DesktopDateTimePicker, { disabled: disabled, open: fromDatetimePickerOpen, reduceAnimations: true, onChange: (v, _c) => {
+                        onStartDateSet((v && v.toISOString(true)) || "");
+                    }, disableFuture: disableFuture, views: ["year", "month", "day", "hours", "minutes", "seconds"], timezone: "Europe/Moscow", ampm: false, ampmInClock: false, value: fromDttm, timeSteps: { hours: 1, minutes: 1, seconds: 1 }, slotProps: {
+                        field: {
+                            clearable: true,
+                        },
+                        textField: {
+                            label: "С",
+                            variant: "standard",
+                            required: required,
+                            helperText: required && fromDttm == null && "Введите дату начала интервала",
+                            error: error || (required && toDttm == null),
+                        },
+                        inputAdornment: {
+                            position: "start",
+                            onClick: () => setFromDatetimePickerOpen(true),
+                        },
+                    }, onClose: () => setFromDatetimePickerOpen(false) }), _jsx(DesktopDateTimePicker, { disabled: disabled, open: toDatetimePickerOpen, reduceAnimations: true, onChange: (v, _c) => {
+                        onEndDateSet((v && v.toISOString(true)) || "");
+                    }, disableFuture: disableFuture, views: ["year", "month", "day", "hours", "minutes", "seconds"], timezone: "Europe/Moscow", ampm: false, ampmInClock: false, timeSteps: { hours: 1, minutes: 1, seconds: 1 }, value: toDttm, slotProps: {
+                        field: {
+                            clearable: true,
+                        },
+                        textField: {
+                            label: "По",
+                            variant: "standard",
+                            required: required,
+                            helperText: required && toDttm == null && "Введите дату конца интервала",
+                            error: error || (required && toDttm == null),
+                        },
+                        inputAdornment: {
+                            onClick: () => setToDatetimePickerOpen(true),
+                            position: "start",
+                        },
+                    }, onClose: () => setToDatetimePickerOpen(false) })] }) }));
 }

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

@@ -1,5 +1,5 @@
-export { default } from "./DateTimeRangePicker";
 export * from "./DateTimeRangePicker";
-export { default as DateTimeRangePickerProps } from "./DateTimeRangePickerProps";
+export { default } from "./DateTimeRangePicker";
 export * from "./DateTimeRangePickerProps";
+export { type default as DateTimeRangePickerProps } from "./DateTimeRangePickerProps";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/DateTimeRangePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateTimeRangePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateTimeRangePicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,KAAK,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/DateTimeRangePicker/index.js

@@ -1,3 +1,3 @@
-export { default } from "./DateTimeRangePicker";
 export * from "./DateTimeRangePicker";
+export { default } from "./DateTimeRangePicker";
 export * from "./DateTimeRangePickerProps";

package/dist/components/DatetimeRangeInput/DatetimeRangeInput.d.ts

@@ -1,4 +1,5 @@
 import "moment/locale/ru";
+import { JSX } from "react";
 import DatetimeRangeInputProps from "./DatetimeRangeInputProps";
 /**
  * Компонент выбора диапазона дат и времени.

package/dist/components/DatetimeRangeInput/DatetimeRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatetimeRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/DatetimeRangeInput/DatetimeRangeInput.tsx"],"names":[],"mappings":"AAGA,OAAO,kBAAkB,CAAC;AAQ1B,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAQhE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,cAAc,EACd,IAAI,EACJ,EAAE,EACF,OAAO,EACP,EAAE,EACF,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAiHvC"}
+{"version":3,"file":"DatetimeRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/DatetimeRangeInput/DatetimeRangeInput.tsx"],"names":[],"mappings":"AAOA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAoC,MAAM,OAAO,CAAC;AAE9D,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAKhE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,cAAc,EACd,IAAI,EACJ,EAAE,EACF,OAAO,EACP,EAAE,EACF,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAiHvC"}