Spotlight

d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

f6328151ae86c, (opens new window) - Apply Volt entry-point and multi-export standards via volt-migrate-package. This is a major change to @atlaskit/spotlight: the package exports map has been restructured so every public subpath now resolves directly to its ./src/* implementation instead of going through an intermediate ./src/entry-points/* re-export. No public subpaths were removed.

Because each subpath now points straight at its implementation module, a subpath and the package root can resolve to the same module instance. Consumers that deep-import the internal entry-points/* files, or that jest.mock() a specific subpath, may observe changed resolution/behaviour and need updating.

Importing the published subpaths continues to work as before:

If you were reaching into the internal entry-point modules, switch to the public subpath:

Because each subpath now exposes its whole implementation module, some subpaths expose additional symbols that the old shims filtered out — for example SpotlightContext from ./spotlight-context-provider, and PositionArea from ./types.

f2ec2ee8b495e, (opens new window) - ## Breaking change: barrel file (root entry point) removed from @atlaskit/spotlight

The main entry point (@atlaskit/spotlight) has been removed. Every named export now lives in its own dedicated sub-path entry-point to reduce bundle size, improve build times, and minimise the package's overall footprint.

Large barrel files (a single index that re-exports everything) force bundlers to load the entire package even when only a small subset is used. By splitting exports into individual entry-points, consumers can import only what they need, leading to:

• Faster build and typecheck times
• Smaller production bundles
• Clearer dependency boundaries

Previously you could import anything from the root:

The root entry point no longer exists — every export must now be imported from its own entry-point:

A codemod ships with this package to automatically update your imports. Run it with @atlaskit/codemod-cli, passing the version you are upgrading from:

For example, to migrate all files in your src/ directory:

The codemod will:

• Split every @atlaskit/spotlight import out to its appropriate entry-point
• Preserve type-only imports (import type) and per-specifier type modifiers
• Preserve import aliases (e.g. import { SpotlightCard as Card })
• Group multiple imports that share the same entry-point into a single declaration

cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

Types are now exclusively via the "types": "dist/types/index.d.ts" property.

7250582895c0b, (opens new window) - Top-layer adoption work behind the platform-dst-top-layer feature flag. Public adopter APIs are intentionally kept narrow while the top-layer API surface settles, with one exception called out below.

Highlights:

• Pass the full [along, away] legacy popper offset through to the new top-layer placement.offset API (via fromLegacyPlacement). Previously only the away axis was forwarded, which dropped the along offset for consumers of Popup, PopupSelect, Spotlight, and Tooltip when platform-dst-top-layer is enabled.
• Fix broken import of dialogHeight and dialogWidth from the removed utils module in @atlaskit/modal-dialog.

Public API:

• @atlaskit/tooltip (minor): add an optional testId?: string field to TriggerProps. This is additive (no existing prop changes shape). Required because @atlaskit/button/new (and other Pressable-backed primitives) overwrite data-testid from spread, so the legacy (triggerProps as any)['data-testid'] workaround is silently absorbed by those consumers. A typed testId field flows through their own testId destructure instead, restoring data-testid propagation onto the rendered trigger element.
• @atlaskit/popup, @atlaskit/dropdown-menu (patch): no public type changes. Wider aria-haspopup unions that the FF-on path produces are bridged at the package boundary into @atlaskit/top-layer with localised FUDGE(top-layer-api) casts, documented in packages/design-system/top-layer/notes/decisions/migration-roadmap.md ("Open API decisions deferred to a follow-up PR"). They will be widened in a follow-up minor PR once the top-layer API is committed.
• @atlaskit/modal-dialog, @atlaskit/select, @atlaskit/spotlight (patch/minor): no public type changes; bug fixes only.

Merge-readiness fixes (FF-on test wiring + adopter behavior):

• @atlaskit/popup (minor): wire the compositional PopupContent to delegate to PopupContentTopLayer when platform-dst-top-layer is enabled. Previously only the legacy Popup component had the FF branch, leaving consumers of the compositional API on the legacy popper path.
• @atlaskit/select (minor): add an onClick handler to the PopupSelect top-layer trigger so clicks open/close the menu (mirrors the legacy global click handler in popup-select.tsx). Add explicit Escape handling on the menu's onKeyDown so the menu closes and focus returns to the trigger.
• @atlaskit/top-layer (patch): the <dialog> rendered by the Dialog primitive now sets aria-modal="true" explicitly. Modern browsers infer modal semantics from .showModal() but some assistive tech still keys off the explicit attribute.
• @atlaskit/top-layer (patch): guard use-anchor-positioning against environments where ResizeObserver is not defined (e.g. jest's node environment, used by the post-office test suite). The observer is used to wait for the popover's first valid layout before measuring; consumers in non-DOM jest environments now get a no-op observer and the scroll/resize listeners still apply if the host environment polyfills showPopover. Real browsers always have ResizeObserver.
• @atlaskit/modal-dialog (patch): on the FF-on path, drop the tabIndex={-1} (and unused :focus-visible outline) from the modal content wrapper. The native <dialog>.showModal() focus-delegate algorithm picks the first focusable descendant (including tabindex=-1), and the wrapper was hijacking initial focus from the close button. Also honor shouldReturnFocus={ref} on the FF-on path (an unmount-cleanup focuses the ref after dialog.close() so it overrides the browser's automatic return-to-trigger). Boolean shouldReturnFocus={false} is not yet honored on the FF-on path — see top-layer/notes/merge-blockers.md.
• @atlaskit/datetime-picker (patch): on the FF-on path, set mode="manual" on the Popup.Content rendered by both internal/menu-top-layer.tsx (date-picker calendar) and internal/fixed-layer-menu-top-layer.tsx (time-picker menu). With the default mode="auto", the same click event that opens the menu (which targets the react-select combobox input — outside the popover element) bubbles to the browser's native popover light-dismiss handler and immediately closes the menu. react-select / DateTimePicker already own outside-click and Esc dismissal via their own state, so opting out of the native auto-dismiss is the correct integration. Also extend the existing Esc → trigger-focus restoration in components/date-picker.tsx to the FF-on path (manual mode disables the browser's built-in focus return, and the legacy code path was already handling this for itself behind an FF negation).
• @atlaskit/popup (no public API change): no source changes — only FF-on Playwright spec/example fixes drove the suite from 21/3/2 to 27/0/0. Notable: the two test.fixme'd nested-popover cases were not browser limitations; popover="auto" chains correctly via DOM ancestry (the original fixmes had the wrong testId selector). Added testId props to two examples (16-popup-with-a11y-props, 18-should-fit-container) so default-shape tests can reach the trigger.
• Test alignment for FF-on Playwright suites across popup, select, datetime-picker, inline-dialog, inline-message, and modal-dialog: selector updates to match the new top-layer testId convention (${testId}--content, [role="dialog"][aria-label="calendar"]), per-spec skipAxeCheck() for example-level color-contrast violations unrelated to the migration, and focus assertions adjusted to match native <dialog> / Popup.Content auto-focus semantics (focus lands on the first focusable child, not the dialog container itself).
• @atlassian/capacity-planning-capacity-graph, @atlaskit/color-picker, @atlassian/timeline-table, @atlassian/global-side-navigation (patch): scope fg mocks in unit tests so platform-dst-top-layer returns false. JSDOM does not implement the native Popover API (showPopover/hidePopover/toggle events), so leaving the gate ON in unit tests caused popover content to remain in the DOM after close and broke close-behaviour assertions. Browser coverage for the FF-on path is provided by the Playwright suites listed above.
• @atlaskit/dropdown-menu (no public API change): test/example-only fixes for the FF-on Playwright suite. Added role="menuitem" to the nested-trigger ButtonItem in examples/93-testing-nested-keyboard-navigation-top-layer.tsx to satisfy axe's aria-required-children rule on the parent menu. Added a test.beforeEach(skipAxeCheck) to dropdown-menu.spec.tsx (FF-on suite) for example-level color-contrast violations on the pre-existing color.text.selected/color.background.selected token pair (3.91:1). Replaced a deadlocking await expect(moveItem).not.toBeFocused() pre-open assertion (Playwright's auto-wait blocks 5s on the absent element) with await expect(moveItem).not.toBeVisible(). Suite result: 22/22 passing.

Updated dependencies

2bed6255731de, (opens new window) - Top-layer adoption work behind the platform-dst-top-layer feature flag. Public adopter APIs are intentionally kept narrow while the top-layer API surface settles, with one exception called out below.

Highlights:

• Pass the full [along, away] legacy popper offset through to the new top-layer placement.offset API (via fromLegacyPlacement). Previously only the away axis was forwarded, which dropped the along offset for consumers of Popup, PopupSelect, Spotlight, and Tooltip when platform-dst-top-layer is enabled.
• Fix broken import of dialogHeight and dialogWidth from the removed utils module in @atlaskit/modal-dialog.

Public API:

• @atlaskit/tooltip (minor): add an optional testId?: string field to TriggerProps. This is additive (no existing prop changes shape). Required because @atlaskit/button/new (and other Pressable-backed primitives) overwrite data-testid from spread, so the legacy (triggerProps as any)['data-testid'] workaround is silently absorbed by those consumers. A typed testId field flows through their own testId destructure instead, restoring data-testid propagation onto the rendered trigger element.
• @atlaskit/popup, @atlaskit/dropdown-menu (patch): no public type changes. Wider aria-haspopup unions that the FF-on path produces are bridged at the package boundary into @atlaskit/top-layer with localised FUDGE(top-layer-api) casts, documented in packages/design-system/top-layer/notes/decisions/migration-roadmap.md ("Open API decisions deferred to a follow-up PR"). They will be widened in a follow-up minor PR once the top-layer API is committed.
• @atlaskit/modal-dialog, @atlaskit/select, @atlaskit/spotlight (patch/minor): no public type changes; bug fixes only.

Merge-readiness fixes (FF-on test wiring + adopter behavior):

• @atlaskit/popup (minor): wire the compositional PopupContent to delegate to PopupContentTopLayer when platform-dst-top-layer is enabled. Previously only the legacy Popup component had the FF branch, leaving consumers of the compositional API on the legacy popper path.
• @atlaskit/select (minor): add an onClick handler to the PopupSelect top-layer trigger so clicks open/close the menu (mirrors the legacy global click handler in popup-select.tsx). Add explicit Escape handling on the menu's onKeyDown so the menu closes and focus returns to the trigger.
• @atlaskit/top-layer (patch): the <dialog> rendered by the Dialog primitive now sets aria-modal="true" explicitly. Modern browsers infer modal semantics from .showModal() but some assistive tech still keys off the explicit attribute.
• @atlaskit/top-layer (patch): guard use-anchor-positioning against environments where ResizeObserver is not defined (e.g. jest's node environment, used by the post-office test suite). The observer is used to wait for the popover's first valid layout before measuring; consumers in non-DOM jest environments now get a no-op observer and the scroll/resize listeners still apply if the host environment polyfills showPopover. Real browsers always have ResizeObserver.
• @atlaskit/modal-dialog (patch): on the FF-on path, drop the tabIndex={-1} (and unused :focus-visible outline) from the modal content wrapper. The native <dialog>.showModal() focus-delegate algorithm picks the first focusable descendant (including tabindex=-1), and the wrapper was hijacking initial focus from the close button. Also honor shouldReturnFocus={ref} on the FF-on path (an unmount-cleanup focuses the ref after dialog.close() so it overrides the browser's automatic return-to-trigger). Boolean shouldReturnFocus={false} is not yet honored on the FF-on path — see top-layer/notes/merge-blockers.md.
• @atlaskit/datetime-picker (patch): on the FF-on path, set mode="manual" on the Popup.Content rendered by both internal/menu-top-layer.tsx (date-picker calendar) and internal/fixed-layer-menu-top-layer.tsx (time-picker menu). With the default mode="auto", the same click event that opens the menu (which targets the react-select combobox input — outside the popover element) bubbles to the browser's native popover light-dismiss handler and immediately closes the menu. react-select / DateTimePicker already own outside-click and Esc dismissal via their own state, so opting out of the native auto-dismiss is the correct integration. Also extend the existing Esc → trigger-focus restoration in components/date-picker.tsx to the FF-on path (manual mode disables the browser's built-in focus return, and the legacy code path was already handling this for itself behind an FF negation).
• @atlaskit/popup (no public API change): no source changes — only FF-on Playwright spec/example fixes drove the suite from 21/3/2 to 27/0/0. Notable: the two test.fixme'd nested-popover cases were not browser limitations; popover="auto" chains correctly via DOM ancestry (the original fixmes had the wrong testId selector). Added testId props to two examples (16-popup-with-a11y-props, 18-should-fit-container) so default-shape tests can reach the trigger.
• Test alignment for FF-on Playwright suites across popup, select, datetime-picker, inline-dialog, inline-message, and modal-dialog: selector updates to match the new top-layer testId convention (${testId}--content, [role="dialog"][aria-label="calendar"]), per-spec skipAxeCheck() for example-level color-contrast violations unrelated to the migration, and focus assertions adjusted to match native <dialog> / Popup.Content auto-focus semantics (focus lands on the first focusable child, not the dialog container itself).
• @atlassian/capacity-planning-capacity-graph, @atlaskit/color-picker, @atlassian/timeline-table, @atlassian/global-side-navigation (patch): scope fg mocks in unit tests so platform-dst-top-layer returns false. JSDOM does not implement the native Popover API (showPopover/hidePopover/toggle events), so leaving the gate ON in unit tests caused popover content to remain in the DOM after close and broke close-behaviour assertions. Browser coverage for the FF-on path is provided by the Playwright suites listed above.
• @atlaskit/dropdown-menu (no public API change): test/example-only fixes for the FF-on Playwright suite. Added role="menuitem" to the nested-trigger ButtonItem in examples/93-testing-nested-keyboard-navigation-top-layer.tsx to satisfy axe's aria-required-children rule on the parent menu. Added a test.beforeEach(skipAxeCheck) to dropdown-menu.spec.tsx (FF-on suite) for example-level color-contrast violations on the pre-existing color.text.selected/color.background.selected token pair (3.91:1). Replaced a deadlocking await expect(moveItem).not.toBeFocused() pre-open assertion (Playwright's auto-wait blocks 5s on the absent element) with await expect(moveItem).not.toBeVisible(). Suite result: 22/22 passing.

Updated dependencies

063f646d9daec, (opens new window) - Added usePreloadMedia hook to preload video and image assets before they are rendered in the DOM.

This hook is useful in the context of @atlaskit/spotlight where by default media will only load when PopoverContent.isVisible is set to true. usePreloadMedia preloads the assets for better performance and user experience. The hook accepts a source URL and a MIME type, creates a temporary media element to trigger browser caching, and the cached asset will be used when the actual media element is rendered.

Supported MIME types:

• Videos: video/mp4, video/webm, video/ogg, video/mpeg, video/x-matroska
• Images: image/jpeg, image/png, image/gif, image/webp, image/svg+xml

Example usage: usePreloadMedia(videoSrc, { mimetype: 'video/mp4' });

• Add aria-label='Dismiss' to SpotlightDismissControl.
• Add aria-label' prop to SpotlightPrimaryAction.
• Add aria-label' prop to SpotlightSecondaryAction.

• Apply color: var(--ds-color-text-inverse) to SpotlightCard so consumers get inverse color styles without needing to use Text.
• Remove SpotlightShowMoreControl references in examples and documentation. Functionality remains unchanged.