skillgrid 0.0.34-dev-40511-42085-40506-alert-placeholder-modal-fix.1213385 → 0.0.34-dev-40511-42085-40506-alert-placeholder-modal-fix.1217629

package/dist/components/Dialog/Dialog.d.ts

@@ -1,8 +1,17 @@
 import { DialogProps } from './Dialog.type';
 /**
- * Базовый компонент диалогового окна.
- * Обеспечивает управление состоянием, фокусом и позиционированием.
- * Является основой для более сложных компонентов, таких как Modal.
+ * Компонент `Dialog` представляет собой модальное окно, которое можно использовать для
+ * отображения важной информации, форм или для запроса подтверждения от пользователя.
+ *
+ * Он использует `Floating UI` для позиционирования, управляет фокусом внутри себя,
+ * блокирует прокрутку основного контента и предоставляет анимации открытия/закрытия.
+ *
+ * Это полностью контролируемый компонент: его видимостью нужно управлять через пропсы `open` и `onOpenChange`.
+ * Поддерживает различные варианты размещения на экране, закрытие перетаскиванием и другие возможности кастомизации.
+ *
+ * @param {DialogProps} props - Пропсы компонента.
+ * @param {React.Ref<HTMLDivElement>} outerRef - Внешний ref, который будет перенаправлен на корневой DOM-элемент диалога.
+ * @returns {JSX.Element | null} Рендерит диалог или `null`, если он закрыт (и анимация закрытия завершена).
  */
 declare const Dialog: import('react').ForwardRefExoticComponent<DialogProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Dialog };

package/dist/components/Dialog/Dialog.type.d.ts

@@ -1,37 +1,53 @@
 import { ComponentProps, HTMLProps } from 'react';
 import { FloatingOverlay, FloatingPortalProps } from '@floating-ui/react';
-/** Тип позиционирования диалогового окна. */
-export type DialogPlacement = 'default' | 'default-stretched' | 'center' | 'center-stretched' | 'mobile' | 'right-drawer' | 'left-drawer';
+/**
+ * Определяет вариант расположения диалогового окна на экране.
+ * - `default`: Вверху экрана с вертикальными и горизонтальными отступами.
+ * - `default-stretched`: Вверху экрана, растянуто по ширине.
+ * - `center`: Строго по центру экрана.
+ * - `center-stretched`: По центру экрана, растянуто по ширине.
+ * - `bottom-sheet`: Внизу экрана (адаптивный вариант для мобильных устройств).
+ * - `right-drawer`: У правого края экрана (похоже на "шторку" или "сайдбар").
+ * - `left-drawer`: У левого края экрана.
+ */
+export type DialogPlacement = 'default' | 'default-stretched' | 'center' | 'center-stretched' | 'bottom-sheet' | 'bottom-left' | 'bottom-right' | 'right-drawer' | 'left-drawer';
 /** Пропсы для компонента Dialog. */
 export interface DialogProps extends Pick<HTMLProps<HTMLDivElement>, 'className' | 'style' | 'children'> {
-    /** Контролируемое состояние открытия. */
+    /** Определяет, открыт ли диалог. Компонент является полностью контролируемым. */
     open: boolean;
-    /** Callback при изменении состояния. */
+    /** Функция обратного вызова, вызываемая при попытке закрытия диалога (клик на оверлей, Escape). */
     onOpenChange: (open: boolean) => void;
     /**
-     * Позиционирование диалога.
+     * Определяет, где на экране будет отображаться диалог.
      * @default 'default'
      */
     placement?: DialogPlacement;
     /**
-     * Отключить закрытие по клику вне диалога.
+     * Если `true`, клик за пределами диалога не будет его закрывать.
      * @default false
      */
     disableOutsideClick?: boolean;
     /**
-     * Отключить закрытие по Escape.
+     * Если `true`, нажатие клавиши Escape не будет закрывать диалог.
      * @default false
      */
     disableEscapeKey?: boolean;
     /**
-     * Отключить рендеринг оверлея.
+     * Если `true`, полупрозрачный фон (оверлей) не будет отображаться.
      * @default false
      * */
     disableOverlay?: boolean;
-    /** testId для тестирования. */
+    /** Позволяет закрывать диалог перетаскиванием. Принимает объект с настройками. */
+    closeOnDrag?: {
+        /** Минимальное смещение в пикселях, необходимое для закрытия диалога. @default 80 */
+        threshold: number;
+        /** Направление, в котором нужно 'смахнуть' диалог для закрытия. */
+        direction: 'top' | 'left' | 'right' | 'bottom';
+    };
+    /** Идентификатор для использования в автоматизированных тестах. */
     'data-testid'?: string;
-    /** Пропсы для оверлея. */
+    /** Дополнительные пропсы для кастомизации оверлея (фона). */
     overlayProps?: Pick<ComponentProps<typeof FloatingOverlay>, 'lockScroll' | 'className' | 'style'>;
-    /** Пропсы для портала */
+    /** Дополнительные пропсы для `FloatingPortal`, который используется для рендеринга диалога. */
     portalProps?: FloatingPortalProps;
 }

package/dist/components/Dialog/lib/index.d.ts

@@ -1 +1,2 @@
 export { useDialog } from './use-dialog';
+export { useDialogDraggable } from './use-dialog-draggable';

package/dist/components/Dialog/lib/use-dialog-draggable.d.ts

@@ -0,0 +1,42 @@
+import { DialogProps } from '../Dialog.type';
+import { CSSProperties } from 'react';
+type UseDialogDraggableOptions = Required<Pick<DialogProps, 'placement' | 'open' | 'disableOutsideClick' | 'disableEscapeKey' | 'onOpenChange' | 'closeOnDrag'>>;
+/**
+ * Хук для управления диалогом с возможностью закрытия через 'смахивание' (drag-to-close).
+ * Оборачивает `useDialog` и добавляет обработчики событий указателя (`PointerEvents`)
+ * для отслеживания перетаскивания и закрытия диалога при превышении порога.
+ *
+ * @param {UseDialogDraggableOptions} options - Опции для конфигурации хука.
+ * @returns Возвращает объект с данными и пропсами, аналогичный `useDialog`,
+ * но с модифицированными `transitionStyles` и `getFloatingProps` для поддержки перетаскивания.
+ */
+export declare function useDialogDraggable({ open, onOpenChange, placement, disableOutsideClick, disableEscapeKey, closeOnDrag, }: UseDialogDraggableOptions): {
+    isMounted: boolean;
+    context: {
+        x: number;
+        y: number;
+        placement: import('@floating-ui/utils').Placement;
+        strategy: import('@floating-ui/utils').Strategy;
+        middlewareData: import('@floating-ui/core').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    transitionStyles: CSSProperties;
+    getFloatingProps: <T extends object>(userProps: T) => Record<string, unknown>;
+};
+export {};

package/dist/components/Dialog/lib/use-dialog.d.ts

@@ -2,16 +2,28 @@ import { Placement } from '@floating-ui/react';
 import { DialogProps } from '../Dialog.type';
 type UseDialogOptions = Pick<DialogProps, 'placement' | 'open' | 'disableOutsideClick' | 'disableEscapeKey' | 'onOpenChange'>;
 /**
- * Хук для управления состоянием и взаимодействиями диалогового окна.
- * Инкапсулирует логику Floating UI для позиционирования, анимаций и закрытия.
- * @returns {object} Объект со свойствами и хендлерами для управления диалогом.
+ * Базовый хук для управления состоянием и поведением диалога.
+ * Отвечает за логику открытия/закрытия, позиционирование с помощью `Floating UI`,
+ * применение анимаций перехода и обработку событий закрытия (клик снаружи, Escape).
+ * Не включает логику перетаскивания.
+ *
+ * @param {UseDialogOptions} options - Опции для конфигурации хука.
+ * @returns {{
+ *   isMounted: boolean;
+ *   transitionStyles: import('react').CSSProperties;
+ *   context: any;
+ *   refs: any;
+ *   getFloatingProps: <T extends object>(userProps: T) => T;
+ * }} Объект с данными и пропсами для `Floating UI`.
+ *    - `isMounted`: Флаг для условного рендеринга с поддержкой анимации закрытия.
+ *    - `transitionStyles`: CSS-стили для анимации.
+ *    - `context`: Контекст `Floating UI`.
+ *    - `refs`: Ссылки на DOM-элементы для `Floating UI`.
+ *    - `getFloatingProps`: Функция для получения пропсов, которые нужно передать на элемент диалога.
  */
 export declare function useDialog({ open, onOpenChange, placement, disableOutsideClick, disableEscapeKey, }: UseDialogOptions): {
-    /** Состояние для условного рендеринга с поддержкой анимации закрытия. */
     isMounted: boolean;
-    /** Стили для CSS-переходов (анимации). */
     transitionStyles: import('react').CSSProperties;
-    /** Контекст Floating UI. */
     context: {
         x: number;
         y: number;
@@ -30,14 +42,12 @@ export declare function useDialog({ open, onOpenChange, placement, disableOutsid
         refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
         elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     };
-    /** Ссылки на элементы для Floating UI. */
     refs: {
         reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
         floating: React.MutableRefObject<HTMLElement | null>;
         setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
         setFloating: (node: HTMLElement | null) => void;
     } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
-    /** Пропсы для плавающего элемента. */
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
 };
 export {};

package/dist/components/Modal/Modal.type.d.ts

@@ -2,7 +2,7 @@ import { DialogProps } from '../Dialog';
 import { FC, HTMLProps, PropsWithChildren, ReactNode } from 'react';
 import { ButtonProps } from '../Button';
 /** Поля модального окна для стилизации. */
-type ModalFields = 'container' | 'title' | 'subTitle' | 'content' | 'footer' | 'header';
+type ModalFields = 'container' | 'title' | 'subTitle' | 'content' | 'footer' | 'header' | 'grabber';
 /** Пропсы компонента Modal. @extends DialogProps */
 export interface ModalProps extends DialogProps {
     /** Заголовок модального окна. */