@spothero/ui 15.5.7 → 15.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.5.7",
+  "version": "15.6.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
@@ -101,6 +101,7 @@
     "chalk": "4.1.0",
     "classnames": "2.2.6",
     "cypress": "6.6.0",
+    "eslint-loader": "4.0.2",
     "get-contrast-ratio": "0.2.1",
     "http-server": "0.12.3",
     "jest": "26.6.3",
@@ -122,8 +123,7 @@
     "regenerator-runtime": "0.13.7",
     "start-server-and-test": "1.12.6",
     "style-loader": "1.2.1",
-    "webpack-merge": "5.1.4",
-    "eslint-loader": "4.0.2"
+    "webpack-merge": "5.1.4"
   },
   "dependencies": {
     "@chakra-ui/react": "1.8.8",
@@ -146,6 +146,7 @@
     "react-input-mask": "2.0.4",
     "react-lazy-load": "3.0.13",
     "react-motion": "0.5.2",
+    "react-select": "5.4.0",
     "react-tether": "2.0.4",
     "regenerator-runtime": "0.13.7",
     "scrollingelement": "1.5.2",

package/styles/v2/components/AutoSuggestSelect/AutoSuggestSelect.jsx

@@ -0,0 +1,190 @@
+import React, {forwardRef, useState} from 'react';
+import PropTypes from 'prop-types';
+import FormControl from '../FormControl/FormControl';
+import AsyncSelect from 'react-select/async';
+import {useTheme} from '@chakra-ui/react';
+import IconTimesCircle from '@spothero/icons/times-circle';
+
+const AutoSuggestSelect = forwardRef(
+    (
+        {
+            id,
+            label,
+            helperText,
+            errorMessage,
+            isInvalid,
+            isDisabled,
+            isRequired,
+            getOptions,
+            onChange,
+            iconSrc,
+            placeholder,
+        },
+        ref
+    ) => {
+        const [query, setQuery] = useState('');
+        const {colors, fontSizes, sizes} = useTheme();
+
+        const handleInputChange = value => setQuery(value);
+
+        const loadOptions = () => {
+            return getOptions(query);
+        };
+
+        const icon = (color = 'transparent') => ({
+            alignItems: 'center',
+            display: 'flex',
+
+            ':before': {
+                backgroundColor: color,
+                content: '" "',
+                display: 'block',
+                marginRight: sizes['3'],
+                height: sizes['4'],
+                width: sizes['5'],
+                mask: `url(${iconSrc}) no-repeat 50% 50%`,
+                maskSize: 'contain',
+            },
+        });
+
+        const baseText = {
+            fontSize: fontSizes.base,
+            color: colors.black,
+        };
+
+        /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles  */
+        const customStyles = {
+            menu: provided => ({
+                ...provided,
+                ...baseText,
+            }),
+            control: (provided, state) => ({
+                ...provided,
+                borderColor: isInvalid
+                    ? colors.error
+                    : state.isFocused
+                    ? colors.primary.default
+                    : colors.gray['200'],
+                borderWidth: '1px',
+                boxShadow: 'none',
+                '&:hover': {
+                    borderColor: isInvalid
+                        ? colors.error
+                        : state.isFocused
+                        ? colors.primary.default
+                        : colors.gray['200'],
+                },
+            }),
+            input: (provided, state) => ({
+                ...provided,
+                ...baseText,
+                padding: sizes['2'],
+                backgroundColor: state.isDisabled
+                    ? colors.gray['200']
+                    : 'transparent',
+                ...(iconSrc && icon(colors.gray['600'])),
+            }),
+            placeholder: provided => ({
+                ...provided,
+                padding: sizes['2'],
+                fontSize: fontSizes.base,
+                color: colors.gray['600'],
+                ...(iconSrc && icon()),
+            }),
+            singleValue: provided => ({
+                ...provided,
+                ...baseText,
+                padding: sizes['2'],
+                ...(iconSrc && icon()),
+            }),
+            option: (provided, state) => ({
+                ...provided,
+                backgroundColor: state.isSelected
+                    ? colors.gray['200']
+                    : state.isFocused
+                    ? colors.gray['50']
+                    : 'transparent',
+                color: colors.black,
+            }),
+            clearIndicator: provided => ({
+                ...provided,
+                color: colors.gray['600'],
+            }),
+            dropdownIndicator: provided => ({
+                ...provided,
+                color: colors.gray['600'],
+            }),
+        };
+
+        const clearIndicatorStyles = {
+            width: sizes['5'],
+            display: 'flex',
+            marginRight: sizes['3'],
+            color: colors.gray['600'],
+            cursor: 'pointer',
+        };
+
+        /** React Select allows you to override the clear indicator with your own custom component: https://react-select.com/components */
+        const ClearIndicator = ({innerRef, innerProps}) => (
+            <div style={clearIndicatorStyles} ref={innerRef} {...innerProps}>
+                <IconTimesCircle />
+            </div>
+        );
+
+        return (
+            <FormControl
+                errorMessage={errorMessage}
+                isRequired={isRequired}
+                helperText={helperText}
+                label={label}
+                inputId={id}
+            >
+                <AsyncSelect
+                    closeMenuOnSelect
+                    isClearable
+                    components={{
+                        DropdownIndicator: () => null,
+                        IndicatorSeparator: () => null,
+                        ClearIndicator,
+                    }}
+                    openMenuOnClick={false}
+                    loadOptions={loadOptions}
+                    onInputChange={handleInputChange}
+                    onChange={onChange}
+                    isDisabled={isDisabled}
+                    id={id}
+                    placeholder={placeholder}
+                    styles={customStyles}
+                    ref={ref}
+                />
+            </FormControl>
+        );
+    }
+);
+
+AutoSuggestSelect.propTypes = {
+    /** ID applied to the select and label */
+    id: PropTypes.string.isRequired,
+    /** Label that describes the select */
+    label: PropTypes.string,
+    /** Text to use as placeholder in the input */
+    placeholder: PropTypes.string,
+    /** Optional helper text displayed below the select */
+    helperText: PropTypes.string,
+    /** Error message that would dispplay under the select */
+    errorMessage: PropTypes.string,
+    /** Boolean that sets whether the select is valid */
+    isInvalid: PropTypes.bool,
+    /** Boolean that sets whether the select is disabled */
+    isDisabled: PropTypes.bool,
+    /** Boolean that sets whether the select is required */
+    isRequired: PropTypes.bool,
+    /** Function that is called with the value typed into the input that returns a list of options for the select */
+    getOptions: PropTypes.func.isRequired,
+    /** Function that is called when an option is selected, it returns the label and value of the selection */
+    onChange: PropTypes.func.isRequired,
+    /** Optional src to SVG to use as search icon */
+    iconSrc: PropTypes.string,
+};
+
+export default AutoSuggestSelect;

package/styles/v2/components/AutoSuggestSelect/index.js

@@ -0,0 +1 @@
+export {default as AutoSuggestSelect} from './AutoSuggestSelect';

package/styles/v2/components/index.js

@@ -31,6 +31,7 @@ export {
 } from './Popover';
 export {Modal} from './Modal';
 export {Radio, RadioGroup} from './Radio';
+export {AutoSuggestSelect} from './AutoSuggestSelect';
 
 // generic chakra reexports
 export {