skillgrid 0.0.69 → 0.0.70
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/Popover/Popover.context.d.ts +40 -0
- package/dist/components/Popover/Popover.d.ts +15 -0
- package/dist/components/Popover/Popover.type.d.ts +129 -0
- package/dist/components/Popover/components/PopoverAnchor.d.ts +14 -0
- package/dist/components/Popover/components/PopoverContentDivider.d.ts +14 -0
- package/dist/components/Popover/components/PopoverDrop.d.ts +7 -0
- package/dist/components/Popover/components/PopoverDropContent.d.ts +7 -0
- package/dist/components/Popover/components/PopoverFooter.d.ts +7 -0
- package/dist/components/Popover/components/PopoverHeader.d.ts +7 -0
- package/dist/components/Popover/components/PopoverRoot.d.ts +7 -0
- package/dist/components/Popover/components/PopoverTrigger.d.ts +8 -0
- package/dist/components/Popover/index.d.ts +2 -0
- package/dist/components/Popover/lib/index.d.ts +1 -0
- package/dist/components/Popover/lib/use-popover.d.ts +78 -0
- package/dist/components/Popover/lib/utils.d.ts +87 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useCompatId.d.ts +7 -0
- package/dist/index.cjs.js +20 -11
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +4482 -3941
- package/package.json +4 -3
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { useFloating, useInteractions } from '@floating-ui/react';
|
|
3
|
+
import { PopoverFloatingOptions } from './Popover.type';
|
|
4
|
+
/**
|
|
5
|
+
* Значение контекста, через которое составные части `Popover` получают
|
|
6
|
+
* состояние открытия, refs, стили Floating UI и служебные идентификаторы.
|
|
7
|
+
*/
|
|
8
|
+
export interface PopoverContextValue {
|
|
9
|
+
open: boolean;
|
|
10
|
+
keepMounted: boolean;
|
|
11
|
+
disabled: boolean;
|
|
12
|
+
width?: CSSProperties['width'];
|
|
13
|
+
widthAsTarget: boolean;
|
|
14
|
+
targetWidth?: number;
|
|
15
|
+
contentId: string;
|
|
16
|
+
triggerId: string;
|
|
17
|
+
resolvedTriggerId: string;
|
|
18
|
+
floating: PopoverFloatingOptions;
|
|
19
|
+
refs: ReturnType<typeof useFloating>['refs'];
|
|
20
|
+
context: ReturnType<typeof useFloating>['context'];
|
|
21
|
+
floatingStyles: ReturnType<typeof useFloating>['floatingStyles'];
|
|
22
|
+
middlewareData: ReturnType<typeof useFloating>['middlewareData'];
|
|
23
|
+
isMounted: boolean;
|
|
24
|
+
transitionStyles: CSSProperties;
|
|
25
|
+
setAnchorNode: (node: HTMLElement | null) => void;
|
|
26
|
+
setResolvedTriggerId: (id: string) => void;
|
|
27
|
+
setTriggerDisabled: (disabled: boolean) => void;
|
|
28
|
+
hasCustomAnchor: boolean;
|
|
29
|
+
getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];
|
|
30
|
+
getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Внутренний контекст составного API `Popover`.
|
|
34
|
+
*/
|
|
35
|
+
export declare const PopoverContext: import('react').Context<PopoverContextValue | null>;
|
|
36
|
+
/**
|
|
37
|
+
* Возвращает и валидирует контекст `Popover`.
|
|
38
|
+
* Бросает ошибку, если составной компонент использован вне `Popover.Root`.
|
|
39
|
+
*/
|
|
40
|
+
export declare const usePopoverContext: () => PopoverContextValue;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Составной компонент popover с вложенными частями `Root`, `Trigger`, `Anchor` и `Drop`.
|
|
3
|
+
*/
|
|
4
|
+
declare const Popover: (({ children, open, defaultOpen, onOpenChange, onDismiss, disabled, keepMounted, width, widthAsTarget, floating, }: import('./Popover.type').PopoverRootProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
5
|
+
Root: ({ children, open, defaultOpen, onOpenChange, onDismiss, disabled, keepMounted, width, widthAsTarget, floating, }: import('./Popover.type').PopoverRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
Trigger: ({ children, disabled }: import('./Popover.type').PopoverTriggerProps) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
|
|
7
|
+
Anchor: ({ children }: import('./Popover.type').PopoverAnchorProps) => import('react').ReactElement<import('react').HTMLAttributes<HTMLElement> & {
|
|
8
|
+
ref?: import('react').Ref<Element>;
|
|
9
|
+
}, string | import('react').JSXElementConstructor<any>>;
|
|
10
|
+
Drop: import('react').ForwardRefExoticComponent<import('./Popover.type').PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
11
|
+
DropContent: import('react').ForwardRefExoticComponent<import('./Popover.type').PopoverDropContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
12
|
+
DropHeader: import('react').ForwardRefExoticComponent<import('./Popover.type').PopoverSectionProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
13
|
+
DropFooter: import('react').ForwardRefExoticComponent<import('./Popover.type').PopoverSectionProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
14
|
+
};
|
|
15
|
+
export { Popover };
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { autoUpdate, flip, FloatingFocusManager, FloatingOverlay, inline, Middleware, Placement, shift, size, Strategy, UseClickProps, UseDismissProps, UseFocusProps, UseHoverProps, UseRoleProps } from '@floating-ui/react';
|
|
2
|
+
import { ComponentPropsWithoutRef, CSSProperties, HTMLAttributes, MutableRefObject, ReactElement, ReactNode } from 'react';
|
|
3
|
+
export type PopoverDividerMode = 'visible' | 'hidden' | 'dynamic';
|
|
4
|
+
/**
|
|
5
|
+
* Набор пресетов для middleware Floating UI, которые использует Popover.
|
|
6
|
+
*/
|
|
7
|
+
export interface PopoverMiddlewarePresets {
|
|
8
|
+
/** Включает или настраивает переворот относительно границ видимой области. */
|
|
9
|
+
flip?: boolean | Parameters<typeof flip>[0];
|
|
10
|
+
/** Включает или настраивает сдвиг внутри видимой области. */
|
|
11
|
+
shift?: boolean | Parameters<typeof shift>[0];
|
|
12
|
+
/** Включает inline-позиционирование для многострочных опорных элементов. */
|
|
13
|
+
inline?: boolean | Parameters<typeof inline>[0];
|
|
14
|
+
/** Включает или настраивает middleware для управления размером. */
|
|
15
|
+
size?: boolean | Parameters<typeof size>[0];
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Конфигурация Floating UI для позиционирования, взаимодействий и портала Popover.
|
|
19
|
+
*/
|
|
20
|
+
export interface PopoverFloatingOptions {
|
|
21
|
+
/** Предпочтительное положение popover относительно trigger или anchor. */
|
|
22
|
+
placement?: Placement;
|
|
23
|
+
/** CSS-стратегия позиционирования, используемая Floating UI. */
|
|
24
|
+
strategy?: Strategy;
|
|
25
|
+
/** Полный кастомный список middleware. При передаче заменяет `middlewares`. */
|
|
26
|
+
middleware?: Middleware[];
|
|
27
|
+
/** Упрощённые пресеты для встроенной цепочки middleware. */
|
|
28
|
+
middlewares?: PopoverMiddlewarePresets;
|
|
29
|
+
/** Рендерит контент внутри React-портала, если установлено `true`. */
|
|
30
|
+
portal?: boolean;
|
|
31
|
+
/** Кастомный корневой элемент портала или ref на него. */
|
|
32
|
+
portalRoot?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
|
|
33
|
+
/** Добавляет overlay вокруг floating-контента. */
|
|
34
|
+
overlay?: boolean | Omit<ComponentPropsWithoutRef<typeof FloatingOverlay>, 'children'>;
|
|
35
|
+
/** Включает управление фокусом внутри floating-контента. */
|
|
36
|
+
focusManager?: boolean | Omit<ComponentPropsWithoutRef<typeof FloatingFocusManager>, 'children' | 'context'>;
|
|
37
|
+
/** Включает взаимодействие по клику на trigger. */
|
|
38
|
+
click?: boolean | UseClickProps;
|
|
39
|
+
/** Включает взаимодействие по наведению на trigger. */
|
|
40
|
+
hover?: boolean | UseHoverProps;
|
|
41
|
+
/** Включает взаимодействие по фокусу на trigger. */
|
|
42
|
+
focus?: boolean | UseFocusProps;
|
|
43
|
+
/** Включает закрытие по клику снаружи и по клавише Escape. */
|
|
44
|
+
dismiss?: boolean | UseDismissProps;
|
|
45
|
+
/** Настраивает ARIA-role, которую применяет Floating UI. */
|
|
46
|
+
role?: boolean | UseRoleProps;
|
|
47
|
+
/** Скрывает popover, когда опорный элемент выходит из видимой области. */
|
|
48
|
+
hideDetached?: boolean;
|
|
49
|
+
/** Кастомный жизненный цикл автообновления для floating и опорного элементов. */
|
|
50
|
+
whileElementsMounted?: (...args: Parameters<typeof autoUpdate>) => ReturnType<typeof autoUpdate>;
|
|
51
|
+
/** Включает transform-based позиционирование во Floating UI. */
|
|
52
|
+
transform?: boolean;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Корневые пропсы, общие для составных компонентов Popover.
|
|
56
|
+
*/
|
|
57
|
+
export interface PopoverRootProps {
|
|
58
|
+
/** Составные дочерние элементы popover. */
|
|
59
|
+
children: ReactNode;
|
|
60
|
+
/** Управляемое состояние открытия. */
|
|
61
|
+
open?: boolean;
|
|
62
|
+
/** Начальное состояние открытия для неуправляемого режима. */
|
|
63
|
+
defaultOpen?: boolean;
|
|
64
|
+
/** Вызывается при каждом изменении состояния открытия. */
|
|
65
|
+
onOpenChange?: (open: boolean) => void;
|
|
66
|
+
/** Вызывается, когда popover закрывается из-за dismiss-взаимодействий. */
|
|
67
|
+
onDismiss?: () => void;
|
|
68
|
+
/** Отключает открытие и взаимодействия для всего popover. */
|
|
69
|
+
disabled?: boolean;
|
|
70
|
+
/** Сохраняет контент в DOM, когда popover закрыт. */
|
|
71
|
+
keepMounted?: boolean;
|
|
72
|
+
/** Ширина drop по умолчанию. Может быть переопределена на `Popover.Drop`. */
|
|
73
|
+
width?: CSSProperties['width'];
|
|
74
|
+
/** По умолчанию делает ширину контента равной ширине trigger или anchor. */
|
|
75
|
+
widthAsTarget?: boolean;
|
|
76
|
+
/** Конфигурация Floating UI для позиционирования и взаимодействий. */
|
|
77
|
+
floating?: PopoverFloatingOptions;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Пропсы элемента, который открывает и закрывает popover.
|
|
81
|
+
*/
|
|
82
|
+
export interface PopoverTriggerProps {
|
|
83
|
+
/** Единственный дочерний элемент, который получает props и ref trigger-а. */
|
|
84
|
+
children: ReactElement;
|
|
85
|
+
/** Отключает trigger-элемент. */
|
|
86
|
+
disabled?: boolean;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Пропсы опционального элемента, который используется как опорный элемент для позиционирования.
|
|
90
|
+
*/
|
|
91
|
+
export interface PopoverAnchorProps {
|
|
92
|
+
/** Единственный дочерний элемент, который получает ref anchor-а. */
|
|
93
|
+
children: ReactElement;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Пропсы плавающего контейнера `Popover.Drop`.
|
|
97
|
+
*/
|
|
98
|
+
export interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
99
|
+
/**
|
|
100
|
+
* Составной контент панели popover.
|
|
101
|
+
* Поддерживает опциональные `Popover.DropHeader` и `Popover.DropFooter`,
|
|
102
|
+
* а также обязательный `Popover.DropContent`.
|
|
103
|
+
* Структура проверяется во время выполнения, поэтому здесь допускается
|
|
104
|
+
* условный JSX вроде `condition && <Popover.DropFooter />`.
|
|
105
|
+
*/
|
|
106
|
+
children: ReactNode;
|
|
107
|
+
/** Явно заданная ширина контента. Переопределяет `Popover.Root width`. */
|
|
108
|
+
width?: CSSProperties['width'];
|
|
109
|
+
/** Делает ширину этого `Popover.Drop` равной ширине trigger или anchor. */
|
|
110
|
+
widthAsTarget?: boolean;
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* Пропсы обязательной прокручиваемой области контента внутри `Popover.Drop`.
|
|
114
|
+
*/
|
|
115
|
+
export interface PopoverDropContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
116
|
+
/** Обязательный контент, который рендерится в основной области popover. */
|
|
117
|
+
children?: ReactNode;
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Общие пропсы для секций header и footer внутри `Popover.Drop`.
|
|
121
|
+
*/
|
|
122
|
+
export interface PopoverSectionProps extends HTMLAttributes<HTMLDivElement> {
|
|
123
|
+
/** Контент секции. */
|
|
124
|
+
children?: ReactNode;
|
|
125
|
+
/** Режим видимости разделителя у края секции. */
|
|
126
|
+
divider?: PopoverDividerMode;
|
|
127
|
+
/** Внутренний маркер разделителя, который прокидывается в DOM-узел. */
|
|
128
|
+
'data-divider-mode'?: PopoverDividerMode;
|
|
129
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactElement, Ref } from 'react';
|
|
2
|
+
import { PopoverAnchorProps } from '../Popover.type';
|
|
3
|
+
/**
|
|
4
|
+
* Пропсы, которые `Popover.Anchor` использует у дочернего элемента для проброса ref.
|
|
5
|
+
*/
|
|
6
|
+
type AnchorChildProps = HTMLAttributes<HTMLElement> & {
|
|
7
|
+
ref?: Ref<Element>;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Опциональная опорная точка позиционирования popover.
|
|
11
|
+
* Позволяет отвязать геометрию floating-элемента от trigger-компонента.
|
|
12
|
+
*/
|
|
13
|
+
declare const PopoverAnchor: ({ children }: PopoverAnchorProps) => ReactElement<AnchorChildProps, string | import('react').JSXElementConstructor<any>>;
|
|
14
|
+
export { PopoverAnchor };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { PopoverDividerMode } from '../Popover.type';
|
|
2
|
+
/**
|
|
3
|
+
* Пропсы декоративного разделителя между секциями popover.
|
|
4
|
+
*/
|
|
5
|
+
interface PopoverContentDividerProps {
|
|
6
|
+
mode: PopoverDividerMode;
|
|
7
|
+
isVisible: boolean;
|
|
8
|
+
testId: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Визуальный разделитель между header/body/footer у `Popover.Drop`.
|
|
12
|
+
*/
|
|
13
|
+
declare const PopoverContentDivider: ({ mode, isVisible, testId }: PopoverContentDividerProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export { PopoverContentDivider };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PopoverContentProps } from '../Popover.type';
|
|
2
|
+
/**
|
|
3
|
+
* Плавающая панель `Popover`, которая рендерит секции, контент,
|
|
4
|
+
* портал, overlay и focus manager поверх состояния из `Popover.Root`.
|
|
5
|
+
*/
|
|
6
|
+
declare const PopoverDrop: import('react').ForwardRefExoticComponent<PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { PopoverDrop };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PopoverDropContentProps } from '../Popover.type';
|
|
2
|
+
/**
|
|
3
|
+
* Обязательная прокручиваемая область внутри `Popover.Drop`.
|
|
4
|
+
* Хранит собственный `ref`, чтобы потребитель мог получить доступ к body-контейнеру.
|
|
5
|
+
*/
|
|
6
|
+
declare const PopoverDropContent: import('react').ForwardRefExoticComponent<PopoverDropContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { PopoverDropContent };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PopoverSectionProps } from '../Popover.type';
|
|
2
|
+
/**
|
|
3
|
+
* Нижняя секция `Popover.Drop`.
|
|
4
|
+
* Используется как именованный слот и поддерживает режим разделителя.
|
|
5
|
+
*/
|
|
6
|
+
declare const PopoverFooter: import('react').ForwardRefExoticComponent<PopoverSectionProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { PopoverFooter };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PopoverSectionProps } from '../Popover.type';
|
|
2
|
+
/**
|
|
3
|
+
* Верхняя секция `Popover.Drop`.
|
|
4
|
+
* Используется как именованный слот и поддерживает режим разделителя.
|
|
5
|
+
*/
|
|
6
|
+
declare const PopoverHeader: import('react').ForwardRefExoticComponent<PopoverSectionProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { PopoverHeader };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PopoverRootProps } from '../Popover.type';
|
|
2
|
+
/**
|
|
3
|
+
* Корневой контейнер popover, который поднимает общее состояние
|
|
4
|
+
* и раздаёт его составным подкомпонентам через контекст.
|
|
5
|
+
*/
|
|
6
|
+
declare const PopoverRoot: ({ children, open, defaultOpen, onOpenChange, onDismiss, disabled, keepMounted, width, widthAsTarget, floating, }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { PopoverRoot };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { PopoverTriggerProps } from '../Popover.type';
|
|
3
|
+
/**
|
|
4
|
+
* Триггер popover.
|
|
5
|
+
* Клонирует единственного ребёнка, добавляет ARIA-атрибуты, обработчики Floating UI и ref.
|
|
6
|
+
*/
|
|
7
|
+
declare const PopoverTrigger: ({ children, disabled }: PopoverTriggerProps) => ReactElement<any, string | import('react').JSXElementConstructor<any>>;
|
|
8
|
+
export { PopoverTrigger };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { usePopover } from './use-popover';
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { autoUpdate, Middleware, Placement } from '@floating-ui/react';
|
|
2
|
+
import { PopoverRootProps } from '../Popover.type';
|
|
3
|
+
/**
|
|
4
|
+
* Внутреннее подмножество пропсов `Popover.Root`, которое использует хук состояния и позиционирования.
|
|
5
|
+
*/
|
|
6
|
+
type UsePopoverOptions = Pick<PopoverRootProps, 'defaultOpen' | 'disabled' | 'floating' | 'onDismiss' | 'onOpenChange' | 'open' | 'width' | 'widthAsTarget'>;
|
|
7
|
+
/**
|
|
8
|
+
* Центральный контроллер popover поверх Floating UI.
|
|
9
|
+
* Он инкапсулирует:
|
|
10
|
+
* - controlled/uncontrolled состояние открытия
|
|
11
|
+
* - сборку middleware и позиционирование
|
|
12
|
+
* - взаимодействия: click, hover, focus, dismiss, role
|
|
13
|
+
* - синхронизацию ширины target для `widthAsTarget`
|
|
14
|
+
* - стили переходов и идентификаторы для составных подкомпонентов
|
|
15
|
+
*/
|
|
16
|
+
export declare function usePopover({ open: controlledOpen, defaultOpen, onOpenChange, onDismiss, disabled, width, widthAsTarget, floating, }: UsePopoverOptions): {
|
|
17
|
+
open: boolean;
|
|
18
|
+
disabled: boolean;
|
|
19
|
+
width: import("csstype").Property.Width<string | number> | undefined;
|
|
20
|
+
widthAsTarget: boolean;
|
|
21
|
+
targetWidth: number | undefined;
|
|
22
|
+
contentId: string;
|
|
23
|
+
triggerId: string;
|
|
24
|
+
resolvedTriggerId: string;
|
|
25
|
+
floating: {
|
|
26
|
+
placement?: Placement;
|
|
27
|
+
strategy?: import('@floating-ui/utils').Strategy;
|
|
28
|
+
middleware?: Middleware[];
|
|
29
|
+
middlewares?: import('..').PopoverMiddlewarePresets;
|
|
30
|
+
portal?: boolean;
|
|
31
|
+
portalRoot?: HTMLElement | import('react').MutableRefObject<HTMLElement | null> | null;
|
|
32
|
+
overlay?: boolean | Omit<import('react').ComponentPropsWithoutRef<typeof import('@floating-ui/react').FloatingOverlay>, "children">;
|
|
33
|
+
focusManager?: boolean | Omit<import('react').ComponentPropsWithoutRef<typeof import('@floating-ui/react').FloatingFocusManager>, "children" | "context">;
|
|
34
|
+
click?: boolean | import('@floating-ui/react').UseClickProps;
|
|
35
|
+
hover?: boolean | import('@floating-ui/react').UseHoverProps;
|
|
36
|
+
focus?: boolean | import('@floating-ui/react').UseFocusProps;
|
|
37
|
+
dismiss?: boolean | import('@floating-ui/react').UseDismissProps;
|
|
38
|
+
role?: boolean | import('@floating-ui/react').UseRoleProps;
|
|
39
|
+
hideDetached?: boolean;
|
|
40
|
+
whileElementsMounted?: (...args: Parameters<typeof autoUpdate>) => ReturnType<typeof autoUpdate>;
|
|
41
|
+
transform?: boolean;
|
|
42
|
+
};
|
|
43
|
+
refs: {
|
|
44
|
+
reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
|
|
45
|
+
floating: React.MutableRefObject<HTMLElement | null>;
|
|
46
|
+
setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
|
|
47
|
+
setFloating: (node: HTMLElement | null) => void;
|
|
48
|
+
} & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
|
|
49
|
+
context: {
|
|
50
|
+
x: number;
|
|
51
|
+
y: number;
|
|
52
|
+
placement: Placement;
|
|
53
|
+
strategy: import('@floating-ui/utils').Strategy;
|
|
54
|
+
middlewareData: import('@floating-ui/core').MiddlewareData;
|
|
55
|
+
isPositioned: boolean;
|
|
56
|
+
update: () => void;
|
|
57
|
+
floatingStyles: React.CSSProperties;
|
|
58
|
+
open: boolean;
|
|
59
|
+
onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
|
|
60
|
+
events: import('@floating-ui/react').FloatingEvents;
|
|
61
|
+
dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
|
|
62
|
+
nodeId: string | undefined;
|
|
63
|
+
floatingId: string | undefined;
|
|
64
|
+
refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
|
|
65
|
+
elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
|
|
66
|
+
};
|
|
67
|
+
floatingStyles: import('react').CSSProperties;
|
|
68
|
+
middlewareData: import('@floating-ui/core').MiddlewareData;
|
|
69
|
+
hasCustomAnchor: boolean;
|
|
70
|
+
isMounted: boolean;
|
|
71
|
+
transitionStyles: import('react').CSSProperties;
|
|
72
|
+
setAnchorNode: import('react').Dispatch<import('react').SetStateAction<HTMLElement | null>>;
|
|
73
|
+
setResolvedTriggerId: import('react').Dispatch<import('react').SetStateAction<string>>;
|
|
74
|
+
setTriggerDisabled: import('react').Dispatch<import('react').SetStateAction<boolean>>;
|
|
75
|
+
getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
|
|
76
|
+
getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
|
|
77
|
+
};
|
|
78
|
+
export {};
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { MutableRefObject, ReactElement, ReactNode, Ref } from 'react';
|
|
2
|
+
import { PopoverDropContentProps, PopoverFloatingOptions, PopoverSectionProps } from '../Popover.type';
|
|
3
|
+
/**
|
|
4
|
+
* Именованные слоты, которые поддерживает `Popover.Drop`.
|
|
5
|
+
*/
|
|
6
|
+
export type PopoverSlotName = 'content' | 'header' | 'footer';
|
|
7
|
+
/**
|
|
8
|
+
* Служебный маркер, по которому составные подкомпоненты сообщают свой слот.
|
|
9
|
+
*/
|
|
10
|
+
export type PopoverSlotComponent = {
|
|
11
|
+
__popoverSlot?: PopoverSlotName;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Нормализованное представление дочерних элементов `Popover.Drop` после разбора слотов.
|
|
15
|
+
*/
|
|
16
|
+
export interface ParsedPopoverChildren {
|
|
17
|
+
contentElement: ReactElement<PopoverDropContentProps> | null;
|
|
18
|
+
headerElement: ReactElement<PopoverSectionProps> | null;
|
|
19
|
+
footerElement: ReactElement<PopoverSectionProps> | null;
|
|
20
|
+
hasUnexpectedChildren: boolean;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Результат проверки структуры `Popover.Drop`.
|
|
24
|
+
* Используется для безопасного fallback-рендера вместо выброса исключения в runtime.
|
|
25
|
+
*/
|
|
26
|
+
export interface PopoverDropValidationIssue {
|
|
27
|
+
message: string;
|
|
28
|
+
developerHint?: string;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Значения Floating UI по умолчанию, если потребитель не передал свои настройки.
|
|
32
|
+
*/
|
|
33
|
+
export declare const DEFAULT_FLOATING: PopoverFloatingOptions;
|
|
34
|
+
/**
|
|
35
|
+
* Сужает тип portal root до mutable ref, чтобы потом одинаково его разрешать.
|
|
36
|
+
*/
|
|
37
|
+
export declare const isMutableRefObject: (value: PopoverFloatingOptions["portalRoot"]) => value is MutableRefObject<HTMLElement | null>;
|
|
38
|
+
/**
|
|
39
|
+
* Преобразует либо HTMLElement, либо ref-объект в реальный корневой DOM-узел портала.
|
|
40
|
+
*/
|
|
41
|
+
export declare const resolvePortalRoot: (portalRoot: PopoverFloatingOptions["portalRoot"]) => HTMLElement | null | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* Записывает значение либо в callback ref, либо в object ref.
|
|
44
|
+
*/
|
|
45
|
+
export declare const assignRef: <T>(ref: Ref<T | null> | undefined, value: T | null) => void;
|
|
46
|
+
/**
|
|
47
|
+
* Объединяет несколько ref в один callback ref.
|
|
48
|
+
*/
|
|
49
|
+
export declare const mergeRefs: <T>(...refs: Array<Ref<T | null> | undefined>) => (value: T | null) => void;
|
|
50
|
+
/**
|
|
51
|
+
* Проверяет, содержит ли список middleware элемент с указанным именем Floating UI.
|
|
52
|
+
*/
|
|
53
|
+
export declare const hasMiddleware: (middleware: PopoverFloatingOptions["middleware"], name: string) => boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Читает внутренний маркер слота из составного дочернего элемента.
|
|
56
|
+
*/
|
|
57
|
+
export declare const getSlotName: (element: ReactElement) => PopoverSlotName | null;
|
|
58
|
+
export declare const POPOVER_DROP_STRUCTURE_HINT = "\u041E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u0435 Popover.Drop:\n\n<Popover.Drop>\n <Popover.DropHeader>{...}</Popover.DropHeader> // \u043E\u043F\u0446\u0438\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0439 \u0445\u044D\u0434\u0435\u0440 \n <Popover.DropContent>{...}</Popover.DropContent> // \u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u044B\u0439 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\n <Popover.DropFooter>{...}</Popover.DropFooter> // \u043E\u043F\u0446\u0438\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0439 \u0444\u0443\u0442\u0435\u0440\n</Popover.Drop>\n";
|
|
59
|
+
/**
|
|
60
|
+
* Логирует ошибку структуры `Popover.Drop` только в dev-режиме,
|
|
61
|
+
* чтобы библиотека не показывала внутреннюю диагностику конечным пользователям.
|
|
62
|
+
*/
|
|
63
|
+
export declare const reportPopoverDropValidationIssue: (issue: PopoverDropValidationIssue | null) => void;
|
|
64
|
+
/**
|
|
65
|
+
* Разбирает прямых детей `Popover.Drop` по именованным слотам.
|
|
66
|
+
* Неизвестные элементы, дубликаты слотов и непустые примитивные узлы помечаются как невалидные,
|
|
67
|
+
* чтобы вызывающий код мог выбросить понятную ошибку для разработчика.
|
|
68
|
+
*/
|
|
69
|
+
export declare const parsePopoverChildren: (children: ReactNode) => ParsedPopoverChildren;
|
|
70
|
+
/**
|
|
71
|
+
* Клонирует slot header или footer и добавляет к нему общие стили секции popover.
|
|
72
|
+
*/
|
|
73
|
+
export declare const renderSection: (sectionElement: ReactElement<PopoverSectionProps> | null, sectionClassName: string) => ReactElement<PopoverSectionProps, string | import('react').JSXElementConstructor<any>> | null;
|
|
74
|
+
/**
|
|
75
|
+
* Возвращает обязательный content-слот как есть, чтобы сохранить исходный элемент и его ref.
|
|
76
|
+
*/
|
|
77
|
+
export declare const renderBodyContent: (contentElement: ReactElement<PopoverDropContentProps> | null) => ReactElement<PopoverDropContentProps, string | import('react').JSXElementConstructor<any>> | null;
|
|
78
|
+
/**
|
|
79
|
+
* Проверяет контракт составного API `Popover.Drop`.
|
|
80
|
+
* Вместо выброса исключения возвращает описание ошибки для безопасного fallback-рендера.
|
|
81
|
+
*/
|
|
82
|
+
export declare const getParsedPopoverChildrenValidationIssue: (parsedChildren: ParsedPopoverChildren) => PopoverDropValidationIssue | null;
|
|
83
|
+
/**
|
|
84
|
+
* Проверяет, что `Popover.Trigger` и `Popover.Anchor` получают ровно одного клонируемого ребёнка.
|
|
85
|
+
* В production проверка остаётся минимальной, а в dev-режиме становится строже.
|
|
86
|
+
*/
|
|
87
|
+
export declare const validatePopoverCompoundChild: (componentName: "Popover.Trigger" | "Popover.Anchor", children: ReactNode) => children is ReactElement;
|
package/dist/hooks/index.d.ts
CHANGED