@actview/floating-ui 0.1.0
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/LICENSE +21 -0
- package/dist/_deprecated-inner.d.ts +82 -0
- package/dist/components/Composite.d.ts +109 -0
- package/dist/components/FloatingArrow.d.ts +66 -0
- package/dist/components/FloatingDelayGroup.d.ts +70 -0
- package/dist/components/FloatingFocusManager.d.ts +92 -0
- package/dist/components/FloatingList.d.ts +43 -0
- package/dist/components/FloatingOverlay.d.ts +18 -0
- package/dist/components/FloatingPortal.d.ts +63 -0
- package/dist/components/FloatingTree.d.ts +45 -0
- package/dist/components/FocusGuard.d.ts +19 -0
- package/dist/components/NextFloatingDelayGroup.d.ts +57 -0
- package/dist/floating-ui.actview.d.mts +37 -0
- package/dist/floating-ui.actview.d.ts +37 -0
- package/dist/floating-ui.actview.esm.js +6688 -0
- package/dist/floating-ui.actview.mjs +6688 -0
- package/dist/floating-ui.actview.umd.js +6772 -0
- package/dist/floating-ui.actview.umd.min.js +1 -0
- package/dist/floating-ui.actview.utils.d.mts +7 -0
- package/dist/floating-ui.actview.utils.d.ts +7 -0
- package/dist/floating-ui.actview.utils.esm.js +587 -0
- package/dist/floating-ui.actview.utils.mjs +587 -0
- package/dist/floating-ui.actview.utils.umd.js +634 -0
- package/dist/floating-ui.actview.utils.umd.min.js +1 -0
- package/dist/hooks/gridNavigation.d.ts +39 -0
- package/dist/hooks/useClick.d.ts +45 -0
- package/dist/hooks/useClientPoint.d.ts +32 -0
- package/dist/hooks/useDismiss.d.ts +80 -0
- package/dist/hooks/useFloating.d.ts +18 -0
- package/dist/hooks/useFloatingRootContext.d.ts +22 -0
- package/dist/hooks/useFocus.d.ts +21 -0
- package/dist/hooks/useHover.d.ts +57 -0
- package/dist/hooks/useId.d.ts +11 -0
- package/dist/hooks/useInteractions.d.ts +13 -0
- package/dist/hooks/useListNavigation.d.ts +176 -0
- package/dist/hooks/useMergeRefs.d.ts +20 -0
- package/dist/hooks/useRole.d.ts +33 -0
- package/dist/hooks/useTransition.d.ts +68 -0
- package/dist/hooks/useTypeahead.d.ts +66 -0
- package/dist/index.d.ts +37 -0
- package/dist/safePolygon.d.ts +12 -0
- package/dist/types.d.ts +140 -0
- package/dist/useFloating.d.ts +57 -0
- package/dist/utils/clearTimeoutIfSet.d.ts +2 -0
- package/dist/utils/composite.d.ts +41 -0
- package/dist/utils/constants.d.ts +8 -0
- package/dist/utils/createAttribute.d.ts +1 -0
- package/dist/utils/createEventEmitter.d.ts +5 -0
- package/dist/utils/deepEqual.d.ts +1 -0
- package/dist/utils/element.d.ts +10 -0
- package/dist/utils/enqueueFocus.d.ts +8 -0
- package/dist/utils/event.d.ts +10 -0
- package/dist/utils/getDPR.d.ts +1 -0
- package/dist/utils/hooks.d.ts +16 -0
- package/dist/utils/log.d.ts +2 -0
- package/dist/utils/markOthers.d.ts +4 -0
- package/dist/utils/nodes.d.ts +4 -0
- package/dist/utils/platform.d.ts +6 -0
- package/dist/utils/roundByDPR.d.ts +1 -0
- package/dist/utils/safeReact.d.ts +8 -0
- package/dist/utils/tabbable.d.ts +13 -0
- package/dist/utils/useLiteMergeRefs.d.ts +14 -0
- package/dist/utils.d.ts +7 -0
- package/package.json +83 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Floating UI contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { type Derivable, type DetectOverflowOptions, type SideObject } from '@floating-ui/dom';
|
|
2
|
+
import { type Ref } from '@actview/core';
|
|
3
|
+
import type { ElementProps, FloatingRootContext, Middleware } from './types';
|
|
4
|
+
export interface InnerProps extends DetectOverflowOptions {
|
|
5
|
+
/**
|
|
6
|
+
* A ref which contains an array of HTML elements.
|
|
7
|
+
* @default empty list
|
|
8
|
+
*/
|
|
9
|
+
listRef: Ref<Array<HTMLElement | null>>;
|
|
10
|
+
/**
|
|
11
|
+
* The index of the active (focused or highlighted) item in the list.
|
|
12
|
+
* @default 0
|
|
13
|
+
*/
|
|
14
|
+
index: number;
|
|
15
|
+
/**
|
|
16
|
+
* Callback invoked when the fallback state changes.
|
|
17
|
+
*/
|
|
18
|
+
onFallbackChange?: null | ((fallback: boolean) => void) | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* The offset to apply to the floating element.
|
|
21
|
+
* @default 0
|
|
22
|
+
*/
|
|
23
|
+
offset?: number | undefined;
|
|
24
|
+
/**
|
|
25
|
+
* A ref which contains the overflow of the floating element.
|
|
26
|
+
*/
|
|
27
|
+
overflowRef?: Ref<SideObject | null> | undefined;
|
|
28
|
+
/**
|
|
29
|
+
* An optional ref containing an HTMLElement. This may be used as the
|
|
30
|
+
* scrolling container instead of the floating element — for instance,
|
|
31
|
+
* to position inner elements as direct children without being interfered by
|
|
32
|
+
* scrolling layout.
|
|
33
|
+
*/
|
|
34
|
+
scrollRef?: Ref<HTMLElement | null> | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* The minimum number of items that should be visible in the list.
|
|
37
|
+
* @default 4
|
|
38
|
+
*/
|
|
39
|
+
minItemsVisible?: number | undefined;
|
|
40
|
+
/**
|
|
41
|
+
* The threshold for the reference element's overflow in pixels.
|
|
42
|
+
* @default 0
|
|
43
|
+
*/
|
|
44
|
+
referenceOverflowThreshold?: number | undefined;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Positions the floating element such that an inner element inside of it is
|
|
48
|
+
* anchored to the reference element.
|
|
49
|
+
* @see https://floating-ui.com/docs/inner
|
|
50
|
+
* @deprecated
|
|
51
|
+
*/
|
|
52
|
+
export declare const inner: (props: InnerProps | Derivable<InnerProps>) => Middleware;
|
|
53
|
+
export interface UseInnerOffsetProps {
|
|
54
|
+
/**
|
|
55
|
+
* Whether the Hook is enabled, including all internal Effects and event
|
|
56
|
+
* handlers.
|
|
57
|
+
* @default true
|
|
58
|
+
*/
|
|
59
|
+
enabled?: boolean | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* A ref which contains the overflow of the floating element.
|
|
62
|
+
*/
|
|
63
|
+
overflowRef: Ref<SideObject | null>;
|
|
64
|
+
/**
|
|
65
|
+
* An optional ref containing an HTMLElement. This may be used as the
|
|
66
|
+
* scrolling container instead of the floating element — for instance,
|
|
67
|
+
* to position inner elements as direct children without being interfered by
|
|
68
|
+
* scrolling layout.
|
|
69
|
+
*/
|
|
70
|
+
scrollRef?: Ref<HTMLElement | null> | undefined;
|
|
71
|
+
/**
|
|
72
|
+
* Callback invoked when the offset changes.
|
|
73
|
+
*/
|
|
74
|
+
onChange: (offset: number | ((offset: number) => number)) => void;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Changes the `inner` middleware's `offset` upon a `wheel` event to
|
|
78
|
+
* expand the floating element's height, revealing more list items.
|
|
79
|
+
* @see https://floating-ui.com/docs/inner
|
|
80
|
+
* @deprecated
|
|
81
|
+
*/
|
|
82
|
+
export declare function useInnerOffset(context: FloatingRootContext, props: UseInnerOffsetProps): ElementProps;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { type Ref } from '@actview/core';
|
|
2
|
+
import type { Dimensions } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* actview 版(upstream 为 React 组件)。
|
|
5
|
+
*
|
|
6
|
+
* 与 upstream 的差异:
|
|
7
|
+
* - `React.forwardRef` → `defineComponent`(`ref` 作为 prop 透传)
|
|
8
|
+
* - `React.useState` → `ref()`;`activeIndex` 为 `computed`
|
|
9
|
+
* (`props.activeIndex` 响应式读取,未受控时用内部 ref)
|
|
10
|
+
* - `onNavigate` 为普通函数(闭包读 `props.onNavigate`)
|
|
11
|
+
* - `render` prop 的元素形态用 VNode props 合并实现 `cloneElement` 语义
|
|
12
|
+
* (actview VNode 的 `ref` 为独立字段,需单独合并)
|
|
13
|
+
* - `useEffectEvent` 不再需要(props 响应式读取即最新)
|
|
14
|
+
* - 无 React 合成事件:`event: KeyboardEvent`;`elementsRef.value`(.value)
|
|
15
|
+
*/
|
|
16
|
+
type BivariantCallback<T extends (...args: any[]) => any> = {
|
|
17
|
+
bivariance(...args: Parameters<T>): ReturnType<T>;
|
|
18
|
+
}['bivariance'];
|
|
19
|
+
type RenderProp = any | ((props: Record<string, unknown>) => any);
|
|
20
|
+
export interface CompositeProps {
|
|
21
|
+
/**
|
|
22
|
+
* Determines the element to render.
|
|
23
|
+
* @example
|
|
24
|
+
* ```jsx
|
|
25
|
+
* <Composite render={<ul />} />
|
|
26
|
+
* <Composite render={(htmlProps) => <ul {...htmlProps} />} />
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
render?: RenderProp | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* Determines the orientation of the composite.
|
|
32
|
+
*/
|
|
33
|
+
orientation?: 'horizontal' | 'vertical' | 'both' | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* Determines whether focus should loop around when navigating past the first
|
|
36
|
+
* or last item.
|
|
37
|
+
*/
|
|
38
|
+
loop?: boolean | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* Whether the direction of the composite’s navigation is in RTL layout.
|
|
41
|
+
*/
|
|
42
|
+
rtl?: boolean | undefined;
|
|
43
|
+
/**
|
|
44
|
+
* Determines the number of columns there are in the composite
|
|
45
|
+
* (i.e. it’s a grid).
|
|
46
|
+
*/
|
|
47
|
+
cols?: number | undefined;
|
|
48
|
+
/**
|
|
49
|
+
* Determines which items are disabled. The `disabled` or `aria-disabled`
|
|
50
|
+
* attributes are used by default.
|
|
51
|
+
*/
|
|
52
|
+
disabledIndices?: number[] | ((index: number) => boolean) | undefined;
|
|
53
|
+
/**
|
|
54
|
+
* Determines which item is active. Used to externally control the active
|
|
55
|
+
* item.
|
|
56
|
+
*/
|
|
57
|
+
activeIndex?: number | undefined;
|
|
58
|
+
/**
|
|
59
|
+
* Called when the user navigates to a new item. Used to externally control
|
|
60
|
+
* the active item.
|
|
61
|
+
*/
|
|
62
|
+
onNavigate?: BivariantCallback<(index: number) => void> | undefined;
|
|
63
|
+
/**
|
|
64
|
+
* Only for `cols > 1`, specify sizes for grid items.
|
|
65
|
+
* `{ width: 2, height: 2 }` means an item is 2 columns wide and 2 rows tall.
|
|
66
|
+
*/
|
|
67
|
+
itemSizes?: Dimensions[] | undefined;
|
|
68
|
+
/**
|
|
69
|
+
* Only relevant for `cols > 1` and items with different sizes, specify if
|
|
70
|
+
* the grid is dense (as defined in the CSS spec for grid-auto-flow).
|
|
71
|
+
*/
|
|
72
|
+
dense?: boolean | undefined;
|
|
73
|
+
ref?: Ref<HTMLElement | null> | ((el: HTMLElement | null) => void) | undefined;
|
|
74
|
+
[key: string]: unknown;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Creates a single tab stop whose items are navigated by arrow keys, which
|
|
78
|
+
* provides list navigation outside of floating element contexts.
|
|
79
|
+
*
|
|
80
|
+
* This is useful to enable navigation of a list of items that aren’t part of a
|
|
81
|
+
* floating element. A menubar is an example of a composite, with each reference
|
|
82
|
+
* element being an item.
|
|
83
|
+
* @see https://floating-ui.com/docs/Composite
|
|
84
|
+
*/
|
|
85
|
+
export declare const Composite: {
|
|
86
|
+
__setup: (props: CompositeProps) => () => JSX.Element;
|
|
87
|
+
name?: string;
|
|
88
|
+
} & ((props: CompositeProps) => () => JSX.Element);
|
|
89
|
+
export interface CompositeItemProps {
|
|
90
|
+
/**
|
|
91
|
+
* Determines the element to render.
|
|
92
|
+
* @example
|
|
93
|
+
* ```jsx
|
|
94
|
+
* <CompositeItem render={<li />} />
|
|
95
|
+
* <CompositeItem render={(htmlProps) => <li {...htmlProps} />} />
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
render?: RenderProp | undefined;
|
|
99
|
+
ref?: Ref<HTMLElement | null> | ((el: HTMLElement | null) => void) | undefined;
|
|
100
|
+
[key: string]: unknown;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* @see https://floating-ui.com/docs/Composite
|
|
104
|
+
*/
|
|
105
|
+
export declare const CompositeItem: {
|
|
106
|
+
__setup: (props: CompositeItemProps) => () => any;
|
|
107
|
+
name?: string;
|
|
108
|
+
} & ((props: CompositeItemProps) => () => any);
|
|
109
|
+
export {};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { type Ref } from '@actview/core';
|
|
2
|
+
import type { FloatingContext } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* actview 版(upstream 为 React 组件)。
|
|
5
|
+
*
|
|
6
|
+
* 与 upstream 的差异:
|
|
7
|
+
* - `React.forwardRef` → `defineComponent`(`ref` 作为 prop 透传给 svg)
|
|
8
|
+
* - `React.useState` → `ref()`;`useModernLayoutEffect` → `watch`
|
|
9
|
+
* - context 字段为 `Ref`:`placement.value` / `elements.floating.value` /
|
|
10
|
+
* `middlewareData.value.{arrow,shift}`
|
|
11
|
+
* - `useId` 返回 `Ref<string | undefined>`(clipPathId.value)
|
|
12
|
+
* - `style` 在渲染闭包内解构(props 响应式)
|
|
13
|
+
*/
|
|
14
|
+
export interface FloatingArrowProps {
|
|
15
|
+
/**
|
|
16
|
+
* The floating context.
|
|
17
|
+
*/
|
|
18
|
+
context: Omit<FloatingContext, 'refs'> & {
|
|
19
|
+
refs: any;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Width of the arrow.
|
|
23
|
+
* @default 14
|
|
24
|
+
*/
|
|
25
|
+
width?: number | undefined;
|
|
26
|
+
/**
|
|
27
|
+
* Height of the arrow.
|
|
28
|
+
* @default 7
|
|
29
|
+
*/
|
|
30
|
+
height?: number | undefined;
|
|
31
|
+
/**
|
|
32
|
+
* The corner radius (rounding) of the arrow tip.
|
|
33
|
+
* @default 0 (sharp)
|
|
34
|
+
*/
|
|
35
|
+
tipRadius?: number | undefined;
|
|
36
|
+
/**
|
|
37
|
+
* Forces a static offset over dynamic positioning under a certain condition.
|
|
38
|
+
* If the shift() middleware causes the popover to shift, this value will be
|
|
39
|
+
* ignored.
|
|
40
|
+
*/
|
|
41
|
+
staticOffset?: string | number | null | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* Custom path string.
|
|
44
|
+
*/
|
|
45
|
+
d?: string | undefined;
|
|
46
|
+
/**
|
|
47
|
+
* Stroke (border) color of the arrow.
|
|
48
|
+
*/
|
|
49
|
+
stroke?: string | undefined;
|
|
50
|
+
/**
|
|
51
|
+
* Stroke (border) width of the arrow.
|
|
52
|
+
*/
|
|
53
|
+
strokeWidth?: number | undefined;
|
|
54
|
+
ref?: Ref<SVGSVGElement | null> | ((el: SVGSVGElement | null) => void) | undefined;
|
|
55
|
+
style?: Record<string, unknown> | undefined;
|
|
56
|
+
fill?: unknown;
|
|
57
|
+
[key: string]: unknown;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Renders a pointing arrow triangle.
|
|
61
|
+
* @see https://floating-ui.com/docs/FloatingArrow
|
|
62
|
+
*/
|
|
63
|
+
export declare const FloatingArrow: {
|
|
64
|
+
__setup: (props: FloatingArrowProps) => () => JSX.Element | null;
|
|
65
|
+
name?: string;
|
|
66
|
+
} & ((props: FloatingArrowProps) => () => JSX.Element | null);
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { type Ref } from '@actview/core';
|
|
2
|
+
import type { FloatingRootContext } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* actview 版(upstream 为 React 组件)。
|
|
5
|
+
*
|
|
6
|
+
* 与 upstream 的差异:
|
|
7
|
+
* - `React.createContext` → actview 官方 `createContext`(`.use()` 返回 `Ref<T>`)
|
|
8
|
+
* - `React.useReducer` → `ref()` + `setState`(Partial merge,.value 替换触发渲染)
|
|
9
|
+
* - `useModernLayoutEffect` → `watch`;effect cleanup → `onWatcherCleanup`
|
|
10
|
+
* - `useDelayGroupContext` / `useDelayGroup` 返回 `Ref`(渲染期读 .value);
|
|
11
|
+
* `id` 为 `computed`(floatingId 挂载后才有值)
|
|
12
|
+
*/
|
|
13
|
+
type Delay = number | Partial<{
|
|
14
|
+
open: number | undefined;
|
|
15
|
+
close: number | undefined;
|
|
16
|
+
}>;
|
|
17
|
+
interface GroupState {
|
|
18
|
+
delay: Delay;
|
|
19
|
+
initialDelay: Delay;
|
|
20
|
+
currentId: any;
|
|
21
|
+
timeoutMs: number;
|
|
22
|
+
isInstantPhase: boolean;
|
|
23
|
+
}
|
|
24
|
+
interface GroupContext extends GroupState {
|
|
25
|
+
setCurrentId: (currentId: any) => void;
|
|
26
|
+
setState: (next: Partial<GroupState>) => void;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* @deprecated
|
|
30
|
+
* Use the return value of `useDelayGroup()` instead.
|
|
31
|
+
*/
|
|
32
|
+
export declare const useDelayGroupContext: () => Ref<GroupContext>;
|
|
33
|
+
export interface FloatingDelayGroupProps {
|
|
34
|
+
children?: any;
|
|
35
|
+
/**
|
|
36
|
+
* The delay to use for the group.
|
|
37
|
+
*/
|
|
38
|
+
delay: Delay;
|
|
39
|
+
/**
|
|
40
|
+
* An optional explicit timeout to use for the group, which represents when
|
|
41
|
+
* grouping logic will no longer be active after the close delay completes.
|
|
42
|
+
* This is useful if you want grouping to “last” longer than the close delay,
|
|
43
|
+
* for example if there is no close delay at all.
|
|
44
|
+
*/
|
|
45
|
+
timeoutMs?: number | undefined;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Provides context for a group of floating elements that should share a
|
|
49
|
+
* `delay`.
|
|
50
|
+
* @see https://floating-ui.com/docs/FloatingDelayGroup
|
|
51
|
+
*/
|
|
52
|
+
export declare const FloatingDelayGroup: {
|
|
53
|
+
__setup: (props: FloatingDelayGroupProps) => () => JSX.Element;
|
|
54
|
+
name?: string;
|
|
55
|
+
} & ((props: FloatingDelayGroupProps) => () => JSX.Element);
|
|
56
|
+
interface UseGroupOptions {
|
|
57
|
+
/**
|
|
58
|
+
* Whether delay grouping should be enabled.
|
|
59
|
+
* @default true
|
|
60
|
+
*/
|
|
61
|
+
enabled?: boolean | undefined;
|
|
62
|
+
id?: any;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Enables grouping when called inside a component that's a child of a
|
|
66
|
+
* `FloatingDelayGroup`.
|
|
67
|
+
* @see https://floating-ui.com/docs/FloatingDelayGroup
|
|
68
|
+
*/
|
|
69
|
+
export declare function useDelayGroup(context: FloatingRootContext, options?: UseGroupOptions): Ref<GroupContext>;
|
|
70
|
+
export {};
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { type Ref } from '@actview/core';
|
|
2
|
+
import type { FloatingRootContext } from '../types';
|
|
3
|
+
export interface FloatingFocusManagerProps {
|
|
4
|
+
children: any;
|
|
5
|
+
/**
|
|
6
|
+
* The floating context returned from `useFloatingRootContext`.
|
|
7
|
+
*/
|
|
8
|
+
context: FloatingRootContext;
|
|
9
|
+
/**
|
|
10
|
+
* Whether or not the focus manager should be disabled. Useful to delay focus
|
|
11
|
+
* management until after a transition completes or some other conditional
|
|
12
|
+
* state.
|
|
13
|
+
* @default false
|
|
14
|
+
*/
|
|
15
|
+
disabled?: boolean | Ref<boolean> | undefined;
|
|
16
|
+
/**
|
|
17
|
+
* The order in which focus cycles.
|
|
18
|
+
* @default ['content']
|
|
19
|
+
*/
|
|
20
|
+
order?: Array<'reference' | 'floating' | 'content'> | undefined;
|
|
21
|
+
/**
|
|
22
|
+
* Which element to initially focus. Can be either a number (tabbable index as
|
|
23
|
+
* specified by the `order`) or a ref.
|
|
24
|
+
* @default 0
|
|
25
|
+
*/
|
|
26
|
+
initialFocus?: number | boolean | Ref<HTMLElement | null> | undefined;
|
|
27
|
+
/**
|
|
28
|
+
* Determines if the focus guards are rendered. If not, focus can escape into
|
|
29
|
+
* the address bar/console/browser UI, like in native dialogs.
|
|
30
|
+
* @default true
|
|
31
|
+
*/
|
|
32
|
+
guards?: boolean | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Determines if focus should be returned to the reference element once the
|
|
35
|
+
* floating element closes/unmounts (or if that is not available, the
|
|
36
|
+
* previously focused element). This prop is ignored if the floating element
|
|
37
|
+
* lost focus.
|
|
38
|
+
* It can be also set to a ref to explicitly control the element to return focus to.
|
|
39
|
+
* @default true
|
|
40
|
+
*/
|
|
41
|
+
returnFocus?: boolean | Ref<HTMLElement | null> | ((closeType: string) => boolean | HTMLElement | null | void) | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* Determines if focus should be restored to the nearest tabbable element if
|
|
44
|
+
* focus inside the floating element is lost (such as due to the removal of
|
|
45
|
+
* the currently focused element from the DOM).
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
restoreFocus?: boolean | 'popup' | undefined;
|
|
49
|
+
/**
|
|
50
|
+
* Determines if focus is “modal”, meaning focus is fully trapped inside the
|
|
51
|
+
* floating element and outside content cannot be accessed. This includes
|
|
52
|
+
* screen reader virtual cursors.
|
|
53
|
+
* @default true
|
|
54
|
+
*/
|
|
55
|
+
modal?: boolean | undefined;
|
|
56
|
+
/**
|
|
57
|
+
* If your focus management is modal and there is no explicit close button
|
|
58
|
+
* available, you can use this prop to render a visually-hidden dismiss
|
|
59
|
+
* button at the start and end of the floating element. This allows
|
|
60
|
+
* touch-based screen readers to escape the floating element due to lack of
|
|
61
|
+
* an `esc` key.
|
|
62
|
+
* @default undefined
|
|
63
|
+
*/
|
|
64
|
+
visuallyHiddenDismiss?: boolean | string | undefined;
|
|
65
|
+
/**
|
|
66
|
+
* Determines whether `focusout` event listeners that control whether the
|
|
67
|
+
* floating element should be closed if the focus moves outside of it are
|
|
68
|
+
* attached to the reference and floating elements. This affects non-modal
|
|
69
|
+
* focus management.
|
|
70
|
+
* @default true
|
|
71
|
+
*/
|
|
72
|
+
closeOnFocusOut?: boolean | undefined;
|
|
73
|
+
/**
|
|
74
|
+
* Determines whether outside elements are `inert` when `modal` is enabled.
|
|
75
|
+
* This enables pointer modality without a backdrop.
|
|
76
|
+
* @default false
|
|
77
|
+
*/
|
|
78
|
+
outsideElementsInert?: boolean | undefined;
|
|
79
|
+
/**
|
|
80
|
+
* Returns a list of elements that should be considered part of the
|
|
81
|
+
* floating element.
|
|
82
|
+
*/
|
|
83
|
+
getInsideElements?: (() => Element[]) | undefined;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Provides focus management for the floating element.
|
|
87
|
+
* @see https://floating-ui.com/docs/FloatingFocusManager
|
|
88
|
+
*/
|
|
89
|
+
export declare const FloatingFocusManager: {
|
|
90
|
+
__setup: (props: FloatingFocusManagerProps) => () => JSX.Element;
|
|
91
|
+
name?: string;
|
|
92
|
+
} & ((props: FloatingFocusManagerProps) => () => JSX.Element);
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { type Ref } from '@actview/core';
|
|
2
|
+
interface FloatingListContextValue {
|
|
3
|
+
register: (node: Node) => void;
|
|
4
|
+
unregister: (node: Node) => void;
|
|
5
|
+
map: Map<Node, number | null>;
|
|
6
|
+
elementsRef: Ref<Array<HTMLElement | null>>;
|
|
7
|
+
labelsRef?: Ref<Array<string | null>> | undefined;
|
|
8
|
+
}
|
|
9
|
+
export declare const FloatingListContext: import("@actview/core").Context<FloatingListContextValue>;
|
|
10
|
+
interface FloatingListProps {
|
|
11
|
+
children?: any;
|
|
12
|
+
/**
|
|
13
|
+
* A ref to the list of HTML elements, ordered by their index.
|
|
14
|
+
* `useListNavigation`'s `listRef` prop.
|
|
15
|
+
*/
|
|
16
|
+
elementsRef: Ref<Array<HTMLElement | null>>;
|
|
17
|
+
/**
|
|
18
|
+
* A ref to the list of element labels, ordered by their index.
|
|
19
|
+
* `useTypeahead`'s `listRef` prop.
|
|
20
|
+
*/
|
|
21
|
+
labelsRef?: Ref<Array<string | null>> | undefined;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Provides context for a list of items within the floating element.
|
|
25
|
+
* @see https://floating-ui.com/docs/FloatingList
|
|
26
|
+
*/
|
|
27
|
+
export declare const FloatingList: {
|
|
28
|
+
__setup: (props: FloatingListProps) => () => JSX.Element;
|
|
29
|
+
name?: string;
|
|
30
|
+
} & ((props: FloatingListProps) => () => JSX.Element);
|
|
31
|
+
export interface UseListItemProps {
|
|
32
|
+
label?: string | null | undefined;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Used to register a list item and its index (DOM position) in the
|
|
36
|
+
* `FloatingList`.
|
|
37
|
+
* @see https://floating-ui.com/docs/FloatingList#uselistitem
|
|
38
|
+
*/
|
|
39
|
+
export declare function useListItem(props?: UseListItemProps): {
|
|
40
|
+
ref: (node: HTMLElement | null) => void;
|
|
41
|
+
index: Ref<number>;
|
|
42
|
+
};
|
|
43
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface FloatingOverlayProps {
|
|
2
|
+
/**
|
|
3
|
+
* Whether the overlay should lock scrolling on the document body.
|
|
4
|
+
* @default false
|
|
5
|
+
*/
|
|
6
|
+
lockScroll?: boolean | undefined;
|
|
7
|
+
[key: string]: unknown;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Provides base styling for a fixed overlay element to dim content or block
|
|
11
|
+
* pointer events behind a floating element.
|
|
12
|
+
* It's a regular `<div>`, so it can be styled via any CSS solution you prefer.
|
|
13
|
+
* @see https://floating-ui.com/docs/FloatingOverlay
|
|
14
|
+
*/
|
|
15
|
+
export declare const FloatingOverlay: {
|
|
16
|
+
__setup: (props: FloatingOverlayProps) => () => JSX.Element;
|
|
17
|
+
name?: string;
|
|
18
|
+
} & ((props: FloatingOverlayProps) => () => JSX.Element);
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { type Ref } from '@actview/core';
|
|
2
|
+
import type { OpenChangeReason } from '../types';
|
|
3
|
+
type FocusManagerState = {
|
|
4
|
+
modal: boolean;
|
|
5
|
+
open: boolean;
|
|
6
|
+
onOpenChange(open: boolean, event?: Event, reason?: OpenChangeReason): void;
|
|
7
|
+
domReference: Element | null;
|
|
8
|
+
closeOnFocusOut: boolean;
|
|
9
|
+
} | null;
|
|
10
|
+
type SetFocusManagerState = (value: FocusManagerState | ((prev: FocusManagerState) => FocusManagerState)) => void;
|
|
11
|
+
interface PortalContextValue {
|
|
12
|
+
preserveTabOrder: boolean;
|
|
13
|
+
portalNode: HTMLElement | null;
|
|
14
|
+
setFocusManagerState: SetFocusManagerState;
|
|
15
|
+
beforeInsideRef: Ref<HTMLSpanElement | null>;
|
|
16
|
+
afterInsideRef: Ref<HTMLSpanElement | null>;
|
|
17
|
+
beforeOutsideRef: Ref<HTMLSpanElement | null>;
|
|
18
|
+
afterOutsideRef: Ref<HTMLSpanElement | null>;
|
|
19
|
+
}
|
|
20
|
+
export interface UseFloatingPortalNodeProps {
|
|
21
|
+
id?: string | undefined;
|
|
22
|
+
root?: HTMLElement | ShadowRoot | null | Ref<HTMLElement | ShadowRoot | null> | undefined;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* @see https://floating-ui.com/docs/FloatingPortal#usefloatingportalnode
|
|
26
|
+
*/
|
|
27
|
+
export declare function useFloatingPortalNode(props?: UseFloatingPortalNodeProps): Ref<HTMLElement | null>;
|
|
28
|
+
export interface FloatingPortalProps {
|
|
29
|
+
children?: any;
|
|
30
|
+
/**
|
|
31
|
+
* Optionally selects the node with the id if it exists, or create it and
|
|
32
|
+
* append it to the specified `root` (by default `document.body`).
|
|
33
|
+
*/
|
|
34
|
+
id?: string | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* Specifies the root node the portal container will be appended to.
|
|
37
|
+
*/
|
|
38
|
+
root?: HTMLElement | ShadowRoot | null | Ref<HTMLElement | ShadowRoot | null> | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* When using non-modal focus management using `FloatingFocusManager`, this
|
|
41
|
+
* will preserve the tab order context based on the React tree instead of the
|
|
42
|
+
* DOM tree.
|
|
43
|
+
*/
|
|
44
|
+
preserveTabOrder?: boolean | undefined;
|
|
45
|
+
/**
|
|
46
|
+
* Sets the ARIA role of the portal's aria-owns owner element (base-ui 变体).
|
|
47
|
+
*/
|
|
48
|
+
portalOwnerRole?: string | undefined;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Portals the floating element into a given container element — by default,
|
|
52
|
+
* outside of the app root and into the body.
|
|
53
|
+
* This is necessary to ensure the floating element can appear outside any
|
|
54
|
+
* potential parent containers that cause clipping (such as `overflow: hidden`),
|
|
55
|
+
* while retaining its location in the React tree.
|
|
56
|
+
* @see https://floating-ui.com/docs/FloatingPortal
|
|
57
|
+
*/
|
|
58
|
+
export declare const FloatingPortal: {
|
|
59
|
+
__setup: (props: FloatingPortalProps) => () => JSX.Element;
|
|
60
|
+
name?: string;
|
|
61
|
+
} & ((props: FloatingPortalProps) => () => JSX.Element);
|
|
62
|
+
export declare const usePortalContext: () => Ref<PortalContextValue | null>;
|
|
63
|
+
export {};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { type Ref } from '@actview/core';
|
|
2
|
+
import type { FloatingTreeType, ReferenceType } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Returns the parent node id for nested floating elements, if available.
|
|
5
|
+
* Returns `null` for top-level floating elements.
|
|
6
|
+
*/
|
|
7
|
+
export declare const useFloatingParentNodeId: () => string | null;
|
|
8
|
+
/**
|
|
9
|
+
* Returns the nearest floating tree context, if available.
|
|
10
|
+
*/
|
|
11
|
+
export declare const useFloatingTree: <RT extends ReferenceType = ReferenceType>() => FloatingTreeType<RT> | null;
|
|
12
|
+
/**
|
|
13
|
+
* Registers a node into the `FloatingTree`, returning its id.
|
|
14
|
+
* @see https://floating-ui.com/docs/FloatingTree
|
|
15
|
+
*/
|
|
16
|
+
export declare function useFloatingNodeId(customParentId?: string): Ref<string | undefined>;
|
|
17
|
+
export interface FloatingNodeProps {
|
|
18
|
+
children?: any;
|
|
19
|
+
id: string | undefined;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Provides parent node context for nested floating elements.
|
|
23
|
+
* @see https://floating-ui.com/docs/FloatingTree
|
|
24
|
+
*/
|
|
25
|
+
export declare const FloatingNode: {
|
|
26
|
+
__setup: (props: FloatingNodeProps) => () => JSX.Element;
|
|
27
|
+
name?: string;
|
|
28
|
+
} & ((props: FloatingNodeProps) => () => JSX.Element);
|
|
29
|
+
export interface FloatingTreeProps {
|
|
30
|
+
children?: any;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Provides context for nested floating elements when they are not children of
|
|
34
|
+
* each other on the DOM.
|
|
35
|
+
* This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
|
|
36
|
+
* - The `bubbles` option in the `useDismiss()` Hook
|
|
37
|
+
* - Nested virtual list navigation
|
|
38
|
+
* - Nested floating elements that each open on hover
|
|
39
|
+
* - Custom communication between parent and child floating elements
|
|
40
|
+
* @see https://floating-ui.com/docs/FloatingTree
|
|
41
|
+
*/
|
|
42
|
+
export declare const FloatingTree: {
|
|
43
|
+
__setup: (props: FloatingTreeProps) => () => JSX.Element;
|
|
44
|
+
name?: string;
|
|
45
|
+
} & ((props: FloatingTreeProps) => () => JSX.Element);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type Ref } from '@actview/core';
|
|
2
|
+
/**
|
|
3
|
+
* actview 版(upstream 为 React 组件)。
|
|
4
|
+
*
|
|
5
|
+
* 与 upstream 的差异:
|
|
6
|
+
* - `React.forwardRef` → `defineComponent`(`ref` 作为 prop 透传给底层 span)
|
|
7
|
+
* - `React.useState` → `ref()` + `onMounted`(Safari 检测)
|
|
8
|
+
* - `React.CSSProperties` → `Record<string, string | number>`
|
|
9
|
+
*/
|
|
10
|
+
export declare const HIDDEN_STYLES: Record<string, string | number>;
|
|
11
|
+
export interface FocusGuardProps {
|
|
12
|
+
children?: any;
|
|
13
|
+
ref?: Ref<HTMLSpanElement | null> | ((el: HTMLSpanElement | null) => void) | undefined;
|
|
14
|
+
[key: string]: unknown;
|
|
15
|
+
}
|
|
16
|
+
export declare const FocusGuard: {
|
|
17
|
+
__setup: (props: FocusGuardProps) => () => JSX.Element;
|
|
18
|
+
name?: string;
|
|
19
|
+
} & ((props: FocusGuardProps) => () => JSX.Element);
|