Select

ef98af289c49b, (opens new window) - Add motion to Tag, AvatarTag, TagDropdownTrigger, Tag Group, Select, React Select, and User Picker tag values. Tags use motion.label.enter and motion.label.exit for entry and exit, while interactive tags and dropdown triggers use the button hover and pressed motion tokens; Tag Dropdown Trigger also fades between its content and loading spinner. The remove control is removed when exit begins so it cannot linger while the tag collapses.

Motion is gated by platform-dst-motion-uplift-labels. Compatibility and adoption paths for the visually uplifted Tag, Tag Group, Select, React Select, and User Picker additionally remain behind platform-dst-lozenge-tag-badge-visual-uplifts.

@atlaskit/react-select also adds an optional onMotionFinish callback to the exported MultiValueProps interface so the Select can restore its placeholder after the final multi-value exit completes.

a7e63cfd84876, (opens new window) - [ux] When platform-dst-top-layer is enabled, Select menus now use the native Popover API to handle Escape and light-dismiss before synchronizing menuIsOpen through onMenuClose. This ensures Escape dismisses a nested Select menu without also dismissing its containing popup.

Existing public props keep their behavior. The top-layer Popover implementation gains an internal source prop for imperative native popover invokers. The public runtime differences behind the feature gate are:

• Select no longer calls preventDefault() or stopPropagation() for Escape on the top-layer path, whether its menu is open or closed. Successive Escape presses can therefore dismiss the Select menu and then its containing native popover.
• onMenuClose is called from the native popover close lifecycle rather than synchronously during Select's Escape keydown handler.
• shouldPreventEscapePropagation no longer stops Escape propagation while a top-layer menu is open; its legacy-path behavior is unchanged.
• Top-layer Escape invokes onInputChange with the menu-close action once, after native dismissal, instead of the legacy path's two calls.
• Controlled Selects must continue updating menuIsOpen to false in response to onMenuClose.
• PopupSelect delegates Escape dismissal and focus restoration to its native popover. A consumer onKeyDown handler can therefore prevent the native dismissal with preventDefault(); previously, PopupSelect closed before forwarding the event.
• DatePicker's top-layer calendar now uses the Select menu portal's native popover instead of creating a nested manual popover.
• The internal Popover forwarding API accepts a native source element so imperative Select popovers retain their trigger relationship for light-dismiss behavior.

Updated dependencies

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.

9356675edac18, (opens new window) - Replace generated ./src/* subpath export keys with lint-safe equivalents. The de-barreling migration produced export keys containing a src segment (e.g. @atlaskit/select "./src/select"), which are forbidden by no-restricted-imports (@atlaskit/*/src/*) in downstream products.

Renamed keys:

• @atlaskit/select: ./src/select → ./default
• @atlaskit/icon: ./src/constants → ./constants/default
• @atlaskit/react-select: ./src/async → ./async/default, ./src/creatable → ./creatable/default
• @atlaskit/heading: ./src/heading-context → ./heading-context/default
• @atlaskit/flag: removed the redundant ./src/flag-group key (duplicate of the existing ./flag-group export)

The underlying source targets are unchanged.

Updated dependencies

6902b31db1608, (opens new window) - Consolidate direct Popper.js callers behind @atlaskit/popper compatibility entry points and feature-gated consumer adapters.

@atlaskit/popper now exposes compatibility entry points so existing direct popper.js / react-popper callers can move their dependency ownership onto @atlaskit/popper without a full rewrite:

• @atlaskit/popper/react-popper re-exports the React usePopper hook and Manager / Popper / Reference render-prop components.
• @atlaskit/popper/unsafe-imperative re-exports the raw Popper.js v2 createPopper for non-React, imperative callers. This is an escape hatch for existing callers only. Do not use it for new code; build new overlays on @atlaskit/top-layer instead.

Updated dependencies

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.

ee28cf33718b0, (opens new window) - Add @atlaskit/react-compiler-gating as a runtime dependency to enable React Compiler platform gating.

9a892d8dc000e, (opens new window) - Clean up feature gate platform_navx_sllv_dropdown_escape_and_focus_fix.

Popup select dropdowns now consistently stop Escape keydown propagation when configured to do so, keeping parent dialogs open while closing the dropdown and preserving focus on the trigger.

Updated dependencies

642a4ddbce9f4, (opens new window) - [ux] The Select menu is being migrated to the browser top layer. The new behaviour is gated behind the platform-dst-top-layer feature flag and ships dark; there are no public API changes for @atlaskit/react-select or @atlaskit/select.

Internal-only improvements to support consumer migrations:

• Polyfilled the :popover-open CSS pseudo-class in the jsdom test polyfill so consumers can assert on popover open state in unit tests without a browser.
• Removed a defensive try/catch around element.matches() in Popover that was only needed to work around the missing pseudo-class.
• Clarified, via an inline comment in use-initial-focus, why the combobox carve-out is kept role-specific (menu / listbox) rather than hoisted above all role checks.
• Fixed a unit test for PopupSelect top-layer trigger click that incorrectly called failGate in afterEach, which conflicted with the auto-reset behaviour of @atlassian/feature-flags-test-utils/mock-gates and caused the suite to fail.

No public API or runtime behaviour changes for existing consumers.

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.

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.

#155023, (opens new window) 7a305b4f49968, (opens new window) - [ux] Migrated underlying react-select implementation from @emotion/react to @compiled/react to improve performance, align with the rest of the Atlaskit tech stack, and support React 18 Streaming SSR. Style customization should now be applied via the components prop with the new xcss prop, which allows for safe and bounded style overrides. The styles prop is still supported for most inline styles, but pseudo-classes and advanced selectors are no longer supported and will be ignored.

If you use the styles prop with selectors like :hover, :focus, :active, :disabled, :before, :after, attribute selectors, combinators, at-rules, or similar, you must migrate to the new components API and use the xcss prop. See the examples, (opens new window) for details.

This is a breaking change for any consumers relying on advanced selectors in the styles prop.

• No longer closing the popup when the internal select menu's onMenuClose is called.
• It now registers with the experimental open layer observer, allowing it to close when the observer gives the close signal (e.g. when resizing a page layout slot).

#135853, (opens new window) 63233b4c0a6a7, (opens new window) - PopupSelect will now close when the internal select menu's onMenuClose is called.

This is used to close any open select menus when page layout slots are resized.

This change is behind a feature flag.

#110498, (opens new window) 53ad7ff63b09a, (opens new window) - Migrated from @emotion/react to @compiled/react in order to improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to use this version of @atlaskit/select, you will need to ensure that your bundler is configured to handle .css imports correctly.

Most bundlers come with built-in support for .css imports, so you may not need to do anything. If you are using a different bundler, please refer to the documentation for that bundler to understand how to handle .css imports. For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS, (opens new window).

#117363, (opens new window) 10a0f7f6c2027, (opens new window) - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026, (opens new window)

#173737, (opens new window) 667640085e5c7, (opens new window) - Update the font size for the textarea and select components at the xs breakpoint. The font size will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is focused. Styles for larger breakpoints will remain unchanged.

Apply a fix to the textfield component to ensure monospace is correctly applied to the input at the media.above.xs breakpoint.

These changes are currently behind a feature gate and will be evaluated for effectiveness. If successful, they will be included in a future release.

#127511, (opens new window) db30e29344013, (opens new window) - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

This change has been done to enable usage of react@18.3 as well as to have a consistent peer dependency range for react and react-dom for /platform packages.

• function is conditionally invoked only for grouped select options to enable group label announcement with it's group options;

• Add SelectInstance for export
• Revert the onOpen and onClose logic in PopupSelect

#26712, (opens new window) 95b3630e9b5, (opens new window) - Update @atlaskit/select to use react-select v5, and update types

Use forwardRef for all wrapped components - this means that if you were accessing anything on the Select instance using a ref, the ref will now reference the internal Select directly (see below for how to upgrade)

Replace HOCs with hooks - if you were using our HOCs to create custom Selects (i.e., makeCreatableSelect, manageState, makeAsyncSelect) these have now been replaced by hooks (i.e., useCreatable, useStateManager, useAsync)

Remove imports of @types/react-select - no longer required as react-select v5 now uses Typescript,

_ Example _

@atlaskit/select v15 and earlier:

@atlaskit/select v16:

Remove dependency on AutosizeInput - our new solution uses CSS grid which IE11 does not fully support; also .prefix__input now targets the input and NOT the container

IndicatorProps is deprecated and replaced with ClearIndicatorProps, DropdownIndicatorProps, LoadingIndicatorProps. Examples can be viewed in the constellation docs

onInputChange now requires a 2nd argument of type InputActionMeta

NoticeProps should be used as the prop to customize LoadingMessage and NoOptionsMessage components

b8430db3873, (opens new window) - "select package now uses declarative entry points. atlaskit/select now exports all necessary types. Consumers should now import directly from atlaskit/select, not from eg atlaskit/select/types"

c55a340ea4c, (opens new window) - Consumers using Popup Select custom modifiers will now have typescript errors. This is how to fix them.

Custom popper.js modifiers passed into Popup Select are now strictly typed, providing additional type safety and IDE code-completion.

To support this, a third generic for <PopupSelect/> has been added. This generic takes a union of the names of each modifier you include in popperProps.

If you currently set custom modifiers like this:

In order to avoid type errors in the new release, you will need to add a generic to PopupSelect specifying the modifiers you are providing:

In addition, the ModifierList type is now exported. ModifierList is a union type containing the names of the default modifiers passed into PopupSelect. If you need to use them as well:

#24004, (opens new window) 0fbb2840aba, (opens new window) - Add isInvalid prop to @atlastkit/Select. The prop indicates whether if the component is in the error state. If true, it visually shows a red border around the input.

This replaces validationState to make Select more consistent like other components that uses isInvalid prop.

8cf1c311f38, (opens new window) - Add additional type check for the modifier generic in PopupSelect.

41ce212cfe2, (opens new window) - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

#23381, (opens new window) c17c6943be2, (opens new window) - Updated appearance of multi-select tags; when delete button is hovered, the appearance now matches @atlaskit/tag. The change is only visible with design token CSS enabled (in light or dark mode)