@particles/select

A select with support for group or individual selections.

Usage no npm install needed!

<script type="module">
  import particlesSelect from 'https://cdn.skypack.dev/@particles/select';
</script>

README

Select

A select with support for group or individual selections.

Example

select

Change Log

12.0.5
  • Fixed SelectWithDefaultSearch not being able to scroll results after searching
12.0.4
  • Dropdown opens above if no room bellow
12.0.2
  • Use window.scrollY or window.pageYOffset
12.0.1
  • Use window.scrollY
12.0.0
  • Add allowSubmitOnEnter
11.4.4
  • Update font-family to inherit
11.4.3
  • Update Portal to use Correct Child during Loading State
  • Fix IE Portal Bug
11.4.2
  • Update Index to Reflect new Ref
11.4.1
  • Added Optional Ref to Select for Complete Consumer Control
11.4.0
  • Added React Portal to Dropdown
11.3.0
  • Added onBlur callback to monitor open/closed state of dropdown from client
11.2.13
  • Added item qa-tag to first dropdown item for automated testing
11.2.12
  • Checking if titleValue is an object. If so, it is not set to the title property.
11.2.11
  • Add in qaTag prop to name the select for automation
11.2.10
  • Keeps z-index of the dropdown the same between open/closed states
11.2.9
  • Clear searchValue on select when closeOnSelect is true
11.2.8
  • Always render clear icon, but toggle visibility instead of toggling DOM elment in general (can cause invariant errors).
11.2.7
  • Added tabIndex of '-1' to search input on disable
11.2.6
  • Removes font-family: Lato, allows cascade of font
11.2.5
  • Fixed bug? Where Edge tries to autocomplete search in Select.
11.2.4
  • Fixed another bug with the .clearIcon styling
11.2.3
  • Fixed IE issue where select wouldn't always open on single click
11.2.2
  • Fixed the styling on the .clearTitle class
11.2.1
  • Fixed bug where select did not always close on select
  • onSelect callbacks now don't fire unless dropdown expanded
11.2.0
  • Added search memoization for SelectWithDefaultSearch
11.1.0
  • Added title prop to the title div to show full title if truncated.
11.0.1
  • flex-shrink: 0 on clear button and caret
  • Key listener bug fix for grouped data

11.0.0

  • Breaking Many style updates
  • Breaking value prop updated to searchValue for clarity
10.3.3
  • inline styleVariant border now gray while expanded
10.3.2
  • Ensuring focusedItem is not beyond scope of the list
10.3.1
  • Debugging qatags, all should be lowercase and singular
10.3.0
  • New inline hover styles
10.2.0
  • Added error prop and styling
10.1.0
  • Added some data-qaTags

10.0.0

  • Breaking Select still exported by default, but with no internal support for filtering.
  • Breaking displayGroupChildren prop now only applies to SelectWithDefaultSearch
  • Breaking Remove renderGroup prop
  • Breaking Remove shouldFilter prop
  • Export SelectWithDefaultSearch
  • Add support for titleValue to be a node as well as a string
  • Added value prop to Select for the search input
9.0.2
  • Fixed issue where onSearch callback wasn't being called in react 15 clients
9.0.1
  • Compose styles on componentWillReceiveProps
9.0.0
  • Restores: Internal dropdown filtering as supported in v7.0.0 with prop shouldFilter
  • Implementing component may still pass in filtered data as data compatible with v8.0.0
  • Supports flat, n-level nested group, and hybrid lists

8.0.0

  • Breaking: Dropdown no longer filters, implementing component must now pass in filtered data via data prop
  • Breaking: onSearch is now called with {value, scope}
  • Breaking: Clicking the bottom slot now closes the dropdown
  • Breaking: Closing the dropdown now clears the previous search term
  • Previous filter function is now exported for convenience as defaultSearchFn
  • Selected item now has highlighted style for ungrouped data
  • Disabled dropdown if data is loading
  • Fixed inline variant disabled hover style

7.0.0

  • Breaking valueFunction prop removed
  • Breaking updateOnSelect prop removed
  • clearable prop added
  • titleValue no longer controlled by internal state
6.0.1
  • Updated webpack, postcss, and babel configs
  • Fixed border-radius bug introduced with chrome 62

6.0.0

  • Breaking Using pseudolocalization for i18n handling (breaking change, strings will look different)
  • Lots more unit tests added
5.1.2
  • Removed checks for dropdownContent
  • Removed unused refs
5.1.1
  • Add unit tests, CSS module mocking, and code coverage reporting.
5.1.0
  • Dropdown's renderEmpty function is now called with current value
  • Adds support for styleVariant prop
  • Use prop styleVariants={['infoGrid']} to use with info-grid
5.0.1
  • Remove .isRequired from key and value in data prop's checks

5.0.0

  • Breaking updateOnSelect now true by default
  • Breaking closeOnSelect now true by default
  • i18n prop added
4.1.0
  • style prop added
4.0.5
  • Fixed bugs to allow certain classes to be overridable
4.0.4
  • Fix bug with search matching on case
  • Fixed bug where Select would not blur when clicking on another instance of Select
4.0.3
  • Upgrading to React and React-DOM v16.0.0
4.0.2
  • Fixed bug where onFocus prop was getting called when an item was clicked
  • Fixed bug where focusedItem was not set correctly on hover
4.0.1
  • Fixed bug where onFocus prop was getting called twice
  • Added line to visually separate the grouped and ungrouped items

4.0.0

  • Tab, esc, up arrow, down arrow, and enter key support
  • Search input part of dropdown
  • New searchPlaceholder prop distinguished from titlePlaceholder prop
  • Code is split up into a Select.jsx file and a Dropdown.jsx file
  • Focus/blur management bug fixes
  • Group children no longer displayed
3.13.1
  • Fixes a bug that was blocking shift + tab
3.13.0
  • Now easily supports tabbing when multiple instances are on one page
  • searchInput and titleValue have been separated
3.12.0
  • Analytics added
3.11.6
  • Fix bug with styles not updating when stylesheets prop changed
3.11.5
  • Restored click handlers if loading
  • Removed !isSearch check when overriding onSearch term
3.11.4
  • Removed all click handlers if loading
3.11.3
  • Adding expanded class toggle to outer container
3.11.2
  • Commenting out focus bug until future notice
  • Removing caret while disabled
3.11.1
  • Passing event to onFocus callback
3.11.0
  • Update to React 15
3.10.0
  • titleValue not updating properly bug fix
  • new prop dropdownContent to pass in something other than items
3.9.4
  • Change border color when disabled
3.9.3
  • Key listener bug fix, esc key functionality
  • Building in styles that should not be overridden
3.9.2
  • IE 11 alignment fixes
3.9.1
  • Fixed button type to prevent submitting forms
3.9.0
  • Added the disabled prop that disables the entire picker if true
3.8.2
  • Fixed sane default to be better on valueFunction
3.8.1
  • Added a sane default to valueFunction prop
3.8.0
  • Added in a function to allow for more control on the displayed value
3.7.0
  • Adding key listeners to navigate and select the dropdown items
3.6.2
  • Graceful handling for null titleValue prop
3.6.1
  • Fixing onFocus if not defined
3.6.0
  • Added a bottom slot to the dropdown
3.5.2
  • Fixing spinner hover state
  • Fixing message if loading vs. if empty
  • Adding focus call to arrow click (in addition to search focus)
3.5.1
  • Fixing animation spin
  • Removing 'clear search' if not searchable
3.5.0
  • Adding onFocus event
3.4.7
  • More style cleanup
  • Padding adjustments based on presence of clear button
3.4.6
  • Style cleanup
  • Dropdown opens on focus/click of input
3.4.5
  • Removed the controls div if not being used
3.4.4
  • Adding in active class to container when dropdown is expanded
3.4.2, 3.4.3
  • Updating package.json to Particles URL
3.4.1
  • Using external prop-types package
3.4.0
  • Added an onClear callback function for when picker is searchable
3.3.0
  • Added the ability to open the picker from the title if it is not searchable
3.2.0
  • Added ability to not set internal state if not needed
3.1.0
  • Added in ability for single selection to update state immediately and close on selection
3.0.2
  • Added in keyField and valueField to allow different data structure
3.0.1
  • Extracting and importing UUID generation
  • Moving listener removal to unmount

3.0.0

  • Consolidating from Kaweake
  • Standard { key, value } data structure
  • Removed token handling
  • Title value prop
  • renderItem(), renderGroup(), renderEmpty()
  • Multiple expanded bug fixed
2.5.0
  • Added prepopulate flag
  • 'this' styles fix
2.4.11
  • Fixing max warning default
2.4.10
  • Fixing key attributes to be more specific
2.4.9
  • Removing reset.scss
2.4.8
  • Restored "clear all" to be available at all times
  • Removed disabled items from select all handling
2.4.7
  • Fixed warning title show condition
2.4.3 - 2.4.6
  • (Unintentional minor bump)
  • Adding Lerna publishing management
  • Splitting out dev dependencies
2.4.2
  • Restoring all items after "clear all" action
2.4.0, 2.4.1
  • Leaving body expanded after selection
2.3.1
  • Fixing cursor for item children.
2.3.0
  • Removing disabled items from tokens
  • Focus restored to search input after select
2.2.0
  • Support for disabled items
2.1.1
  • Rotating arrow on expand/collapse
2.1.0
  • Memoised to maintain original order while remaining efficient
  • Token styling added

2.0.0

  • Stylesheet separation
  • Box sizing enforcement on dropdown
  • Fetch on mount
  • Removed Bootstrap
  • Removed unnecessary deps
  • Self-contained styles

1.0.0, 1.0.1

  • Initial commits