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