@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.
Files changed (59) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/animations/presets.js +4 -0
  3. package/dist/cjs/dialog/dialog-content.js +12 -0
  4. package/dist/cjs/focus/focus.js +2 -0
  5. package/dist/cjs/internal/ensure-preset-styles.js +1 -1
  6. package/dist/cjs/internal/use-anchor-position.js +6 -22
  7. package/dist/cjs/internal/use-preset-styles.js +1 -1
  8. package/dist/cjs/placement-map/index.js +2 -1
  9. package/dist/cjs/popover/popover.js +31 -0
  10. package/dist/cjs/popup/popup-content.js +1 -7
  11. package/dist/cjs/popup/popup-context.js +2 -0
  12. package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js +1 -0
  13. package/dist/es2019/animations/presets.js +4 -0
  14. package/dist/es2019/dialog/dialog-content.js +12 -0
  15. package/dist/es2019/focus/focus.js +2 -0
  16. package/dist/es2019/internal/ensure-preset-styles.js +1 -1
  17. package/dist/es2019/internal/use-anchor-position.js +6 -20
  18. package/dist/es2019/internal/use-preset-styles.js +1 -1
  19. package/dist/es2019/placement-map/index.js +1 -0
  20. package/dist/es2019/popover/popover.js +31 -0
  21. package/dist/es2019/popup/popup-content.js +1 -7
  22. package/dist/es2019/popup/popup-context.js +2 -0
  23. package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js +1 -0
  24. package/dist/esm/animations/presets.js +4 -0
  25. package/dist/esm/dialog/dialog-content.js +12 -0
  26. package/dist/esm/focus/focus.js +2 -0
  27. package/dist/esm/internal/ensure-preset-styles.js +1 -1
  28. package/dist/esm/internal/use-anchor-position.js +6 -22
  29. package/dist/esm/internal/use-preset-styles.js +1 -1
  30. package/dist/esm/placement-map/index.js +1 -0
  31. package/dist/esm/popover/popover.js +31 -0
  32. package/dist/esm/popup/popup-content.js +1 -7
  33. package/dist/esm/popup/popup-context.js +2 -0
  34. package/dist/esm/use-arrow-navigation/use-arrow-navigation.js +1 -0
  35. package/dist/types/internal/use-anchor-position.d.ts +1 -11
  36. package/dist/types/internal/use-preset-styles.d.ts +1 -1
  37. package/dist/types/popover/types.d.ts +4 -4
  38. package/dist/types/popup/types.d.ts +1 -28
  39. package/dist/types-ts4.5/internal/use-anchor-position.d.ts +1 -11
  40. package/dist/types-ts4.5/internal/use-preset-styles.d.ts +1 -1
  41. package/dist/types-ts4.5/popover/types.d.ts +4 -4
  42. package/dist/types-ts4.5/popup/types.d.ts +1 -28
  43. package/package.json +3 -1
  44. package/arrow/package.json +0 -17
  45. package/dist/cjs/arrow/index.js +0 -130
  46. package/dist/cjs/arrow/types.js +0 -5
  47. package/dist/cjs/entry-points/arrow.js +0 -12
  48. package/dist/es2019/arrow/index.js +0 -268
  49. package/dist/es2019/arrow/types.js +0 -1
  50. package/dist/es2019/entry-points/arrow.js +0 -1
  51. package/dist/esm/arrow/index.js +0 -123
  52. package/dist/esm/arrow/types.js +0 -1
  53. package/dist/esm/entry-points/arrow.js +0 -1
  54. package/dist/types/arrow/index.d.ts +0 -24
  55. package/dist/types/arrow/types.d.ts +0 -29
  56. package/dist/types/entry-points/arrow.d.ts +0 -2
  57. package/dist/types-ts4.5/arrow/index.d.ts +0 -24
  58. package/dist/types-ts4.5/arrow/types.d.ts +0 -29
  59. 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;
@@ -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 + arrow presets), so the
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: arrow ? arrow.getTryFallbacks({
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
- }), arrow ? function () {
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, arrow, id]);
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) and arrow presets (TArrowPreset) both satisfy this shape.
8
+ * (TAnimationPreset) satisfies this shape.
9
9
  */
10
10
  export function usePresetStyles(_ref) {
11
11
  var preset = _ref.preset;
@@ -165,4 +165,5 @@ export function fromLegacyPlacement(_ref) {
165
165
  /**
166
166
  * The full mapping record, exposed for consumers that need to iterate or introspect.
167
167
  */
168
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
168
169
  export { placementMapping };
@@ -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, arrow, }: {
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) and arrow presets (TArrowPreset) both satisfy this shape.
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 dismissed via light dismiss.
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` so arrow pseudo-elements (which use
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} arrow={arrowPreset} ... />
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, arrow, }: {
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) and arrow presets (TArrowPreset) both satisfy this shape.
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 dismissed via light dismiss.
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` so arrow pseudo-elements (which use
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} arrow={arrowPreset} ... />
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.7.1",
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": {
@@ -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
- }