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

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useState, useInsertionEffect } from 'react'
+import { useState } from 'react'
 
 import { useField } from 'formik'
 
@@ -9,6 +9,8 @@ import { useRelayEnvironment, fetchQuery } from 'react-relay'
 
 import PropTypes from 'prop-types'
 
+import './styles.scss'
+
 // Local Definitions
 
 import { Combobox, MultipleCombobox } from './common'
@@ -40,12 +42,10 @@ const QueryCombobox = ({
   desktopLabelSpan,
   inputSpan,
   desktopInputSpan,
+  placeholder,
+  promptCreateNewOption,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [, meta, helpers] = useField({ name, validate })
 
   const { setValue, setError } = helpers
@@ -102,6 +102,7 @@ const QueryCombobox = ({
     style,
     options,
     getOptions,
+    setOptions,
     debounceMs,
     disabled,
     name,
@@ -120,6 +121,8 @@ const QueryCombobox = ({
     desktopLabelSpan,
     inputSpan,
     desktopInputSpan,
+    placeholder,
+    promptCreateNewOption,
   }
 
   const Input = multiple ? MultipleCombobox : Combobox
@@ -252,6 +255,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 +268,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 = {

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useState, useInsertionEffect, memo } from 'react'
+import { useState, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -12,6 +12,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 import { Rating } from './common'
 import { FormLabel, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'ratings-input'
@@ -39,10 +41,6 @@ const RatingsInput = ({
   desktopInputSpan,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [hover, setHover] = useState(null)
 
   return (

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 
 import { useField } from 'formik'
 
@@ -13,6 +13,8 @@ import { LoadingCircle } from 'ui/a'
 
 import { FormLabel, FormDescription, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -43,10 +45,6 @@ const SelectInput = ({
   desktopInputSpan,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
 
   return (

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -11,6 +11,8 @@ import { useField } from 'formik'
 
 import { FormLabel, FormDescription, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -42,10 +44,6 @@ const TextInput = ({
   symbol,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
   const symbolStyle = symbol
     ? { '--symbol': symbol }

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -13,6 +13,8 @@ import { useField } from 'formik'
 
 import { FormLabel, FormDescription, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'text-area-input'
@@ -42,10 +44,6 @@ const TextareaInput = ({
   desktopInputSpan,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
 
   return (

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -13970,7 +13970,6 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
     </span>
     <button
       className="base toggle-switch"
-      onClick={[Function]}
       style={
         {
           "--size": undefined,
@@ -13981,6 +13980,7 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
       <input
         checked={false}
         id="switch"
+        onChange={[Function]}
         type="checkbox"
       />
       <label
@@ -20127,7 +20127,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New Options 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -20142,8 +20142,8 @@ exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
       id="downshift-4-label"
       style={
         {
-          "--column-span": 4,
-          "--column-span-md": 4,
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
         }
       }
     >
@@ -20153,8 +20153,8 @@ exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
       className="base input-wrapper base multiple-combobox"
       style={
         {
-          "--column-span": 4,
-          "--column-span-md": 10,
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
         }
       }
     >
@@ -20210,7 +20210,7 @@ exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
+exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -20220,25 +20220,24 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
     className="grid"
   >
     <label
-      className="base form-label x-paragraph"
-      htmlFor="team"
+      className="base form-label base multiple-combobox x-paragraph"
+      htmlFor="teams"
       id="downshift-5-label"
       style={
         {
-          "--column-span": "var(--columns)",
-          "--column-span-md": "var(--columns)",
+          "--column-span": 4,
+          "--column-span-md": 4,
         }
       }
     >
       Search for a team
-       (Optional)
     </label>
     <div
-      className="base input-wrapper base combobox y-interactive"
+      className="base input-wrapper base multiple-combobox"
       style={
         {
-          "--column-span": "var(--columns)",
-          "--column-span-md": "var(--columns)",
+          "--column-span": 4,
+          "--column-span-md": 10,
         }
       }
     >
@@ -20252,6 +20251,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
         id="downshift-5-input"
         onBlur={[Function]}
         onChange={[Function]}
+        onClick={[Function]}
         onKeyDown={[Function]}
         value=""
       />
@@ -20286,14 +20286,14 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
         onClick={[Function]}
         type="button"
       >
-        Replace formik value
+        Add formik values
       </button>
     </div>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -20314,6 +20314,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
       }
     >
       Search for a team
+       (Optional)
     </label>
     <div
       className="base input-wrapper base combobox y-interactive"
@@ -20375,7 +20376,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -20417,6 +20418,88 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
         onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
+        value=""
+      />
+      <div
+        className="base popover x-background-near bottom left"
+      >
+        <ul
+          aria-labelledby="downshift-7-label"
+          className="base menu y-interactive"
+          id="downshift-7-menu"
+          onMouseLeave={[Function]}
+          role="listbox"
+        />
+      </div>
+    </div>
+    <div
+      className="container"
+    >
+      <div
+        className="debugger"
+      >
+        <button
+          className="base button x-main2"
+          onClick={[Function]}
+          type="button"
+        >
+          Open FormDebugger
+        </button>
+      </div>
+      <button
+        className="base button x-main"
+        onClick={[Function]}
+        type="button"
+      >
+        Replace formik value
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="team"
+      id="downshift-8-label"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      Search for a team
+    </label>
+    <div
+      className="base input-wrapper base combobox y-interactive"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-8-menu"
+        aria-labelledby="downshift-8-label"
+        autoComplete="off"
+        className="input"
+        disabled={false}
+        id="downshift-8-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
         value="Apple"
       />
       <button
@@ -20438,9 +20521,175 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
         className="base popover x-background-near bottom left"
       >
         <ul
-          aria-labelledby="downshift-7-label"
+          aria-labelledby="downshift-8-label"
           className="base menu y-interactive"
-          id="downshift-7-menu"
+          id="downshift-8-menu"
+          onMouseLeave={[Function]}
+          role="listbox"
+        />
+      </div>
+    </div>
+    <div
+      className="container"
+    >
+      <div
+        className="debugger"
+      >
+        <button
+          className="base button x-main2"
+          onClick={[Function]}
+          type="button"
+        >
+          Open FormDebugger
+        </button>
+      </div>
+      <button
+        className="base button x-main"
+        onClick={[Function]}
+        type="button"
+      >
+        Replace formik value
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox With Placeholder 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="team"
+      id="downshift-9-label"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      Search for a team
+    </label>
+    <div
+      className="base input-wrapper base combobox y-interactive"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-9-menu"
+        aria-labelledby="downshift-9-label"
+        autoComplete="off"
+        className="input"
+        disabled={false}
+        id="downshift-9-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Search for a team"
+        value=""
+      />
+      <div
+        className="base popover x-background-near bottom left"
+      >
+        <ul
+          aria-labelledby="downshift-9-label"
+          className="base menu y-interactive"
+          id="downshift-9-menu"
+          onMouseLeave={[Function]}
+          role="listbox"
+        />
+      </div>
+    </div>
+    <div
+      className="container"
+    >
+      <div
+        className="debugger"
+      >
+        <button
+          className="base button x-main2"
+          onClick={[Function]}
+          type="button"
+        >
+          Open FormDebugger
+        </button>
+      </div>
+      <button
+        className="base button x-main"
+        onClick={[Function]}
+        type="button"
+      >
+        Replace formik value
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox With Prompt To Create New Option 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="team"
+      id="downshift-10-label"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      Search for a team
+    </label>
+    <div
+      className="base input-wrapper base combobox y-interactive"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-10-menu"
+        aria-labelledby="downshift-10-label"
+        autoComplete="off"
+        className="input"
+        disabled={false}
+        id="downshift-10-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Search for a team"
+        value=""
+      />
+      <div
+        className="base popover x-background-near bottom left"
+      >
+        <ul
+          aria-labelledby="downshift-10-label"
+          className="base menu y-interactive"
+          id="downshift-10-menu"
           onMouseLeave={[Function]}
           role="listbox"
         />