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.
- package/dist/components/Alert/Alert.type.d.ts +1 -1
- package/dist/components/Dialog/Dialog.type.d.ts +2 -2
- package/dist/components/Dialog/lib/use-dialog-draggable.d.ts +2 -2
- package/dist/components/Dialog/lib/use-dialog.d.ts +7 -9
- package/dist/components/Modal/Modal.d.ts +1 -1
- package/dist/components/Modal/Modal.type.d.ts +23 -10
- package/dist/components/Modal/assets/CrossIcon.d.ts +2 -0
- package/dist/components/Modal/assets/LeftChevronIcon.d.ts +2 -0
- package/dist/components/Modal/assets/index.d.ts +2 -0
- package/dist/index.cjs.js +11 -11
- package/dist/index.css +1 -1
- package/dist/index.es.js +1763 -1698
- package/package.json +1 -1
|
@@ -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
|
|
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' | '
|
|
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 =
|
|
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,
|
|
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
|
-
* @
|
|
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,
|
|
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
|
-
/**
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
|
|
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
|
/** Скрыть разделитель в футере. */
|