Add async searchable multiSelect and searchable multiSelect types

src/Select/AsyncSelect.jsx

@@ -9,7 +9,9 @@ import { defaultStyles, defaultTheme, SELECT_SIZES } from './styles';
 const AsyncSelect = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
+  cacheOptions,
   className,
+  closeMenuOnSelect,
   components,
   defaultOptions,
   defaultValue,
@@ -26,7 +28,6 @@ const AsyncSelect = ({
   modal,
   name,
   noOptionsMessage,
-  placeholder,
   size,
   value,
 
@@ -37,8 +38,10 @@ const AsyncSelect = ({
     {...props}
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledBy}
+    cacheOptions={cacheOptions}
     className={`${className || ''} AsyncSelect`}
     classNamePrefix="Select"
+    closeMenuOnSelect={closeMenuOnSelect}
     components={components}
     defaultOptions={defaultOptions}
     defaultValue={defaultValue}
@@ -54,7 +57,7 @@ const AsyncSelect = ({
     menuPortalTarget={modal ? document.body : undefined}
     name={name}
     noOptionsMessage={noOptionsMessage}
-    placeholder={placeholder}
+    placeholder="Search"
     shouldShowValue
     styles={{
       ...defaultStyles({ menuWidth, size }),
@@ -75,7 +78,9 @@ const AsyncSelect = ({
 AsyncSelect.propTypes = {
   'aria-label': propTypes.string,
   'aria-labelledby': propTypes.string,
+  cacheOptions: propTypes.bool,
   className: propTypes.string,
+  closeMenuOnSelect: propTypes.bool,
   components: propTypes.any,
   defaultOptions: propTypes.oneOfType([propTypes.bool, propTypes.array]),
   defaultValue: propTypes.object,
@@ -106,7 +111,9 @@ AsyncSelect.propTypes = {
 AsyncSelect.defaultProps = {
   'aria-label': undefined,
   'aria-labelledby': undefined,
+  cacheOptions: undefined,
   className: undefined,
+  closeMenuOnSelect: undefined,
   components: undefined,
   defaultOptions: false,
   defaultValue: undefined,
@@ -124,7 +131,6 @@ AsyncSelect.defaultProps = {
   placeholder: undefined,
   size: SELECT_SIZES.SMALL,
   value: undefined,
-
   onChange: undefined,
 };
 

src/Select/AsyncSelect.stories.jsx

@@ -7,6 +7,8 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'src/Modal';
 
+import Option from './Option';
+
 export default {
   title: 'Components/Selects/Async',
   component: AsyncSelect,
@@ -90,3 +92,23 @@ export const InModal = () => {
     </>
   );
 };
+
+export const MultiSelect = () => (
+  <FormGroup
+    label="Async MultiSelect"
+    labelHtmlFor="async-multiselect"
+  >
+    <AsyncSelect
+      cacheOptions
+      closeMenuOnSelect={false}
+      components={{ Option }}
+      getOptionLabel={({ label }) => label}
+      getOptionValue={({ value }) => value}
+      inputId="async-multiselect"
+      isClearable
+      isMulti
+      loadOptions={loadOptions}
+      noOptionsMessage={({ inputValue }) => inputValue.length ? 'No results!' : 'Type to search...'}
+    />
+  </FormGroup>
+);

src/Select/Option.jsx

@@ -16,14 +16,15 @@ import './Option.scss';
 const Option = forwardRef(({ indeterminate, ...props }, ref) => (
   <components.Option {...props}>
     <div className="Option">
-      <label>{props.label}</label>
       <CheckboxButton
         checked={props.isSelected}
+        className="Checkbox"
         id={props.label}
         indeterminate={indeterminate}
         ref={ref}
         onChange={() => null}
       />
+      <label>{props.label}</label>
     </div>
   </components.Option>
   ));

src/Select/Option.scss

@@ -1,5 +1,8 @@
 .Option {
-  display: flex; 
-  justify-content: space-between; 
+  display: flex;
   align-items: center;
+
+  .Checkbox {
+    margin-right: var(--synth-spacing-3);
+  }
 }

src/Select/SingleSelect.jsx

@@ -14,6 +14,7 @@ const SingleSelect = ({
   'aria-labelledby': ariaLabelledBy,
   borderedMultiValue,
   className,
+  closeMenuOnScroll,
   closeMenuOnSelect,
   components,
   defaultValue,
@@ -42,6 +43,7 @@ const SingleSelect = ({
     aria-labelledby={ariaLabelledBy}
     className={classNames('SingleSelect', className)}
     classNamePrefix="Select"
+    closeMenuOnScroll={closeMenuOnScroll}
     closeMenuOnSelect={closeMenuOnSelect}
     components={components}
     defaultValue={defaultValue}
@@ -77,6 +79,7 @@ SingleSelect.propTypes = {
   'aria-labelledby': propTypes.string,
   borderedMultiValue: propTypes.bool,
   className: propTypes.string,
+  closeMenuOnScroll: propTypes.bool,
   closeMenuOnSelect: propTypes.bool,
   components: propTypes.any,
   defaultValue: propTypes.object,
@@ -109,6 +112,7 @@ SingleSelect.defaultProps = {
   'aria-labelledby': undefined,
   borderedMultiValue: undefined,
   className: undefined,
+  closeMenuOnScroll: true,
   closeMenuOnSelect: true,
   components: undefined,
   defaultValue: undefined,

src/Select/SingleSelect.stories.jsx

@@ -47,7 +47,14 @@ export const Searchable = () => (
     label="Searchable select"
     labelHtmlFor="searchable-select"
   >
-    <SingleSelect inputId="searchable-select" isSearchable options={options} onChange={onChange} />
+    <SingleSelect
+      closeMenuOnScroll={false}
+      inputId="searchable-select"
+      isSearchable
+      options={options}
+      placeholder="Search or select..."
+      onChange={onChange}
+    />
   </FormGroup>
 );
 
@@ -215,6 +222,24 @@ export const CustomOptionWithCheckbox = () => (
   </FormGroup>
 );
 
+export const SearchableCustomOptionWithCheckbox = () => (
+  <FormGroup
+    label="Searchable Custom Option with Checkbox"
+    labelHtmlFor="searchable-custom-option-with-checkbox-select"
+  >
+    <SingleSelect
+      closeMenuOnSelect={false}
+      components={{ Option }}
+      hideSelectedOptions={false}
+      inputId="searchable-custom-option-with-checkbox-select"
+      isMulti
+      isSearchable
+      options={options}
+      onChange={onChange}
+    />
+  </FormGroup>
+);
+
 export const CustomOptionWithIndeterminateCheckbox = () => {
   const optionsArr = [
     { label: 'Riley Researcher', value: 1 },