@radix-ui/react-popper 1.1.4-rc.9 → 1.2.0-rc.2
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/index.d.mts +38 -26
- package/dist/index.d.ts +38 -26
- package/dist/index.js +281 -316
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +284 -310
- package/dist/index.mjs.map +7 -1
- package/package.json +10 -11
- package/dist/index.d.ts.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -1,329 +1,303 @@
|
|
|
1
|
-
|
|
2
|
-
import {useState as $kY93V$useState, createElement as $kY93V$createElement, forwardRef as $kY93V$forwardRef, useRef as $kY93V$useRef, useEffect as $kY93V$useEffect} from "react";
|
|
3
|
-
import {useFloating as $kY93V$useFloating, autoUpdate as $kY93V$autoUpdate, offset as $kY93V$offset, shift as $kY93V$shift, limitShift as $kY93V$limitShift, flip as $kY93V$flip, size as $kY93V$size, arrow as $kY93V$arrow, hide as $kY93V$hide} from "@floating-ui/react-dom";
|
|
4
|
-
import {Root as $kY93V$Root} from "@radix-ui/react-arrow";
|
|
5
|
-
import {useComposedRefs as $kY93V$useComposedRefs} from "@radix-ui/react-compose-refs";
|
|
6
|
-
import {createContextScope as $kY93V$createContextScope} from "@radix-ui/react-context";
|
|
7
|
-
import {Primitive as $kY93V$Primitive} from "@radix-ui/react-primitive";
|
|
8
|
-
import {useCallbackRef as $kY93V$useCallbackRef} from "@radix-ui/react-use-callback-ref";
|
|
9
|
-
import {useLayoutEffect as $kY93V$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
|
|
10
|
-
import {useSize as $kY93V$useSize} from "@radix-ui/react-use-size";
|
|
1
|
+
"use client";
|
|
11
2
|
|
|
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
|
-
scope: __scopePopper,
|
|
43
|
-
anchor: anchor,
|
|
44
|
-
onAnchorChange: setAnchor
|
|
45
|
-
}, children);
|
|
3
|
+
// packages/react/popper/src/Popper.tsx
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import {
|
|
6
|
+
useFloating,
|
|
7
|
+
autoUpdate,
|
|
8
|
+
offset,
|
|
9
|
+
shift,
|
|
10
|
+
limitShift,
|
|
11
|
+
hide,
|
|
12
|
+
arrow as floatingUIarrow,
|
|
13
|
+
flip,
|
|
14
|
+
size
|
|
15
|
+
} from "@floating-ui/react-dom";
|
|
16
|
+
import * as ArrowPrimitive from "@radix-ui/react-arrow";
|
|
17
|
+
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
18
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
19
|
+
import { Primitive } from "@radix-ui/react-primitive";
|
|
20
|
+
import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
|
|
21
|
+
import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
|
|
22
|
+
import { useSize } from "@radix-ui/react-use-size";
|
|
23
|
+
import { jsx } from "react/jsx-runtime";
|
|
24
|
+
var SIDE_OPTIONS = ["top", "right", "bottom", "left"];
|
|
25
|
+
var ALIGN_OPTIONS = ["start", "center", "end"];
|
|
26
|
+
var POPPER_NAME = "Popper";
|
|
27
|
+
var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
|
|
28
|
+
var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
|
|
29
|
+
var Popper = (props) => {
|
|
30
|
+
const { __scopePopper, children } = props;
|
|
31
|
+
const [anchor, setAnchor] = React.useState(null);
|
|
32
|
+
return /* @__PURE__ */ jsx(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
|
|
46
33
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
const composedRefs = $kY93V$useComposedRefs(forwardedRef, ref);
|
|
58
|
-
$kY93V$useEffect(()=>{
|
|
59
|
-
// Consumer can anchor the popper to something that isn't
|
|
60
|
-
// a DOM node e.g. pointer position, so we override the
|
|
61
|
-
// `anchorRef` with their virtual ref in this case.
|
|
62
|
-
context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current);
|
|
34
|
+
Popper.displayName = POPPER_NAME;
|
|
35
|
+
var ANCHOR_NAME = "PopperAnchor";
|
|
36
|
+
var PopperAnchor = React.forwardRef(
|
|
37
|
+
(props, forwardedRef) => {
|
|
38
|
+
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
39
|
+
const context = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
40
|
+
const ref = React.useRef(null);
|
|
41
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
context.onAnchorChange(virtualRef?.current || ref.current);
|
|
63
44
|
});
|
|
64
|
-
return virtualRef ? null :
|
|
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
|
-
const
|
|
95
|
-
|
|
96
|
-
|
|
45
|
+
return virtualRef ? null : /* @__PURE__ */ jsx(Primitive.div, { ...anchorProps, ref: composedRefs });
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
PopperAnchor.displayName = ANCHOR_NAME;
|
|
49
|
+
var CONTENT_NAME = "PopperContent";
|
|
50
|
+
var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
|
|
51
|
+
var PopperContent = React.forwardRef(
|
|
52
|
+
(props, forwardedRef) => {
|
|
53
|
+
const {
|
|
54
|
+
__scopePopper,
|
|
55
|
+
side = "bottom",
|
|
56
|
+
sideOffset = 0,
|
|
57
|
+
align = "center",
|
|
58
|
+
alignOffset = 0,
|
|
59
|
+
arrowPadding = 0,
|
|
60
|
+
avoidCollisions = true,
|
|
61
|
+
collisionBoundary = [],
|
|
62
|
+
collisionPadding: collisionPaddingProp = 0,
|
|
63
|
+
sticky = "partial",
|
|
64
|
+
hideWhenDetached = false,
|
|
65
|
+
updatePositionStrategy = "optimized",
|
|
66
|
+
onPlaced,
|
|
67
|
+
...contentProps
|
|
68
|
+
} = props;
|
|
69
|
+
const context = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
70
|
+
const [content, setContent] = React.useState(null);
|
|
71
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
|
|
72
|
+
const [arrow, setArrow] = React.useState(null);
|
|
73
|
+
const arrowSize = useSize(arrow);
|
|
74
|
+
const arrowWidth = arrowSize?.width ?? 0;
|
|
75
|
+
const arrowHeight = arrowSize?.height ?? 0;
|
|
76
|
+
const desiredPlacement = side + (align !== "center" ? "-" + align : "");
|
|
77
|
+
const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
|
|
78
|
+
const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
|
|
97
79
|
const hasExplicitBoundaries = boundary.length > 0;
|
|
98
80
|
const detectOverflowOptions = {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
81
|
+
padding: collisionPadding,
|
|
82
|
+
boundary: boundary.filter(isNotNull),
|
|
83
|
+
// with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
|
|
84
|
+
altBoundary: hasExplicitBoundaries
|
|
103
85
|
};
|
|
104
|
-
const { refs
|
|
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
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}),
|
|
142
|
-
arrow && $kY93V$arrow({
|
|
143
|
-
element: arrow,
|
|
144
|
-
padding: arrowPadding
|
|
145
|
-
}),
|
|
146
|
-
$cf1ac5d9fe0e8206$var$transformOrigin({
|
|
147
|
-
arrowWidth: arrowWidth,
|
|
148
|
-
arrowHeight: arrowHeight
|
|
149
|
-
}),
|
|
150
|
-
hideWhenDetached && $kY93V$hide({
|
|
151
|
-
strategy: 'referenceHidden',
|
|
152
|
-
...detectOverflowOptions
|
|
153
|
-
})
|
|
154
|
-
]
|
|
86
|
+
const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({
|
|
87
|
+
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
|
|
88
|
+
strategy: "fixed",
|
|
89
|
+
placement: desiredPlacement,
|
|
90
|
+
whileElementsMounted: (...args) => {
|
|
91
|
+
const cleanup = autoUpdate(...args, {
|
|
92
|
+
animationFrame: updatePositionStrategy === "always"
|
|
93
|
+
});
|
|
94
|
+
return cleanup;
|
|
95
|
+
},
|
|
96
|
+
elements: {
|
|
97
|
+
reference: context.anchor
|
|
98
|
+
},
|
|
99
|
+
middleware: [
|
|
100
|
+
offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
|
|
101
|
+
avoidCollisions && shift({
|
|
102
|
+
mainAxis: true,
|
|
103
|
+
crossAxis: false,
|
|
104
|
+
limiter: sticky === "partial" ? limitShift() : void 0,
|
|
105
|
+
...detectOverflowOptions
|
|
106
|
+
}),
|
|
107
|
+
avoidCollisions && flip({ ...detectOverflowOptions }),
|
|
108
|
+
size({
|
|
109
|
+
...detectOverflowOptions,
|
|
110
|
+
apply: ({ elements, rects, availableWidth, availableHeight }) => {
|
|
111
|
+
const { width: anchorWidth, height: anchorHeight } = rects.reference;
|
|
112
|
+
const contentStyle = elements.floating.style;
|
|
113
|
+
contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
|
|
114
|
+
contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
|
|
115
|
+
contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
|
|
116
|
+
contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
|
|
117
|
+
}
|
|
118
|
+
}),
|
|
119
|
+
arrow && floatingUIarrow({ element: arrow, padding: arrowPadding }),
|
|
120
|
+
transformOrigin({ arrowWidth, arrowHeight }),
|
|
121
|
+
hideWhenDetached && hide({ strategy: "referenceHidden", ...detectOverflowOptions })
|
|
122
|
+
]
|
|
155
123
|
});
|
|
156
|
-
const [placedSide, placedAlign] =
|
|
157
|
-
const handlePlaced =
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
const
|
|
165
|
-
const
|
|
166
|
-
const
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
return /*#__PURE__*/ $kY93V$createElement("div", {
|
|
124
|
+
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
|
125
|
+
const handlePlaced = useCallbackRef(onPlaced);
|
|
126
|
+
useLayoutEffect(() => {
|
|
127
|
+
if (isPositioned) {
|
|
128
|
+
handlePlaced?.();
|
|
129
|
+
}
|
|
130
|
+
}, [isPositioned, handlePlaced]);
|
|
131
|
+
const arrowX = middlewareData.arrow?.x;
|
|
132
|
+
const arrowY = middlewareData.arrow?.y;
|
|
133
|
+
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
|
|
134
|
+
const [contentZIndex, setContentZIndex] = React.useState();
|
|
135
|
+
useLayoutEffect(() => {
|
|
136
|
+
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
137
|
+
}, [content]);
|
|
138
|
+
return /* @__PURE__ */ jsx(
|
|
139
|
+
"div",
|
|
140
|
+
{
|
|
174
141
|
ref: refs.setFloating,
|
|
175
142
|
"data-radix-popper-content-wrapper": "",
|
|
176
143
|
style: {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
}
|
|
194
|
-
,
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
144
|
+
...floatingStyles,
|
|
145
|
+
transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
|
|
146
|
+
// keep off the page when measuring
|
|
147
|
+
minWidth: "max-content",
|
|
148
|
+
zIndex: contentZIndex,
|
|
149
|
+
["--radix-popper-transform-origin"]: [
|
|
150
|
+
middlewareData.transformOrigin?.x,
|
|
151
|
+
middlewareData.transformOrigin?.y
|
|
152
|
+
].join(" "),
|
|
153
|
+
// hide the content if using the hide middleware and should be hidden
|
|
154
|
+
// set visibility to hidden and disable pointer events so the UI behaves
|
|
155
|
+
// as if the PopperContent isn't there at all
|
|
156
|
+
...middlewareData.hide?.referenceHidden && {
|
|
157
|
+
visibility: "hidden",
|
|
158
|
+
pointerEvents: "none"
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
dir: props.dir,
|
|
162
|
+
children: /* @__PURE__ */ jsx(
|
|
163
|
+
PopperContentProvider,
|
|
164
|
+
{
|
|
165
|
+
scope: __scopePopper,
|
|
166
|
+
placedSide,
|
|
167
|
+
onArrowChange: setArrow,
|
|
168
|
+
arrowX,
|
|
169
|
+
arrowY,
|
|
170
|
+
shouldHideArrow: cannotCenterArrow,
|
|
171
|
+
children: /* @__PURE__ */ jsx(
|
|
172
|
+
Primitive.div,
|
|
173
|
+
{
|
|
174
|
+
"data-side": placedSide,
|
|
175
|
+
"data-align": placedAlign,
|
|
176
|
+
...contentProps,
|
|
177
|
+
ref: composedRefs,
|
|
178
|
+
style: {
|
|
179
|
+
...contentProps.style,
|
|
180
|
+
// if the PopperContent hasn't been placed yet (not all measurements done)
|
|
181
|
+
// we prevent animations so that users's animation don't kick in too early referring wrong sides
|
|
182
|
+
animation: !isPositioned ? "none" : void 0
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
)
|
|
186
|
+
}
|
|
187
|
+
)
|
|
188
|
+
}
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
);
|
|
192
|
+
PopperContent.displayName = CONTENT_NAME;
|
|
193
|
+
var ARROW_NAME = "PopperArrow";
|
|
194
|
+
var OPPOSITE_SIDE = {
|
|
195
|
+
top: "bottom",
|
|
196
|
+
right: "left",
|
|
197
|
+
bottom: "top",
|
|
198
|
+
left: "right"
|
|
227
199
|
};
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
200
|
+
var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
201
|
+
const { __scopePopper, ...arrowProps } = props;
|
|
202
|
+
const contentContext = useContentContext(ARROW_NAME, __scopePopper);
|
|
203
|
+
const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
|
|
204
|
+
return (
|
|
205
|
+
// we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
|
|
233
206
|
// doesn't report size as we'd expect on SVG elements.
|
|
234
207
|
// it reports their bounding box which is effectively the largest path inside the SVG.
|
|
235
|
-
|
|
208
|
+
/* @__PURE__ */ jsx(
|
|
209
|
+
"span",
|
|
210
|
+
{
|
|
236
211
|
ref: contentContext.onArrowChange,
|
|
237
212
|
style: {
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
...arrowProps
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
213
|
+
position: "absolute",
|
|
214
|
+
left: contentContext.arrowX,
|
|
215
|
+
top: contentContext.arrowY,
|
|
216
|
+
[baseSide]: 0,
|
|
217
|
+
transformOrigin: {
|
|
218
|
+
top: "",
|
|
219
|
+
right: "0 0",
|
|
220
|
+
bottom: "center 0",
|
|
221
|
+
left: "100% 0"
|
|
222
|
+
}[contentContext.placedSide],
|
|
223
|
+
transform: {
|
|
224
|
+
top: "translateY(100%)",
|
|
225
|
+
right: "translateY(50%) rotate(90deg) translateX(-50%)",
|
|
226
|
+
bottom: `rotate(180deg)`,
|
|
227
|
+
left: "translateY(50%) rotate(-90deg) translateX(50%)"
|
|
228
|
+
}[contentContext.placedSide],
|
|
229
|
+
visibility: contentContext.shouldHideArrow ? "hidden" : void 0
|
|
230
|
+
},
|
|
231
|
+
children: /* @__PURE__ */ jsx(
|
|
232
|
+
ArrowPrimitive.Root,
|
|
233
|
+
{
|
|
234
|
+
...arrowProps,
|
|
235
|
+
ref: forwardedRef,
|
|
236
|
+
style: {
|
|
237
|
+
...arrowProps.style,
|
|
238
|
+
// ensures the element can be measured correctly (mostly for if SVG)
|
|
239
|
+
display: "block"
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
)
|
|
243
|
+
}
|
|
244
|
+
)
|
|
245
|
+
);
|
|
267
246
|
});
|
|
268
|
-
|
|
269
|
-
|
|
247
|
+
PopperArrow.displayName = ARROW_NAME;
|
|
248
|
+
function isNotNull(value) {
|
|
249
|
+
return value !== null;
|
|
270
250
|
}
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
data: {
|
|
306
|
-
x: x,
|
|
307
|
-
y: y
|
|
308
|
-
}
|
|
309
|
-
};
|
|
310
|
-
}
|
|
311
|
-
})
|
|
312
|
-
;
|
|
313
|
-
function $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement) {
|
|
314
|
-
const [side, align = 'center'] = placement.split('-');
|
|
315
|
-
return [
|
|
316
|
-
side,
|
|
317
|
-
align
|
|
318
|
-
];
|
|
251
|
+
var transformOrigin = (options) => ({
|
|
252
|
+
name: "transformOrigin",
|
|
253
|
+
options,
|
|
254
|
+
fn(data) {
|
|
255
|
+
const { placement, rects, middlewareData } = data;
|
|
256
|
+
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
|
|
257
|
+
const isArrowHidden = cannotCenterArrow;
|
|
258
|
+
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
|
|
259
|
+
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
|
|
260
|
+
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
|
261
|
+
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
|
|
262
|
+
const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
|
|
263
|
+
const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
|
|
264
|
+
let x = "";
|
|
265
|
+
let y = "";
|
|
266
|
+
if (placedSide === "bottom") {
|
|
267
|
+
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
268
|
+
y = `${-arrowHeight}px`;
|
|
269
|
+
} else if (placedSide === "top") {
|
|
270
|
+
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
271
|
+
y = `${rects.floating.height + arrowHeight}px`;
|
|
272
|
+
} else if (placedSide === "right") {
|
|
273
|
+
x = `${-arrowHeight}px`;
|
|
274
|
+
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
275
|
+
} else if (placedSide === "left") {
|
|
276
|
+
x = `${rects.floating.width + arrowHeight}px`;
|
|
277
|
+
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
278
|
+
}
|
|
279
|
+
return { data: { x, y } };
|
|
280
|
+
}
|
|
281
|
+
});
|
|
282
|
+
function getSideAndAlignFromPlacement(placement) {
|
|
283
|
+
const [side, align = "center"] = placement.split("-");
|
|
284
|
+
return [side, align];
|
|
319
285
|
}
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
286
|
+
var Root2 = Popper;
|
|
287
|
+
var Anchor = PopperAnchor;
|
|
288
|
+
var Content = PopperContent;
|
|
289
|
+
var Arrow = PopperArrow;
|
|
290
|
+
export {
|
|
291
|
+
ALIGN_OPTIONS,
|
|
292
|
+
Anchor,
|
|
293
|
+
Arrow,
|
|
294
|
+
Content,
|
|
295
|
+
Popper,
|
|
296
|
+
PopperAnchor,
|
|
297
|
+
PopperArrow,
|
|
298
|
+
PopperContent,
|
|
299
|
+
Root2 as Root,
|
|
300
|
+
SIDE_OPTIONS,
|
|
301
|
+
createPopperScope
|
|
302
|
+
};
|
|
329
303
|
//# sourceMappingURL=index.mjs.map
|