Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/select

atlassian135.7kApache-2.018.9.3TypeScript support: included

Select allows users to make a single selection or multiple selections from a list of options.

readme

Select

Select gives users the ability to make a single selection, or multiple selections from a number of options.

Installation

yarn add @atlaskit/select

Usage

Detailed docs and example usage can be found here.

changelog

@atlaskit/select

18.9.3

Patch Changes

18.9.2

Patch Changes

18.9.1

Patch Changes

  • Updated dependencies

18.9.0

Minor Changes

Patch Changes

  • Updated dependencies

18.8.2

Patch Changes

18.8.1

Patch Changes

  • #174836 8d2c4dcde79da - Update use of deprecated aria-label to proper label in PopupSelect
  • Updated dependencies

18.8.0

Minor Changes

  • #173737 667640085e5c7 - 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.

Patch Changes

  • Updated dependencies

18.7.1

Patch Changes

  • #172260 9934fe89f1e6a - Improving assisstive technology support by adding better semantics and reducing live region usage

18.7.0

Minor Changes

Patch Changes

  • Updated dependencies

18.6.1

Patch Changes

18.6.0

Minor Changes

  • #167480 e78013c5d716b - Update checkbox and radio select to match new icon styles behind feature flag.

Patch Changes

  • Updated dependencies

18.5.3

Patch Changes

18.5.2

Patch Changes

  • #165531 57f451bda8919 - Adds side-effect config to support Compiled css extraction in third-party apps

18.5.1

Patch Changes

  • #165031 380a955e9f249 - Internal change only -- remove usages of react-node-resolver as it is incompatible with React 18.

18.5.0

Minor Changes

Patch Changes

  • Updated dependencies

18.4.3

Patch Changes

  • #158691 453919c3f78d3 - Pass isInvalid to internal react-select from select prop to support aria-invalid on input

18.4.2

Patch Changes

  • Updated dependencies

18.4.1

Patch Changes

18.4.0

Minor Changes

Patch Changes

  • Updated dependencies

18.3.0

Minor Changes

Patch Changes

  • Updated dependencies

18.2.0

Minor Changes

18.1.3

Patch Changes

  • Updated dependencies

18.1.2

Patch Changes

  • #153221 e362b41d4b35f - This version removes tab-event-should-close-popupSelect feature flag. Tab and Shift+Tab now dismisses the list of opened popup select options and allows users to navigate to next or previous elements accordingly.

18.1.1

Patch Changes

  • #150983 a06534942509c - Remove react-uid and use an ID generator that is compatible with React16 and React 18; Strict React 18 behind a flag.
  • Updated dependencies

18.1.0

Minor Changes

  • #150241 73de70dc13e2e - Updated group heading styles introduced in v17.19.0 are now default and no longer behind a feature flag.

18.0.0

Major Changes

  • #143559 56dfbfe361f96 - Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select

Patch Changes

  • #143559 56dfbfe361f96 - Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select

17.19.3

Patch Changes

17.19.2

Patch Changes

17.19.1

Patch Changes

  • Updated dependencies

17.19.0

Minor Changes

  • #140648 0fee45dd431ca - Updated group heading styles to align to new modernised typography styles. Headings are no longer all uppercase and are now bold. This change is behind a feature flag.

17.18.0

Minor Changes

17.17.0

Minor Changes

  • #139873 141a2cdfda71c - Fix select and radio icons when icon facade feature flag is enabled by opting out of new icons.

Patch Changes

  • Updated dependencies

17.16.0

Minor Changes

17.15.2

Patch Changes

  • #137619 a91489985e535 - [ux] Tab and Shift+Tab now dismisses the list of opened popup select options and allows users to navigate to next or previous elements accordingly.

17.15.1

Patch Changes

  • #131911 2f9601a8a634b - This version removes platform.design-system-team.use-default-select-in-popup-select_46rmj feature flag. The PopupSelect component now uses the internal Select component ensure the accessibility of options with group labels for assistive technologies.

17.15.0

Minor Changes

  • 0d3bdaf1e3d68 - [ux] Set the color.text.subtle token for 'No options' text to meet a 4.5:1 color contrast.

17.14.0

Minor Changes

17.13.2

Patch Changes

  • #129726 778c15c1d279a - [ux] Removed feature flag platform.design-system-team.select-new-typography_7m89c resulting in minor visual changes to typography.

17.13.1

Patch Changes

  • Updated dependencies

17.13.0

Minor Changes

  • #127511 db30e29344013 - 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.3as well as to have a consistent peer dependency range forreactandreact-domfor/platform` packages.

Patch Changes

  • Updated dependencies

17.12.1

Patch Changes

  • Updated dependencies

17.12.0

Minor Changes

  • 8b8090800a35d - Bump peer dependency for react-dom to include version 17 and 18.

17.11.13

Patch Changes

17.11.12

Patch Changes

  • 941edf62401ae - This version removes platform.design-system-team.use-default-select-in-popup-select_46rmj feature flag. The PopupSelect component now uses the internal Select component ensure the accessibility of options with group labels for assistive technologies.

17.11.11

Patch Changes

  • #125980 d908d9c41ed27 - The parent group label in CountrySelect must be announced with options.
  • Updated dependencies

17.11.10

Patch Changes

  • #123901 19b70fe0c7efc - [ux] Updating multi value labels font size using composite font token. If successful, these changes will be made available in a later release.

17.11.9

Patch Changes

17.11.8

Patch Changes

17.11.7

Patch Changes

17.11.6

Patch Changes

17.11.5

Patch Changes

  • Updated dependencies

17.11.4

Patch Changes

  • Updated dependencies

17.11.3

Patch Changes

  • Updated dependencies

17.11.2

Patch Changes

  • #114458 854b5695ee062 - Making updates to feature flagged font size changes. If successful, these changes will be made available in a later release.

17.11.1

Patch Changes

  • Updated dependencies

17.11.0

Minor Changes

  • #110836 a8bd419fd70b9 - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

Patch Changes

  • Updated dependencies

17.10.4

Patch Changes

17.10.3

Patch Changes

  • Updated dependencies

17.10.2

Patch Changes

  • #101221 9e50bb672a7f - Add the aria-describedby to Select component if we do not have options.

17.10.1

Patch Changes

  • #105349 1d0720a5e5f9 - We are testing typography changes in group headings behind a feature flag. If this change is successful it will be available in a later release.

17.10.0

Minor Changes

17.9.0

Minor Changes

Patch Changes

  • Updated dependencies

17.8.0

Minor Changes

  • #94675 5d9e1dccacca - [ux] Update input border color token to meet 3:1 color contrast ratioLight theme: color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496

Patch Changes

  • Updated dependencies

17.7.1

Patch Changes

17.7.0

Minor Changes

  • #85404 54d6e7a58943 - use @atlaskit/select component in PopupSelect. This allows PopupSelect to receive all the improvements from @atlaskit/select.

17.6.1

Patch Changes

17.6.0

Minor Changes

  • #88021 2cf5300457e7 - Convert AtlaskitSelect from react class component to function component

Patch Changes

  • #73901 2aefab5730ab - ECA11Y-207 Added Tab navigation for video panel controls and handling key press on them

17.5.0

Minor Changes

  • #87916 373dc429147d - Reverted "Convert AtlaskitSelect from react class component to function component"

17.4.0

Minor Changes

  • #86848 fa9de32b502e - Convert AtlaskitSelect from react class component to function component

17.3.4

Patch Changes

  • #83706 2c6f01982c94 - Fixed aria-describedby attribute being incorrect when components prop is passed

17.3.3

Patch Changes

  • #83130 4efd62cdc533 - SHPLVIII-481: Assign name to default export components to fix quick-fix imports

17.3.2

Patch Changes

17.3.1

Patch Changes

17.3.0

Minor Changes

  • #80805 427c2dd9e0d6 - [ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrast

Patch Changes

  • Updated dependencies

17.2.0

Minor Changes

  • #78814 bfe34a286ad8 - DSP-17230 Update RadioOption to accept generic type arg for OptionType

17.1.3

Patch Changes

  • #75946 cc843d47d71e - Reverted the feature flag which reduced re-renders in <PopupSelect> as it had other unintended side-effects.

17.1.2

Patch Changes

17.1.1

Patch Changes

17.1.0

Minor Changes

  • #72872 26b963783de7 - DSP-16671 Update CheckboxSelect to accept generic type arg for OptionType

17.0.5

Patch Changes

  • #69863 6c9b587369cf - Support to add additional aria-describedby on select when isSearchable is false

17.0.4

Patch Changes

17.0.3

Patch Changes

  • #59147 f12e489f23b0 - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).

17.0.2

Patch Changes

17.0.1

Patch Changes

  • Updated dependencies

17.0.0

Major Changes

  • #41866 ed8b6957789 - Removes any usage of deprecated legacy theming APIs. These have been superseeded by design tokens.

Patch Changes

  • Updated dependencies

16.7.6

Patch Changes

16.7.5

Patch Changes

16.7.4

Patch Changes

16.7.3

Patch Changes

16.7.2

Patch Changes

16.7.1

Patch Changes

16.7.0

Minor Changes

  • #40209 31496cc7c8a - [ux] Adds accessible name to the search input for popup select components via new label prop or placeholder prop if label is not provided.

16.6.0

Minor Changes

  • #40039 f03e630c03e - [ux] Adds keydown handler to target spread props for better accessibility for keyboard users.

16.5.14

Patch Changes

  • #40096 aee1bdd977d - Update select checkbox and radio icon to have 1px border under FF

16.5.13

Patch Changes

  • #39015 a22d71ff733 - [ux] Select component now respects explicitly passed value set to aria-describedby attribute.

16.5.12

Patch Changes

  • #38708 872a49e0bd8 - Fixed color contrast for grouped text label in the Select component

16.5.11

Patch Changes

16.5.10

Patch Changes

16.5.9

Patch Changes

  • #38520 2c77d477cbb - Ensures static linting occurs in the techstack, fixes one example's eslint error.

16.5.8

Patch Changes

  • #38518 5c22f7ade33 - Convert CSS tagged templates to explicit function calls with objects.

16.5.7

Patch Changes

16.5.6

Patch Changes

  • #35441 599bfe90ee3 - Internal change to use shape tokens. There is no expected visual change.

16.5.5

Patch Changes

  • #35267 96ac277d0d7 - [ux] - created custom onFocus function, which overwrites built in onFocus method for ariaLiveMessages;

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

16.5.4

Patch Changes

16.5.3

Patch Changes

  • #34881 774ed69ecef - Internal changes to use space tokens for spacing values. There is no visual change.

16.5.2

Patch Changes

16.5.1

Patch Changes

  • #33652 e7ea6832ad2 - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.

16.5.0

Minor Changes

  • #34303 3c38b01cfd9 - Added screen reader text to announce multi selects support multiple options. This will be announced prior to any placeholder text.

16.4.0

Minor Changes

  • #34251 45bcfb68efb - Testing behind a feature flag: reduce re-renders in <PopupSelect> by using an available renderProps to both disable and block scrolling at the right time as well as avoid rendering the <Select> to a portal not visible to the user.

16.3.1

Patch Changes

  • #34230 1cd0d824b3c - NO-ISSUE Add basic memoization on CheckboxSelect and RadioSelect to avoid unnecessary re-renders with otherwise static references.

16.3.0

Minor Changes

  • #33475 6e51e0d5358 - [ux] update border width from 2px to 1px and add 1px box-shadow when focus or error

16.2.3

Patch Changes

16.2.2

Patch Changes

16.2.1

Patch Changes

16.2.0

Minor Changes

Patch Changes

  • Updated dependencies

16.1.9

Patch Changes

  • #33004 79ddcb13067 - [ux] style(select): update fallback of select placeholder to N200'

16.1.8

Patch Changes

16.1.7

Patch Changes

16.1.6

Patch Changes

  • #31338 74c1b81a476 - Replaces use of gridSize with space tokens. There is no expected visual change.

16.1.5

Patch Changes

16.1.4

Patch Changes

  • Updated dependencies

16.1.3

Patch Changes

  • #27634 22b754d311f - Updates usage of removed design token utilities.UNSAFE_util.transparent in favour of its replacement utilities.UNSAFE.transparent
  • Updated dependencies

16.1.2

Patch Changes

  • #29390 18aeca8c199 - Internal change to update token references. There is no expected behaviour or visual change.

16.1.1

Patch Changes

16.1.0

Minor Changes

Patch Changes

  • c74089f0c6d - Revert the onOpen and onClose logic in PopupSelect

16.0.3

Patch Changes

  • Updated dependencies

16.0.2

Patch Changes

  • Updated dependencies

16.0.1

Patch Changes

  • #27813 e7046ed0fb1 - - Add MultiValueRemoveProps to export
    • Add SelectInstance for export
    • Revert the onOpen and onClose logic in PopupSelect

16.0.0

Major Changes

  • #26712 95b3630e9b5 - 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:

    import { makeAsyncSelect } from '@atlaskit/select';

const AsyncSelect = makeAsyncSelect(ProxyBaseSelect);

return (
  <AsyncSelect ... />
)

    @atlaskit/select v16:

    import Select, { useAsync } from '@atlaskit/select';

const asyncProps = useAsync({
  promiseFn: useCallback(() => loadOptions(inputValue), [inputValue])
});

return (
  <Select
    inputValue={inputValue}
    isLoading={asyncProps.isLoading}
    options={!asyncProps.isLoading ? asyncProps.data : []}
    ...
  />
)

    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 - "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"

Minor Changes

  • c55a340ea4c - 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:

    import {OptionType, PopupSelect} from '@atlaskit/select'

<PopupSelect<OptionType, false>
  popperProps = {modifiers: [
      {name: 'custom-modifier', ...},
      {name: 'custom-modifier-2', ...}
  ]}>
  ...
</>

    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:

    import {OptionType, PopupSelect} from '@atlaskit/select'
type myModifiers = 'custom-modifier' | 'custom-modifier-2'

<PopupSelect<OptionType, false, myModifiers>>

    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:

    import {OptionType, PopupSelect, ModifierList} from '@atlaskit/select'
type myModifiers = ModifierList | 'custom-modifier' | 'custom-modifier-2'

<PopupSelect<OptionType, false, myModifiers>>

Patch Changes

  • Updated dependencies

15.7.7

Patch Changes

  • #27523 8048ae661df - [ux] Fixed bug where consumers extending the styles of PopupSelect would not receive the correct base styles in their custom styles functions.

15.7.6

Patch Changes

  • Updated dependencies

15.7.5

Patch Changes

  • #25860 a0bf7e532ff - Fix validationState taking precedent over isInvalid
  • Updated dependencies

15.7.4

Patch Changes

  • #26303 9827dcb82b8 - No-op change to introduce spacing tokens to design system components.

15.7.3

Patch Changes

  • #25307 5e578b89178 - Fixed an issue in PopupSelect that caused the page to scroll to the top.

15.7.2

Patch Changes

  • #25314 bedbdec0e82 - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.

15.7.1

Patch Changes

15.7.0

Minor Changes

  • #24004 0fbb2840aba - 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 - Add additional type check for the modifier generic in PopupSelect.

  • 41ce212cfe2 - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

Patch Changes

  • 2d61e38e5d3 - [ux] Adds isSearchable option to Popup Select
  • 908a0f65b91 - [ux] Hides clear icon on selections in disabled multi-select
  • de1b2769486 - Update design tokens used for Select's borders, to new border.input tokens
  • Updated dependencies

15.6.2

Patch Changes

15.6.1

Patch Changes

  • #24436 d9f112c7b09 - Reverts change to multiSelect's remove behaviour when using tokens, fixing issue with a pointer-events: none style

15.6.0

Minor Changes

  • #24008 68cc8008851 - [ux] Introduces appearance prop to component, with 'default', 'subtle' and 'none' variants

15.5.0

Minor Changes

  • #23381 c17c6943be2 - 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)

  • 45cae79ec0f - [ux] Internal changes to <CountrySelect /> to no longer override container and menu width. The behaviour is now the same as the default Select component. Visual changes are possible if the <CountrySelect /> is being used in an unconstrained container (it will now expand to fill as is the default).

    Component now also uses the correct types (previously set to any). Props are still passed through so there is no runtime effect, but this may effect compilation for users providing props that are unsupported by the runtime.

  • 6e6ff42cd4c - Replaces focus-trap with react-focus-lock in line with implementation in Jira Frontend.

Patch Changes

  • 1c4840e546a - fix popup select alignment bug
  • dec5021eefd - [ux] Trigger onMenuClose prop when popup select closes.
  • fe575d49d66 - Updated styles to use new input design tokens

15.4.0

Minor Changes

  • #22818 4609a8a733a - Made SelectWithoutAnalytics component and InputActionMeta type available from @atlaskit/select

15.3.2

Patch Changes

  • #22614 8a5bdb3c844 - Upgrading internal dependency (bind-event-listener) for improved internal types

15.3.1

Patch Changes

  • #22029 8f6f225ac11 - Updated prop types for Popup Select
  • e4b612d1c48 - Internal migration to bind-event-listener for safer DOM Event cleanup

15.3.0

Minor Changes

  • #21570 145c9cea461 - [ux] Added 2 new props for controlling the open state of PopupSelect:

    • isOpen controls whether the popup is open (controlled)
    • defaultIsOpen controls whether the popup is initially open on mount (uncontrolled)

Patch Changes

  • db58fa26cbf - [ux] Updated input tokens within @atlaskit/select.
  • 4624991be21 - [ux] Fixes a regression affecting MacOS Safari. The cursor incorrectly displayed as 'text' rather than 'default' when the pointer was over a select option.
  • e7438659c2e - Updated dependency '@types/react-select' to fix type error

15.2.13

Patch Changes

  • Updated dependencies

15.2.12

Patch Changes

15.2.11

Patch Changes

  • Updated dependencies

15.2.10

Patch Changes

  • #19618 62edf20ab1e - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
  • Updated dependencies

15.2.9

Patch Changes

  • Updated dependencies

15.2.8

Patch Changes

  • #16752 b2c25c19e38 - PopupSelect now uses @atlaskit/visually-hidden under the hood.
  • Updated dependencies

15.2.7

Patch Changes

  • 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • 19d72473dfb - Bump react-fast-compare to latest version (3.2.0)
  • Updated dependencies

15.2.6

Patch Changes

  • Updated dependencies

15.2.5

Patch Changes

  • #15998 f460cc7c411 - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
  • Updated dependencies

15.2.4

Patch Changes

  • #14777 401179b652b - PopupSelect now returns focus to the "trigger" element on close.
  • Updated dependencies

15.2.3

Patch Changes

15.2.2

Patch Changes

  • #14319 6fb4421c4c1 - Fixed the validation token for Select in the Dark theme.
  • Updated dependencies

15.2.1

Patch Changes

  • Updated dependencies

15.2.0

Minor Changes

  • #13864 f7cbc6631cf - Instrumented select with the new theming package, @atlaskit/tokens.

    New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).

    These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.

Patch Changes

  • 3fc13e11952 - Fix input text colour when using tokens
  • Updated dependencies

15.1.0

Minor Changes

  • #13477 1dfc276fa55 - Expose InputActionMeta in atlaskit/select. Convert withSmarts from class to function component. Fix analytics.

15.0.2

Patch Changes

  • #12837 ce350569ced - The aria-live prop is now assertive by default to help option selection to stay in sync with screen reader announcements.
  • Updated dependencies

15.0.1

Patch Changes

15.0.0

Major Changes

  • #12328 8c9055949d4 - [ux] Options and Placeholders are now easier to see for users with low vision. We have also improved the experience in Windows High Contrast Mode.

Patch Changes

  • d5a9d28e06a - Removed animated functionality as the exit animation on multi-values isn’t working well in react-select
  • Updated dependencies

14.1.0

Minor Changes

  • #11649 1ffa16e7d54 - [ux] An argument of PopupSelect's target render props was extended with aria-haspopup, aria-expanded, and aria-controls fields . You should pass this fields to custom trigger like ({isOpen, ...triggerProps}) => <button {...triggerProps}>Trigger</button>. Provided aria attributes help users who use assistive technologies understand a component better.

Patch Changes

  • 56dbb93df94 - [ux] Fixed failing color contrast issues for the Checkbox and Radio icons in CheckboxSelect and RadioSelect respectively.

14.0.1

Patch Changes

14.0.0

Major Changes

  • #11113 1f493e1dc65 - Bump react-select to v4. This brings some API changes and it uses emotion v11.

Patch Changes

  • 6ac48c99a54 - The entire content of a selected country, including the abbreviated name and the country code, is announced to a screen reader not just the country name.
  • Updated dependencies

13.3.1

Patch Changes

13.3.0

Minor Changes

  • #8388 0115b3b722b - Update PopupSelect dependency @popperjs/core to ^2.9.1, fixing some positioning bugs, such as in parents with will-change CSS properties set. For more information on the specific changes, see the popper docs.

13.2.0

Minor Changes

Patch Changes

  • 79c23df6340 - Use injected package name and version for analytics instead of version.json.
  • Updated dependencies

13.1.1

Patch Changes

13.1.0

Minor Changes

13.0.6

Patch Changes

  • #5497 5f58283e1f - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started Also add typescript to devDependencies to denote version that the package was built with.

13.0.5

Patch Changes

  • Updated dependencies

13.0.4

Patch Changes

  • #4346 fc8f6e61f3 - Fix codemod utilities being exposed through the codemod cli

13.0.3

Patch Changes

13.0.2

Patch Changes

  • #3885 6c525a8229 - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0

    Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.

13.0.1

Patch Changes

13.0.0

Major Changes

  • #3823 b85482c030 - Upgraded Popper JS to version 2.2.3, which comes with bug fixes, performance improvements and a reduced bundle size when combined with @popperjs/core. As a result, PopupSelect has some changes to the values accepted by the popperProps prop.

    Changes labelled with ⚙️ have codemod support:

    • ⚙️ the positionFixed prop has been replaced with strategy, which takes either "fixed" or "absolute"
    • the modifiers prop has been significantly updated:
      • The format is now an array of objects, each labelled via a name key:value pair. Previously the prop was an object where each property was the modifier name.
      • Prop options are grouped together in an options object
      • default boundary paddings have been removed from preventOverflow and flip; to restore original padding, set padding: 5
      • modifiers that supported a boundariesElement option now have two options in its place:
        • boundary, which takes clippingParents (similar to scrollParent)
        • rootBoundary which takes viewport or document (replacing viewport and windowrespectively)
      • Each modifier has more internal changes not listed here: see the Popper JS docs for more information

    Note: due to a bug in react-popper, a console.error message relating to React act() may be raised on some tests using PopupSelect. It should not cause test failures. This issue has been raised in the React Popper issue tracker

    Running the codemod cli

    To run the codemod: You first need to have the latest version of select installed before you can run the codemod

    yarn upgrade @atlaskit/select@^13.0.0

    Once upgraded, use the Atlaskit codemod-cli;

    npx @atlaskit/codemod-cli --parser [PARSER] --extensions [FILE_EXTENSIONS] [TARGET_PATH]

    Or run npx @atlaskit/codemod-cli -h for more details on usage. For Atlassians, refer to this doc for more details on the codemod CLI.

Patch Changes

  • e99262c6f0 - All form elements now have a default font explicitly set
  • aecfa8c991 - Remove non-standard CSS property -ms-overflow-style. -ms-overflow-style is a Microsoft extension controlling the behavior of scrollbars when the content of an element overflows.

12.0.2

Patch Changes

  • #3293 954cc87b62 - The readme and package information has been updated to point to the new design system website.

12.0.1

Patch Changes

  • #3428 5ccf97c849 - Popup Select click and keydown events would not bubble if parent element stopped propagation. Have changed these events to use capture mode instead.

12.0.0

Major Changes

Patch Changes

  • Updated dependencies

11.0.14

Patch Changes

  • Updated dependencies

11.0.13

Patch Changes

  • #2866 54a9514fcf - Build and supporting files will no longer be published to npm

11.0.12

Patch Changes

  • #2137 6aec273747 - FIX: Dropdown chevron fixed to reflect ADG spec
  • Updated dependencies

11.0.11

Patch Changes

  • Updated dependencies

11.0.10

Patch Changes

11.0.9

Patch Changes

11.0.8

Patch Changes

11.0.7

Patch Changes

11.0.6

Patch Changes

11.0.5

Patch Changes

11.0.4

Patch Changes

11.0.3

Patch Changes

11.0.2

Patch Changes

  • [patch]3a20e9a596:

    Make PopupSelect correctly pass props. Forcing update of @atlaskit/select for all other packages

11.0.1

Patch Changes

  • [patch]b9e23d337a:

    @types/react-select is now explicitly listed as a dependency

11.0.0

Major Changes

  • [major]30acc30979:

    @atlaskit/select has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

10.2.2

Patch Changes

  • [patch]d222c2b987:

    Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.

    Breaking

    ** getTokens props changes ** When defining the value function passed into a ThemeProvider, the getTokens parameter cannot be called without props; if no props are provided an empty object {} must be passed in:

    <CustomTheme.Provider
  value={t => ({ ...t(), backgroundColor: '#333'})}
>

    becomes:

    <CustomTheme.Provider
  value={t => ({ ...t({}), backgroundColor: '#333'})}
>

    ** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:

    import { colors } from '@atlaskit/theme';

colors.colorPalette('8');

    to this:

    import { colorPalette } from '@atlaskit/theme';

colorPalette.colorPalette('8');

    or for multi entry-point users:

    import * as colors from '@atlaskit/theme/colors';

colors.colorPalette('8');

    to this:

    import * as colorPalettes from '@atlaskit/theme/color-palette';

colorPalettes.colorPalette('8');

10.2.1

Patch Changes

  • [patch]542080be8a:

    Bumped react-popper and resolved infinite looping refs issue, and fixed close-on-outside-click for @atlaskit/popup

10.2.0

Minor Changes

  • [minor]17a07074e8:

    Fix padding to be consistent with other Atlaskit form fields. This change includes removing padding from around the icon itself, and adding padding to the icon container, as well as altering the padding around the input container.

10.1.3

Patch Changes

  • [patch]35d2229b2a:

    Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

10.1.2

Patch Changes

  • [patch]a2d0043716:

    Updated version of analytics-next to fix potential incompatibilities with TS 3.6

10.1.1

10.1.0

Minor Changes

10.0.8

Patch Changes

  • [patch]097b696613:

    Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

10.0.7

Patch Changes

10.0.6

Patch Changes

  • [patch]708028db86:

    Change all the imports to theme in Core to use multi entry points

10.0.5

Patch Changes

  • [patch]abee1a5f4f:

    Bumping internal dependency (memoize-one) to latest version (5.1.0). memoize-one@5.1.0 has full typescript support so it is recommended that typescript consumers use it also.

10.0.4

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

10.0.3

10.0.2

Patch Changes

  • [patch]f20ac3080c:

    Removed unused dependencies from package.json for select: react-transition-group was unused.

10.0.1

Patch Changes

  • [patch]9f8ab1084b:

    Consume analytics-next ts type definitions as an ambient declaration.

10.0.0

Major Changes

  • [major]790e66bece:

    Major bump to react-select which includes a bump from emotion 9 --> 10, this will impact users who are currently creating custom components using emotion. Empty values in selects have also now been changed to be more deterministic across single and multi select. See https://github.com/JedWatson/react-select/issues/3585 for details

9.1.10

9.1.9

Patch Changes

  • [patch]ef04b7fe05:

    Cleaned up event listeners on unmount

9.1.8

9.1.7

Patch Changes

  • [patch]4615439434:

    index.ts will now be ignored when publishing to npm

9.1.6

9.1.5

9.1.4

9.1.3

  • [patch]b0ef06c685:

    • This is just a safety release in case anything strange happened in in the previous one. See Pull Request #5942 for details

9.1.2

9.1.1

9.1.0

  • [minor]3d5ab16856:

    • Add missing dependency @emotion/core

9.0.1

  • [patch]21854842b5:

    • Clean couple of TODO's that were already done

9.0.0

  • [major]7c17b35107:

    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

8.1.1

8.1.0

  • [minor]b50c289008:

    • Don't close popup select when cleared.

8.0.5

8.0.4

  • [patch]2a90c65e27:

    • Fix, and guard against, missing refs

8.0.3

8.0.2

  • [patch]87808b7791:

    • AK-5973 expose handleKeyDown as prop for PopupSelect

8.0.1

8.0.0

  • [major]76299208e6:

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only distribute esm. This means all distributed code will be transpiled, but will still contain import and export declarations.

    The major reason for doing this is to allow us to support multiple entry points in packages, e.g:

    import colors from `@atlaskit/theme/colors`;

    Previously this was sort of possible for consumers by doing something like:

    import colors from `@atlaskit/theme/dist/esm/colors`;

    This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.

    To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.

    ES Modules are widely supported by all modern bundlers and can be worked around in node environments.

    We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.

    Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.

7.2.2

  • [patch]39850f9615:

    • Popup select set focus to selected option, instead of the first option, when the menu opens

7.2.1

  • [patch]37c2eeec43:

    • Added possibility to add compact styling for multi select component

7.2.0

  • [minor]46ffd45f21:

    • Added ability to toggle animations in atlaskit/select, updated UserPicker to disable animations using this new behaviour

7.1.2

  • [patch]bcdb413cb4:

    • Encapsulate checkbox/radio option styles inside the primitive

7.1.1

  • [patch]896bf5bef9:

    • Fix bug breaking mobile UX, and causing menu to not be openable on touch

7.1.0

  • [minor]571ec20522:

    • Updated react-select to 2.4.0, includes updates to BEM modifiers in options, for more information see the react-select release notes https://github.com/JedWatson/react-select/releases/tag/v2.4.0
    • Added makeAnimated invocation back to createSelect, as multi select in modal bug has been resolved.
    • Export makeAsyncSelect and makeCreatableSelect function from src

7.0.0

  • [major]06713e0a0c:

    • popup select "target" is now a function that must resolve to a node

6.1.20

  • [patch]957778f085:

    • Expose CheckboxOption and RadioOption from select package

6.1.19

6.1.18

  • [patch]6148c6c:

    • AK-5693 apply styles to loading indicator

6.1.17

  • [patch]e9ccac7:

    • pin react-select at 2.1.x to avoid SSR issues in 2.2.0

6.1.16

  • [patch]b9b1900:

    • Use @atlaskit/select instead of @atlaskit/single-select on the Fullscreen examples on website

6.1.15

  • [patch]6195ac3:

    • remove animated functionality to temporarily resolve blocking issue with portal

6.1.14

6.1.13

6.1.12

  • [patch]82fc5f5:

    • Pinning react-popper to 1.0.2 to avoid recursive bug

6.1.11

  • [patch]bfc508c:

    • CheckboxSelect options now have correct flex styles on the option value

6.1.10

6.1.9

6.1.8

6.1.7

  • [patch]1fb2c2a:

    • Fixed issue where tooltips and modals would initially render in the wrong location

6.1.6

  • [patch]a637f5e:

    • Refine and fix some flow type errors found by fixing @atlaskit/analytics-next HOCs to allow flow to type check properly

6.1.5

  • [patch]fcf97d8:

    • Fix countries and mismatched flags

6.1.4

6.1.3

6.1.2

6.1.1

  • [patch] fixed popupselect bug by replacing Fragment with div element containing the requisite event handlers 80dd688

6.1.0

6.0.4

  • [patch] fix issues with PopupSelect and NavigationSwitcher b4e19c3

6.0.3

  • [patch] Adds missing implicit @babel/runtime dependency b71751b

6.0.2

6.0.1

  • [patch] Fixing analytics events for checkbox/radio/select 3e428e3

6.0.0

  • [major] Bumped react-select dep from 2.0.0-beta.7 to 2.0.0. This includes a breaking change to custom components, the innerRef property is now declared on the root of the props object, as opposed to being part of the innerProps object passed to each component. For a full list of changes in 2.0.0 please see the react-select changelog here. https://github.com/JedWatson/react-select/blob/master/HISTORY.md 4194aa4

5.0.19

  • [patch] Added a multi-select example for PopupSelect 483a335

5.0.18

5.0.17

5.0.16

5.0.15

  • [patch] Adds sideEffects: false to allow proper tree shaking b5d6d04

5.0.14

5.0.13

  • [patch] Using the latest popper to avoid recursive setState calls. 9dceca9

5.0.11

  • [patch] Updating datetime-picker and select styles 981b96c

5.0.10

  • [patch] add switcher to nav-next ui components docs page e083d63
  • [none] Updated dependencies e083d63

5.0.9

5.0.8

5.0.7

5.0.6

5.0.5

5.0.4

5.0.3

5.0.2

5.0.1

5.0.0

4.5.2

  • [patch] Update loading indicator to be inline with ADG3 da661fd
  • [none] Updated dependencies da661fd

4.5.1

  • [patch] fixed actionMeta not being passed to onChange of PopupSelect 83833be
  • [none] Updated dependencies 83833be

4.5.0

  • [minor] atlaskit/select now invokes a makeAnimated function to wrap passed in components in default animated behaviour. As this invocation returns a new set of react components each time, we've also implemented a lightweight component cache using memoize-one and react-fast-compare. Additionally updates made to datetime-picker to not instantiate a new component on render everytime (for performance reasons as well as to satisfy our caching logic), we now also pass relevant state values through the select as props to be ingested by our custom components, instead of directly capturing them within lexical scope. 9b01264
  • [none] Updated dependencies 9b01264

4.4.0

  • [minor] Added nav-next "Switcher" component. Minor fixes and dep bump for select. ed5d8d1
  • [none] Updated dependencies ed5d8d1

4.3.6

  • [patch] ADG3 guideline allignemnt, updated padding and height, update colors for hover and active, update icons b53da28
  • [none] Updated dependencies b53da28

4.3.5

4.3.4

4.3.3

  • [patch] Replace internal styled components with emotion styled components 415a64a
  • [none] Updated dependencies 415a64a

4.3.2

4.3.1

4.3.0

4.2.3

4.2.2

  • [patch] Added upgrade guide, updated atlaskit/docs dep on react-markings to expose md parser customisations aef4aea
  • [none] Updated dependencies aef4aea

4.2.1

4.2.0

4.1.0

  • [minor] Fix InlineDialog closing on Select option click. Added Select prop onClickPreventDefault which is enabled by default 11accbd
  • [minor] Updated dependencies 11accbd

4.0.1

4.0.0

3.2.0

  • [minor] Add named export "CompositeSelect" to the Atlaskit select package 9c34042

3.1.0

  • [minor] Added spacing prop, which allows for a compact mode that supports 32px trigger height for single-select, bumped react-select to beta.6 59ab4a6
  • [minor] added spacing prop to support compact mode for single select.
  • bumped react-select to beta.6, this includes the following changes:
    • actionMeta for remove-value and pop-value events now contain a removedValue property.
    • Fixed bug with css attribute being applied to DOM element in SingleValue.
    • selectValue now filters items based on getOptionValue method.
    • Added createOptionPosition prop for Creatable select, which allows the user to specify whether the createOption element displays as the first or last option in the menu.
    • Added touch handling logic to detect user intent to scroll the page when interacting with the select control.

3.0.2

3.0.1

  • [patch] Fix imports for creaetable, async and async creatable selects 92ae24e

3.0.0

  • [major] Update to react-select@beta.4, removed developer preview warning. Stable release d05b9e5
  • BREAKING: Removed maxValueHeight prop and functionality, this is a breaking change that affects multi -value components predominantly. The control will now expand to accommodate contained values, as opposed to constraining to a maxValueHeight with a scrollable area.
  • Async, Creatable, AsyncCreatable components now imported from react-select and not from react-select/lib/*.
  • Internal cx implementation refactored to reduce specificity of css-in-js base styles. By default these base-styles will be overridden by css styles associated to provided class names.
  • Fixed animated component bug where setting isSearchable to false would throw warnings in the console.
  • Added a classNamePrefix prop which now controls the class names applied to internal components, className prop is now intended for adding a className to the bounding selectContainer only. If the classNamePrefix field is left undefined, then the className prop will currently fulfill both these roles, however a warning will be shown and this functionality is intended to be deprecated in future releases.
  • Added --is-disabled className modifier to the default Option component
  • Fixed IE11 issues around element overflow in the menuList, and scroll indicators in the control.
  • Added multi-value keyboard navigation using left and right arrow keys.
  • Added fix to ensure focus is on the input when the menu opens.

2.0.2

  • [patch] Release to align @atlaskit/select styles and theme with ADG3 guideline. 7468739

2.0.0

  • [major] Classname prop added, if this is given a value we surface logical semantic classes prefixed with the supplied value to enable styling via css otherwise a generated hash value is used.W e also now export icon components from the components object to facilitate easier customisation. Previously this behaviour was enforced, and classes were given semantic values and prefixed with ‘react-select’ by default (i.e. react-select__dropdown-indicator) . See the following commit for details https://github.com/JedWatson/react-select/commit/109d1aadb585cc5fd113d03309d80bd59b5eaf9b Also in this release, IE 11 display bugfix for centre alligned elements in a flex parent, fix for react15 compatibility, fix for bug where long tail values were not being truncated properly in the control 8d19b24

1.3.1

  • [patch] Update react-select version to fix flowtype errors 240a083

1.3.0

  • [minor] Update react-select dep in @atlaskit/select to alpha.10 4073781

1.2.0

  • [minor] @atlaskit/select now exports the createFilter df7d845

1.1.1

  • [patch] Re-export some exports from react-select for use in other packages. eda9906

1.1.0

  • [minor] Added default text-truncation behaviour for options in radio and checkbox selects 5b37cc1

1.0.0

  • [major] Bump to React 16.3. 4251858

0.3.0

  • [minor] Added Creatable and AsyncCreatable exports, added menuPortalTarget prop to portal select menu, updated selects to expose intenral focus and blur methods' a7b06f4

0.2.1

  • [patch] Re-releasing due to potentially broken babel release 9ed0bba

0.2.0

  • [minor] Update styled-components dependency to support versions 1.4.6 - 3 ceccf30

0.1.7

0.1.6

  • [patch] Update to alpha.6 and cleanup CountrySelect c972f53

0.1.5

  • [patch] Packages Flow types for elements components 3111e74

0.1.4

  • [patch] misc updates to select package bd000c7

0.1.3

  • [patch] added temporary SelectWraper to demonstrate validation 0ef5343

0.1.2

  • [patch] Resolved low hanging flow errors in field-base field-text comment icon item and website, $ 007de27

0.1.1

  • [patch] initial release of the select package 1b8e01d

0.1.0

  • Initial release