-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
/
middleware.ts
130 lines (119 loc) · 3.94 KB
/
middleware.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import type {
Coords,
InlineOptions,
LimitShiftOptions,
SideObject,
} from '@floating-ui/core';
import {
arrow as arrowCore,
autoPlacement as autoPlacementCore,
detectOverflow as detectOverflowCore,
flip as flipCore,
hide as hideCore,
inline as inlineCore,
limitShift as limitShiftCore,
offset as offsetCore,
shift as shiftCore,
size as sizeCore,
} from '@floating-ui/core';
import type {
ArrowOptions,
AutoPlacementOptions,
Derivable,
DetectOverflowOptions,
FlipOptions,
HideOptions,
Middleware,
MiddlewareState,
OffsetOptions,
ShiftOptions,
SizeOptions,
} from './types';
/**
* Resolves with an object of overflow side offsets that determine how much the
* element is overflowing a given clipping boundary on each side.
* - positive = overflowing the boundary by that number of pixels
* - negative = how many pixels left before it will overflow
* - 0 = lies flush with the boundary
* @see https://floating-ui.com/docs/detectOverflow
*/
export const detectOverflow: (
state: MiddlewareState,
options?: DetectOverflowOptions | Derivable<DetectOverflowOptions>,
) => Promise<SideObject> = detectOverflowCore;
/**
* Modifies the placement by translating the floating element along the
* specified axes.
* A number (shorthand for `mainAxis` or distance), or an axes configuration
* object may be passed.
* @see https://floating-ui.com/docs/offset
*/
export const offset: (options?: OffsetOptions) => Middleware = offsetCore;
/**
* Optimizes the visibility of the floating element by choosing the placement
* that has the most space available automatically, without needing to specify a
* preferred placement. Alternative to `flip`.
* @see https://floating-ui.com/docs/autoPlacement
*/
export const autoPlacement: (
options?: AutoPlacementOptions | Derivable<AutoPlacementOptions>,
) => Middleware = autoPlacementCore;
/**
* Optimizes the visibility of the floating element by shifting it in order to
* keep it in view when it will overflow the clipping boundary.
* @see https://floating-ui.com/docs/shift
*/
export const shift: (
options?: ShiftOptions | Derivable<ShiftOptions>,
) => Middleware = shiftCore;
/**
* Optimizes the visibility of the floating element by flipping the `placement`
* in order to keep it in view when the preferred placement(s) will overflow the
* clipping boundary. Alternative to `autoPlacement`.
* @see https://floating-ui.com/docs/flip
*/
export const flip: (
options?: FlipOptions | Derivable<FlipOptions>,
) => Middleware = flipCore;
/**
* Provides data that allows you to change the size of the floating element —
* for instance, prevent it from overflowing the clipping boundary or match the
* width of the reference element.
* @see https://floating-ui.com/docs/size
*/
export const size: (
options?: SizeOptions | Derivable<SizeOptions>,
) => Middleware = sizeCore;
/**
* Provides data to hide the floating element in applicable situations, such as
* when it is not in the same clipping context as the reference element.
* @see https://floating-ui.com/docs/hide
*/
export const hide: (
options?: HideOptions | Derivable<HideOptions>,
) => Middleware = hideCore;
/**
* Provides data to position an inner element of the floating element so that it
* appears centered to the reference element.
* @see https://floating-ui.com/docs/arrow
*/
export const arrow: (
options: ArrowOptions | Derivable<ArrowOptions>,
) => Middleware = arrowCore;
/**
* Provides improved positioning for inline reference elements that can span
* over multiple lines, such as hyperlinks or range selections.
* @see https://floating-ui.com/docs/inline
*/
export const inline: (
options?: InlineOptions | Derivable<InlineOptions>,
) => Middleware = inlineCore;
/**
* Built-in `limiter` that will stop `shift()` at a certain point.
*/
export const limitShift: (
options?: LimitShiftOptions | Derivable<LimitShiftOptions>,
) => {
options: any;
fn: (state: MiddlewareState) => Coords;
} = limitShiftCore;