@pareto-engineering/design-system 4.0.0-alpha.59 → 4.0.0-alpha.60

package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js

@@ -8,7 +8,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 import { FormLabel, FormDescription } from "../../../..";
 import { Popover, LoadingCircle } from "../../../../../a";
 import { Button } from "../../../../../b";
-import { InputWrapper } from "../../../../common";
+import { InputWrapper, lookUpInputValueFromFetchedOptions } from "../../../../common";
 
 // Local Definitions
 
@@ -28,6 +28,7 @@ const Combobox = ({
   name,
   options: items,
   getOptions,
+  setOptions,
   setValue,
   description,
   value,
@@ -40,7 +41,9 @@ const Combobox = ({
   labelSpan,
   desktopLabelSpan,
   inputSpan,
-  desktopInputSpan
+  desktopInputSpan,
+  placeholder,
+  promptCreateNewOption
   // ...otherProps
 }) => {
   const {
@@ -68,6 +71,16 @@ const Combobox = ({
       }
     }
   });
+  useEffect(() => {
+    if (promptCreateNewOption) {
+      lookUpInputValueFromFetchedOptions({
+        items,
+        inputValue,
+        setOptions,
+        minLength
+      });
+    }
+  }, [inputValue, items, promptCreateNewOption]);
 
   // If the user has selected an item, we'll set the value of the field
   // or if the combobox state has a selected item, we'll set the value to the formik state
@@ -101,7 +114,8 @@ const Combobox = ({
     desktopColumnSpan: desktopInputSpan
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
     className: "input",
-    disabled: disabled
+    disabled: disabled,
+    placeholder: placeholder
   })), isFetching && /*#__PURE__*/React.createElement(LoadingCircle, {
     className: "x-main"
   }), inputValue.length > minLength && !isFetching && /*#__PURE__*/React.createElement(Button, {
@@ -212,7 +226,11 @@ Combobox.propTypes = {
   /**
   * Whether the input is optional or not
   */
-  optional: PropTypes.bool
+  optional: PropTypes.bool,
+  /**
+   * The placeholder text for the input
+   */
+  placeholder: PropTypes.string
 };
 Combobox.defaultProps = {
   // someProp: false

package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -8,7 +8,7 @@ import { useCombobox, useMultipleSelection } from 'downshift';
 import { Button } from "../../../../../b";
 import { Popover, LoadingCircle } from "../../../../../a";
 import { FormDescription, FormLabel } from "../../../..";
-import { InputWrapper } from "../../../../common";
+import { InputWrapper, lookUpInputValueFromFetchedOptions } from "../../../../common";
 
 // Local Definitions
 
@@ -48,7 +48,10 @@ const MultipleCombobox = ({
   labelSpan,
   desktopLabelSpan,
   inputSpan,
-  desktopInputSpan
+  placeholder,
+  desktopInputSpan,
+  setOptions,
+  promptCreateNewOption
   // ...otherProps
 }) => {
   const [searchInputValue, setSearchInputValue] = useState('');
@@ -136,6 +139,16 @@ const MultipleCombobox = ({
       setValue(selectedItems);
     }
   }, [selectedItems]);
+  useEffect(() => {
+    if (promptCreateNewOption) {
+      lookUpInputValueFromFetchedOptions({
+        items,
+        inputValue,
+        setOptions,
+        minLength
+      });
+    }
+  }, [inputValue, items, promptCreateNewOption]);
   useEffect(() => {
     if (value?.length > 0 && (testIfArraysAreUnique(value, selectedItems) || testIfArraysAreUnique(selectedItems, value))) {
       setSelectedItems(value);
@@ -180,7 +193,8 @@ const MultipleCombobox = ({
     preventKeyAction: isOpen
   })), {
     className: "input",
-    disabled: disabled
+    disabled: disabled,
+    placeholder: placeholder
   })), isFetching && /*#__PURE__*/React.createElement(LoadingCircle, {
     className: "x-main"
   }), inputValue.length > minLength && !isFetching && /*#__PURE__*/React.createElement(Button, {
@@ -275,7 +289,11 @@ MultipleCombobox.propTypes = {
   /**
   * Whether the input is optional or not
   */
-  optional: PropTypes.bool
+  optional: PropTypes.bool,
+  /**
+   * The placeholder text for the input
+   */
+  placeholder: PropTypes.string
 };
 MultipleCombobox.defaultProps = {
   // someProp: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.59",
+  "version": "4.0.0-alpha.60",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -58,6 +58,7 @@
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "formik": "^2.2.9",
+    "fuse.js": "^7.0.0",
     "hamburgers": "^1.2.1",
     "lexical": "^0.11.3",
     "lodash": "^4.17.21",
@@ -70,5 +71,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2d7315603950316a4dc7b8c4a0ccfbc0584e405f"
+  "gitHead": "15846b86650f5b59e0da2d6b904e381fe3f95fdf"
 }

package/src/stories/f/QueryCombobox.stories.jsx

@@ -180,6 +180,17 @@ Optional.args = {
   optional:true,
 }
 
+export const WithPlaceholder = ResolvedTemplate.bind({})
+WithPlaceholder.args = {
+  placeholder:'Search for a team',
+}
+
+export const WithPromptToCreateNewOption = ResolvedTemplate.bind({})
+WithPromptToCreateNewOption.args = {
+  placeholder          :'Search for a team',
+  promptCreateNewOption:true,
+}
+
 export const SingleSelect = ResolvedTemplate.bind({})
 SingleSelect.args = {
   multiple:false,
@@ -202,6 +213,13 @@ MultipleSelect.args = {
   defaultFormikState:{ teams: [] },
 }
 
+export const MultipleSelectWithPromptForNewOptions = ResolvedTemplate.bind({})
+MultipleSelectWithPromptForNewOptions.args = {
+  multiple             :true,
+  promptCreateNewOption:true,
+  defaultFormikState   :{ teams: [] },
+}
+
 export const MultipleSelectWithDefaultFormikState = ResolvedTemplate.bind({})
 MultipleSelectWithDefaultFormikState.args = {
   multiple          :true,

package/src/ui/a/ToggleSwitch/ToggleSwitch.jsx

@@ -20,7 +20,7 @@ const ToggleSwitch = ({
   id,
   className:userClassName,
   style,
-  handleOnClick,
+  handleOnChange,
   checked,
   size,
   // ...otherProps
@@ -45,11 +45,15 @@ const ToggleSwitch = ({
         '--size':size,
         ...style,
       }}
-      onClick={handleOnClick}
       type="button"
       // {...otherProps}
     >
-      <input type="checkbox" id="switch" checked={checked} />
+      <input
+        type="checkbox"
+        id="switch"
+        checked={checked}
+        onChange={handleOnChange}
+      />
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label htmlFor="switch" />
     </button>
@@ -75,7 +79,7 @@ ToggleSwitch.propTypes = {
   /**
    * The onClick handler for this element
    */
-  handleOnClick:PropTypes.func,
+  handleOnChange:PropTypes.func,
 
   /**
    * The checked state of this element

package/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -53,7 +53,7 @@ const ThemeSelector = ({
         {' '}
         Theme
       </span>
-      <ToggleSwitch checked={userTheme === 'dark'} handleOnClick={loopThemes} />
+      <ToggleSwitch checked={userTheme === 'dark'} handleOnChange={loopThemes} />
     </div>
   )
 }

package/src/ui/f/common/index.js

@@ -2,3 +2,4 @@ export { Label as FormLabel } from './Label'
 export { Description as FormDescription } from './Description'
 export { Debugger as FormDebugger } from './Debugger'
 export { InputWrapper } from './InputWrapper'
+export * from './utils'

package/src/ui/f/common/utils/index.js

@@ -0,0 +1 @@
+export { lookUpInputValueFromFetchedOptions } from './lookUpInputValueFromFetchedOptions'

package/src/ui/f/common/utils/lookUpInputValueFromFetchedOptions.js

@@ -0,0 +1,23 @@
+import Fuse from 'fuse.js'
+
+const fuseOptions = {
+  findAllMatches:true,
+  keys          :['label'],
+}
+
+export const lookUpInputValueFromFetchedOptions = ({
+  items, inputValue, setOptions, minLength,
+}) => {
+  const fuseSearch = new Fuse(items, fuseOptions)
+  const result = fuseSearch.search(inputValue)
+
+  if (result.length === 0 && inputValue.length > minLength) {
+    setOptions((prevItems) => [
+      ...prevItems,
+      {
+        label:`${inputValue} (Create new)`,
+        value:inputValue,
+      },
+    ])
+  }
+}

package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx

@@ -40,6 +40,8 @@ const QueryCombobox = ({
   desktopLabelSpan,
   inputSpan,
   desktopInputSpan,
+  placeholder,
+  promptCreateNewOption,
   // ...otherProps
 }) => {
   useInsertionEffect(() => {
@@ -102,6 +104,7 @@ const QueryCombobox = ({
     style,
     options,
     getOptions,
+    setOptions,
     debounceMs,
     disabled,
     name,
@@ -120,6 +123,8 @@ const QueryCombobox = ({
     desktopLabelSpan,
     inputSpan,
     desktopInputSpan,
+    placeholder,
+    promptCreateNewOption,
   }
 
   const Input = multiple ? MultipleCombobox : Combobox
@@ -252,6 +257,12 @@ QueryCombobox.propTypes = {
    * The number of columns the input should span on desktop
    */
   desktopInputSpan:PropTypes.number,
+
+  /**
+   * Whether to prompt the user to create a new option if the search input
+   * does not match any of the options
+   */
+  promptCreateNewOption:PropTypes.bool,
 }
 
 QueryCombobox.defaultProps = {
@@ -259,12 +270,13 @@ QueryCombobox.defaultProps = {
     value   :'id',
     getLabel:(node) => node.name,
   },
-  multiple       :false,
-  color          :'interactive',
-  searchVariable :'search',
-  transformSearch:(search) => search,
-  minLength      :2,
-  disabled       :false,
+  multiple             :false,
+  color                :'interactive',
+  searchVariable       :'search',
+  transformSearch      :(search) => search,
+  minLength            :2,
+  disabled             :false,
+  promptCreateNewOption:false,
 }
 
 export default QueryCombobox

package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx

@@ -15,7 +15,7 @@ import { Popover, LoadingCircle } from 'ui/a'
 
 import { Button } from 'ui/b'
 
-import { InputWrapper } from '../../../../common'
+import { InputWrapper, lookUpInputValueFromFetchedOptions } from '../../../../common'
 
 // Local Definitions
 
@@ -37,6 +37,7 @@ const Combobox = ({
   name,
   options:items,
   getOptions,
+  setOptions,
   setValue,
   description,
   value,
@@ -50,6 +51,8 @@ const Combobox = ({
   desktopLabelSpan,
   inputSpan,
   desktopInputSpan,
+  placeholder,
+  promptCreateNewOption,
   // ...otherProps
 }) => {
   const {
@@ -76,6 +79,14 @@ const Combobox = ({
     },
   })
 
+  useEffect(() => {
+    if (promptCreateNewOption) {
+      lookUpInputValueFromFetchedOptions({
+        items, inputValue, setOptions, minLength,
+      })
+    }
+  }, [inputValue, items, promptCreateNewOption])
+
   // If the user has selected an item, we'll set the value of the field
   // or if the combobox state has a selected item, we'll set the value to the formik state
   useEffect(() => {
@@ -124,7 +135,7 @@ const Combobox = ({
         columnSpan={inputSpan}
         desktopColumnSpan={desktopInputSpan}
       >
-        <input {...getInputProps()} className="input" disabled={disabled} />
+        <input {...getInputProps()} className="input" disabled={disabled} placeholder={placeholder} />
         {isFetching && (
           <LoadingCircle className="x-main" />
         )}
@@ -262,6 +273,11 @@ Combobox.propTypes = {
   * Whether the input is optional or not
   */
   optional:PropTypes.bool,
+
+  /**
+   * The placeholder text for the input
+   */
+  placeholder:PropTypes.string,
 }
 
 Combobox.defaultProps = {

package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx

@@ -15,7 +15,7 @@ import { Popover, LoadingCircle } from 'ui/a'
 
 import { FormDescription, FormLabel } from 'ui/f'
 
-import { InputWrapper } from '../../../../common'
+import { InputWrapper, lookUpInputValueFromFetchedOptions } from '../../../../common'
 
 // Local Definitions
 
@@ -60,7 +60,10 @@ const MultipleCombobox = ({
   labelSpan,
   desktopLabelSpan,
   inputSpan,
+  placeholder,
   desktopInputSpan,
+  setOptions,
+  promptCreateNewOption,
   // ...otherProps
 }) => {
   const [searchInputValue, setSearchInputValue] = useState('')
@@ -143,6 +146,14 @@ const MultipleCombobox = ({
     }
   }, [selectedItems])
 
+  useEffect(() => {
+    if (promptCreateNewOption) {
+      lookUpInputValueFromFetchedOptions({
+        items, inputValue, setOptions, minLength,
+      })
+    }
+  }, [inputValue, items, promptCreateNewOption])
+
   useEffect(() => {
     if (value?.length > 0 && (
       testIfArraysAreUnique(value, selectedItems)
@@ -220,6 +231,7 @@ const MultipleCombobox = ({
           )}
           className="input"
           disabled={disabled}
+          placeholder={placeholder}
         />
         {isFetching && (
           <LoadingCircle className="x-main" />
@@ -346,6 +358,11 @@ MultipleCombobox.propTypes = {
   * Whether the input is optional or not
   */
   optional:PropTypes.bool,
+
+  /**
+   * The placeholder text for the input
+   */
+  placeholder:PropTypes.string,
 }
 
 MultipleCombobox.defaultProps = {