@atlaskit/top-layer 0.17.0 → 1.0.0

package/dist/esm/popover/popover.js

@@ -21,9 +21,9 @@ var supportsPopoverHint = once(function () {
     return false;
   }
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- feature detection
-  var el = document.createElement('div');
-  el.setAttribute('popover', 'hint');
-  return el.popover === 'hint';
+  var element = document.createElement('div');
+  element.setAttribute('popover', 'hint');
+  return element.popover === 'hint';
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- popover UA reset requires values not in cssMap's type union
@@ -66,9 +66,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   var autoId = useId();
   var ownRef = useRef(null);
   var combinedRef = mergeRefs([ownRef, ref].filter(Boolean));
-  // React 18 `useId()` returns IDs with colons (invalid in CSS selectors
-  // and popover target attributes). Strip them; remove once React 18 is
-  // dropped (React 19.2 uses underscores).
+  // `useId()` colons are invalid in CSS selectors and popover target attributes.
   var popoverId = idProp !== null && idProp !== void 0 ? idProp : "popover-".concat(autoId.replace(/:/g, ''));
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
@@ -80,21 +78,15 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     phase = _useAnimatedVisibilit.phase,
     preset = _useAnimatedVisibilit.preset;
 
-  // Pre-computed phase predicate. `isVisible` mirrors "host element is
-  // mounted and on screen" (any phase except `closed`); used as a dep
-  // signal for listener-re-bind effects so they re-attach to the fresh
-  // host element after a close → reopen unmount/remount cycle.
+  // True while the host element is mounted (any phase except `closed`).
+  // Used as a dep so listener-rebind effects re-attach after a remount.
   var isVisible = phase !== 'closed';
 
   // Focus management: initial focus on entry (role-dependent), Tab cycling
   // for dialog roles. Restoration is native for outermost popovers; nested
-  // focus-capturing roles are handled below via `beforetoggle` snapshot.
-  // See: notes/architecture/focus-restoration.md
-  //
-  // Both hooks take `phase` directly: `useFocusWrap` keeps its listener
-  // attached while `phase !== 'closed'` (so focus stays trapped through
-  // the animated-exit window — WCAG 2.4.3 regression guard);
-  // `useInitialFocus` moves focus on the transition into `'open'`.
+  // focus-capturing roles are handled below via the `beforetoggle` snapshot.
+  // Passing `phase` keeps `useFocusWrap` attached through the animated-exit
+  // window (WCAG 2.4.3 guard). See notes/architecture/focus-restoration.md.
   useFocusWrap({
     elementRef: ownRef,
     role: role,
@@ -191,7 +183,6 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
 
       // Browser dismiss (Escape/click-outside).
       var reason = closeReasonRef.current;
-      // reset for next dismiss
       closeReasonRef.current = 'light-dismiss';
       // Optional: `manual` mode has no `onClose` in the forwarded type.
       onClose === null || onClose === void 0 || onClose({
@@ -200,21 +191,12 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     }
   }, [onClose, onOpenChange, role]);
 
-  // Bind toggle/beforetoggle/keydown listeners via `useLayoutEffect` so
-  // they are attached BEFORE the show/hide layout effect calls
-  // `el.showPopover()`. `showPopover()` dispatches `beforetoggle`
-  // synchronously; binding the listener in a regular `useEffect`
-  // (which runs after layout effects) misses that first dispatch and
-  // the `previouslyFocusedElementRef` snapshot never gets taken — which
-  // breaks nested-popover focus restoration on close.
-  //
-  // `isVisible` is in deps so the listeners re-bind to the new host
-  // element after a host unmount/remount cycle. The cleanup detaches
-  // the old listeners.
-  //
-  // This layout effect MUST appear in the file before the show/hide
-  // layout effect — React runs layout effects in source order on the
-  // same commit, and we need listeners attached first.
+  // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
+  // below, so listeners are attached when `showPopover()` synchronously
+  // dispatches `beforetoggle`. A regular `useEffect` would miss that
+  // first dispatch, dropping the `previouslyFocusedElementRef` snapshot
+  // and breaking nested-popover focus restoration on close. React runs
+  // layout effects in source order on the same commit.
   useLayoutEffect(function () {
     var element = ownRef.current;
     if (!element) {
@@ -250,13 +232,10 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   }, [handleToggle, handleBeforeToggle, isVisible]);
 
   // Placement-dependent animation CSS vars. Kept separate from show/hide
-  // so preset reference changes do not re-trigger visibility. `isVisible`
-  // is in deps so the CSS vars are re-applied to the new host element after
-  // a remount cycle (otherwise the freshly mounted element would have no
-  // transform / placement vars set).
+  // so preset reference changes do not re-trigger visibility.
   useLayoutEffect(function () {
-    var el = ownRef.current;
-    if (!el || !(preset !== null && preset !== void 0 && preset.getProperties) || !placement) {
+    var element = ownRef.current;
+    if (!element || !(preset !== null && preset !== void 0 && preset.getProperties) || !placement) {
       return;
     }
     var props = preset.getProperties({
@@ -266,7 +245,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
       var _ref3 = _slicedToArray(_ref2, 2),
         key = _ref3[0],
         value = _ref3[1];
-      el.style.setProperty(key, String(value));
+      element.style.setProperty(key, String(value));
     });
   }, [preset, placement, isVisible]);
 
@@ -274,42 +253,35 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   // already in the target state. Try/catch guards `InvalidStateError` on
   // disconnected elements (StrictMode/concurrent/unmount edge cases).
   useLayoutEffect(function () {
-    var el = ownRef.current;
-    if (!el) {
+    var element = ownRef.current;
+    if (!element) {
       return;
     }
     if (isOpen) {
       programmaticCloseRef.current = false;
-      // Reset the close-reason snapshot at the start of every open
-      // cycle. The ref outlives the host element (lives on the
-      // component, not the DOM), so a stale 'escape' from a prior
-      // cycle would otherwise leak into the next close — especially
-      // in the no-animation path where the host unmounts before
-      // `handleToggle` has a chance to reset the ref itself.
+      // Clear stale 'escape' from a prior cycle: the ref outlives
+      // the host element, and the no-animation path unmounts before
+      // `handleToggle` can reset it.
       closeReasonRef.current = 'light-dismiss';
       try {
-        el.showPopover();
+        element.showPopover();
       } catch (_unused) {}
       return function () {
         programmaticCloseRef.current = true;
         try {
-          el.hidePopover();
+          element.hidePopover();
         } catch (_unused2) {}
       };
     }
     programmaticCloseRef.current = true;
     try {
-      el.hidePopover();
+      element.hidePopover();
     } catch (_unused3) {}
   }, [isOpen]);
 
-  // The host element is only rendered while the popover is open or its exit
-  // animation is playing. Once the phase returns to `closed`, we unmount
-  // the host entirely so it does not leave an empty `role="..."` /
-  // `popover` element in the accessibility tree. The element re-mounts on
-  // the next `isOpen=true` commit; refs and event listeners re-bind via
-  // the existing layout effect and `useEffect`. The popover `id` is stable
-  // across opens (derived from `useId()` or the consumer-supplied `idProp`).
+  // Unmount the host once exit completes so it does not leave an empty
+  // `role`/`popover` element in the accessibility tree. The element
+  // remounts on the next open; the `popoverId` is stable across opens.
   if (!isVisible) {
     return null;
   }

package/dist/esm/popover-surface/popover-surface.js

@@ -1,7 +1,7 @@
 /* popover-surface.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./popover-surface.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
 var styles = {
   root: "_2rkofajl _1reo1wug _18m91wug _bfhk1bhr _16qs130s"
 };

package/dist/esm/testing/polyfill.js

@@ -352,17 +352,17 @@ function isInChainTo(_ref12) {
 function hidePopoversInStackNotInChainTo(_ref13) {
   var stack = _ref13.stack,
     target = _ref13.target;
-  var snapshot = stack.slice();
-  for (var i = snapshot.length - 1; i >= 0; i -= 1) {
-    var popover = snapshot[i];
-    if (isInChainTo({
+  var snapshot = stack.slice().reverse();
+  var stopIndex = snapshot.findIndex(function (popover) {
+    return isInChainTo({
       candidate: popover,
       target: target
-    })) {
-      break;
-    }
-    popover.hidePopover();
-  }
+    });
+  });
+  var toHide = stopIndex === -1 ? snapshot : snapshot.slice(0, stopIndex);
+  toHide.forEach(function (popover) {
+    return popover.hidePopover();
+  });
 }
 
 // Two-phase light-dismiss: pointerdown stores the nearest open popover for

package/dist/esm/use-simple-light-dismiss/index.js

@@ -53,13 +53,13 @@ export function useSimpleLightDismiss(_ref) {
     var unbindClickOutside = bind(document, {
       type: 'click',
       listener: function listener(event) {
-        var el = popoverRef.current;
-        if (!el) {
+        var element = popoverRef.current;
+        if (!element) {
           return;
         }
 
         // If the click target is inside the popover, do not dismiss.
-        if (event.target instanceof Node && el.contains(event.target)) {
+        if (event.target instanceof Node && element.contains(event.target)) {
           return;
         }
         onCloseRef.current({

package/dist/types/internal/set-style.d.ts

@@ -2,8 +2,8 @@
  * Sets inline styles on an element and returns a cleanup function that
  * restores the prior inline values (so we do not stomp consumer styles).
  */
-export declare function setStyle({ el, styles, }: {
-    el: HTMLElement;
+export declare function setStyle({ element, styles, }: {
+    element: HTMLElement;
     styles: Array<{
         property: string;
         value: string;

package/dist/types/internal/slot.d.ts

@@ -2,7 +2,7 @@ import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes } fr
 /**
  * Extra DOM/event props are passed through to the cloned child.
  */
-export type SlotProps = {
+export type TSlotProps = {
     children: ReactNode;
 } & Record<string, unknown>;
 /**
@@ -26,4 +26,4 @@ export type SlotProps = {
  * </Slot>
  * ```
  */
-export declare const Slot: ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>;
+export declare const Slot: ForwardRefExoticComponent<TSlotProps & RefAttributes<HTMLElement>>;

package/dist/types/internal/use-anchor-position-at-point.d.ts

@@ -5,7 +5,7 @@ import { type TPlacementOptions } from './resolve-placement';
  * anchor should be placed.
  *
  * Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
- * shape is unambiguous in RTL writing modes — there is no ambiguity
+ * shape is unambiguous in RTL writing modes - there is no ambiguity
  * about whether a coordinate is logical (`inline-start`/`block-start`)
  * or physical (`left`/`top`). Viewport coordinates are always
  * physical, so we name them with the physical axis labels.
@@ -48,7 +48,7 @@ export declare function useAnchorPositionAtPoint({ popoverRef, placement, getPoi
      * Called once per activation (every `isEnabled: false → true`
      * transition); the result is latched and not re-read.
      *
-     * Return `null` to signal "no point yet" — the hook stays in a
+     * Return `null` to signal "no point yet" - the hook stays in a
      * no-DOM state so another positioning strategy can own the popover.
      *
      * Read from a ref, so it does not need to be memoized.

package/dist/types/internal/use-anchor-position.d.ts

@@ -29,10 +29,6 @@ import { type TPlacementOptions } from '../internal/resolve-placement';
  * When not supported, it falls back to JavaScript-based positioning using
  * `position: fixed` with measured coordinates, re-running on scroll (capture)
  * and resize events.
- *
- * `placement` may be a fresh inline object on every render: a structural
- * comparison is used internally so re-runs are skipped when the resolved
- * placement shape is unchanged.
  */
 export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, isEnabled, isOpen, }: {
     /**

package/dist/types/internal/use-initial-focus.d.ts

@@ -30,7 +30,7 @@ import { type TPhase } from './use-animated-visibility';
  *   `<dialog>.close()`. If the consumer reopens before the exit transition
  *   has settled, the phase machine jumps `exiting → entering` without
  *   passing through `closed`, so without this branch the popup would be
- *   visible again with focus stranded on the trigger — a keyboard usability
+ *   visible again with focus stranded on the trigger - a keyboard usability
  *   gap for menu/dialog/listbox roles.
  *
  * Note: there is a rare programmatic path where a consumer flips `isOpen`

package/dist/types/popover/types.d.ts

@@ -15,12 +15,10 @@ export type TPopoverCloseReason = 'escape' | 'light-dismiss' | 'programmatic';
 /**
  * Flat (non-discriminated) props accepted by the Popover component internally.
  *
- * TypeScript limitation: when PopupContent destructures props from a
- * discriminated union (role, label, labelledBy) and re-passes them individually
- * to Popover, TypeScript cannot prove the individual fields still satisfy the
- * union constraint. This flat type accepts all role/label combinations without
- * the union, since ARIA correctness is enforced at the TPopupContentProps
- * boundary where consumers interact.
+ * Used by wrappers like `PopupContent` that destructure props from a
+ * discriminated union and re-pass the individual fields: TypeScript cannot
+ * prove the fields still satisfy the union. ARIA correctness is enforced at
+ * the `TPopupContentProps` boundary where consumers interact.
  */
 export type TPopoverForwardedProps = TPopoverBaseProps & {
     mode?: 'auto' | 'hint' | 'manual';
@@ -65,7 +63,7 @@ type TPopoverBaseProps = {
      *   animation plays (via `allow-discrete`) before the popover becomes logically closed.
      *   Otherwise hides instantly.
      *
-     * The consumer does not conditionally render the `Popover` — visibility is driven
+     * The consumer does not conditionally render the `Popover` - visibility is driven
      * by this prop.
      *
      * **Lifecycle observable to consumers:**

package/dist/types/popover-surface/popover-surface.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type TPopoverSurfaceProps = {
     children: ReactNode;
 };
@@ -18,4 +18,4 @@ export type TPopoverSurfaceProps = {
  * `Popover` instead. `PopoverSurface` is the no-config "give me the default
  * ADS overlay look" surface, nothing more.
  */
-export declare function PopoverSurface({ children }: TPopoverSurfaceProps): React.ReactElement;
+export declare function PopoverSurface({ children }: TPopoverSurfaceProps): ReactNode;

package/focus/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/focus.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/focus.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/focus.d.ts"
 }

package/get-aria-for-trigger/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/get-aria-for-trigger.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/get-aria-for-trigger.d.ts"
 }

package/open-layer-observer/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/open-layer-observer.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/open-layer-observer.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/open-layer-observer.d.ts"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.17.0",
+	"version": "1.0.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -34,11 +34,11 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/browser-apis": "^0.0.2",
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/layering": "^3.8.0",
-		"@atlaskit/tokens": "^13.4.0",
+		"@atlaskit/browser-apis": "^1.0.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
+		"@atlaskit/layering": "^4.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -51,12 +51,12 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/lozenge": "^13.9.0",
-		"@atlaskit/primitives": "^19.0.0",
+		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/heading": "^6.0.0",
+		"@atlaskit/lozenge": "^14.0.0",
+		"@atlaskit/primitives": "^20.0.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/textfield": "^8.3.0",
+		"@atlaskit/textfield": "^9.0.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/testing-library": "^0.6.0",
@@ -96,13 +96,5 @@
 	},
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
-	},
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
 	}
 }

package/placement-map/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/placement-map.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/placement-map.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/placement-map.d.ts"
 }

package/popover/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/popover.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/popover.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/popover.d.ts"
 }

package/popover-surface/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/popover-surface.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/popover-surface.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/popover-surface.d.ts"
 }

package/testing/polyfill/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/testing/polyfill.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/testing/polyfill.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/testing/polyfill.d.ts"
 }

package/testing/to-be-visible/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/testing/to-be-visible.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/testing/to-be-visible.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/testing/to-be-visible.d.ts"
 }

package/use-anchor-position/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-anchor-position.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-anchor-position.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-anchor-position.d.ts"
 }

package/use-anchor-position-at-point/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-anchor-position-at-point.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-anchor-position-at-point.d.ts"
 }

package/use-arrow-navigation/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-arrow-navigation.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-arrow-navigation.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-arrow-navigation.d.ts"
 }

package/use-popover-id/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-popover-id.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-popover-id.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-popover-id.d.ts"
 }

package/use-simple-light-dismiss/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-simple-light-dismiss.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-simple-light-dismiss.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-simple-light-dismiss.d.ts"
 }

package/use-width-from-anchor/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-width-from-anchor.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-width-from-anchor.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-width-from-anchor.d.ts"
 }