skillgrid 0.0.34-dev-40511-42085-40506-alert-placeholder-modal-fix.1217804 → 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 +1 -1
- package/dist/components/Dialog/lib/use-dialog-draggable.d.ts +1 -1
- package/dist/components/Dialog/lib/use-dialog.d.ts +6 -8
- 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 +1793 -1724
- 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
|
/** Определяет, открыт ли диалог. Компонент является полностью контролируемым. */
|
|
@@ -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`)
|
|
@@ -7,14 +7,7 @@ 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`.
|
|
@@ -22,8 +15,11 @@ type UseDialogOptions = Pick<DialogProps, 'placement' | 'open' | 'disableOutside
|
|
|
22
15
|
* - `getFloatingProps`: Функция для получения пропсов, которые нужно передать на элемент диалога.
|
|
23
16
|
*/
|
|
24
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, disableEscape
|
|
|
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
|
/** Скрыть разделитель в футере. */
|