@atlaskit/top-layer 4.4.5 → 5.0.1
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 +50 -0
- package/README.md +13 -4
- package/dist/cjs/dialog/dialog-content.js +2 -0
- package/dist/cjs/entry-points/use-popover-id.js +5 -10
- package/dist/cjs/internal/anchor-positioning/apply-anchor-positioning.js +86 -0
- package/dist/cjs/internal/anchor-positioning/cross-axis-shift-margins.js +34 -0
- package/dist/cjs/internal/anchor-positioning/edge-margin.js +21 -0
- package/dist/cjs/internal/anchor-positioning/fit-margins.js +77 -0
- package/dist/cjs/internal/anchor-positioning/get-existing-anchor-name.js +18 -0
- package/dist/cjs/internal/{placement-to-position-area.js → anchor-positioning/placement-to-position-area.js} +11 -11
- package/dist/cjs/internal/anchor-positioning/placement-to-try-fallbacks.js +95 -0
- package/dist/cjs/internal/anchored-popover-size.js +345 -0
- package/dist/cjs/internal/get-aria-for-trigger.js +7 -13
- package/dist/cjs/internal/is-native-element-open.js +19 -0
- package/dist/cjs/internal/{anchor-positioning-fallback.js → javascript-fallback/anchor-positioning-fallback.js} +12 -33
- package/dist/cjs/internal/javascript-fallback/apply-javascript-fallback-positioning.js +297 -0
- package/dist/cjs/internal/javascript-fallback/resolve-css-length-to-pixels.js +90 -0
- package/dist/cjs/internal/javascript-fallback/warn-fallback-failure.js +19 -0
- package/dist/cjs/internal/resolve-placement.js +14 -6
- package/dist/cjs/internal/supports-anchor-positioning.js +17 -0
- package/dist/cjs/internal/supports-anchor-size.js +17 -0
- package/dist/cjs/internal/supports-css-declaration.js +25 -0
- package/dist/cjs/internal/surface-reset.js +5 -0
- package/dist/cjs/internal/use-anchored-popover-at-point.js +124 -0
- package/dist/cjs/internal/use-anchored-popover.js +277 -0
- package/dist/cjs/internal/use-animated-visibility.js +11 -23
- package/dist/cjs/popover/popover.compiled.css +4 -0
- package/dist/cjs/popover/popover.js +63 -61
- package/dist/cjs/testing/polyfill.js +6 -7
- package/dist/es2019/dialog/dialog-content.js +2 -0
- package/dist/es2019/entry-points/use-popover-id.js +6 -10
- package/dist/es2019/internal/anchor-positioning/apply-anchor-positioning.js +83 -0
- package/dist/es2019/internal/anchor-positioning/cross-axis-shift-margins.js +29 -0
- package/dist/es2019/internal/anchor-positioning/edge-margin.js +18 -0
- package/dist/es2019/internal/anchor-positioning/fit-margins.js +69 -0
- package/dist/es2019/internal/anchor-positioning/get-existing-anchor-name.js +12 -0
- package/dist/es2019/internal/{placement-to-position-area.js → anchor-positioning/placement-to-position-area.js} +9 -9
- package/dist/es2019/internal/anchor-positioning/placement-to-try-fallbacks.js +94 -0
- package/dist/es2019/internal/anchored-popover-size.js +343 -0
- package/dist/es2019/internal/get-aria-for-trigger.js +7 -13
- package/dist/es2019/internal/is-native-element-open.js +14 -0
- package/dist/es2019/internal/{anchor-positioning-fallback.js → javascript-fallback/anchor-positioning-fallback.js} +12 -33
- package/dist/es2019/internal/javascript-fallback/apply-javascript-fallback-positioning.js +291 -0
- package/dist/es2019/internal/javascript-fallback/resolve-css-length-to-pixels.js +87 -0
- package/dist/es2019/internal/javascript-fallback/warn-fallback-failure.js +14 -0
- package/dist/es2019/internal/resolve-placement.js +14 -6
- package/dist/es2019/internal/supports-anchor-positioning.js +12 -0
- package/dist/es2019/internal/supports-anchor-size.js +12 -0
- package/dist/es2019/internal/supports-css-declaration.js +20 -0
- package/dist/es2019/internal/surface-reset.js +1 -0
- package/dist/es2019/internal/use-anchored-popover-at-point.js +116 -0
- package/dist/es2019/internal/use-anchored-popover.js +265 -0
- package/dist/es2019/internal/use-animated-visibility.js +1 -14
- package/dist/es2019/popover/popover.compiled.css +4 -0
- package/dist/es2019/popover/popover.js +69 -61
- package/dist/es2019/testing/polyfill.js +6 -7
- package/dist/esm/dialog/dialog-content.js +2 -0
- package/dist/esm/entry-points/use-popover-id.js +6 -10
- package/dist/esm/internal/anchor-positioning/apply-anchor-positioning.js +80 -0
- package/dist/esm/internal/anchor-positioning/cross-axis-shift-margins.js +28 -0
- package/dist/esm/internal/anchor-positioning/edge-margin.js +15 -0
- package/dist/esm/internal/anchor-positioning/fit-margins.js +71 -0
- package/dist/esm/internal/anchor-positioning/get-existing-anchor-name.js +12 -0
- package/dist/esm/internal/{placement-to-position-area.js → anchor-positioning/placement-to-position-area.js} +11 -12
- package/dist/esm/internal/anchor-positioning/placement-to-try-fallbacks.js +89 -0
- package/dist/esm/internal/anchored-popover-size.js +338 -0
- package/dist/esm/internal/get-aria-for-trigger.js +7 -13
- package/dist/esm/internal/is-native-element-open.js +13 -0
- package/dist/esm/internal/{anchor-positioning-fallback.js → javascript-fallback/anchor-positioning-fallback.js} +12 -33
- package/dist/esm/internal/javascript-fallback/apply-javascript-fallback-positioning.js +290 -0
- package/dist/esm/internal/javascript-fallback/resolve-css-length-to-pixels.js +85 -0
- package/dist/esm/internal/javascript-fallback/warn-fallback-failure.js +13 -0
- package/dist/esm/internal/resolve-placement.js +14 -6
- package/dist/esm/internal/supports-anchor-positioning.js +12 -0
- package/dist/esm/internal/supports-anchor-size.js +12 -0
- package/dist/esm/internal/supports-css-declaration.js +19 -0
- package/dist/esm/internal/surface-reset.js +1 -0
- package/dist/esm/internal/use-anchored-popover-at-point.js +118 -0
- package/dist/esm/internal/use-anchored-popover.js +271 -0
- package/dist/esm/internal/use-animated-visibility.js +10 -22
- package/dist/esm/popover/popover.compiled.css +4 -0
- package/dist/esm/popover/popover.js +63 -61
- package/dist/esm/testing/polyfill.js +6 -7
- package/dist/types/entry-points/placement-map.d.ts +2 -2
- package/dist/types/entry-points/use-popover-id.d.ts +3 -7
- package/dist/types/internal/anchor-positioning/apply-anchor-positioning.d.ts +26 -0
- package/dist/types/internal/anchor-positioning/cross-axis-shift-margins.d.ts +19 -0
- package/dist/types/internal/anchor-positioning/edge-margin.d.ts +10 -0
- package/dist/types/internal/anchor-positioning/fit-margins.d.ts +30 -0
- package/dist/types/internal/anchor-positioning/get-existing-anchor-name.d.ts +8 -0
- package/dist/types/internal/{placement-to-position-area.d.ts → anchor-positioning/placement-to-position-area.d.ts} +10 -6
- package/dist/types/internal/anchor-positioning/placement-to-try-fallbacks.d.ts +30 -0
- package/dist/types/internal/anchored-popover-size.d.ts +126 -0
- package/dist/types/internal/get-aria-for-trigger.d.ts +13 -25
- package/dist/types/internal/is-native-element-open.d.ts +3 -0
- package/dist/types/internal/javascript-fallback/anchor-positioning-fallback.d.ts +36 -0
- package/dist/types/internal/javascript-fallback/apply-javascript-fallback-positioning.d.ts +15 -0
- package/dist/types/internal/javascript-fallback/resolve-css-length-to-pixels.d.ts +20 -0
- package/dist/types/internal/javascript-fallback/warn-fallback-failure.d.ts +7 -0
- package/dist/types/internal/resolve-placement.d.ts +18 -2
- package/dist/types/internal/supports-anchor-positioning.d.ts +5 -0
- package/dist/types/internal/supports-anchor-size.d.ts +5 -0
- package/dist/types/internal/supports-css-declaration.d.ts +11 -0
- package/dist/types/internal/surface-reset.d.ts +25 -0
- package/dist/types/internal/use-anchored-popover-at-point.d.ts +48 -0
- package/dist/types/internal/use-anchored-popover.d.ts +143 -0
- package/dist/types/popover/index.d.ts +2 -1
- package/dist/types/popover/popover.d.ts +1 -1
- package/dist/types/popover/types.d.ts +15 -17
- package/dist/types/testing/polyfill.d.ts +3 -3
- package/package.json +2 -2
- package/use-anchored-popover/package.json +10 -0
- package/use-anchored-popover-at-point/package.json +10 -0
- package/dist/cjs/internal/placement-to-try-fallbacks.js +0 -108
- package/dist/cjs/internal/resolve-css-length-to-pixels.js +0 -104
- package/dist/cjs/internal/use-anchor-position-at-point.js +0 -129
- package/dist/cjs/internal/use-anchor-position.js +0 -501
- package/dist/cjs/internal/use-width-from-anchor.js +0 -124
- package/dist/es2019/internal/placement-to-try-fallbacks.js +0 -108
- package/dist/es2019/internal/resolve-css-length-to-pixels.js +0 -101
- package/dist/es2019/internal/use-anchor-position-at-point.js +0 -124
- package/dist/es2019/internal/use-anchor-position.js +0 -480
- package/dist/es2019/internal/use-width-from-anchor.js +0 -120
- package/dist/esm/internal/placement-to-try-fallbacks.js +0 -103
- package/dist/esm/internal/resolve-css-length-to-pixels.js +0 -98
- package/dist/esm/internal/use-anchor-position-at-point.js +0 -124
- package/dist/esm/internal/use-anchor-position.js +0 -494
- package/dist/esm/internal/use-width-from-anchor.js +0 -118
- package/dist/types/internal/anchor-positioning-fallback.d.ts +0 -51
- package/dist/types/internal/placement-to-try-fallbacks.d.ts +0 -13
- package/dist/types/internal/resolve-css-length-to-pixels.d.ts +0 -20
- package/dist/types/internal/use-anchor-position-at-point.d.ts +0 -67
- package/dist/types/internal/use-anchor-position.d.ts +0 -87
- package/dist/types/internal/use-width-from-anchor.d.ts +0 -19
- package/use-anchor-position/package.json +0 -10
- package/use-anchor-position-at-point/package.json +0 -10
- package/use-width-from-anchor/package.json +0 -10
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
var elementCaches = new WeakMap();
|
|
2
|
-
function canCacheResolvedLength(value) {
|
|
3
|
-
// Custom-property values can be retargeted by inline overrides on the
|
|
4
|
-
// consumer's wrapper, so we cannot prove a cached pixel value is still valid.
|
|
5
|
-
return !value.includes('var(');
|
|
6
|
-
}
|
|
7
|
-
function getCachedResolvedLength(_ref) {
|
|
8
|
-
var _cacheForElement$get;
|
|
9
|
-
var element = _ref.element,
|
|
10
|
-
value = _ref.value;
|
|
11
|
-
if (!canCacheResolvedLength(value)) {
|
|
12
|
-
return null;
|
|
13
|
-
}
|
|
14
|
-
var cacheForElement = elementCaches.get(element);
|
|
15
|
-
return (_cacheForElement$get = cacheForElement === null || cacheForElement === void 0 ? void 0 : cacheForElement.get(value)) !== null && _cacheForElement$get !== void 0 ? _cacheForElement$get : null;
|
|
16
|
-
}
|
|
17
|
-
function cacheResolvedLength(_ref2) {
|
|
18
|
-
var _elementCaches$get;
|
|
19
|
-
var element = _ref2.element,
|
|
20
|
-
value = _ref2.value,
|
|
21
|
-
result = _ref2.result;
|
|
22
|
-
if (!canCacheResolvedLength(value)) {
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
var cacheForElement = (_elementCaches$get = elementCaches.get(element)) !== null && _elementCaches$get !== void 0 ? _elementCaches$get : new Map();
|
|
26
|
-
cacheForElement.set(value, result);
|
|
27
|
-
elementCaches.set(element, cacheForElement);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Resolves a CSS length value to a pixel number using a hidden DOM probe.
|
|
32
|
-
*
|
|
33
|
-
* Used by the JS positioning fallback: consumer offsets can be numbers,
|
|
34
|
-
* `${n}px` strings, tokenised `var(--ds-space-100, 8px)` strings, `calc()`
|
|
35
|
-
* expressions, viewport units, etc. Parsing arbitrary CSS in JS is fragile
|
|
36
|
-
* (and impossible for `calc(var(...))` without a layout context), so we let
|
|
37
|
-
* the browser do the math.
|
|
38
|
-
*
|
|
39
|
-
* The probe is appended to `container` so it inherits the same containing
|
|
40
|
-
* block, font size, and custom-property scope as the popover.
|
|
41
|
-
*
|
|
42
|
-
* Cost: one synchronous reflow on first cacheable resolution per
|
|
43
|
-
* (container, value) pair, then a `WeakMap` lookup. Resolutions involving
|
|
44
|
-
* `var(` are intentionally not cached.
|
|
45
|
-
*/
|
|
46
|
-
export function resolveCssLengthToPixels(_ref3) {
|
|
47
|
-
var value = _ref3.value,
|
|
48
|
-
container = _ref3.container;
|
|
49
|
-
if (typeof value === 'number') {
|
|
50
|
-
return value;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// Fast path: unitless zero is universally zero pixels - accept `'0'` and
|
|
54
|
-
// `'-0'` without a probe. (Consumers occasionally pass `'0'` instead of
|
|
55
|
-
// the number `0`.)
|
|
56
|
-
if (value === '0' || value === '-0') {
|
|
57
|
-
return 0;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// Fast path: bare `${n}px` strings come from the consumer normalisation
|
|
61
|
-
// in `resolvePlacement`. Avoid a reflow when we can.
|
|
62
|
-
var pxMatch = value.match(/^(-?\d+(?:\.\d+)?)px$/);
|
|
63
|
-
if (pxMatch) {
|
|
64
|
-
return Number(pxMatch[1]);
|
|
65
|
-
}
|
|
66
|
-
var cached = getCachedResolvedLength({
|
|
67
|
-
element: container,
|
|
68
|
-
value: value
|
|
69
|
-
});
|
|
70
|
-
if (cached !== null) {
|
|
71
|
-
return cached;
|
|
72
|
-
}
|
|
73
|
-
var probe = container.ownerDocument.createElement('div');
|
|
74
|
-
probe.style.position = 'absolute';
|
|
75
|
-
probe.style.visibility = 'hidden';
|
|
76
|
-
probe.style.pointerEvents = 'none';
|
|
77
|
-
probe.style.height = '0';
|
|
78
|
-
probe.style.padding = '0';
|
|
79
|
-
probe.style.border = '0';
|
|
80
|
-
// `width` clamps negatives to 0; use `margin-left` instead so signs are
|
|
81
|
-
// preserved. `getComputedStyle` returns the resolved pixel value for
|
|
82
|
-
// margin-* properties even when the source was a token / calc / var.
|
|
83
|
-
probe.style.marginLeft = value;
|
|
84
|
-
// Hide the probe from assistive tech and event targeting; defensive
|
|
85
|
-
// against `getElementsByTagName('div')` walks in consumer code.
|
|
86
|
-
probe.setAttribute('aria-hidden', 'true');
|
|
87
|
-
probe.setAttribute('inert', '');
|
|
88
|
-
container.appendChild(probe);
|
|
89
|
-
var resolved = parseFloat(getComputedStyle(probe).marginLeft);
|
|
90
|
-
container.removeChild(probe);
|
|
91
|
-
var result = Number.isFinite(resolved) ? resolved : 0;
|
|
92
|
-
cacheResolvedLength({
|
|
93
|
-
element: container,
|
|
94
|
-
value: value,
|
|
95
|
-
result: result
|
|
96
|
-
});
|
|
97
|
-
return result;
|
|
98
|
-
}
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import { useLayoutEffect, useRef } from 'react';
|
|
2
|
-
import { useAnchorPosition } from './use-anchor-position';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* A point in viewport coordinates (CSS pixels) at which the synthetic
|
|
6
|
-
* anchor should be placed.
|
|
7
|
-
*
|
|
8
|
-
* Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
|
|
9
|
-
* shape is unambiguous in RTL writing modes - there is no ambiguity
|
|
10
|
-
* about whether a coordinate is logical (`inline-start`/`block-start`)
|
|
11
|
-
* or physical (`left`/`top`). Viewport coordinates are always
|
|
12
|
-
* physical, so we name them with the physical axis labels.
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Styles the synthetic anchor as an invisible, zero-size point.
|
|
17
|
-
* Dynamic `inset-*` overrides are written by the positioning effect.
|
|
18
|
-
*
|
|
19
|
-
* Uses `Object.assign` rather than Compiled CSS (element is outside the React tree)
|
|
20
|
-
* or the internal `setStyle` helper (we own this element entirely - it is created
|
|
21
|
-
* and removed by this hook - so the snapshot/restore semantics `setStyle`
|
|
22
|
-
* provides for caller-owned elements would be dead work here).
|
|
23
|
-
*/
|
|
24
|
-
function applyStaticAnchorStyles(element) {
|
|
25
|
-
Object.assign(element.style, {
|
|
26
|
-
position: 'fixed',
|
|
27
|
-
// `top`/`left` rather than `inset-block-start`/`inset-inline-start`
|
|
28
|
-
// for consistency with the dynamic positioning effect below, which
|
|
29
|
-
// uses physical properties (see comment there for the rationale).
|
|
30
|
-
top: '0',
|
|
31
|
-
left: '0',
|
|
32
|
-
// Zero size - placement decides which side the popover sits on.
|
|
33
|
-
width: '0',
|
|
34
|
-
height: '0',
|
|
35
|
-
// Prevent the overlay from intercepting pointer events.
|
|
36
|
-
pointerEvents: 'none'
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
// `useAnchorPosition` requires a real DOM element. When the caller only
|
|
41
|
-
// has a viewport coordinate (e.g. cursor at hover time), this hook
|
|
42
|
-
// manages a hidden `<div>` at that point and delegates the rest.
|
|
43
|
-
//
|
|
44
|
-
// The `<div>` is appended directly to `document.body` to escape any
|
|
45
|
-
// transformed ancestor, which would otherwise break `position: fixed`
|
|
46
|
-
// viewport-relative resolution.
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Positions a popover at a consumer-supplied viewport coordinate using a
|
|
50
|
-
* hidden synthetic anchor.
|
|
51
|
-
*
|
|
52
|
-
* @example
|
|
53
|
-
* ```tsx
|
|
54
|
-
* function PointPositionedPopover({ popoverRef, placement, mousePos }) {
|
|
55
|
-
* useAnchorPositionAtPoint({
|
|
56
|
-
* popoverRef,
|
|
57
|
-
* placement,
|
|
58
|
-
* isEnabled: Boolean(mousePos),
|
|
59
|
-
* getPoint: () => {
|
|
60
|
-
* if (!mousePos) return null;
|
|
61
|
-
* return { x: mousePos.clientX, y: mousePos.clientY };
|
|
62
|
-
* },
|
|
63
|
-
* });
|
|
64
|
-
* return <Popover ref={popoverRef}>...</Popover>;
|
|
65
|
-
* }
|
|
66
|
-
* ```
|
|
67
|
-
*/
|
|
68
|
-
export function useAnchorPositionAtPoint(_ref) {
|
|
69
|
-
var popoverRef = _ref.popoverRef,
|
|
70
|
-
placement = _ref.placement,
|
|
71
|
-
getPoint = _ref.getPoint,
|
|
72
|
-
_ref$isEnabled = _ref.isEnabled,
|
|
73
|
-
isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
|
|
74
|
-
isOpen = _ref.isOpen;
|
|
75
|
-
var syntheticAnchorRef = useRef(null);
|
|
76
|
-
|
|
77
|
-
// `getPoint` is kept in a ref so the layout effect can call the
|
|
78
|
-
// latest version without listing it as a dep - that would re-fire
|
|
79
|
-
// on every render and re-latch the point.
|
|
80
|
-
var getPointRef = useRef(getPoint);
|
|
81
|
-
getPointRef.current = getPoint;
|
|
82
|
-
|
|
83
|
-
// Lazy element creation: the `<div>` is only created when both
|
|
84
|
-
// `isEnabled` is true AND `getPoint()` returns a non-null point.
|
|
85
|
-
// `useLayoutEffect` ensures the element exists before the inner
|
|
86
|
-
// `useAnchorPosition` (also a layout effect) reads the ref.
|
|
87
|
-
useLayoutEffect(function () {
|
|
88
|
-
if (!isEnabled) {
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
var point = getPointRef.current();
|
|
92
|
-
if (!point) {
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
var anchor = document.createElement('div');
|
|
96
|
-
anchor.setAttribute('aria-hidden', 'true');
|
|
97
|
-
applyStaticAnchorStyles(anchor);
|
|
98
|
-
// `point.x`/`y` are physical viewport coordinates (from
|
|
99
|
-
// `MouseEvent.clientX/Y`), so map directly onto physical
|
|
100
|
-
// `left`/`top`. This is RTL-safe: `position: fixed` + physical
|
|
101
|
-
// insets is direction-independent. Using logical
|
|
102
|
-
// `inset-inline-start` would need `viewportWidth - point.x` in
|
|
103
|
-
// RTL to land at the same physical pixel.
|
|
104
|
-
anchor.style.top = "".concat(point.y, "px");
|
|
105
|
-
anchor.style.left = "".concat(point.x, "px");
|
|
106
|
-
document.body.appendChild(anchor);
|
|
107
|
-
syntheticAnchorRef.current = anchor;
|
|
108
|
-
return function cleanup() {
|
|
109
|
-
anchor.remove();
|
|
110
|
-
syntheticAnchorRef.current = null;
|
|
111
|
-
};
|
|
112
|
-
}, [isEnabled]);
|
|
113
|
-
|
|
114
|
-
// Mirror `isEnabled` so both hooks stay in sync - when disabled,
|
|
115
|
-
// neither this hook nor the inner one touches the popover, leaving
|
|
116
|
-
// any other positioning the consumer has set up free to take effect.
|
|
117
|
-
useAnchorPosition({
|
|
118
|
-
anchorRef: syntheticAnchorRef,
|
|
119
|
-
popoverRef: popoverRef,
|
|
120
|
-
placement: placement,
|
|
121
|
-
isEnabled: isEnabled,
|
|
122
|
-
isOpen: isOpen
|
|
123
|
-
});
|
|
124
|
-
}
|