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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19,7 +19,7 @@ export interface AlertProps extends Pick<DialogProps, 'placement' | 'open' | 'on
19
19
  /** Заголовок Alert. */
20
20
  title: ReactNode;
21
21
  /** Основной контент/описание Alert. */
22
- description: ReactNode;
22
+ description?: ReactNode;
23
23
  /** ID для тестирования. */
24
24
  'data-testid'?: string;
25
25
  }
@@ -10,7 +10,7 @@ import { FloatingOverlay, FloatingPortalProps } from '@floating-ui/react';
10
10
  * - `right-drawer`: У правого края экрана (похоже на "шторку" или "сайдбар").
11
11
  * - `left-drawer`: У левого края экрана.
12
12
  */
13
- export type DialogPlacement = 'default' | 'default-stretched' | 'center' | 'center-stretched' | 'bottom-sheet' | 'bottom-left' | 'bottom-right' | 'right-drawer' | 'left-drawer';
13
+ export type DialogPlacement = 'default' | 'center' | 'bottom-sheet' | 'bottom-left' | 'bottom-right' | 'right-drawer' | 'left-drawer';
14
14
  /** Пропсы для компонента Dialog. */
15
15
  export interface DialogProps extends Pick<HTMLProps<HTMLDivElement>, 'className' | 'style' | 'children'> {
16
16
  /** Определяет, открыт ли диалог. Компонент является полностью контролируемым. */
@@ -23,7 +23,7 @@ export interface DialogProps extends Pick<HTMLProps<HTMLDivElement>, 'className'
23
23
  */
24
24
  placement?: DialogPlacement;
25
25
  /**
26
- * Если `true`, клик за пределами диалога не будет его закрывать.
26
+ * Если `true`, клик по OVERLAY диалога не будет его закрывать.
27
27
  * @default false
28
28
  */
29
29
  disableOutsideClick?: boolean;
@@ -1,6 +1,6 @@
1
1
  import { DialogProps } from '../Dialog.type';
2
2
  import { CSSProperties } from 'react';
3
- type UseDialogDraggableOptions = Required<Pick<DialogProps, 'placement' | 'open' | 'disableOutsideClick' | 'disableEscapeKey' | 'onOpenChange' | 'closeOnDrag'>>;
3
+ type UseDialogDraggableOptions = Pick<DialogProps, 'placement' | 'open' | 'disableEscapeKey' | 'onOpenChange' | 'closeOnDrag'>;
4
4
  /**
5
5
  * Хук для управления диалогом с возможностью закрытия через 'смахивание' (drag-to-close).
6
6
  * Оборачивает `useDialog` и добавляет обработчики событий указателя (`PointerEvents`)
@@ -10,7 +10,7 @@ type UseDialogDraggableOptions = Required<Pick<DialogProps, 'placement' | 'open'
10
10
  * @returns Возвращает объект с данными и пропсами, аналогичный `useDialog`,
11
11
  * но с модифицированными `transitionStyles` и `getFloatingProps` для поддержки перетаскивания.
12
12
  */
13
- export declare function useDialogDraggable({ open, onOpenChange, placement, disableOutsideClick, disableEscapeKey, closeOnDrag, }: UseDialogDraggableOptions): {
13
+ export declare function useDialogDraggable({ open, onOpenChange, placement, disableEscapeKey, closeOnDrag, }: UseDialogDraggableOptions): {
14
14
  isMounted: boolean;
15
15
  context: {
16
16
  x: number;
@@ -7,23 +7,19 @@ type UseDialogOptions = Pick<DialogProps, 'placement' | 'open' | 'disableOutside
7
7
  * применение анимаций перехода и обработку событий закрытия (клик снаружи, Escape).
8
8
  * Не включает логику перетаскивания.
9
9
  *
10
- * @param {UseDialogOptions} options - Опции для конфигурации хука.
11
- * @returns {{
12
- * isMounted: boolean;
13
- * transitionStyles: import('react').CSSProperties;
14
- * context: any;
15
- * refs: any;
16
- * getFloatingProps: <T extends object>(userProps: T) => T;
17
- * }} Объект с данными и пропсами для `Floating UI`.
10
+ * @returns Объект с данными и пропсами для `Floating UI`.
18
11
  * - `isMounted`: Флаг для условного рендеринга с поддержкой анимации закрытия.
19
12
  * - `transitionStyles`: CSS-стили для анимации.
20
13
  * - `context`: Контекст `Floating UI`.
21
14
  * - `refs`: Ссылки на DOM-элементы для `Floating UI`.
22
15
  * - `getFloatingProps`: Функция для получения пропсов, которые нужно передать на элемент диалога.
23
16
  */
24
- export declare function useDialog({ open, onOpenChange, placement, disableOutsideClick, disableEscapeKey, }: UseDialogOptions): {
17
+ export declare function useDialog({ open, onOpenChange, placement, disableEscapeKey, }: UseDialogOptions): {
18
+ /** `isMounted`: Флаг для условного рендеринга с поддержкой анимации закрытия. */
25
19
  isMounted: boolean;
20
+ /** `transitionStyles`: CSS-стили для анимации. */
26
21
  transitionStyles: import('react').CSSProperties;
22
+ /** `context`: Контекст `Floating UI`. */
27
23
  context: {
28
24
  x: number;
29
25
  y: number;
@@ -42,12 +38,14 @@ export declare function useDialog({ open, onOpenChange, placement, disableOutsid
42
38
  refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
43
39
  elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
44
40
  };
41
+ /** `refs`: Ссылки на DOM-элементы для `Floating UI`. */
45
42
  refs: {
46
43
  reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
47
44
  floating: React.MutableRefObject<HTMLElement | null>;
48
45
  setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
49
46
  setFloating: (node: HTMLElement | null) => void;
50
47
  } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
48
+ /** `getFloatingProps`: Функция для получения пропсов, которые нужно передать на элемент диалога. */
51
49
  getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
52
50
  };
53
51
  export {};
@@ -1,7 +1,7 @@
1
1
  import { ModalProps } from './Modal.type';
2
2
  /**
3
3
  * Компонент модального окна.
4
- * Построен на основе Dialog и добавляет с��андартную разметку (шапка, контент, футер).
4
+ * Построен на основе Dialog и добавляет стандартную разметку (шапка, контент, футер).
5
5
  */
6
6
  declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;
7
7
  export { Modal };
@@ -2,13 +2,17 @@ import { DialogProps } from '../Dialog';
2
2
  import { FC, HTMLProps, PropsWithChildren, ReactNode } from 'react';
3
3
  import { ButtonProps } from '../Button';
4
4
  /** Поля модального окна для стилизации. */
5
- type ModalFields = 'container' | 'title' | 'subTitle' | 'content' | 'footer' | 'header' | 'grabber';
5
+ type ModalFields = 'container' | 'leftActionsStack' | 'rightActionsStack' | 'title' | 'subTitle' | 'content' | 'footer' | 'header' | 'grabber';
6
+ export type ModalActionButtonProps = {
7
+ /** Пропсы кнопки действия; можно обернуть кнопку через wrapper. */
8
+ props?: ButtonProps;
9
+ /** Обёрточный компонент для кнопки действия. */
10
+ wrapper?: FC<PropsWithChildren>;
11
+ };
6
12
  /** Пропсы компонента Modal. @extends DialogProps */
7
13
  export interface ModalProps extends DialogProps {
8
14
  /** Заголовок модального окна. */
9
15
  title?: ReactNode;
10
- /** Слот для элементов в правом верхнем углу (рядом с кнопкой закрытия). */
11
- actions?: ReactNode;
12
16
  /** Подзаголовок под основным заголовком. */
13
17
  subTitle?: ReactNode;
14
18
  /** Содержимое футера (например, кнопки). */
@@ -19,13 +23,22 @@ export interface ModalProps extends DialogProps {
19
23
  styles?: Partial<Record<ModalFields, HTMLProps<HTMLDivElement>['style']>>;
20
24
  /** CSS-классы для отдельных частей модального окна. */
21
25
  classNames?: Partial<Record<ModalFields, HTMLProps<HTMLDivElement>['className']>>;
22
- /** Показывать кнопку закрытия в шапке. @default true */
23
- showCloseButton?: boolean;
24
- /** Пропсы кнопки закрытия; можно обернуть кнопку через wrapper. */
25
- closeButtonProps?: ButtonProps & {
26
- /** Обёрточный компонент для кнопки закрытия. */
27
- wrapper?: FC<PropsWithChildren>;
28
- };
26
+ /** Слот для элементов в правом верхнем углу (рядом с кнопкой закрытия). */
27
+ rightActionsButtons?: ModalActionButtonProps[];
28
+ leftActionsButtons?: ModalActionButtonProps[];
29
+ closeButton?: {
30
+ /**
31
+ * Показывать кнопку закрытия.
32
+ * @default true */
33
+ show: boolean;
34
+ } & ModalActionButtonProps;
35
+ backButton?: {
36
+ /**
37
+ * Показывать кнопку закрытия.
38
+ * @default true */
39
+ show: boolean;
40
+ } & ModalActionButtonProps;
41
+ headerTemplate?: 'title-actions-actions' | 'actions-title-actions';
29
42
  /** Скрыть разделитель в шапке. */
30
43
  hideHeaderDivider?: boolean;
31
44
  /** Скрыть разделитель в футере. */
@@ -0,0 +1,2 @@
1
+ import { FC, SVGProps } from 'react';
2
+ export declare const CrossIcon: FC<SVGProps<SVGSVGElement>>;
@@ -0,0 +1,2 @@
1
+ import { FC, SVGProps } from 'react';
2
+ export declare const LeftChevronIcon: FC<SVGProps<SVGSVGElement>>;
@@ -0,0 +1,2 @@
1
+ export { CrossIcon } from './CrossIcon';
2
+ export { LeftChevronIcon } from './LeftChevronIcon';