@atlaskit/top-layer 0.7.1 → 0.9.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 +22 -0
- package/dist/cjs/animations/presets.js +4 -0
- package/dist/cjs/dialog/dialog-content.js +12 -0
- package/dist/cjs/focus/focus.js +2 -0
- package/dist/cjs/internal/ensure-preset-styles.js +1 -1
- package/dist/cjs/internal/use-anchor-position.js +6 -22
- package/dist/cjs/internal/use-preset-styles.js +1 -1
- package/dist/cjs/placement-map/index.js +2 -1
- package/dist/cjs/popover/popover.js +31 -0
- package/dist/cjs/popup/popup-content.js +1 -7
- package/dist/cjs/popup/popup-context.js +2 -0
- package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js +1 -0
- package/dist/es2019/animations/presets.js +4 -0
- package/dist/es2019/dialog/dialog-content.js +12 -0
- package/dist/es2019/focus/focus.js +2 -0
- package/dist/es2019/internal/ensure-preset-styles.js +1 -1
- package/dist/es2019/internal/use-anchor-position.js +6 -20
- package/dist/es2019/internal/use-preset-styles.js +1 -1
- package/dist/es2019/placement-map/index.js +1 -0
- package/dist/es2019/popover/popover.js +31 -0
- package/dist/es2019/popup/popup-content.js +1 -7
- package/dist/es2019/popup/popup-context.js +2 -0
- package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js +1 -0
- package/dist/esm/animations/presets.js +4 -0
- package/dist/esm/dialog/dialog-content.js +12 -0
- package/dist/esm/focus/focus.js +2 -0
- package/dist/esm/internal/ensure-preset-styles.js +1 -1
- package/dist/esm/internal/use-anchor-position.js +6 -22
- package/dist/esm/internal/use-preset-styles.js +1 -1
- package/dist/esm/placement-map/index.js +1 -0
- package/dist/esm/popover/popover.js +31 -0
- package/dist/esm/popup/popup-content.js +1 -7
- package/dist/esm/popup/popup-context.js +2 -0
- package/dist/esm/use-arrow-navigation/use-arrow-navigation.js +1 -0
- package/dist/types/internal/use-anchor-position.d.ts +1 -11
- package/dist/types/internal/use-preset-styles.d.ts +1 -1
- package/dist/types/popover/types.d.ts +4 -4
- package/dist/types/popup/types.d.ts +1 -28
- package/dist/types-ts4.5/internal/use-anchor-position.d.ts +1 -11
- package/dist/types-ts4.5/internal/use-preset-styles.d.ts +1 -1
- package/dist/types-ts4.5/popover/types.d.ts +4 -4
- package/dist/types-ts4.5/popup/types.d.ts +1 -28
- package/package.json +3 -1
- package/arrow/package.json +0 -17
- package/dist/cjs/arrow/index.js +0 -130
- package/dist/cjs/arrow/types.js +0 -5
- package/dist/cjs/entry-points/arrow.js +0 -12
- package/dist/es2019/arrow/index.js +0 -268
- package/dist/es2019/arrow/types.js +0 -1
- package/dist/es2019/entry-points/arrow.js +0 -1
- package/dist/esm/arrow/index.js +0 -123
- package/dist/esm/arrow/types.js +0 -1
- package/dist/esm/entry-points/arrow.js +0 -1
- package/dist/types/arrow/index.d.ts +0 -24
- package/dist/types/arrow/types.d.ts +0 -29
- package/dist/types/entry-points/arrow.d.ts +0 -2
- package/dist/types-ts4.5/arrow/index.d.ts +0 -24
- package/dist/types-ts4.5/arrow/types.d.ts +0 -29
- package/dist/types-ts4.5/entry-points/arrow.d.ts +0 -2
|
@@ -6,6 +6,8 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
6
6
|
import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
|
|
7
7
|
import { bind } from 'bind-event-listener';
|
|
8
8
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
9
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
10
|
+
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
|
|
9
11
|
import { useAnimatedVisibility } from '../internal/use-animated-visibility';
|
|
10
12
|
import { useFocusWrap } from '../internal/use-focus-wrap';
|
|
11
13
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- dialog reset requires values not in cssMap's type union
|
|
@@ -62,6 +64,16 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
|
|
|
62
64
|
role: 'dialog'
|
|
63
65
|
});
|
|
64
66
|
|
|
67
|
+
// ── Open layer observer registration ──
|
|
68
|
+
// Notifies the open layer observer so app-coordination features
|
|
69
|
+
// (open-count subscriptions) work with top-layer dialogs.
|
|
70
|
+
useNotifyOpenLayerObserver({
|
|
71
|
+
type: 'modal',
|
|
72
|
+
isOpen: isOpen,
|
|
73
|
+
// No-op: no current use case for programmatic close via OpenLayerObserver.
|
|
74
|
+
onClose: noop
|
|
75
|
+
});
|
|
76
|
+
|
|
65
77
|
// Show/hide the dialog in response to isOpen changes.
|
|
66
78
|
useLayoutEffect(function () {
|
|
67
79
|
var dialog = ownRef.current;
|
package/dist/esm/focus/focus.js
CHANGED
|
@@ -61,6 +61,7 @@ export function getFirstFocusable(_ref2) {
|
|
|
61
61
|
/**
|
|
62
62
|
* Returns the last focusable element within the container.
|
|
63
63
|
*/
|
|
64
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
64
65
|
export function getLastFocusable(_ref3) {
|
|
65
66
|
var container = _ref3.container,
|
|
66
67
|
filter = _ref3.filter;
|
|
@@ -78,6 +79,7 @@ export function getLastFocusable(_ref3) {
|
|
|
78
79
|
* Returns `null` if there is no focused element within the container or if
|
|
79
80
|
* the focused element is not in the list of focusable elements.
|
|
80
81
|
*/
|
|
82
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
81
83
|
export function getNextFocusable(_ref4) {
|
|
82
84
|
var _all$nextIndex;
|
|
83
85
|
var container = _ref4.container,
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* Note: injected `<style>` elements and the tracking Set are append-only —
|
|
8
8
|
* they are never removed. This is intentional: the number of distinct
|
|
9
|
-
* presets is bounded (handful of animation
|
|
9
|
+
* presets is bounded (handful of animation presets), so the
|
|
10
10
|
* memory footprint is negligible. Removing styles would risk breaking
|
|
11
11
|
* other instances of the same preset that are still mounted.
|
|
12
12
|
*
|
|
@@ -94,6 +94,7 @@ export function placementToPositionArea(_ref) {
|
|
|
94
94
|
* `position-try-fallbacks` do NOT update margins, so only the `flip-*`
|
|
95
95
|
* tactic keywords correctly flip the gap margin along with the position.
|
|
96
96
|
*/
|
|
97
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
97
98
|
export function placementToTryFallbacks(_ref2) {
|
|
98
99
|
var placement = _ref2.placement;
|
|
99
100
|
var _getPlacement2 = getPlacement({
|
|
@@ -257,14 +258,14 @@ function isResolvedPlacementEqual(a, b) {
|
|
|
257
258
|
* comparison is used internally so re-runs are skipped when the resolved
|
|
258
259
|
* placement shape is unchanged.
|
|
259
260
|
*/
|
|
261
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
260
262
|
export function useAnchorPosition(_ref5) {
|
|
261
263
|
var anchorRef = _ref5.anchorRef,
|
|
262
264
|
popoverRef = _ref5.popoverRef,
|
|
263
265
|
_ref5$placement = _ref5.placement,
|
|
264
266
|
placement = _ref5$placement === void 0 ? {} : _ref5$placement,
|
|
265
267
|
_ref5$forceFallbackPo = _ref5.forceFallbackPositioning,
|
|
266
|
-
forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo
|
|
267
|
-
arrow = _ref5.arrow;
|
|
268
|
+
forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo;
|
|
268
269
|
var id = useId();
|
|
269
270
|
// Stabilize `placement` object so the same object literal
|
|
270
271
|
// value returns an object with the same reference
|
|
@@ -301,9 +302,7 @@ export function useAnchorPosition(_ref5) {
|
|
|
301
302
|
})
|
|
302
303
|
}, {
|
|
303
304
|
property: 'position-try-fallbacks',
|
|
304
|
-
value:
|
|
305
|
-
placement: stablePlacement
|
|
306
|
-
}) : placementToTryFallbacks({
|
|
305
|
+
value: placementToTryFallbacks({
|
|
307
306
|
placement: stablePlacement
|
|
308
307
|
})
|
|
309
308
|
},
|
|
@@ -366,19 +365,6 @@ export function useAnchorPosition(_ref5) {
|
|
|
366
365
|
value: crossAxisShiftActive.value
|
|
367
366
|
});
|
|
368
367
|
}
|
|
369
|
-
if (arrow) {
|
|
370
|
-
// Set the arrow size variable used by the injected arrow CSS
|
|
371
|
-
// and the @position-try rules for margin values.
|
|
372
|
-
popoverStyles.push({
|
|
373
|
-
property: '--ds-arrow-size',
|
|
374
|
-
value: gapCssValue
|
|
375
|
-
});
|
|
376
|
-
// Mark the popover root as the arrow host. The ARROW_CSS targets
|
|
377
|
-
// [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
|
|
378
|
-
// and box-shadow: none. Must be on the popover root (not a child)
|
|
379
|
-
// because that's where useAnchorPosition sets the margin gap.
|
|
380
|
-
popover.setAttribute('data-ds-popover-arrow', '');
|
|
381
|
-
}
|
|
382
368
|
|
|
383
369
|
/**
|
|
384
370
|
* **We are never cleaning up anchor names**
|
|
@@ -401,9 +387,7 @@ export function useAnchorPosition(_ref5) {
|
|
|
401
387
|
var _undoPositioning = combine(setStyle({
|
|
402
388
|
el: popover,
|
|
403
389
|
styles: popoverStyles
|
|
404
|
-
})
|
|
405
|
-
return popover.removeAttribute('data-ds-popover-arrow');
|
|
406
|
-
} : function () {});
|
|
390
|
+
}));
|
|
407
391
|
return _undoPositioning;
|
|
408
392
|
}
|
|
409
393
|
|
|
@@ -552,5 +536,5 @@ export function useAnchorPosition(_ref5) {
|
|
|
552
536
|
popover.style.removeProperty('opacity');
|
|
553
537
|
});
|
|
554
538
|
return undoPositioning;
|
|
555
|
-
}, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning,
|
|
539
|
+
}, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
|
|
556
540
|
}
|
|
@@ -5,7 +5,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
|
|
|
5
5
|
* is injected once into `document.head`.
|
|
6
6
|
*
|
|
7
7
|
* Works with any preset that has `{ css, name }` — animation presets
|
|
8
|
-
* (TAnimationPreset)
|
|
8
|
+
* (TAnimationPreset) satisfies this shape.
|
|
9
9
|
*/
|
|
10
10
|
export function usePresetStyles(_ref) {
|
|
11
11
|
var preset = _ref.preset;
|
|
@@ -9,6 +9,7 @@ import { bind } from 'bind-event-listener';
|
|
|
9
9
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
10
10
|
import noop from '@atlaskit/ds-lib/noop';
|
|
11
11
|
import once from '@atlaskit/ds-lib/once';
|
|
12
|
+
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
|
|
12
13
|
import { useAnimatedVisibility } from '../internal/use-animated-visibility';
|
|
13
14
|
import { useFocusWrap } from '../internal/use-focus-wrap';
|
|
14
15
|
import { useInitialFocus } from '../internal/use-initial-focus';
|
|
@@ -31,6 +32,18 @@ var supportsPopoverHint = once(function () {
|
|
|
31
32
|
var styles = {
|
|
32
33
|
root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
|
|
33
34
|
};
|
|
35
|
+
/**
|
|
36
|
+
* ARIA roles on the Popover primitive that register with the open layer observer
|
|
37
|
+
* as LayerType 'popup'. These are interactive overlays that should be tracked
|
|
38
|
+
* and dismissed when closeLayers() is called (e.g. when the side nav resizes).
|
|
39
|
+
*
|
|
40
|
+
* Note on open layer observer types not included here:
|
|
41
|
+
* - 'modal' only ever comes from the Dialog primitive, not Popover.
|
|
42
|
+
* - Other layer types (e.g. 'tooltip') do not yet exist in LayerType because
|
|
43
|
+
* there is no current use case for distinguishing them in the observer.
|
|
44
|
+
*/
|
|
45
|
+
var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', 'grid']);
|
|
46
|
+
|
|
34
47
|
/**
|
|
35
48
|
* Unopinionated top-layer primitive.
|
|
36
49
|
*
|
|
@@ -99,6 +112,24 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
|
|
|
99
112
|
role: role
|
|
100
113
|
});
|
|
101
114
|
|
|
115
|
+
// ── Open layer observer registration ──
|
|
116
|
+
// Notifies the open layer observer so app-coordination features
|
|
117
|
+
// (closeLayers(), open-count subscriptions) work with top-layer popovers.
|
|
118
|
+
//
|
|
119
|
+
// Only set type: 'popup' for roles that are interactive overlay popups.
|
|
120
|
+
// Passive/informational roles (tooltip, note, status, alert, log) and
|
|
121
|
+
// no-role cases do not map to LayerType 'popup', so type is left undefined.
|
|
122
|
+
var handleObserverClose = useCallback(function () {
|
|
123
|
+
onClose({
|
|
124
|
+
reason: 'programmatic'
|
|
125
|
+
});
|
|
126
|
+
}, [onClose]);
|
|
127
|
+
useNotifyOpenLayerObserver({
|
|
128
|
+
type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
|
|
129
|
+
isOpen: isOpen,
|
|
130
|
+
onClose: handleObserverClose
|
|
131
|
+
});
|
|
132
|
+
|
|
102
133
|
// Hint mode fallback: "hint" downgrades to "auto" if unsupported.
|
|
103
134
|
//
|
|
104
135
|
// Decision (2026-03-17 audit): We keep "auto" as the fallback (not "manual")
|
|
@@ -5,7 +5,6 @@ import React, { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
|
|
|
5
5
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
6
6
|
import { roleToAriaHasPopup } from '../internal/role-types';
|
|
7
7
|
import { useAnchorPosition } from '../internal/use-anchor-position';
|
|
8
|
-
import { usePresetStyles } from '../internal/use-preset-styles';
|
|
9
8
|
import { useWidthFromAnchor } from '../internal/use-width-from-anchor';
|
|
10
9
|
import { Popover } from '../popover/popover';
|
|
11
10
|
import { useMaybePopupContext } from './popup-context';
|
|
@@ -23,7 +22,6 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
|
|
|
23
22
|
label = _ref.label,
|
|
24
23
|
labelledBy = _ref.labelledBy,
|
|
25
24
|
animate = _ref.animate,
|
|
26
|
-
arrow = _ref.arrow,
|
|
27
25
|
mode = _ref.mode,
|
|
28
26
|
_ref$widthFromAnchor = _ref.widthFromAnchor,
|
|
29
27
|
widthFromAnchor = _ref$widthFromAnchor === void 0 ? 'none' : _ref$widthFromAnchor,
|
|
@@ -120,17 +118,13 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
|
|
|
120
118
|
// reach the same DOM element for togglePopover). Otherwise use a local ref.
|
|
121
119
|
var localRef = useRef(null);
|
|
122
120
|
var popoverRef = (_ctx$popoverRef = ctx === null || ctx === void 0 ? void 0 : ctx.popoverRef) !== null && _ctx$popoverRef !== void 0 ? _ctx$popoverRef : localRef;
|
|
123
|
-
var arrowPreset = usePresetStyles({
|
|
124
|
-
preset: arrow
|
|
125
|
-
});
|
|
126
121
|
useAnchorPosition({
|
|
127
122
|
anchorRef: triggerRef !== null && triggerRef !== void 0 ? triggerRef : {
|
|
128
123
|
current: null
|
|
129
124
|
},
|
|
130
125
|
popoverRef: popoverRef,
|
|
131
126
|
placement: placement,
|
|
132
|
-
forceFallbackPositioning: forceFallbackPositioning
|
|
133
|
-
arrow: arrowPreset !== null && arrowPreset !== void 0 ? arrowPreset : undefined
|
|
127
|
+
forceFallbackPositioning: forceFallbackPositioning
|
|
134
128
|
});
|
|
135
129
|
useWidthFromAnchor({
|
|
136
130
|
mode: widthFromAnchor,
|
|
@@ -15,6 +15,7 @@ export var PopupProvider = PopupContext.Provider;
|
|
|
15
15
|
*
|
|
16
16
|
* Throws if called outside of a `<Popup>` compound component.
|
|
17
17
|
*/
|
|
18
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
18
19
|
export function usePopupContext() {
|
|
19
20
|
var ctx = useContext(PopupContext);
|
|
20
21
|
if (ctx === null) {
|
|
@@ -29,6 +30,7 @@ export function usePopupContext() {
|
|
|
29
30
|
* Used by `PopupContent` to support standalone usage (e.g. tooltip)
|
|
30
31
|
* where values are passed as props instead of coming from a compound component.
|
|
31
32
|
*/
|
|
33
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
32
34
|
export function useMaybePopupContext() {
|
|
33
35
|
return useContext(PopupContext);
|
|
34
36
|
}
|
|
@@ -119,6 +119,7 @@ export function isAtCurrentMenuLevel(element, container) {
|
|
|
119
119
|
* });
|
|
120
120
|
* ```
|
|
121
121
|
*/
|
|
122
|
+
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
122
123
|
export function useArrowNavigation(_ref) {
|
|
123
124
|
var containerRef = _ref.containerRef,
|
|
124
125
|
onClose = _ref.onClose,
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
* is never painted at the wrong location.
|
|
14
14
|
*/
|
|
15
15
|
import { type RefObject } from 'react';
|
|
16
|
-
import { type TArrowPreset } from '../arrow/types';
|
|
17
16
|
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
18
17
|
export { getPlacement } from './resolve-placement';
|
|
19
18
|
/**
|
|
@@ -91,7 +90,7 @@ export declare function placementToTryFallbacks({ placement }: {
|
|
|
91
90
|
* comparison is used internally so re-runs are skipped when the resolved
|
|
92
91
|
* placement shape is unchanged.
|
|
93
92
|
*/
|
|
94
|
-
export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning,
|
|
93
|
+
export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, }: {
|
|
95
94
|
/**
|
|
96
95
|
* Element to position relative to.
|
|
97
96
|
*/
|
|
@@ -127,13 +126,4 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
|
|
|
127
126
|
* behavior in any environment, including production.
|
|
128
127
|
*/
|
|
129
128
|
forceFallbackPositioning?: boolean;
|
|
130
|
-
/**
|
|
131
|
-
* Arrow preset from `@atlaskit/top-layer/arrow`. When provided, uses
|
|
132
|
-
* the preset's named `@position-try` rules (which update both
|
|
133
|
-
* `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
|
|
134
|
-
*
|
|
135
|
-
* Pass `null` to disable. Has no effect in the JS fallback path -
|
|
136
|
-
* arrows are CSS-only.
|
|
137
|
-
*/
|
|
138
|
-
arrow?: TArrowPreset | null;
|
|
139
129
|
}): void;
|
|
@@ -7,7 +7,7 @@ type TPresetWithCssAndName = {
|
|
|
7
7
|
* is injected once into `document.head`.
|
|
8
8
|
*
|
|
9
9
|
* Works with any preset that has `{ css, name }` — animation presets
|
|
10
|
-
* (TAnimationPreset)
|
|
10
|
+
* (TAnimationPreset) satisfies this shape.
|
|
11
11
|
*/
|
|
12
12
|
export declare function usePresetStyles<T extends TPresetWithCssAndName>({ preset, }: {
|
|
13
13
|
preset: T | false | null | undefined;
|
|
@@ -4,13 +4,14 @@ import { type TAnimationPreset } from '../animations/types';
|
|
|
4
4
|
import { type TAriaRoleOptional, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
|
|
5
5
|
import { type TPlacementOptions } from '../popup/types';
|
|
6
6
|
/**
|
|
7
|
-
* The reason a popover was
|
|
7
|
+
* The reason a popover was closed.
|
|
8
8
|
*
|
|
9
9
|
* - `'escape'`: The user pressed the Escape key.
|
|
10
10
|
* - `'light-dismiss'`: The user clicked outside the popover (or the browser
|
|
11
11
|
* dismissed it for another auto-mode reason).
|
|
12
|
+
* - `'programmatic'`: The popover was closed programmatically.
|
|
12
13
|
*/
|
|
13
|
-
export type TPopoverCloseReason = 'escape' | 'light-dismiss';
|
|
14
|
+
export type TPopoverCloseReason = 'escape' | 'light-dismiss' | 'programmatic';
|
|
14
15
|
/**
|
|
15
16
|
* Flat (non-discriminated) props accepted by the Popover component internally.
|
|
16
17
|
*
|
|
@@ -41,8 +42,7 @@ type TPopoverBaseProps = {
|
|
|
41
42
|
children: ReactNode;
|
|
42
43
|
/**
|
|
43
44
|
* Additional CSS styles applied to the popover root element.
|
|
44
|
-
* Use to set `backgroundColor`
|
|
45
|
-
* `background: inherit`) match the popup surface colour.
|
|
45
|
+
* Use to set `backgroundColor` to match the popup surface colour.
|
|
46
46
|
*/
|
|
47
47
|
xcss?: StrictXCSSProp<'backgroundColor', never>;
|
|
48
48
|
/**
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
|
|
2
2
|
import { type StrictXCSSProp } from '@atlaskit/css';
|
|
3
3
|
import { type TAnimationPreset } from '../animations/types';
|
|
4
|
-
import { type TArrowPreset } from '../arrow/types';
|
|
5
4
|
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
6
5
|
import { type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
|
|
7
6
|
import { type TPopoverCloseReason, type TWidthFromAnchorMode } from '../popover/types';
|
|
@@ -131,14 +130,10 @@ type TPopupContentBaseProps = {
|
|
|
131
130
|
* Applies additional CSS styles to the popover root element using
|
|
132
131
|
* design-system-safe xcss.
|
|
133
132
|
*
|
|
134
|
-
* **Required when using `arrow`:** the arrow pseudo-elements use
|
|
135
|
-
* `background: inherit` to pick up their color from the popover root.
|
|
136
|
-
* Without setting `backgroundColor` here, the arrow tip will be transparent.
|
|
137
|
-
*
|
|
138
133
|
* @example
|
|
139
134
|
* ```tsx
|
|
140
135
|
* const styles = cssMap({ surface: { backgroundColor: token('elevation.surface.overlay') } });
|
|
141
|
-
* <Popup.Content xcss={styles.surface}
|
|
136
|
+
* <Popup.Content xcss={styles.surface} ... />
|
|
142
137
|
* ```
|
|
143
138
|
*/
|
|
144
139
|
xcss?: StrictXCSSProp<'backgroundColor', never>;
|
|
@@ -173,28 +168,6 @@ type TPopupContentBaseProps = {
|
|
|
173
168
|
* behavior in any environment, including production.
|
|
174
169
|
*/
|
|
175
170
|
forceFallbackPositioning?: boolean;
|
|
176
|
-
/**
|
|
177
|
-
* Arrow preset from `@atlaskit/top-layer/arrow`.
|
|
178
|
-
*
|
|
179
|
-
* When provided, renders CSS arrows that automatically flip when the
|
|
180
|
-
* popover flips via `@position-try` fallbacks. The arrows inherit
|
|
181
|
-
* their background color from the popover element.
|
|
182
|
-
*
|
|
183
|
-
* @example
|
|
184
|
-
* ```tsx
|
|
185
|
-
* import { arrow } from '@atlaskit/top-layer/arrow';
|
|
186
|
-
*
|
|
187
|
-
* const myArrow = arrow();
|
|
188
|
-
* <Popup.Content arrow={myArrow} />
|
|
189
|
-
* ```
|
|
190
|
-
*
|
|
191
|
-
* Constraints:
|
|
192
|
-
* - `box-shadow` is disabled on the popover (incompatible with the
|
|
193
|
-
* `clip-path: inset() margin-box` technique)
|
|
194
|
-
* - `::before` and `::after` pseudo-elements are consumed by the arrows
|
|
195
|
-
* - Only works with CSS Anchor Positioning; no arrow in the JS fallback
|
|
196
|
-
*/
|
|
197
|
-
arrow?: false | TArrowPreset;
|
|
198
171
|
/**
|
|
199
172
|
* Native popover attribute value. Default is `'auto'`.
|
|
200
173
|
*
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
* is never painted at the wrong location.
|
|
14
14
|
*/
|
|
15
15
|
import { type RefObject } from 'react';
|
|
16
|
-
import { type TArrowPreset } from '../arrow/types';
|
|
17
16
|
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
18
17
|
export { getPlacement } from './resolve-placement';
|
|
19
18
|
/**
|
|
@@ -91,7 +90,7 @@ export declare function placementToTryFallbacks({ placement }: {
|
|
|
91
90
|
* comparison is used internally so re-runs are skipped when the resolved
|
|
92
91
|
* placement shape is unchanged.
|
|
93
92
|
*/
|
|
94
|
-
export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning,
|
|
93
|
+
export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, }: {
|
|
95
94
|
/**
|
|
96
95
|
* Element to position relative to.
|
|
97
96
|
*/
|
|
@@ -127,13 +126,4 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
|
|
|
127
126
|
* behavior in any environment, including production.
|
|
128
127
|
*/
|
|
129
128
|
forceFallbackPositioning?: boolean;
|
|
130
|
-
/**
|
|
131
|
-
* Arrow preset from `@atlaskit/top-layer/arrow`. When provided, uses
|
|
132
|
-
* the preset's named `@position-try` rules (which update both
|
|
133
|
-
* `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
|
|
134
|
-
*
|
|
135
|
-
* Pass `null` to disable. Has no effect in the JS fallback path -
|
|
136
|
-
* arrows are CSS-only.
|
|
137
|
-
*/
|
|
138
|
-
arrow?: TArrowPreset | null;
|
|
139
129
|
}): void;
|
|
@@ -7,7 +7,7 @@ type TPresetWithCssAndName = {
|
|
|
7
7
|
* is injected once into `document.head`.
|
|
8
8
|
*
|
|
9
9
|
* Works with any preset that has `{ css, name }` — animation presets
|
|
10
|
-
* (TAnimationPreset)
|
|
10
|
+
* (TAnimationPreset) satisfies this shape.
|
|
11
11
|
*/
|
|
12
12
|
export declare function usePresetStyles<T extends TPresetWithCssAndName>({ preset, }: {
|
|
13
13
|
preset: T | false | null | undefined;
|
|
@@ -4,13 +4,14 @@ import { type TAnimationPreset } from '../animations/types';
|
|
|
4
4
|
import { type TAriaRoleOptional, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
|
|
5
5
|
import { type TPlacementOptions } from '../popup/types';
|
|
6
6
|
/**
|
|
7
|
-
* The reason a popover was
|
|
7
|
+
* The reason a popover was closed.
|
|
8
8
|
*
|
|
9
9
|
* - `'escape'`: The user pressed the Escape key.
|
|
10
10
|
* - `'light-dismiss'`: The user clicked outside the popover (or the browser
|
|
11
11
|
* dismissed it for another auto-mode reason).
|
|
12
|
+
* - `'programmatic'`: The popover was closed programmatically.
|
|
12
13
|
*/
|
|
13
|
-
export type TPopoverCloseReason = 'escape' | 'light-dismiss';
|
|
14
|
+
export type TPopoverCloseReason = 'escape' | 'light-dismiss' | 'programmatic';
|
|
14
15
|
/**
|
|
15
16
|
* Flat (non-discriminated) props accepted by the Popover component internally.
|
|
16
17
|
*
|
|
@@ -41,8 +42,7 @@ type TPopoverBaseProps = {
|
|
|
41
42
|
children: ReactNode;
|
|
42
43
|
/**
|
|
43
44
|
* Additional CSS styles applied to the popover root element.
|
|
44
|
-
* Use to set `backgroundColor`
|
|
45
|
-
* `background: inherit`) match the popup surface colour.
|
|
45
|
+
* Use to set `backgroundColor` to match the popup surface colour.
|
|
46
46
|
*/
|
|
47
47
|
xcss?: StrictXCSSProp<'backgroundColor', never>;
|
|
48
48
|
/**
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
|
|
2
2
|
import { type StrictXCSSProp } from '@atlaskit/css';
|
|
3
3
|
import { type TAnimationPreset } from '../animations/types';
|
|
4
|
-
import { type TArrowPreset } from '../arrow/types';
|
|
5
4
|
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
6
5
|
import { type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
|
|
7
6
|
import { type TPopoverCloseReason, type TWidthFromAnchorMode } from '../popover/types';
|
|
@@ -131,14 +130,10 @@ type TPopupContentBaseProps = {
|
|
|
131
130
|
* Applies additional CSS styles to the popover root element using
|
|
132
131
|
* design-system-safe xcss.
|
|
133
132
|
*
|
|
134
|
-
* **Required when using `arrow`:** the arrow pseudo-elements use
|
|
135
|
-
* `background: inherit` to pick up their color from the popover root.
|
|
136
|
-
* Without setting `backgroundColor` here, the arrow tip will be transparent.
|
|
137
|
-
*
|
|
138
133
|
* @example
|
|
139
134
|
* ```tsx
|
|
140
135
|
* const styles = cssMap({ surface: { backgroundColor: token('elevation.surface.overlay') } });
|
|
141
|
-
* <Popup.Content xcss={styles.surface}
|
|
136
|
+
* <Popup.Content xcss={styles.surface} ... />
|
|
142
137
|
* ```
|
|
143
138
|
*/
|
|
144
139
|
xcss?: StrictXCSSProp<'backgroundColor', never>;
|
|
@@ -173,28 +168,6 @@ type TPopupContentBaseProps = {
|
|
|
173
168
|
* behavior in any environment, including production.
|
|
174
169
|
*/
|
|
175
170
|
forceFallbackPositioning?: boolean;
|
|
176
|
-
/**
|
|
177
|
-
* Arrow preset from `@atlaskit/top-layer/arrow`.
|
|
178
|
-
*
|
|
179
|
-
* When provided, renders CSS arrows that automatically flip when the
|
|
180
|
-
* popover flips via `@position-try` fallbacks. The arrows inherit
|
|
181
|
-
* their background color from the popover element.
|
|
182
|
-
*
|
|
183
|
-
* @example
|
|
184
|
-
* ```tsx
|
|
185
|
-
* import { arrow } from '@atlaskit/top-layer/arrow';
|
|
186
|
-
*
|
|
187
|
-
* const myArrow = arrow();
|
|
188
|
-
* <Popup.Content arrow={myArrow} />
|
|
189
|
-
* ```
|
|
190
|
-
*
|
|
191
|
-
* Constraints:
|
|
192
|
-
* - `box-shadow` is disabled on the popover (incompatible with the
|
|
193
|
-
* `clip-path: inset() margin-box` technique)
|
|
194
|
-
* - `::before` and `::after` pseudo-elements are consumed by the arrows
|
|
195
|
-
* - Only works with CSS Anchor Positioning; no arrow in the JS fallback
|
|
196
|
-
*/
|
|
197
|
-
arrow?: false | TArrowPreset;
|
|
198
171
|
/**
|
|
199
172
|
* Native popover attribute value. Default is `'auto'`.
|
|
200
173
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/top-layer",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Low-level layering primitives based on popover and dialog",
|
|
5
5
|
"homepage": "https://atlassian.design/components/top-layer",
|
|
6
6
|
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
@@ -63,6 +63,8 @@
|
|
|
63
63
|
"@testing-library/jest-dom": "^6.4.5",
|
|
64
64
|
"@testing-library/react": "^16.3.0",
|
|
65
65
|
"@types/raf-schd": "^4.0.1",
|
|
66
|
+
"react": "^19.0.0",
|
|
67
|
+
"react-dom": "^19.0.0",
|
|
66
68
|
"tiny-invariant": "^1.2.0"
|
|
67
69
|
},
|
|
68
70
|
"techstack": {
|
package/arrow/package.json
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@atlaskit/top-layer/arrow",
|
|
3
|
-
"main": "../dist/cjs/entry-points/arrow.js",
|
|
4
|
-
"module": "../dist/esm/entry-points/arrow.js",
|
|
5
|
-
"module:es2019": "../dist/es2019/entry-points/arrow.js",
|
|
6
|
-
"sideEffects": [
|
|
7
|
-
"*.compiled.css"
|
|
8
|
-
],
|
|
9
|
-
"types": "../dist/types/entry-points/arrow.d.ts",
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/arrow.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|