@atlaskit/top-layer 0.1.5 → 0.3.0

package/dist/types/popup/types.d.ts

@@ -2,39 +2,30 @@ import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'rea
 import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TAnimationPreset } from '../animations/types';
 import { type TArrowPreset } from '../arrow/types';
-import { type TPlacement } from '../internal/resolve-placement';
+import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
 import { type TPopoverCloseReason } from '../popover/types';
 /**
- * Describes where to position a popover relative to its trigger.
+ * Describes where to position a popover relative to its trigger. All fields
+ * are optional. The default `{}` means "below the trigger, centered, with a
+ * `space.100` token gap" (equivalent to Popper.js `'bottom'`).
  *
- * - `axis` — which axis the popover appears along (`'block'` = above/below, `'inline'` = left/right).
- *   Defaults to `'block'`.
- * - `edge` — which end of the axis (`'start'` = above/left in LTR, `'end'` = below/right in LTR).
- *   Defaults to `'end'`.
- * - `align` — where to align on the cross-axis (`'start'`, `'center'`, `'end'`).
- *   Defaults to `'center'`. Can be written explicitly for clarity.
- *
- * All fields are optional. The default `{}` means "below the trigger, centered"
- * (equivalent to Popper.js `'bottom'`).
+ * - `axis`: `'block'` (above/below, default) or `'inline'` (left/right)
+ * - `edge`: `'start'` or `'end'` (default)
+ * - `align`: `'start'`, `'center'` (default), or `'end'`
+ * - `offset.gap`: distance from the trigger toward the popover (default `token('space.100', '8px')`, accepts number or CSS string)
+ * - `offset.crossAxisShift.value`: cross-axis shift (default `0`)
+ * - `offset.crossAxisShift.direction`: `'forwards'` (default) or `'backwards'`
  *
  * @example
  * ```ts
- * // Below trigger, centered (all defaults)
- * placement={{}}
- * placement={{ axis: 'block', edge: 'end', align: 'center' }}
- *
- * // Below trigger, aligned to the start (left in LTR)
- * placement={{ align: 'start' }}
- *
- * // Above trigger, aligned to the end (right in LTR)
- * placement={{ edge: 'start', align: 'end' }}
- *
- * // Right of trigger, centered
- * placement={{ axis: 'inline' }}
+ * placement={{ align: 'start' }} // Below trigger, aligned to start
+ * placement={{ axis: 'inline' }} // Right of trigger, centered
+ * placement={{ offset: { gap: 4 } }} // Tooltip-like gap
+ * placement={{ offset: { crossAxisShift: { value: 4, direction: 'backwards' } } }}
  * ```
  */
-export type TPlacementOptions = Partial<TPlacement>;
+export { type TPlacementOptions } from '../internal/resolve-placement';
 export type TPopupProps = {
     /**
      * Position of the popup relative to the trigger. Only the Popup compound uses
@@ -176,11 +167,6 @@ type TPopupContentBaseProps = {
      * Test ID applied to the popover content element.
      */
     testId?: string;
-    /**
-     * Gap between the popover and its trigger, in pixels.
-     * Defaults to 8 (design token `space.100`). Tooltip uses 4.
-     */
-    offset?: number;
     /**
      * Forces the JavaScript positioning fallback even when the browser
      * supports CSS Anchor Positioning. Useful for testing fallback
@@ -302,4 +288,3 @@ export type TPopupContentProps = TPopupContentBaseProps & (({
 export type TPopupSurfaceProps = {
     children: ReactNode;
 };
-export {};

package/dist/types/testing/polyfill.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Popover API & HTMLDialogElement polyfills for jsdom.
+ *
+ * jsdom does not implement the Popover API or the HTMLDialogElement methods
+ * (showModal, show, close). This polyfill provides faithful implementations,
+ * including timing semantics validated against Chromium via Playwright.
+ *
+ * Behaviour:
+ *  - beforetoggle: sync, cancelable on show only. toggle: async task, not cancelable.
+ *  - Rapid show/hide coalesces into one toggle event (originalOldState to finalNewState).
+ *  - Dialog: showModal/show fire beforetoggle+toggle. close fires toggle then close event.
+ *  - Popover open state tracked via `data-popover-open` (no `:popover-open` in jsdom).
+ *
+ * Companion `toBeVisible` patch lives at `./to-be-visible`.
+ *
+ * Importing this module has the side-effect of patching the relevant
+ * prototypes. It is safe to import multiple times; each branch is guarded
+ * to avoid overwriting native implementations or re-patching.
+ */
+type TToggleState = 'open' | 'closed';
+/**
+ * e.g. `<div#my-id.class-a.class-b>`
+ */
+declare function describeElement({ element }: {
+    element: Element;
+}): string;
+type TToggleEventInit = {
+    type: string;
+    oldState: TToggleState;
+    newState: TToggleState;
+    cancelable: boolean;
+};
+declare function createToggleEvent({ type, oldState, newState, cancelable }: TToggleEventInit): Event;
+declare function fireToggleEvent({ element, type, oldState, newState, cancelable, }: {
+    element: Element;
+} & TToggleEventInit): boolean;
+declare function oppositeState({ state }: {
+    state: TToggleState;
+}): TToggleState;
+declare function createToggleScheduler(): (args: {
+    element: Element;
+    newState: TToggleState;
+}) => void;
+declare function createDialogToggleScheduler(): (args: {
+    dialog: HTMLDialogElement;
+    newState: TToggleState;
+    shouldFireCloseEvent: boolean;
+}) => void;

package/dist/types/testing/to-be-visible.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Patches `toBeVisible()` to understand popover and dialog visibility.
+ *
+ * jest-dom's `toBeVisible()` does not know about the Popover API. In real
+ * browsers the UA stylesheet hides `[popover]` with `display: none`, but
+ * jsdom has no such stylesheet — so closed popovers incorrectly appear visible.
+ *
+ * Raw jest-dom results in jsdom:
+ *
+ *   closed popover / child  → true  (WRONG — should be false)
+ *   open popover / child    → true  (correct)
+ *   closed dialog / child   → false (correct — jsdom natively hides <dialog>)
+ *   open dialog / child     → true  (correct)
+ *
+ * We correct both false positives and false negatives:
+ *   1. Delegate to the original first.
+ *   2. If it says "visible" → check for closed top-layer hosts (false positive).
+ *   3. If it says "not visible" → check for open top-layer hosts (false negative).
+ *
+ * Must load via `setupFilesAfterEnv` (after jest-dom registers its matchers).
+ * Polyfills live in `./polyfill` (loaded via `setupFiles`).
+ */
+export {};

package/dist/types-ts4.5/internal/anchor-positioning-fallback.d.ts

@@ -1,15 +1,13 @@
 import { type TPlacement } from './resolve-placement';
 /**
- * JS fallback: compute popover position from trigger rect and viewport.
+ * Computes popover position from trigger rect and viewport, flipping to
+ * the side with more space when needed. Re-runs on scroll/resize.
  *
- * Placement algorithm (from the document):
- * - "block" placement: show above/below, picking the side with more space if flipping needed
- * - "inline" placement: show left/right, picking the side with more space if flipping needed
- * - "auto" placement: show on the edge with the most available space
- *
- * Re-runs on scroll (capture on window) and resize events.
+ * `gap` and `crossAxisShift` are pre-resolved to pixels by the
+ * caller (see `resolveCssLengthToPixels`), so this function stays purely
+ * numeric.
  */
-export declare function computeFallbackPosition({ triggerRect, popoverEl, placement, viewport, offset, }: {
+export declare function computeFallbackPosition({ triggerRect, popoverEl, placement, viewport, gap, crossAxisShift, }: {
     triggerRect: DOMRect;
     popoverEl: HTMLElement;
     placement: TPlacement;
@@ -17,7 +15,11 @@ export declare function computeFallbackPosition({ triggerRect, popoverEl, placem
         width: number;
         height: number;
     };
-    offset: number;
+    gap: number;
+    crossAxisShift: {
+        value: number;
+        direction: 'forwards' | 'backwards';
+    };
 }): {
     top: number;
     left: number;

package/dist/types-ts4.5/internal/resolve-css-length-to-pixels.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Resolves a CSS length value to a pixel number using a hidden DOM probe.
+ *
+ * Used by the JS positioning fallback: consumer offsets can be numbers,
+ * `${n}px` strings, tokenised `var(--ds-space-100, 8px)` strings, `calc()`
+ * expressions, viewport units, etc. Parsing arbitrary CSS in JS is fragile
+ * (and impossible for `calc(var(...))` without a layout context), so we let
+ * the browser do the math.
+ *
+ * The probe is appended to `container` so it inherits the same containing
+ * block, font size, and custom-property scope as the popover. We use `width`
+ * because it accepts any CSS length, including negative `calc()` results
+ * (negative widths are clamped to 0 — see note below).
+ *
+ * Cost: one synchronous reflow per call. The fallback only resolves on
+ * placement/offset changes, not on every scroll/resize update, so this is
+ * not a hot path.
+ */
+export declare function resolveCssLengthToPixels({ value, container, }: {
+    value: number | string;
+    container: HTMLElement;
+}): number;

package/dist/types-ts4.5/internal/resolve-css-length.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Normalizes an offset to a CSS length string. Numbers become `${n}px`;
+ * strings pass through. Apply at the API boundary so internal code only
+ * deals with strings.
+ */
+export declare function toCssLengthString({ value }: {
+    value: number | string;
+}): string;

package/dist/types-ts4.5/internal/resolve-placement.d.ts

@@ -1,16 +1,58 @@
 /**
- * Fully-resolved placement (internal). All fields are required.
- * Use getPlacement({ placement: partial }) to obtain from partial input.
+ * Cross-axis shift. `value` is a CSS length string (consumer numbers are
+ * normalized to `${n}px`). `direction` is `'forwards'` (toward end) or
+ * `'backwards'` (toward start).
+ */
+export type TCrossAxisShiftOffset = {
+    value: string;
+    direction: 'forwards' | 'backwards';
+};
+/**
+ * Fully-resolved placement (internal). Use `getPlacement` for partial input.
+ * `offset.gap` and `offset.crossAxisShift.value` are always CSS
+ * length strings.
  */
 export type TPlacement = {
     axis: 'block' | 'inline';
     edge: 'start' | 'end';
     align: 'start' | 'center' | 'end';
+    offset: {
+        gap: string;
+        crossAxisShift: {
+            value: string;
+            direction: 'forwards' | 'backwards';
+        };
+    };
+};
+/**
+ * Partial placement options. `offset.gap` and
+ * `offset.crossAxisShift.value` accept either a number (pixels) or a
+ * CSS length string (e.g. `token('space.100')`).
+ *
+ * The two offset axes are named for clarity at the call site:
+ *   - `gap`     — distance away from the trigger along the placement axis
+ *   - `crossAxisShift`  — nudge along the trigger edge (perpendicular to the placement axis)
+ */
+export type TPlacementOptions = {
+    axis?: 'block' | 'inline';
+    edge?: 'start' | 'end';
+    align?: 'start' | 'center' | 'end';
+    offset?: {
+        gap?: number | string;
+        crossAxisShift?: {
+            value?: number | string;
+            direction?: 'forwards' | 'backwards';
+        };
+    };
 };
 /**
- * Resolves a partial placement to its fully-specified form.
- * Defaults: `axis: 'block'`, `edge: 'end'`, `align: 'center'`.
+ * Resolves a partial placement to its fully-specified form. Number offsets
+ * are normalized to `${n}px` strings.
+ *
+ * Defaults: `axis: 'block'`, `edge: 'end'`, `align: 'center'`,
+ * `offset.gap: token('space.100', '8px')`,
+ * `offset.crossAxisShift: { value: '0px', direction: 'forwards' }`.
  */
 export declare function getPlacement({ placement }: {
-    placement: Partial<TPlacement>;
+    placement: TPlacementOptions;
 }): TPlacement;

package/dist/types-ts4.5/internal/use-anchor-positioning.d.ts

@@ -1,6 +1,20 @@
+/**
+ * Anchor positioning for top-layer popovers. See
+ * `notes/architecture/positioning.md` for the full model.
+ *
+ * Two runtime paths: CSS Anchor Positioning (modern browsers) and a JS
+ * fallback that measures the trigger and writes `top`/`left`.
+ *
+ * Both paths honour `offset.gap` and `offset.crossAxisShift`. The
+ * CSS path passes the values through as strings; the JS fallback resolves
+ * them to pixels via a hidden DOM probe (see `resolveCssLengthToPixels`)
+ * so tokens, `calc()`, `var()`, etc all work. The JS fallback hides the
+ * popover with `opacity: 0` until the first measurement completes, so it
+ * is never painted at the wrong location.
+ */
 import { type RefObject } from 'react';
 import { type TArrowPreset } from '../arrow/types';
-import { type TPlacementOptions } from '../popup/types';
+import { type TPlacementOptions } from '../internal/resolve-placement';
 export { getPlacement } from './resolve-placement';
 /**
  * Resolves placement options to CSS `position-area` syntax.
@@ -59,7 +73,7 @@ export declare function placementToTryFallbacks({ placement }: {
  * `position: fixed` with measured coordinates, re-running on scroll (capture)
  * and resize events.
  */
-export declare function useAnchorPosition({ anchorRef, popoverRef, placement, offset, forceFallbackPositioning, arrow, }: {
+export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, arrow, }: {
     /**
      * Element to position relative to.
      */
@@ -70,13 +84,10 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, of
     popoverRef: RefObject<HTMLElement | null>;
     /**
      * Where to place the element relative to the anchor.
+     * `offset.gap` and `offset.crossAxisShift` are part of the
+     * placement object.
      */
     placement: TPlacementOptions;
-    /**
-     * Gap between the positioned element and the anchor, in pixels.
-     * Defaults to 8 (`space.100`). Tooltip uses 4.
-     */
-    offset?: number;
     /**
      * Forces the JavaScript positioning fallback even when the browser
      * supports CSS Anchor Positioning. Useful for testing fallback

package/dist/types-ts4.5/placement-map/index.d.ts

@@ -1,5 +1,4 @@
-import { type TPlacement } from '../internal/resolve-placement';
-import { type TPlacementOptions } from '../popup/types';
+import { type TPlacementOptions } from '../internal/resolve-placement';
 /**
  * Legacy Popper.js placement values (used by `@atlaskit/popper`, `@atlaskit/popup`,
  * `@atlaskit/tooltip`, etc.).
@@ -41,12 +40,22 @@ export type TLegacyPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top
  * // newPlacement === { axis: 'block', edge: 'end', align: 'start' }
  * ```
  */
-declare const placementMapping: Record<TLegacyPlacement, TPlacement>;
+declare const placementMapping: Record<TLegacyPlacement, TPlacementOptions>;
 /**
- * Convert a legacy Popper.js placement to the new CSS `position-area`-based Placement.
+ * Convert a legacy Popper.js placement to the new `position-area`-based Placement.
+ * Optional `offset` is the legacy Popper `[along, away]` tuple (also known as
+ * `[skidding, distance]`); negative `along` becomes `direction: 'backwards'`.
+ *
+ * The tuple keeps the historical popper names so call sites that already pass
+ * `[along, away]` migrate without thinking; the new internal field names
+ * (`gap` / `crossAxisShift`) are produced inside this adapter.
  */
-export declare function fromLegacyPlacement({ legacy }: {
+export declare function fromLegacyPlacement({ legacy, offset, }: {
     legacy: TLegacyPlacement;
+    offset?: [
+        along: number,
+        away: number
+    ];
 }): TPlacementOptions;
 /**
  * The full mapping record, exposed for consumers that need to iterate or introspect.

package/dist/types-ts4.5/popup/types.d.ts

@@ -2,39 +2,30 @@ import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'rea
 import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TAnimationPreset } from '../animations/types';
 import { type TArrowPreset } from '../arrow/types';
-import { type TPlacement } from '../internal/resolve-placement';
+import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
 import { type TPopoverCloseReason } from '../popover/types';
 /**
- * Describes where to position a popover relative to its trigger.
+ * Describes where to position a popover relative to its trigger. All fields
+ * are optional. The default `{}` means "below the trigger, centered, with a
+ * `space.100` token gap" (equivalent to Popper.js `'bottom'`).
  *
- * - `axis` — which axis the popover appears along (`'block'` = above/below, `'inline'` = left/right).
- *   Defaults to `'block'`.
- * - `edge` — which end of the axis (`'start'` = above/left in LTR, `'end'` = below/right in LTR).
- *   Defaults to `'end'`.
- * - `align` — where to align on the cross-axis (`'start'`, `'center'`, `'end'`).
- *   Defaults to `'center'`. Can be written explicitly for clarity.
- *
- * All fields are optional. The default `{}` means "below the trigger, centered"
- * (equivalent to Popper.js `'bottom'`).
+ * - `axis`: `'block'` (above/below, default) or `'inline'` (left/right)
+ * - `edge`: `'start'` or `'end'` (default)
+ * - `align`: `'start'`, `'center'` (default), or `'end'`
+ * - `offset.gap`: distance from the trigger toward the popover (default `token('space.100', '8px')`, accepts number or CSS string)
+ * - `offset.crossAxisShift.value`: cross-axis shift (default `0`)
+ * - `offset.crossAxisShift.direction`: `'forwards'` (default) or `'backwards'`
  *
  * @example
  * ```ts
- * // Below trigger, centered (all defaults)
- * placement={{}}
- * placement={{ axis: 'block', edge: 'end', align: 'center' }}
- *
- * // Below trigger, aligned to the start (left in LTR)
- * placement={{ align: 'start' }}
- *
- * // Above trigger, aligned to the end (right in LTR)
- * placement={{ edge: 'start', align: 'end' }}
- *
- * // Right of trigger, centered
- * placement={{ axis: 'inline' }}
+ * placement={{ align: 'start' }} // Below trigger, aligned to start
+ * placement={{ axis: 'inline' }} // Right of trigger, centered
+ * placement={{ offset: { gap: 4 } }} // Tooltip-like gap
+ * placement={{ offset: { crossAxisShift: { value: 4, direction: 'backwards' } } }}
  * ```
  */
-export type TPlacementOptions = Partial<TPlacement>;
+export { type TPlacementOptions } from '../internal/resolve-placement';
 export type TPopupProps = {
     /**
      * Position of the popup relative to the trigger. Only the Popup compound uses
@@ -176,11 +167,6 @@ type TPopupContentBaseProps = {
      * Test ID applied to the popover content element.
      */
     testId?: string;
-    /**
-     * Gap between the popover and its trigger, in pixels.
-     * Defaults to 8 (design token `space.100`). Tooltip uses 4.
-     */
-    offset?: number;
     /**
      * Forces the JavaScript positioning fallback even when the browser
      * supports CSS Anchor Positioning. Useful for testing fallback
@@ -302,4 +288,3 @@ export type TPopupContentProps = TPopupContentBaseProps & (({
 export type TPopupSurfaceProps = {
     children: ReactNode;
 };
-export {};

package/dist/types-ts4.5/testing/polyfill.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Popover API & HTMLDialogElement polyfills for jsdom.
+ *
+ * jsdom does not implement the Popover API or the HTMLDialogElement methods
+ * (showModal, show, close). This polyfill provides faithful implementations,
+ * including timing semantics validated against Chromium via Playwright.
+ *
+ * Behaviour:
+ *  - beforetoggle: sync, cancelable on show only. toggle: async task, not cancelable.
+ *  - Rapid show/hide coalesces into one toggle event (originalOldState to finalNewState).
+ *  - Dialog: showModal/show fire beforetoggle+toggle. close fires toggle then close event.
+ *  - Popover open state tracked via `data-popover-open` (no `:popover-open` in jsdom).
+ *
+ * Companion `toBeVisible` patch lives at `./to-be-visible`.
+ *
+ * Importing this module has the side-effect of patching the relevant
+ * prototypes. It is safe to import multiple times; each branch is guarded
+ * to avoid overwriting native implementations or re-patching.
+ */
+type TToggleState = 'open' | 'closed';
+/**
+ * e.g. `<div#my-id.class-a.class-b>`
+ */
+declare function describeElement({ element }: {
+    element: Element;
+}): string;
+type TToggleEventInit = {
+    type: string;
+    oldState: TToggleState;
+    newState: TToggleState;
+    cancelable: boolean;
+};
+declare function createToggleEvent({ type, oldState, newState, cancelable }: TToggleEventInit): Event;
+declare function fireToggleEvent({ element, type, oldState, newState, cancelable, }: {
+    element: Element;
+} & TToggleEventInit): boolean;
+declare function oppositeState({ state }: {
+    state: TToggleState;
+}): TToggleState;
+declare function createToggleScheduler(): (args: {
+    element: Element;
+    newState: TToggleState;
+}) => void;
+declare function createDialogToggleScheduler(): (args: {
+    dialog: HTMLDialogElement;
+    newState: TToggleState;
+    shouldFireCloseEvent: boolean;
+}) => void;

package/dist/types-ts4.5/testing/to-be-visible.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Patches `toBeVisible()` to understand popover and dialog visibility.
+ *
+ * jest-dom's `toBeVisible()` does not know about the Popover API. In real
+ * browsers the UA stylesheet hides `[popover]` with `display: none`, but
+ * jsdom has no such stylesheet — so closed popovers incorrectly appear visible.
+ *
+ * Raw jest-dom results in jsdom:
+ *
+ *   closed popover / child  → true  (WRONG — should be false)
+ *   open popover / child    → true  (correct)
+ *   closed dialog / child   → false (correct — jsdom natively hides <dialog>)
+ *   open dialog / child     → true  (correct)
+ *
+ * We correct both false positives and false negatives:
+ *   1. Delegate to the original first.
+ *   2. If it says "visible" → check for closed top-layer hosts (false positive).
+ *   3. If it says "not visible" → check for open top-layer hosts (false negative).
+ *
+ * Must load via `setupFilesAfterEnv` (after jest-dom registers its matchers).
+ * Polyfills live in `./polyfill` (loaded via `setupFiles`).
+ */
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.1.5",
+	"version": "0.3.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",
@@ -52,13 +52,14 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/lozenge": "^13.6.0",
+		"@atlaskit/lozenge": "^13.8.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/testing-library": "^0.5.0",
+		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",
 		"@types/raf-schd": "^4.0.1",
 		"tiny-invariant": "^1.2.0"

package/testing/polyfill/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/top-layer/testing/polyfill",
+  "main": "../../dist/cjs/testing/polyfill.js",
+  "module": "../../dist/esm/testing/polyfill.js",
+  "module:es2019": "../../dist/es2019/testing/polyfill.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../../dist/types/testing/polyfill.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/testing/polyfill.d.ts"
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/top-layer/testing/to-be-visible",
+  "main": "../../dist/cjs/testing/to-be-visible.js",
+  "module": "../../dist/esm/testing/to-be-visible.js",
+  "module:es2019": "../../dist/es2019/testing/to-be-visible.js",
+  "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"
+      ]
+    }
+  }
+}