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

Package detail

@kalamazoo/select

stevenselcuk15Apache-2.01.0.2TypeScript support: included

React component which allows selection of item(s) from a dropdown list.

readme

Select

React component which allows selection of an item or items from a dropdown list. Substitute for the native select element.

Installation

yarn add @kalamazoo/select

Usage

Detailed docs and example usage can be found here.

changelog

@kalamazoo/select

11.0.3

Patch Changes

11.0.2

Patch Changes

  • [patch]3a20e9a596:

    Make PopupSelect correctly pass props. Forcing update of @kalamazoo/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:

    @kalamazoo/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 '@kalamazoo/theme';

colors.colorPalette('8');

    to this:

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

colorPalette.colorPalette('8');

    or for multi entry-point users:

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

colors.colorPalette('8');

    to this:

    import * as colorPalettes from '@kalamazoo/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 @kalamazoo/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 `@kalamazoo/theme/colors`;

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

    import colors from `@kalamazoo/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 @kalamazoo/select instead of @kalamazoo/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 @kalamazoo/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 @kalamazoo/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 @kalamazoo/select to alpha.10 4073781

1.2.0

  • [minor] @kalamazoo/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