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

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

@@ -35,7 +35,9 @@ const QueryCombobox = ({
   labelSpan,
   desktopLabelSpan,
   inputSpan,
-  desktopInputSpan
+  desktopInputSpan,
+  placeholder,
+  promptCreateNewOption
   // ...otherProps
 }) => {
   useInsertionEffect(() => {
@@ -96,6 +98,7 @@ const QueryCombobox = ({
     style,
     options,
     getOptions,
+    setOptions,
     debounceMs,
     disabled,
     name,
@@ -113,7 +116,9 @@ const QueryCombobox = ({
     labelSpan,
     desktopLabelSpan,
     inputSpan,
-    desktopInputSpan
+    desktopInputSpan,
+    placeholder,
+    promptCreateNewOption
   };
   const Input = multiple ? MultipleCombobox : Combobox;
   return /*#__PURE__*/React.createElement(Input, comboboxProps);
@@ -217,7 +222,12 @@ QueryCombobox.propTypes = {
   /**
    * The number of columns the input should span on desktop
    */
-  desktopInputSpan: PropTypes.number
+  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 = {
   optionsKeyMap: {
@@ -229,6 +239,7 @@ QueryCombobox.defaultProps = {
   searchVariable: 'search',
   transformSearch: search => search,
   minLength: 2,
-  disabled: false
+  disabled: false,
+  promptCreateNewOption: false
 };
 export default QueryCombobox;

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.58",
+  "version": "4.0.0-alpha.60",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,13 +51,14 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.54",
+    "@pareto-engineering/assets": "^4.0.0-alpha.59",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.57",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
     "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": "dcccc8b3170d8f1f27d4fbbe653aebdf4b5f829b"
+  "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/SnapScroller/SnapScroller.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
+import { useInsertionEffect, useState, useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -27,14 +27,34 @@ const SnapScroller = ({
   useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
+  const [isDragging, setIsDragging] = useState(false)
+  const [startX, setStartX] = useState(0)
+  const [startScrollX, setStartScrollX] = useState(0)
+  const ref = useRef(null)
+
+  const onMouseDown = (e) => {
+    setIsDragging(true)
+    setStartX(e.clientX)
+    setStartScrollX(ref.current.scrollLeft)
+  }
+
+  const onMouseUp = () => {
+    setIsDragging(false)
+  }
+
+  const onMouseMove = (e) => {
+    if (isDragging) {
+      const deltaX = e.clientX - startX
+      ref.current.scrollLeft = startScrollX - deltaX
+    }
+  }
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       id={id}
       className={[
-
         baseClassName,
-
         componentClassName,
         userClassName,
         noScrollOnDesktop && 'desktop-no-scroll',
@@ -42,6 +62,10 @@ const SnapScroller = ({
         .filter((e) => e)
         .join(' ')}
       style={style}
+      ref={ref}
+      onMouseDown={noScrollOnDesktop ? null : onMouseDown}
+      onMouseUp={noScrollOnDesktop ? null : onMouseUp}
+      onMouseMove={noScrollOnDesktop ? null : onMouseMove}
       // {...otherProps}
     >
       {children}

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 = {