@atlaskit/popper 8.0.1 → 8.2.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/CHANGELOG.md +31 -1
- package/dist/cjs/index.js +4 -3
- package/dist/cjs/internal/anchor-context.js +17 -0
- package/dist/cjs/internal/anchor-setter-context.js +17 -0
- package/dist/cjs/internal/read-viewport.js +31 -0
- package/dist/cjs/internal/rect-point-for-placement.js +93 -0
- package/dist/cjs/internal/set-style.js +43 -0
- package/dist/cjs/internal/use-anchor-state.js +23 -0
- package/dist/cjs/internal/use-fit-viewport-max-size.js +155 -0
- package/dist/cjs/internal/use-manager-anchor-setter.js +16 -0
- package/dist/cjs/internal/use-manager-anchor.js +16 -0
- package/dist/cjs/internal/use-reference-visibility.js +164 -0
- package/dist/cjs/manager.js +37 -0
- package/dist/cjs/popper-top-layer.js +286 -0
- package/dist/cjs/popper.js +48 -12
- package/dist/cjs/reference.js +44 -0
- package/dist/es2019/index.js +6 -1
- package/dist/es2019/internal/anchor-context.js +12 -0
- package/dist/es2019/internal/anchor-setter-context.js +9 -0
- package/dist/es2019/internal/read-viewport.js +25 -0
- package/dist/es2019/internal/rect-point-for-placement.js +91 -0
- package/dist/es2019/internal/set-style.js +39 -0
- package/dist/es2019/internal/use-anchor-state.js +12 -0
- package/dist/es2019/internal/use-fit-viewport-max-size.js +151 -0
- package/dist/es2019/internal/use-manager-anchor-setter.js +11 -0
- package/dist/es2019/internal/use-manager-anchor.js +11 -0
- package/dist/es2019/internal/use-reference-visibility.js +146 -0
- package/dist/es2019/manager.js +33 -0
- package/dist/es2019/popper-top-layer.js +267 -0
- package/dist/es2019/popper.js +37 -0
- package/dist/es2019/reference.js +35 -0
- package/dist/esm/index.js +6 -1
- package/dist/esm/internal/anchor-context.js +12 -0
- package/dist/esm/internal/anchor-setter-context.js +11 -0
- package/dist/esm/internal/read-viewport.js +25 -0
- package/dist/esm/internal/rect-point-for-placement.js +87 -0
- package/dist/esm/internal/set-style.js +37 -0
- package/dist/esm/internal/use-anchor-state.js +16 -0
- package/dist/esm/internal/use-fit-viewport-max-size.js +149 -0
- package/dist/esm/internal/use-manager-anchor-setter.js +11 -0
- package/dist/esm/internal/use-manager-anchor.js +11 -0
- package/dist/esm/internal/use-reference-visibility.js +157 -0
- package/dist/esm/manager.js +31 -0
- package/dist/esm/popper-top-layer.js +277 -0
- package/dist/esm/popper.js +48 -12
- package/dist/esm/reference.js +36 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/internal/anchor-context.d.ts +11 -0
- package/dist/types/internal/anchor-setter-context.d.ts +11 -0
- package/dist/types/internal/read-viewport.d.ts +12 -0
- package/dist/types/internal/rect-point-for-placement.d.ts +19 -0
- package/dist/types/internal/set-style.d.ts +14 -0
- package/dist/types/internal/use-anchor-state.d.ts +10 -0
- package/dist/types/internal/use-fit-viewport-max-size.d.ts +53 -0
- package/dist/types/internal/use-manager-anchor-setter.d.ts +7 -0
- package/dist/types/internal/use-manager-anchor.d.ts +6 -0
- package/dist/types/internal/use-reference-visibility.d.ts +32 -0
- package/dist/types/manager.d.ts +13 -0
- package/dist/types/popper-top-layer.d.ts +20 -0
- package/dist/types/reference.d.ts +25 -0
- package/package.json +20 -9
- package/popper.docs.tsx +1 -0
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.Manager = Manager;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _reactPopper = require("react-popper");
|
|
10
|
+
var _anchorContext = require("./internal/anchor-context");
|
|
11
|
+
var _anchorSetterContext = require("./internal/anchor-setter-context");
|
|
12
|
+
var _useAnchorState2 = require("./internal/use-anchor-state");
|
|
13
|
+
// Derive the wrapper's props from `react-popper`'s own `ManagerProps` so the
|
|
14
|
+
// public surface provably accepts exactly what the underlying `<Manager>`
|
|
15
|
+
// accepts (today just `children`) and stays in sync if that contract changes.
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Wraps `react-popper`'s `<Manager>` so the anchor that `<Reference>`
|
|
19
|
+
* captures is published through `@atlaskit/popper`'s own bridge context.
|
|
20
|
+
* Doing so insulates `<Popper>` consumers from `react-popper`'s dual
|
|
21
|
+
* CJS / ESM builds, which otherwise create two unrelated context
|
|
22
|
+
* instances that prevent the FF-on top-layer adapter from discovering
|
|
23
|
+
* the anchor.
|
|
24
|
+
*/
|
|
25
|
+
function Manager(_ref) {
|
|
26
|
+
var children = _ref.children;
|
|
27
|
+
// `setAnchor` is the `useState` setter, which React guarantees is stable
|
|
28
|
+
// across renders, so it can be passed straight to the context provider.
|
|
29
|
+
var _useAnchorState = (0, _useAnchorState2.useAnchorState)(),
|
|
30
|
+
anchor = _useAnchorState.anchor,
|
|
31
|
+
setAnchor = _useAnchorState.setAnchor;
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_reactPopper.Manager, null, /*#__PURE__*/_react.default.createElement(_anchorSetterContext.AnchorSetterContext.Provider, {
|
|
33
|
+
value: setAnchor
|
|
34
|
+
}, /*#__PURE__*/_react.default.createElement(_anchorContext.AnchorContext.Provider, {
|
|
35
|
+
value: anchor
|
|
36
|
+
}, children)));
|
|
37
|
+
}
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
/* popper-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.PopperTopLayer = PopperTopLayer;
|
|
10
|
+
var _runtime = require("@compiled/react/runtime");
|
|
11
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _browserApis = require("@atlaskit/browser-apis");
|
|
14
|
+
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
15
|
+
var _placementMap = require("@atlaskit/top-layer/placement-map");
|
|
16
|
+
var _popover = require("@atlaskit/top-layer/popover");
|
|
17
|
+
var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
|
|
18
|
+
var _useAnchorPositionAtPoint = require("@atlaskit/top-layer/use-anchor-position-at-point");
|
|
19
|
+
var _usePopoverId = require("@atlaskit/top-layer/use-popover-id");
|
|
20
|
+
var _useWidthFromAnchor = require("@atlaskit/top-layer/use-width-from-anchor");
|
|
21
|
+
var _rectPointForPlacement = require("./internal/rect-point-for-placement");
|
|
22
|
+
var _useFitViewportMaxSize = require("./internal/use-fit-viewport-max-size");
|
|
23
|
+
var _useManagerAnchor = require("./internal/use-manager-anchor");
|
|
24
|
+
var _useReferenceVisibility = require("./internal/use-reference-visibility");
|
|
25
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
26
|
+
/**
|
|
27
|
+
* Inert render-prop values. The browser owns positioning under CSS Anchor
|
|
28
|
+
* Positioning, so `style` / `ref` / `arrowProps` / `update` / `forceUpdate`
|
|
29
|
+
* are no-ops that consumers can safely spread. Module scope keeps identities
|
|
30
|
+
* stable for effect dep arrays.
|
|
31
|
+
*/
|
|
32
|
+
var noopStyle = {};
|
|
33
|
+
var noopSetRef = _noop.default;
|
|
34
|
+
var noopUpdate = function noopUpdate() {
|
|
35
|
+
return Promise.resolve(null);
|
|
36
|
+
};
|
|
37
|
+
var noopForceUpdate = function noopForceUpdate() {
|
|
38
|
+
return {};
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* `react-popper` stamps `data-popper-arrow` on the arrow element at runtime
|
|
43
|
+
* but does not declare it on `arrowProps`. Widen the type so consumers that
|
|
44
|
+
* rely on the attribute (CSS selectors, snapshots, tests) keep working.
|
|
45
|
+
*/
|
|
46
|
+
|
|
47
|
+
var noopArrowProps = {
|
|
48
|
+
ref: noopSetRef,
|
|
49
|
+
style: noopStyle,
|
|
50
|
+
'data-popper-arrow': true
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Returns whether the current page is laid out right-to-left.
|
|
55
|
+
*/
|
|
56
|
+
function isPageRtl() {
|
|
57
|
+
var document = (0, _browserApis.getDocument)();
|
|
58
|
+
if (!document) {
|
|
59
|
+
return false;
|
|
60
|
+
}
|
|
61
|
+
return document.dir === 'rtl' || document.body.dir === 'rtl' || document.documentElement.dir === 'rtl';
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* `@popperjs/core`'s `Placement` union is a strict subset of
|
|
66
|
+
* `TLegacyPlacement` (the placement-map adds `top-center` /
|
|
67
|
+
* `bottom-center` on top of popper's enum), so every value popper hands
|
|
68
|
+
* us is a valid legacy placement. The cast keeps the runtime path free
|
|
69
|
+
* of an extra module-level lookup that bundlers can occasionally fail
|
|
70
|
+
* to wire up (observed as `Cannot read properties of undefined (reading
|
|
71
|
+
* 'includes')` in component-test bundles).
|
|
72
|
+
*/
|
|
73
|
+
function toLegacyPlacement(placement) {
|
|
74
|
+
return placement;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Returns the primary axis (`top` / `bottom` / `left` / `right`) of a popper
|
|
79
|
+
* placement, used to pick which axis `useFitViewportMaxSize` caps to the
|
|
80
|
+
* anchor edge.
|
|
81
|
+
*/
|
|
82
|
+
function getPlacementAxis(placement) {
|
|
83
|
+
if (placement.startsWith('top')) {
|
|
84
|
+
return 'top';
|
|
85
|
+
}
|
|
86
|
+
if (placement.startsWith('bottom')) {
|
|
87
|
+
return 'bottom';
|
|
88
|
+
}
|
|
89
|
+
if (placement.startsWith('left')) {
|
|
90
|
+
return 'left';
|
|
91
|
+
}
|
|
92
|
+
if (placement.startsWith('right')) {
|
|
93
|
+
return 'right';
|
|
94
|
+
}
|
|
95
|
+
// `auto*` placements have no fixed axis. Default to `bottom` to match the
|
|
96
|
+
// `auto -> block-end` mapping in `fromLegacyPlacement`.
|
|
97
|
+
return 'bottom';
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Normalises popper's `[along, away]` offset (which may include `null` or
|
|
102
|
+
* `undefined` entries) into the `[along, away]` number tuple
|
|
103
|
+
* `fromLegacyPlacement` expects.
|
|
104
|
+
*/
|
|
105
|
+
function popperToTopLayerOffset(offset) {
|
|
106
|
+
if (!offset) {
|
|
107
|
+
return undefined;
|
|
108
|
+
}
|
|
109
|
+
var _offset = (0, _slicedToArray2.default)(offset, 2),
|
|
110
|
+
along = _offset[0],
|
|
111
|
+
away = _offset[1];
|
|
112
|
+
if (along == null && away == null) {
|
|
113
|
+
return undefined;
|
|
114
|
+
}
|
|
115
|
+
return [along !== null && along !== void 0 ? along : 0, away !== null && away !== void 0 ? away : 0];
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* FF-on implementation of `@atlaskit/popper`'s `<Popper>` primitive.
|
|
120
|
+
*
|
|
121
|
+
* Renders the consumer's render-prop output into a `<Popover>` from
|
|
122
|
+
* `@atlaskit/top-layer`, which lifts the element into the browser top
|
|
123
|
+
* layer and positions it via CSS Anchor Positioning. The render-prop
|
|
124
|
+
* contract (`PopperChildrenProps`) is preserved at the type level;
|
|
125
|
+
* `style` and `arrowProps.style` are inert at runtime because the
|
|
126
|
+
* browser owns positioning.
|
|
127
|
+
*
|
|
128
|
+
* Gated behind the `platform-dst-top-layer` feature flag from
|
|
129
|
+
* `popper.tsx`.
|
|
130
|
+
*/
|
|
131
|
+
function PopperTopLayer(_ref) {
|
|
132
|
+
var _ref2;
|
|
133
|
+
var children = _ref.children,
|
|
134
|
+
offset = _ref.offset,
|
|
135
|
+
_ref$placement = _ref.placement,
|
|
136
|
+
placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
|
|
137
|
+
referenceElement = _ref.referenceElement,
|
|
138
|
+
_ref$shouldFitViewpor = _ref.shouldFitViewport,
|
|
139
|
+
shouldFitViewport = _ref$shouldFitViewpor === void 0 ? false : _ref$shouldFitViewpor;
|
|
140
|
+
// `modifiers` and `strategy` are accepted for source compatibility but have
|
|
141
|
+
// no runtime effect; CSS Anchor Positioning + top-layer rendering replaces
|
|
142
|
+
// them. See `top-layer/notes/migrations/popper-migration.md`.
|
|
143
|
+
|
|
144
|
+
// Anchor resolution: `referenceElement` prop, then `<Manager>` context.
|
|
145
|
+
var managerAnchor = (0, _useManagerAnchor.useManagerAnchor)();
|
|
146
|
+
var effectiveReference = (_ref2 = referenceElement !== null && referenceElement !== void 0 ? referenceElement : managerAnchor) !== null && _ref2 !== void 0 ? _ref2 : undefined;
|
|
147
|
+
|
|
148
|
+
// Real DOM nodes go to `useAnchorPosition`; popper `VirtualElement`s are
|
|
149
|
+
// bridged through `useAnchorPositionAtPoint`, which owns its own synthetic
|
|
150
|
+
// anchor.
|
|
151
|
+
var htmlAnchor = effectiveReference instanceof HTMLElement ? effectiveReference : null;
|
|
152
|
+
var virtualReference = effectiveReference != null && !(effectiveReference instanceof HTMLElement) ? effectiveReference : null;
|
|
153
|
+
var htmlAnchorRef = (0, _react.useRef)(htmlAnchor);
|
|
154
|
+
htmlAnchorRef.current = htmlAnchor;
|
|
155
|
+
var popoverRef = (0, _react.useRef)(null);
|
|
156
|
+
var popoverId = (0, _usePopoverId.usePopoverId)();
|
|
157
|
+
|
|
158
|
+
// Track the resolved DOM anchor in state so visibility / max-size hooks
|
|
159
|
+
// re-run when its identity changes. Virtual anchors do not feed these
|
|
160
|
+
// hooks because their probe is outside the consumer's DOM.
|
|
161
|
+
//
|
|
162
|
+
// Adjust state during render by comparing against the state itself: the
|
|
163
|
+
// conditional guard means `setResolvedAnchor` is skipped once they match,
|
|
164
|
+
// so it converges in one extra render. This is the React-documented pattern
|
|
165
|
+
// and is side-effect-free — no ref mutation during render.
|
|
166
|
+
var _useState = (0, _react.useState)(htmlAnchor),
|
|
167
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
168
|
+
resolvedAnchor = _useState2[0],
|
|
169
|
+
setResolvedAnchor = _useState2[1];
|
|
170
|
+
if (resolvedAnchor !== htmlAnchor) {
|
|
171
|
+
setResolvedAnchor(htmlAnchor);
|
|
172
|
+
}
|
|
173
|
+
var topLayerPlacement = (0, _react.useMemo)(function () {
|
|
174
|
+
return (0, _placementMap.fromLegacyPlacement)({
|
|
175
|
+
legacy: toLegacyPlacement(placement),
|
|
176
|
+
offset: popperToTopLayerOffset(offset)
|
|
177
|
+
});
|
|
178
|
+
}, [placement, offset]);
|
|
179
|
+
var isOpen = effectiveReference != null;
|
|
180
|
+
|
|
181
|
+
// HTML-element path. No-op when the reference is virtual or absent.
|
|
182
|
+
(0, _useAnchorPosition.useAnchorPosition)({
|
|
183
|
+
anchorRef: htmlAnchorRef,
|
|
184
|
+
popoverRef: popoverRef,
|
|
185
|
+
placement: topLayerPlacement,
|
|
186
|
+
isEnabled: htmlAnchor != null,
|
|
187
|
+
isOpen: isOpen
|
|
188
|
+
});
|
|
189
|
+
|
|
190
|
+
// Virtual-element path. `useAnchorPositionAtPoint` owns a synthetic
|
|
191
|
+
// anchor in `document.body` and latches `getPoint` once per
|
|
192
|
+
// `isEnabled` activation. Reading the latest `virtualReference` and
|
|
193
|
+
// `topLayerPlacement` via refs ensures the latched closure always
|
|
194
|
+
// sees the current values rather than the ones captured at first
|
|
195
|
+
// activation, which would otherwise go stale if either prop changes
|
|
196
|
+
// while the popper stays open.
|
|
197
|
+
var virtualReferenceRef = (0, _react.useRef)(virtualReference);
|
|
198
|
+
virtualReferenceRef.current = virtualReference;
|
|
199
|
+
var topLayerPlacementRef = (0, _react.useRef)(topLayerPlacement);
|
|
200
|
+
topLayerPlacementRef.current = topLayerPlacement;
|
|
201
|
+
var isVirtualEnabled = virtualReference != null;
|
|
202
|
+
(0, _useAnchorPositionAtPoint.useAnchorPositionAtPoint)({
|
|
203
|
+
popoverRef: popoverRef,
|
|
204
|
+
placement: topLayerPlacement,
|
|
205
|
+
isEnabled: isVirtualEnabled,
|
|
206
|
+
isOpen: isOpen,
|
|
207
|
+
getPoint: function getPoint() {
|
|
208
|
+
var current = virtualReferenceRef.current;
|
|
209
|
+
if (!current) {
|
|
210
|
+
return null;
|
|
211
|
+
}
|
|
212
|
+
return (0, _rectPointForPlacement.rectPointForPlacement)({
|
|
213
|
+
rect: current.getBoundingClientRect(),
|
|
214
|
+
placement: topLayerPlacementRef.current,
|
|
215
|
+
isRtl: isPageRtl()
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
var _useReferenceVisibili = (0, _useReferenceVisibility.useReferenceVisibility)({
|
|
220
|
+
anchor: resolvedAnchor,
|
|
221
|
+
popoverRef: popoverRef
|
|
222
|
+
}),
|
|
223
|
+
isReferenceHidden = _useReferenceVisibili.isReferenceHidden,
|
|
224
|
+
hasPopperEscaped = _useReferenceVisibili.hasPopperEscaped;
|
|
225
|
+
|
|
226
|
+
// Restore legacy `react-popper`'s natural-width behaviour. Under CSS
|
|
227
|
+
// Anchor Positioning the `position-area` grid cell becomes the popover
|
|
228
|
+
// host's containing block, so an auto-width host shrinks to that cell.
|
|
229
|
+
// When the anchor sits near a viewport edge the cell is narrow, so the
|
|
230
|
+
// content wraps far more than it did under `react-popper` (which kept the
|
|
231
|
+
// content's natural width and shifted/flipped to stay on screen).
|
|
232
|
+
// `min-inline-size: max-content` (mode `'none'`) floors the host at its
|
|
233
|
+
// content's intrinsic width, so a too-narrow span overflows the viewport
|
|
234
|
+
// (driving `position-try-fallbacks`) instead of wrapping. This is safe
|
|
235
|
+
// alongside `shouldFitViewport`: the fit caps clamp the host on both axes,
|
|
236
|
+
// so the host never exceeds the viewport / anchor-edge cap.
|
|
237
|
+
(0, _useWidthFromAnchor.useWidthFromAnchor)({
|
|
238
|
+
mode: 'none',
|
|
239
|
+
popoverRef: popoverRef,
|
|
240
|
+
anchorRef: htmlAnchorRef,
|
|
241
|
+
isOpen: isOpen
|
|
242
|
+
});
|
|
243
|
+
|
|
244
|
+
// `shouldFitViewport` caps are applied directly to the `position-area`
|
|
245
|
+
// host, whose containing block is the cell between the anchor edge and the
|
|
246
|
+
// viewport edge — so a pure-CSS `calc(100% - 5px - gap)` reproduces the
|
|
247
|
+
// legacy per-placement anchor-edge cap with no measurement. The gap mirrors
|
|
248
|
+
// `getPlacement`: an omitted offset resolves to `space.100`, otherwise the
|
|
249
|
+
// consumer's `away` value.
|
|
250
|
+
var resolvedOffset = popperToTopLayerOffset(offset);
|
|
251
|
+
var fitGap = resolvedOffset ? "".concat(resolvedOffset[1], "px") : "var(--ds-space-100, 8px)";
|
|
252
|
+
var placementAxis = getPlacementAxis(placement);
|
|
253
|
+
(0, _useFitViewportMaxSize.useFitViewportMaxSize)({
|
|
254
|
+
target: popoverRef,
|
|
255
|
+
placementAxis: placementAxis,
|
|
256
|
+
gap: fitGap,
|
|
257
|
+
isEnabled: shouldFitViewport,
|
|
258
|
+
isOpen: isOpen
|
|
259
|
+
});
|
|
260
|
+
var renderChildren = children;
|
|
261
|
+
if (typeof renderChildren !== 'function') {
|
|
262
|
+
return null;
|
|
263
|
+
}
|
|
264
|
+
var renderPropArg = {
|
|
265
|
+
ref: noopSetRef,
|
|
266
|
+
style: noopStyle,
|
|
267
|
+
placement: placement,
|
|
268
|
+
isReferenceHidden: isReferenceHidden,
|
|
269
|
+
hasPopperEscaped: hasPopperEscaped,
|
|
270
|
+
update: noopUpdate,
|
|
271
|
+
forceUpdate: noopForceUpdate,
|
|
272
|
+
arrowProps: noopArrowProps
|
|
273
|
+
};
|
|
274
|
+
var content = renderChildren(renderPropArg);
|
|
275
|
+
|
|
276
|
+
// The `shouldFitViewport` size caps live on the `<Popover>` host itself
|
|
277
|
+
// (applied by `useFitViewportMaxSize` above), so the consumer's content is
|
|
278
|
+
// rendered directly with no intermediate wrapper.
|
|
279
|
+
return /*#__PURE__*/_react.default.createElement(_popover.Popover, {
|
|
280
|
+
ref: popoverRef,
|
|
281
|
+
id: popoverId,
|
|
282
|
+
isOpen: isOpen,
|
|
283
|
+
mode: "manual",
|
|
284
|
+
animate: false
|
|
285
|
+
}, content);
|
|
286
|
+
}
|
package/dist/cjs/popper.js
CHANGED
|
@@ -16,7 +16,9 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
|
|
|
16
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
17
|
var _react = _interopRequireWildcard(require("react"));
|
|
18
18
|
var _reactPopper = require("react-popper");
|
|
19
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
20
|
var _maxSize = require("./max-size");
|
|
21
|
+
var _popperTopLayer = require("./popper-top-layer");
|
|
20
22
|
var _core = require("@popperjs/core");
|
|
21
23
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
22
24
|
// Export types from PopperJS / React Popper
|
|
@@ -36,19 +38,53 @@ function defaultChildrenFn() {
|
|
|
36
38
|
}
|
|
37
39
|
var defaultOffset = [0, 8];
|
|
38
40
|
function Popper(_ref) {
|
|
39
|
-
var
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
_ref$placement = _ref.placement,
|
|
44
|
-
placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
|
|
45
|
-
_ref$referenceElement = _ref.referenceElement,
|
|
46
|
-
referenceElement = _ref$referenceElement === void 0 ? undefined : _ref$referenceElement,
|
|
41
|
+
var children = _ref.children,
|
|
42
|
+
offset = _ref.offset,
|
|
43
|
+
placement = _ref.placement,
|
|
44
|
+
referenceElement = _ref.referenceElement,
|
|
47
45
|
modifiers = _ref.modifiers,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
strategy = _ref.strategy,
|
|
47
|
+
shouldFitViewport = _ref.shouldFitViewport;
|
|
48
|
+
// The FF check sits at the very top of the public Popper so the
|
|
49
|
+
// rest of the function (which has its own hooks) does not violate
|
|
50
|
+
// the rules of hooks. Each branch is its own component with its
|
|
51
|
+
// own complete hook order. Props are forwarded explicitly to
|
|
52
|
+
// satisfy `no-unsafe-spread-props`.
|
|
53
|
+
if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
|
|
54
|
+
return /*#__PURE__*/_react.default.createElement(_popperTopLayer.PopperTopLayer, {
|
|
55
|
+
children: children,
|
|
56
|
+
offset: offset,
|
|
57
|
+
placement: placement,
|
|
58
|
+
referenceElement: referenceElement,
|
|
59
|
+
modifiers: modifiers,
|
|
60
|
+
strategy: strategy,
|
|
61
|
+
shouldFitViewport: shouldFitViewport
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
return /*#__PURE__*/_react.default.createElement(LegacyPopper, {
|
|
65
|
+
children: children,
|
|
66
|
+
offset: offset,
|
|
67
|
+
placement: placement,
|
|
68
|
+
referenceElement: referenceElement,
|
|
69
|
+
modifiers: modifiers,
|
|
70
|
+
strategy: strategy,
|
|
71
|
+
shouldFitViewport: shouldFitViewport
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
function LegacyPopper(_ref2) {
|
|
75
|
+
var _ref2$children = _ref2.children,
|
|
76
|
+
children = _ref2$children === void 0 ? defaultChildrenFn : _ref2$children,
|
|
77
|
+
_ref2$offset = _ref2.offset,
|
|
78
|
+
offset = _ref2$offset === void 0 ? defaultOffset : _ref2$offset,
|
|
79
|
+
_ref2$placement = _ref2.placement,
|
|
80
|
+
placement = _ref2$placement === void 0 ? 'bottom-start' : _ref2$placement,
|
|
81
|
+
_ref2$referenceElemen = _ref2.referenceElement,
|
|
82
|
+
referenceElement = _ref2$referenceElemen === void 0 ? undefined : _ref2$referenceElemen,
|
|
83
|
+
modifiers = _ref2.modifiers,
|
|
84
|
+
_ref2$strategy = _ref2.strategy,
|
|
85
|
+
strategy = _ref2$strategy === void 0 ? 'fixed' : _ref2$strategy,
|
|
86
|
+
_ref2$shouldFitViewpo = _ref2.shouldFitViewport,
|
|
87
|
+
shouldFitViewport = _ref2$shouldFitViewpo === void 0 ? false : _ref2$shouldFitViewpo;
|
|
52
88
|
var _offset = (0, _slicedToArray2.default)(offset, 2),
|
|
53
89
|
offsetX = _offset[0],
|
|
54
90
|
offsetY = _offset[1];
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.Reference = Reference;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _reactPopper = require("react-popper");
|
|
11
|
+
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
|
|
12
|
+
var _useManagerAnchorSetter = require("./internal/use-manager-anchor-setter");
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
14
|
+
// `react-popper`'s `Reference` exposes a loosely-typed callback ref so
|
|
15
|
+
// consumers can attach it to any host element. We mirror that shape
|
|
16
|
+
// instead of locking the children ref to `HTMLElement`, which would
|
|
17
|
+
// break legacy consumers that pass it to `<button>` / `<div>` directly.
|
|
18
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mirroring react-popper's public ref shape
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Wraps `react-popper`'s `<Reference>` so the anchor element it captures
|
|
22
|
+
* is also published through `@atlaskit/popper`'s own bridge context.
|
|
23
|
+
* The bridge lets the FF-on top-layer adapter discover the anchor even
|
|
24
|
+
* when `react-popper`'s CJS and ESM builds resolve to different context
|
|
25
|
+
* instances (Jest vs production bundlers).
|
|
26
|
+
*
|
|
27
|
+
* The bridge + consumer refs are composed into a single stable callback and
|
|
28
|
+
* passed to `react-popper` as `innerRef`, so the (stable) ref `react-popper`
|
|
29
|
+
* hands to `children` never changes identity. Composing inline instead would
|
|
30
|
+
* produce a new ref callback every render, making React detach/reattach the
|
|
31
|
+
* anchor each commit — firing `publishAnchor(null)` then `publishAnchor(el)`
|
|
32
|
+
* and churning the `Manager`.
|
|
33
|
+
*/
|
|
34
|
+
function Reference(_ref) {
|
|
35
|
+
var children = _ref.children,
|
|
36
|
+
innerRef = _ref.innerRef;
|
|
37
|
+
var publishAnchor = (0, _useManagerAnchorSetter.useManagerAnchorSetter)();
|
|
38
|
+
var composedRef = (0, _react.useMemo)(function () {
|
|
39
|
+
return (0, _mergeRefs.default)([publishAnchor, innerRef]);
|
|
40
|
+
}, [publishAnchor, innerRef]);
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement(_reactPopper.Reference, {
|
|
42
|
+
innerRef: composedRef
|
|
43
|
+
}, children);
|
|
44
|
+
}
|
package/dist/es2019/index.js
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
export { Popper, placements } from './popper';
|
|
2
|
-
|
|
2
|
+
// `Manager` and `Reference` are re-exported through our own wrappers so
|
|
3
|
+
// the anchor element captured by `<Reference>` reaches `<Popper>` via a
|
|
4
|
+
// single shared context instance, sidestepping the dual CJS/ESM context
|
|
5
|
+
// duplication shipped by `react-popper`.
|
|
6
|
+
export { Manager } from './manager';
|
|
7
|
+
export { Reference } from './reference';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Module-private context used to bridge the anchor element from our
|
|
5
|
+
* `<Reference>` wrapper to `<Popper>`. Deliberately separate from
|
|
6
|
+
* `react-popper`'s own `ManagerReferenceNodeContext`: `react-popper`
|
|
7
|
+
* ships dual CJS and ESM builds, each with its own
|
|
8
|
+
* `React.createContext()` instance, and bundlers and Jest can resolve
|
|
9
|
+
* different builds. Bridging through a context we control guarantees a
|
|
10
|
+
* single shared instance across every consumer of `@atlaskit/popper`.
|
|
11
|
+
*/
|
|
12
|
+
export const AnchorContext = /*#__PURE__*/createContext(null);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Module-private context that exposes the anchor setter to descendant
|
|
4
|
+
* `<Reference>` instances inside the same `<Manager>` subtree. The
|
|
5
|
+
* setter forwards the captured element into `AnchorContext` so
|
|
6
|
+
* descendant `<Popper>` instances can discover the anchor without
|
|
7
|
+
* reaching into `react-popper`'s internal context.
|
|
8
|
+
*/
|
|
9
|
+
export const AnchorSetterContext = /*#__PURE__*/createContext(() => undefined);
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns the current viewport size in CSS pixels, preferring the visual
|
|
3
|
+
* viewport (which accounts for pinch-zoom on touch devices) over the
|
|
4
|
+
* layout viewport. Returns `{ width: 0, height: 0 }` in non-DOM
|
|
5
|
+
* environments so callers can use the result unconditionally.
|
|
6
|
+
*/
|
|
7
|
+
export function readViewport() {
|
|
8
|
+
if (typeof window === 'undefined') {
|
|
9
|
+
return {
|
|
10
|
+
width: 0,
|
|
11
|
+
height: 0
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
const visual = window.visualViewport;
|
|
15
|
+
if (visual) {
|
|
16
|
+
return {
|
|
17
|
+
width: visual.width,
|
|
18
|
+
height: visual.height
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
return {
|
|
22
|
+
width: window.innerWidth,
|
|
23
|
+
height: window.innerHeight
|
|
24
|
+
};
|
|
25
|
+
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Reduces an anchor rect to the single viewport point that, wrapped in a
|
|
3
|
+
* zero-size synthetic anchor, produces the same popover position
|
|
4
|
+
* `useAnchorPosition` would for the given placement. This works because
|
|
5
|
+
* `useAnchorPosition` only reads the edge / alignment corner of the rect,
|
|
6
|
+
* so a coincident zero-size point is geometrically equivalent.
|
|
7
|
+
*
|
|
8
|
+
* RTL is resolved here so the downstream synthetic anchor only sees physical
|
|
9
|
+
* coordinates. Defaults mirror `getPlacement` in
|
|
10
|
+
* `@atlaskit/top-layer/placement-map` (`axis: 'block'`, `edge: 'end'`,
|
|
11
|
+
* `align: 'center'`).
|
|
12
|
+
*/
|
|
13
|
+
export function rectPointForPlacement({
|
|
14
|
+
rect,
|
|
15
|
+
placement,
|
|
16
|
+
isRtl
|
|
17
|
+
}) {
|
|
18
|
+
var _placement$axis, _placement$edge, _placement$align;
|
|
19
|
+
const axis = (_placement$axis = placement.axis) !== null && _placement$axis !== void 0 ? _placement$axis : 'block';
|
|
20
|
+
const edge = (_placement$edge = placement.edge) !== null && _placement$edge !== void 0 ? _placement$edge : 'end';
|
|
21
|
+
const align = (_placement$align = placement.align) !== null && _placement$align !== void 0 ? _placement$align : 'center';
|
|
22
|
+
if (axis === 'block') {
|
|
23
|
+
// Popover sits above (`edge: 'start'`) or below (`edge: 'end'`)
|
|
24
|
+
// the anchor. Hug the matching horizontal edge; align along x.
|
|
25
|
+
const y = edge === 'start' ? rect.top : rect.bottom;
|
|
26
|
+
const x = horizontalForAlign({
|
|
27
|
+
rect,
|
|
28
|
+
align,
|
|
29
|
+
isRtl
|
|
30
|
+
});
|
|
31
|
+
return {
|
|
32
|
+
x,
|
|
33
|
+
y
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// `axis: 'inline'`: popover sits inline-start or inline-end of the
|
|
38
|
+
// anchor. Hug the matching vertical edge; align along y.
|
|
39
|
+
const x = inlineEdgeX({
|
|
40
|
+
rect,
|
|
41
|
+
edge,
|
|
42
|
+
isRtl
|
|
43
|
+
});
|
|
44
|
+
const y = verticalForAlign({
|
|
45
|
+
rect,
|
|
46
|
+
align
|
|
47
|
+
});
|
|
48
|
+
return {
|
|
49
|
+
x,
|
|
50
|
+
y
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
function horizontalForAlign({
|
|
54
|
+
rect,
|
|
55
|
+
align,
|
|
56
|
+
isRtl
|
|
57
|
+
}) {
|
|
58
|
+
if (align === 'center') {
|
|
59
|
+
return rect.left + rect.width / 2;
|
|
60
|
+
}
|
|
61
|
+
// `start` / `end` are logical. In LTR, `start` is the left edge.
|
|
62
|
+
// In RTL, `start` is the right edge.
|
|
63
|
+
const isStartLeft = !isRtl;
|
|
64
|
+
if (align === 'start') {
|
|
65
|
+
return isStartLeft ? rect.left : rect.right;
|
|
66
|
+
}
|
|
67
|
+
return isStartLeft ? rect.right : rect.left;
|
|
68
|
+
}
|
|
69
|
+
function verticalForAlign({
|
|
70
|
+
rect,
|
|
71
|
+
align
|
|
72
|
+
}) {
|
|
73
|
+
if (align === 'center') {
|
|
74
|
+
return rect.top + rect.height / 2;
|
|
75
|
+
}
|
|
76
|
+
if (align === 'start') {
|
|
77
|
+
return rect.top;
|
|
78
|
+
}
|
|
79
|
+
return rect.bottom;
|
|
80
|
+
}
|
|
81
|
+
function inlineEdgeX({
|
|
82
|
+
rect,
|
|
83
|
+
edge,
|
|
84
|
+
isRtl
|
|
85
|
+
}) {
|
|
86
|
+
const isStartLeft = !isRtl;
|
|
87
|
+
if (edge === 'start') {
|
|
88
|
+
return isStartLeft ? rect.left : rect.right;
|
|
89
|
+
}
|
|
90
|
+
return isStartLeft ? rect.right : rect.left;
|
|
91
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Sets inline styles on an element and returns a cleanup function that
|
|
3
|
+
* restores the prior inline values (so we do not stomp consumer styles).
|
|
4
|
+
*
|
|
5
|
+
* Copied from `@atlaskit/top-layer`'s internal `setStyle` (not exported there
|
|
6
|
+
* yet); inline here until top-layer exposes it via a subpath export.
|
|
7
|
+
*/
|
|
8
|
+
export function setStyle({
|
|
9
|
+
element,
|
|
10
|
+
styles
|
|
11
|
+
}) {
|
|
12
|
+
// Snapshot the prior inline value (NOT the computed style - we only want
|
|
13
|
+
// to restore values that the consumer/our previous run inlined). An empty
|
|
14
|
+
// string means "no inline value", in which case cleanup uses removeProperty.
|
|
15
|
+
const priorValues = styles.map(({
|
|
16
|
+
property
|
|
17
|
+
}) => ({
|
|
18
|
+
property,
|
|
19
|
+
value: element.style.getPropertyValue(property)
|
|
20
|
+
}));
|
|
21
|
+
styles.forEach(({
|
|
22
|
+
property,
|
|
23
|
+
value
|
|
24
|
+
}) => {
|
|
25
|
+
element.style.setProperty(property, value);
|
|
26
|
+
});
|
|
27
|
+
return function cleanup() {
|
|
28
|
+
priorValues.forEach(({
|
|
29
|
+
property,
|
|
30
|
+
value
|
|
31
|
+
}) => {
|
|
32
|
+
if (value === '') {
|
|
33
|
+
element.style.removeProperty(property);
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
element.style.setProperty(property, value);
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Returns the local state used by `<Manager>` to publish the anchor
|
|
4
|
+
* captured by `<Reference>` to descendant `<Popper>` instances.
|
|
5
|
+
*/
|
|
6
|
+
export function useAnchorState() {
|
|
7
|
+
const [anchor, setAnchor] = useState(null);
|
|
8
|
+
return {
|
|
9
|
+
anchor,
|
|
10
|
+
setAnchor
|
|
11
|
+
};
|
|
12
|
+
}
|