Completed changes for v2.1.0, which includes the new 'async' mode; update README.md; add new story 'Async' to storybook and rebuild storybook files; bump some dev dependencies

Author: based-ghost

.storybook/config/globalStyle.js

@@ -21,29 +21,37 @@ export default createGlobalStyle`
     flex: 1;
     margin: 0;
     display: flex;
-    color: #212428;
     font-size: 1rem;
     font-weight: 400;
     text-align: left;
     line-height: 1.5;
     min-height: 120vh;
     flex-direction: column;
     background-color: #fff;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    letter-spacing: 0.00938em;
+    color: rgba(0, 0, 0, 0.87);
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
   }
 
   em {
     font-weight: 600;
   }
 
+  strong {
+    color: black;
+    font-weight: 600;
+    font-size: 1.025em;
+  }
+
   code {
-    color: #191c20;
+    line-height: 1.4;
     font-size: 0.96em;
-    border-radius: 0.3em;
+    border-radius: 2px;
     word-break: break-word;
+    color: rgba(0, 0, 0, 0.87);
     padding: .15em .2em .05em;
     background-color: rgba(255,229,100,0.2);
-    font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
 
     @media only screen and (max-width: 525px) {
       padding: .1em .25em .1em;

.storybook/config/reactToastifyCss.js

@@ -76,8 +76,8 @@ export default css`
       max-height: 800px;
       overflow: hidden;
       font-size: 1.075rem;
-      font-weight: 600;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+      font-weight: 400;
+      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
       cursor: pointer;
       direction: ltr;
       &--default {
@@ -86,7 +86,7 @@ export default css`
       }
       &--info {
         color: #fff;
-        background: #149DF3;
+        background: #149df3;
       }
       &-body {
         flex: 1;
@@ -139,7 +139,15 @@ export default css`
         transition: transform 0.2s;
       }
       &--default {
-        background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
+        background: linear-gradient(
+          to right,
+          #4cd964,
+          #5ac8fa,
+          #007aff,
+          #34aadc,
+          #5856d6,
+          #ff2d55
+        );
       }
     }
   }

README.md

@@ -13,6 +13,7 @@
 - Extensible styling API with [`styled-components`](https://github.com/styled-components/styled-components)
 - Opt-in properties to make the component fully accessible
 - Effortlessly scroll, filter, and key through datasets numbering in the tens of thousands via [`react-window`](https://github.com/bvaughn/react-window) + performance conscious code
+- Async mode for fetching dynamic options from a remote server using the search input value (starting in `v2.1.0`)
 
 <strong>Peer dependencies:</strong>
 
@@ -21,14 +22,14 @@
 
 ## Overview
 
-Essentially, this is a focused subset of [`react-select`](https://github.com/JedWatson/react-select)'s API that is engineered for ultimate performance and minimal bundle size. It is built entirely using `React Hooks` and `FunctionComponents`.  The primary design principal revolves around weighing the cost/benefits of adding a feature against the impact to performance & # of lines of code its addition would have. 
+Essentially, this is a focused subset of [`react-select`](https://github.com/JedWatson/react-select)'s API that is engineered for ultimate performance and minimal bundle size. It is built entirely using `React Hooks` and `FunctionComponents`.  The primary design principal revolves around weighing the cost/benefits of adding a feature against the impact to performance & # of lines of code its addition would have.
 
-I opted to exclude less "in-demand" features such as: 
+I opted to exclude less "in-demand" features such as:
 
 - Preventing scroll events on the app's body if the menu is open <strong><em>TODO: add code example</em></strong>
 - Closing an open menu if the app's body is scrolled <strong><em>TODO: add code example</em></strong>
 
-These feature would have added significant overhead to the package. In addition, if we expose the right public methods and/or callback properties, this feature should be trivial to add to wrapping components - proper decoupling and abstraction of code is key to keeping such channels open for similar customizations that can be kept out of this package. 
+These feature would have added significant overhead to the package. In addition, if we expose the right public methods and/or callback properties, this feature should be trivial to add to wrapping components - proper decoupling and abstraction of code is key to keeping such channels open for similar customizations that can be kept out of this package.
 
 ## Installation
 
@@ -70,7 +71,7 @@ const SingleSelectDemo: React.FC = () => {
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [isClearable, setIsClearable] = useState<boolean>(true);
   const [selectedOption, setSelectedOption] = useState<CityOption | null>(null);
-  
+
   const getOptionValue = useCallback((option: CityOption): number => option.id, []);
   const onOptionChange = useCallback((option: CityOption | null): void => setSelectedOption(option), []);
   const getOptionLabel = useCallback((option: CityOption): string => `${option.city}, ${option.state}`, []);
@@ -108,14 +109,15 @@ const SingleSelectDemo: React.FC = () => {
 
 All properties are technically optional (with a few having default values). Very similar with [`react-select`](https://github.com/JedWatson/react-select)'s API.
 
-> <strong><em>Note that the following non-primitive properties should be properly memoized if defined:</em></strong><br>`clearIcon`, `caretIcon`, `options`, `renderOptionLabel`, `onMenuOpen`, `onOptionChange`, `onKeyDown`, `getOptionLabel`, `getOptionLabel`, `getOptionValue`, `onInputBlur`, `onInputFocus`, `getIsOptionDisabled`, `getFilterOptionString`, `themeConfig`
+> <strong><em>Note that the following non-primitive properties should be properly memoized if defined:</em></strong><br>`clearIcon`, `caretIcon`, `options`, `renderOptionLabel`, `onMenuOpen`, `onOptionChange`, `onKeyDown`, `getOptionLabel`, `getOptionLabel`, `getOptionValue`, `onInputBlur`, `onInputFocus`, `onInputChange`, `onSearchChange`, `getIsOptionDisabled`, `getFilterOptionString`, `themeConfig`
 
 | Property | Type | Default | Description
 :---|:---|:---|:---
 | `inputId`| string | `undefined` | The id of the autosize search input
 |`selectId`| string | `undefined` | The id of the parent div
 |`ariaLabel`| string | `undefined` | Aria label (for assistive tech)
 |`isMulti`| bool | `false` | Does the control allow for multiple selections (defaults to single-value mode)
+|`async`| bool | `false` | Is the component in 'async' mode - when in 'async' mode, updates to the input search value will NOT cause the effect `useMenuOptions` to execute (this effect parses `options` into stateful value `menuOptions`)
 |`autoFocus`| bool | `false` | Focus the control following initial mount of component
 |`isLoading`| bool | `false` | Is the select in a state of loading - shows loading dots animation
 |`isInvalid`| bool | `false` | Is the current value invalid - control recieves invalid styling
@@ -126,6 +128,7 @@ All properties are technically optional (with a few having default values). Very
 |`menuItemSize`| number | `35` | The height of each option in the menu (px)
 |`isClearable`| bool | `false` | Is the select value clearable
 |`noOptionsMsg`| string | `No options` | The text displayed in the menu when there are no options available
+|`loadingMsg`| string | `Loading...` | The text displayed in the menu when `isLoading` === `true`
 |`clearIcon`| ReactNode | `undefined` | Custom clear icon node
 |`caretIcon`| ReactNode | `undefined` | Custom caret icon node
 |`loadingNode`| ReactNode | `undefined` | Custom loading node
@@ -157,6 +160,8 @@ All properties are technically optional (with a few having default values). Very
 |`getOptionValue`| (data: any): ReactText | `undefined` | Resolves option data to React.ReactText to compare option values (by default will use option.value)
 |`onInputBlur`| (e: FocusEvent\<HTMLInputElement\>): void | `undefined` | Handle blur events on the search input
 |`onInputFocus`| (e: FocusEvent\<HTMLInputElement\>): void | `undefined` | Handle focus events on the search input
+|`onInputChange`| (value: string): void | `undefined` | Handle change events on the search input
+|`onSearchChange`| (value: string): void | `undefined` | Callback executed after the debounced search input value is persisted to the component's state - if no debounce is defined via the `inputDelay` property, it probably makes more sense to use `onInputChange` instead.
 |`renderOptionLabel`| (data: any): ReactNode | `undefined` | Formats option labels in the menu and control as JSX.Elements or React Components (by default will use `getOptionLabel`)
 |`getIsOptionDisabled`| (data: any): boolean | `undefined` | When defined will evaluate each option to determine whether it is disabled or not (if not specified, each option will be evaluated as to whether or not it contains a property of `isDisabled` with a value of `true`)
 |`getFilterOptionString`| (option: any): string | `undefined` | When defined will take each option and generate a string used in the filtering process (by default, will use option.label)

__stories__/2-Styling.story.tsx

@@ -157,7 +157,7 @@ storiesOf('React Functional Select', module).add('Styling', () => {
           />
         </Column>
       </Columns>
-      <SubTitle>Using classNames</SubTitle>
+      <SubTitle>Using Classes</SubTitle>
       <Columns>
         <Column widthPercent={40}>
           <Content>
@@ -179,9 +179,7 @@ storiesOf('React Functional Select', module).add('Styling', () => {
             </List>
           </ListWrapper>
         </Column>
-        <Column widthPercent={60}>
-          {memoizedMarkupNode}
-        </Column>
+        <Column widthPercent={60}>{memoizedMarkupNode}</Column>
       </Columns>
       <SubTitle>Demo</SubTitle>
       <Hr />

__stories__/3-Events.story.tsx

@@ -50,6 +50,10 @@ storiesOf('React Functional Select', module).add('Events', () => {
             <TextHeader>onMenuClose(...args: any[]): void</TextHeader> -
             executed after the menu is closed
           </ListItem>
+          <ListItem>
+            <TextHeader>onInputChange(value: string): void</TextHeader> -
+            executed after the input control's value changes
+          </ListItem>
           <ListItem>
             <TextHeader>onKeyDown(e: KeyboardEvent&lt;HTMLDivElement&gt;): void</TextHeader> -
             executed after the onKeyDown event
@@ -62,24 +66,20 @@ storiesOf('React Functional Select', module).add('Events', () => {
             <TextHeader>onInputFocus(e: FocusEvent&lt;HTMLInputElement&gt;): void</TextHeader> -
             executed after the input control is focused
           </ListItem>
-          <ListItem>
-            <TextHeader>onInputChange(value: string): void</TextHeader> -
-            executed directly following the input control's <code>onChange</code> event.
-          </ListItem>
           <ListItem>
             <TextHeader>onSearchChange(value: string): void</TextHeader> -
-            executed after the input value is persisted to state. This value also evaluates
+            executed after the input value is persisted to state; this value also evaluates
             the <code>inputDelay</code> property for debouncing - this callback is really only useful
             when <code>inputDelay</code> is defined, and if not, it probably makes more sense to use
-            the <code>onInputChange</code> callback.
+            the <code>onInputChange</code> callback
           </ListItem>
         </List>
       </ListWrapper>
       <SubTitle>Demo</SubTitle>
       <Hr />
       <Card>
         <CardHeader>
-          <LabelNote>*For demo purposes, events trigger a notification when executed.</LabelNote>
+          <LabelNote>For demo purposes, events trigger a notification when executed.</LabelNote>
           <CheckboxGroup>
             <Checkbox
               label='onOptionChange'

__stories__/8-Async.story.tsx

@@ -2,23 +2,30 @@ import React, { useState, useCallback } from 'react';
 import { Select } from '../src';
 import { Option } from './helpers/types';
 import { storiesOf } from '@storybook/react';
-import { mockHttpRequest, createAsyncOptions } from './helpers/utils';
+import { getRandomInt, mockHttpRequest, createAsyncOptions } from './helpers/utils';
 import { Hr, LabelNote, Title, SubTitle, List, ListItem, ListWrapper, Container, SelectContainer, TextHeader, Card, CardHeader, CardBody } from './helpers/styled';
 
 storiesOf('React Functional Select', module).add('Async', () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [options, setOptions] = useState<Option[]>(() => createAsyncOptions(3, 'Initial'));
+  const [options, setOptions] = useState<Option[]>(() => createAsyncOptions(5, 'Initial'));
 
   const onInputChange = useCallback((): void => {
     setIsLoading(true);
   }, []);
 
   const onSearchChange = useCallback((value: string): void => {
-    mockHttpRequest().then(() => {
-      const nextOptions = createAsyncOptions(3, `Search text: ${value || `''`}`);
-      setOptions(nextOptions);
-      setIsLoading(false);
-    });
+    mockHttpRequest(500)
+      .then(() => {
+        const count = getRandomInt(1, 5);
+        const nextOptions = createAsyncOptions(count, `Search text: ${value || 'Initial'}`);
+        setOptions(nextOptions);
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+      .then(() => {
+        setIsLoading(false);
+      });
   }, []);
 
   return (
@@ -28,46 +35,45 @@ storiesOf('React Functional Select', module).add('Async', () => {
       <ListWrapper>
         Add the <code>async</code> property to enable async mode. There is one key difference
         in core functionality with async mode - changes to search input value will not cause
-        the <code>useMenuOptions</code> effect to run (it will just wait for updates to
-        the <code>options</code> property). The rest of hooking into async mode is achieved
-        using some combination of the properties found below. <em>For callback function
-        properties, strongly prefer memoization, as you could encounter some unintended behaviors.</em>
+        the <code>useMenuOptions</code> effect to run. The rest of hooking into async mode is
+        achieved using some combination of the properties found below
+        . <em>Properties <code>onInputChange</code> and <code>onSearchChange</code> should be
+        memoized.</em>
         <List>
           <ListItem>
             <TextHeader>onInputChange(value: string): void</TextHeader> -
             callback executed directly following the input control's <code>onChange</code> event.
-            This callback is not in linked to the debounced value, so it fires immediately. This is a
+            This callback is not debounced, so it fires immediately. This is a good
             place to set a stateful loading property in your parent component that is mapped to
             react-functional-select's <code>isLoading</code> property.
           </ListItem>
           <ListItem>
             <TextHeader>onSearchChange(value: string): void</TextHeader> -
-            callback executed following component state updates for stateful
-            value <code>debouncedInputValue</code>. The debounced delay controlled by
-            the <code>inputDelay</code> property. This is most likely where your http fetch
-            request and post-request logic (i.e. setting isLoading false) would go.
+            callback executed following component state updates for
+            the <code>debouncedInputValue</code>. The debounce is set using
+            the <code>inputDelay</code> property. This callback is a good place for your
+            http fetch request and post-request logic (i.e. setting isLoading false).
           </ListItem>
           <ListItem>
             <TextHeader>inputDelay?: number</TextHeader> - As mentioned above, this can be
-            set to a positive integer in order to debounce updates to the search input value following
-            input change events. This property directly maps to the <code>delay</code> in milliconds
-            passed to the <code>setTimeout</code> method.
+            set to a positive integer in order to debounce updates to the search input value
+            following input change events. This property directly maps to the <code>delay</code> in
+            milliconds passed to the <code>setTimeout</code> method.
           </ListItem>
           <ListItem>
-            <TextHeader>isLoading?: boolean</TextHeader> - When true, a loading animation will appear
-            in the far-right of the control and take the place of the clear icon (if shown). Additionally,
-            it will hide options in the menu and instead, display a loading message. The loading message
-            text defaults to 'Loading...', but can be overriden via the <code>loadingMsg</code> property.
+            <TextHeader>isLoading?: boolean</TextHeader> - When true, a loading animation will
+            appear in the far-right of the control and take the place of the clear icon (if shown).
+            Additionally, it will hide options in the menu and instead, display a loading message.
+            The loading message text defaults to 'Loading...', but can be overriden via
+            the <code>loadingMsg</code> property.
           </ListItem>
         </List>
       </ListWrapper>
       <SubTitle>Demo</SubTitle>
       <Hr />
       <Card>
         <CardHeader>
-          <LabelNote>
-            *The search input change event is debounced using a delay of 375ms and the simulated http call resolves after 1000ms.
-          </LabelNote>
+          <LabelNote>Search input debounced 375ms and the mock http call resolves after 500ms</LabelNote>
         </CardHeader>
         <CardBody>
           <SelectContainer>

__stories__/helpers/components/Checkbox.tsx

@@ -13,24 +13,20 @@ type CheckboxProps = {
   readonly onCheck: (checked: boolean) => void;
 };
 
-const COLOR_LABEL = '#5E5E5E';
-const COLOR_BORDER = '#ced4da';
 const COLOR_CHECK_MARK = '#149DF3';
-const COLOR_BORDER_CHECKED = hexToRgba(COLOR_CHECK_MARK, 0.6);
+const COLOR_BORDER = 'rgba(0, 0, 0, 0.54)';
+const COLOR_BORDER_CHECKED = hexToRgba(COLOR_CHECK_MARK, 0.85);
 
 const Label = styled.span`
   user-select: none;
-  font-style: italic;
   margin-left: 1.6rem;
-  color: ${COLOR_LABEL};
 `;
 
 const Input = styled.input`
-  top: 0.2em;
   z-index: 3;
   opacity: 0;
-  width: 1rem;
-  height: 1rem;
+  width: 1em;
+  height: 1em;
   cursor: pointer;
   position: absolute;
 
@@ -58,7 +54,8 @@ const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
   user-select: none;
   position: relative;
   margin-top: 0.5rem;
-  display: inline-block;
+  align-items: center;
+  display: inline-flex;
 
   ${({ isReadOnly }) =>
     isReadOnly
@@ -72,14 +69,13 @@ const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
 `;
 
 const CheckIcon = styled.i`
-  top: 0.2em;
   z-index: 0;
   width: 1rem;
   height: 1rem;
   position: absolute;
   border-style: solid;
+  border-width: 1.5px;
   box-sizing: border-box;
-  border-width: 0.125rem;
   border-radius: 0.0625rem;
   background-color: transparent;
   transition: border-color 0.365s ease;