@pareto-engineering/design-system 2.0.0-alpha.45 → 2.0.0-alpha.46

package/dist/cjs/f/FormInput/FormInput.js

@@ -67,6 +67,13 @@ var FormInput = _ref => {
     }, otherProps));
   }
 
+  if (type === 'query-combobox') {
+    return /*#__PURE__*/React.createElement(_fields.QueryCombobox, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
   if (extraTypes !== null && extraTypes !== void 0 && extraTypes[type]) {
     var Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({
@@ -91,7 +98,7 @@ FormInput.propTypes = {
   /**
    * The HTML class names for this element
    */
-  type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', // to be removed
+  type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', // to be removed
   'extendedTypeInput']),
 
   /**

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

@@ -32,6 +32,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var QueryCombobox = _ref => {
   var {
+    id,
+    style,
+    className,
     query,
     // multiple,
     name,
@@ -98,6 +101,8 @@ var QueryCombobox = _ref => {
   };
 
   var comboboxProps = {
+    id,
+    style,
     options,
     getOptions,
     debounceMs,
@@ -108,7 +113,9 @@ var QueryCombobox = _ref => {
     setValue,
     error,
     value,
-    color
+    color,
+    isFetching,
+    className
   };
   var Input = _common.Combobox;
   return /*#__PURE__*/React.createElement(Input, comboboxProps);

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

@@ -46,7 +46,9 @@ var Combobox = _ref => {
     error,
     description,
     value,
-    color // ...otherProps
+    color,
+    loadingCircleColor,
+    isFetching // ...otherProps
 
   } = _ref;
   var {
@@ -86,7 +88,7 @@ var Combobox = _ref => {
   var parentRef = (0, React.useRef)(null);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "y-".concat(color), "x-".concat(loadingCircleColor)].filter(e => e).join(' '),
     style: style,
     ref: parentRef
   }, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
@@ -95,7 +97,7 @@ var Combobox = _ref => {
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
     className: "input"
-  }))), /*#__PURE__*/React.createElement(_a.Popover, {
+  })), isFetching && /*#__PURE__*/React.createElement(_a.LoadingCircle, null)), /*#__PURE__*/React.createElement(_a.Popover, {
     isOpen: isOpen,
     parentRef: parentRef
   }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
@@ -173,9 +175,20 @@ Combobox.propTypes = {
   /**
    * The base color of the combobox custom select input
    */
-  color: _propTypes.default.string
+  color: _propTypes.default.string,
+
+  /**
+   * Whether the query getting the combobox options is inFlight
+   */
+  isFetching: _propTypes.default.bool.isRequired,
+
+  /**
+   * The loading circle color
+   */
+  loadingCircleColor: _propTypes.default.string
 };
-Combobox.defaultProps = {// someProp:false
+Combobox.defaultProps = {
+  loadingCircleColor: 'main2'
 };
 var _default = Combobox;
 exports.default = _default;

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

@@ -15,6 +15,8 @@ var _downshift = require("downshift");
 
 var _b = require("../../../../../b");
 
+var _a = require("../../../../../a");
+
 var _ = require("../../../..");
 
 var _Menu = require("../Menu");
@@ -35,10 +37,19 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var baseClassName = _bem.default.base;
 var componentClassName = 'multiple-combobox';
+/**
+ *  @param {Array[Object]} first - first array to check if it has an item not in the second array.
+ *  @param {Array[Object]} second - second array to check against the first array.
+ *
+ * @returns {Boolean} - true if the first array has an item not in the second array.
+ */
+
+var testIfArraysAreUnique = (first, second) => first.filter(objInFirstArray => !second.some(objInSecondArray => objInFirstArray.value === objInSecondArray.value)).length > 0;
 /**
  * This is the component description.
  */
 
+
 var MultipleCombobox = _ref => {
   var {
     id,
@@ -47,22 +58,29 @@ var MultipleCombobox = _ref => {
     label,
     name,
     options: items,
-    fetchOptions,
+    getOptions,
     setValue,
     error,
-    description // ...otherProps
+    description,
+    value,
+    color,
+    isFetching,
+    loadingCircleColor // ...otherProps
 
   } = _ref;
-  var [inputValue, setInputValue] = (0, React.useState)('');
+  var [searchInputValue, setSearchInputValue] = (0, React.useState)('');
   var {
     getSelectedItemProps,
     getDropdownProps,
     addSelectedItem,
     removeSelectedItem,
+    setSelectedItems,
     selectedItems
-  } = (0, _downshift.useMultipleSelection)();
+  } = (0, _downshift.useMultipleSelection)({
+    initialSelectedItems: value || []
+  });
 
-  var getFilteredItems = () => items.filter(item => selectedItems.findIndex(e => e.label === item.label) < 0 && item.label.toLowerCase().startsWith(inputValue.toLowerCase()));
+  var getFilteredItems = () => items.filter(item => selectedItems.findIndex(e => e.label === item.label) < 0 && item.label.toLowerCase().startsWith(searchInputValue.toLowerCase()));
 
   var {
     isOpen,
@@ -73,7 +91,7 @@ var MultipleCombobox = _ref => {
     highlightedIndex,
     getItemProps
   } = (0, _downshift.useCombobox)({
-    inputValue,
+    searchInputValue,
     defaultHighlightedIndex: 0,
     // after selection, highlight the first item.
     selectedItem: null,
@@ -101,22 +119,22 @@ var MultipleCombobox = _ref => {
     },
     onStateChange: _ref2 => {
       var {
-        inputValue: newInputValue,
+        inputValue: newSearchInputValue,
         type,
         selectedItem
       } = _ref2;
 
       switch (type) {
         case _downshift.useCombobox.stateChangeTypes.InputChange:
-          fetchOptions(newInputValue);
-          setInputValue(newInputValue);
+          getOptions(newSearchInputValue);
+          setSearchInputValue(newSearchInputValue);
           break;
 
         case _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
         case _downshift.useCombobox.stateChangeTypes.ItemClick:
         case _downshift.useCombobox.stateChangeTypes.InputBlur:
           if (selectedItem) {
-            setInputValue('');
+            setSearchInputValue('');
             addSelectedItem(selectedItem);
           }
 
@@ -128,16 +146,21 @@ var MultipleCombobox = _ref => {
     }
   });
   (0, React.useEffect)(() => {
-    if (selectedItems.length > 0) {
-      setValue(selectedItems.map(e => e.value));
+    if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0) {
+      setValue(selectedItems);
     }
   }, [selectedItems]);
+  (0, React.useEffect)(() => {
+    if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (testIfArraysAreUnique(value, selectedItems) || testIfArraysAreUnique(selectedItems, value))) {
+      setSelectedItems(value);
+    }
+  }, [value]);
+  var parentRef = (0, React.useRef)(null);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "y-".concat(color), "x-".concat(loadingCircleColor)].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
-    className: "input-label",
     name: name
   }), label), /*#__PURE__*/React.createElement("div", {
     className: "selected-items"
@@ -155,16 +178,21 @@ var MultipleCombobox = _ref => {
     isCompact: true,
     isSimple: true,
     color: "main2"
-  }, "X")))), /*#__PURE__*/React.createElement("div", getComboboxProps(), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
+  }, "X")))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
+    className: "input-wrapper"
+  }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
     preventKeyAction: isOpen
   })), {
     className: "input"
-  }))), /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
+  })), isFetching && /*#__PURE__*/React.createElement(_a.LoadingCircle, null)), /*#__PURE__*/React.createElement(_a.Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef
+  }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
     isOpen: isOpen,
     getItemProps: getItemProps,
     highlightedIndex: highlightedIndex,
     items: getFilteredItems()
-  }, getMenuProps())), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
+  }, getMenuProps()))), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
     isError: !!error
   }, error || description));
 };
@@ -206,7 +234,7 @@ MultipleCombobox.propTypes = {
   /**
    * The function to fetch the options from the backend
    */
-  fetchOptions: _propTypes.default.func,
+  getOptions: _propTypes.default.func,
 
   /**
    * The function to set the value of the custom select input
@@ -221,9 +249,33 @@ MultipleCombobox.propTypes = {
   /**
    * The error object
    */
-  error: _propTypes.default.objectOf(_propTypes.default.string)
+  error: _propTypes.default.objectOf(_propTypes.default.string),
+
+  /**
+   * The value of the custom select input
+   */
+  value: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.string,
+    label: _propTypes.default.string
+  })),
+
+  /**
+   * The base color of the custom select input
+   */
+  color: _propTypes.default.string,
+
+  /**
+   * Whether the query getting the combobox options is inFlight
+   */
+  isFetching: _propTypes.default.bool.isRequired,
+
+  /**
+   * The loading circle color
+   */
+  loadingCircleColor: _propTypes.default.string
 };
-MultipleCombobox.defaultProps = {// someProp:false
+MultipleCombobox.defaultProps = {
+  loadingCircleColor: 'main2'
 };
 var _default = MultipleCombobox;
 exports.default = _default;

package/dist/cjs/f/fields/QueryCombobox/styles.scss

@@ -5,11 +5,16 @@
 $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
+$default-loading-circle-displacement: 1em;
 
 .#{bem.$base}.combobox,
 .#{bem.$base}.multiple-combobox {
     position: relative;
 
+    .#{bem.$base}.label {
+        margin-bottom: $default-margin
+    }
+
     .#{bem.$base}.popover {
         width: 100%;
 
@@ -30,6 +35,14 @@ $default-margin: 1em;
     }
 
     >.input-wrapper {
+        position: relative;
+
+        >.#{bem.$base}.loading-circle {
+            position: absolute;
+            top: $default-loading-circle-displacement;
+            right: $default-loading-circle-displacement;
+        }
+
         >.input {
             background: var(--light-y);
             border: var(--theme-border-style) var(--dark-y);

package/dist/es/f/FormInput/FormInput.js

@@ -4,7 +4,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import * as React from 'react';
 import { memo, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput } from "../fields"; // Local Definitions
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox } from "../fields"; // Local Definitions
 // const baseClassName = styleNames.base
 
 const componentClassName = 'form-input';
@@ -45,6 +45,13 @@ const FormInput = ({
     }, otherProps));
   }
 
+  if (type === 'query-combobox') {
+    return /*#__PURE__*/React.createElement(QueryCombobox, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
   if (extraTypes !== null && extraTypes !== void 0 && extraTypes[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({
@@ -69,7 +76,7 @@ FormInput.propTypes = {
   /**
    * The HTML class names for this element
    */
-  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', // to be removed
+  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', // to be removed
   'extendedTypeInput']),
 
   /**

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

@@ -11,6 +11,9 @@ import { Combobox } from "./common";
  */
 
 const QueryCombobox = ({
+  id,
+  style,
+  className,
   query,
   // multiple,
   name,
@@ -76,6 +79,8 @@ const QueryCombobox = ({
   };
 
   const comboboxProps = {
+    id,
+    style,
     options,
     getOptions,
     debounceMs,
@@ -86,7 +91,9 @@ const QueryCombobox = ({
     setValue,
     error,
     value,
-    color
+    color,
+    isFetching,
+    className
   };
   const Input = Combobox;
   return /*#__PURE__*/React.createElement(Input, comboboxProps);

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

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { useCombobox } from 'downshift';
 import styleNames from '@pareto-engineering/bem';
 import { FormLabel, FormDescription } from "../../../..";
-import { Popover } from "../../../../../a"; // Local Definitions
+import { Popover, LoadingCircle } from "../../../../../a"; // Local Definitions
 
 import { Menu } from "../Menu";
 const baseClassName = styleNames.base;
@@ -28,7 +28,9 @@ const Combobox = ({
   error,
   description,
   value,
-  color // ...otherProps
+  color,
+  loadingCircleColor,
+  isFetching // ...otherProps
 
 }) => {
   const {
@@ -67,7 +69,7 @@ const Combobox = ({
   const parentRef = useRef(null);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, `x-${loadingCircleColor}`].filter(e => e).join(' '),
     style: style,
     ref: parentRef
   }, /*#__PURE__*/React.createElement(FormLabel, _extends({}, getLabelProps(), {
@@ -76,7 +78,7 @@ const Combobox = ({
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
     className: "input"
-  }))), /*#__PURE__*/React.createElement(Popover, {
+  })), isFetching && /*#__PURE__*/React.createElement(LoadingCircle, null)), /*#__PURE__*/React.createElement(Popover, {
     isOpen: isOpen,
     parentRef: parentRef
   }, /*#__PURE__*/React.createElement(Menu, _extends({
@@ -154,8 +156,19 @@ Combobox.propTypes = {
   /**
    * The base color of the combobox custom select input
    */
-  color: PropTypes.string
+  color: PropTypes.string,
+
+  /**
+   * Whether the query getting the combobox options is inFlight
+   */
+  isFetching: PropTypes.bool.isRequired,
+
+  /**
+   * The loading circle color
+   */
+  loadingCircleColor: PropTypes.string
 };
-Combobox.defaultProps = {// someProp:false
+Combobox.defaultProps = {
+  loadingCircleColor: 'main2'
 };
 export default Combobox;

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

@@ -2,20 +2,30 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem';
 import { useCombobox, useMultipleSelection } from 'downshift';
 import { Button } from "../../../../../b";
+import { Popover, LoadingCircle } from "../../../../../a";
 import { FormDescription, FormLabel } from "../../../.."; // Local Definitions
 
 import { Menu } from "../Menu";
 const baseClassName = styleNames.base;
 const componentClassName = 'multiple-combobox';
+/**
+ *  @param {Array[Object]} first - first array to check if it has an item not in the second array.
+ *  @param {Array[Object]} second - second array to check against the first array.
+ *
+ * @returns {Boolean} - true if the first array has an item not in the second array.
+ */
+
+const testIfArraysAreUnique = (first, second) => first.filter(objInFirstArray => !second.some(objInSecondArray => objInFirstArray.value === objInSecondArray.value)).length > 0;
 /**
  * This is the component description.
  */
 
+
 const MultipleCombobox = ({
   id,
   className: userClassName,
@@ -23,22 +33,29 @@ const MultipleCombobox = ({
   label,
   name,
   options: items,
-  fetchOptions,
+  getOptions,
   setValue,
   error,
-  description // ...otherProps
+  description,
+  value,
+  color,
+  isFetching,
+  loadingCircleColor // ...otherProps
 
 }) => {
-  const [inputValue, setInputValue] = useState('');
+  const [searchInputValue, setSearchInputValue] = useState('');
   const {
     getSelectedItemProps,
     getDropdownProps,
     addSelectedItem,
     removeSelectedItem,
+    setSelectedItems,
     selectedItems
-  } = useMultipleSelection();
+  } = useMultipleSelection({
+    initialSelectedItems: value || []
+  });
 
-  const getFilteredItems = () => items.filter(item => selectedItems.findIndex(e => e.label === item.label) < 0 && item.label.toLowerCase().startsWith(inputValue.toLowerCase()));
+  const getFilteredItems = () => items.filter(item => selectedItems.findIndex(e => e.label === item.label) < 0 && item.label.toLowerCase().startsWith(searchInputValue.toLowerCase()));
 
   const {
     isOpen,
@@ -49,7 +66,7 @@ const MultipleCombobox = ({
     highlightedIndex,
     getItemProps
   } = useCombobox({
-    inputValue,
+    searchInputValue,
     defaultHighlightedIndex: 0,
     // after selection, highlight the first item.
     selectedItem: null,
@@ -76,21 +93,21 @@ const MultipleCombobox = ({
       return changes;
     },
     onStateChange: ({
-      inputValue: newInputValue,
+      inputValue: newSearchInputValue,
       type,
       selectedItem
     }) => {
       switch (type) {
         case useCombobox.stateChangeTypes.InputChange:
-          fetchOptions(newInputValue);
-          setInputValue(newInputValue);
+          getOptions(newSearchInputValue);
+          setSearchInputValue(newSearchInputValue);
           break;
 
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
         case useCombobox.stateChangeTypes.InputBlur:
           if (selectedItem) {
-            setInputValue('');
+            setSearchInputValue('');
             addSelectedItem(selectedItem);
           }
 
@@ -102,16 +119,21 @@ const MultipleCombobox = ({
     }
   });
   useEffect(() => {
-    if (selectedItems.length > 0) {
-      setValue(selectedItems.map(e => e.value));
+    if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0) {
+      setValue(selectedItems);
     }
   }, [selectedItems]);
+  useEffect(() => {
+    if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (testIfArraysAreUnique(value, selectedItems) || testIfArraysAreUnique(selectedItems, value))) {
+      setSelectedItems(value);
+    }
+  }, [value]);
+  const parentRef = useRef(null);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, `x-${loadingCircleColor}`].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement(FormLabel, _extends({}, getLabelProps(), {
-    className: "input-label",
     name: name
   }), label), /*#__PURE__*/React.createElement("div", {
     className: "selected-items"
@@ -129,16 +151,21 @@ const MultipleCombobox = ({
     isCompact: true,
     isSimple: true,
     color: "main2"
-  }, "X")))), /*#__PURE__*/React.createElement("div", getComboboxProps(), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
+  }, "X")))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
+    className: "input-wrapper"
+  }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
     preventKeyAction: isOpen
   })), {
     className: "input"
-  }))), /*#__PURE__*/React.createElement(Menu, _extends({
+  })), isFetching && /*#__PURE__*/React.createElement(LoadingCircle, null)), /*#__PURE__*/React.createElement(Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef
+  }, /*#__PURE__*/React.createElement(Menu, _extends({
     isOpen: isOpen,
     getItemProps: getItemProps,
     highlightedIndex: highlightedIndex,
     items: getFilteredItems()
-  }, getMenuProps())), (description || error) && /*#__PURE__*/React.createElement(FormDescription, {
+  }, getMenuProps()))), (description || error) && /*#__PURE__*/React.createElement(FormDescription, {
     isError: !!error
   }, error || description));
 };
@@ -180,7 +207,7 @@ MultipleCombobox.propTypes = {
   /**
    * The function to fetch the options from the backend
    */
-  fetchOptions: PropTypes.func,
+  getOptions: PropTypes.func,
 
   /**
    * The function to set the value of the custom select input
@@ -195,8 +222,32 @@ MultipleCombobox.propTypes = {
   /**
    * The error object
    */
-  error: PropTypes.objectOf(PropTypes.string)
+  error: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The value of the custom select input
+   */
+  value: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })),
+
+  /**
+   * The base color of the custom select input
+   */
+  color: PropTypes.string,
+
+  /**
+   * Whether the query getting the combobox options is inFlight
+   */
+  isFetching: PropTypes.bool.isRequired,
+
+  /**
+   * The loading circle color
+   */
+  loadingCircleColor: PropTypes.string
 };
-MultipleCombobox.defaultProps = {// someProp:false
+MultipleCombobox.defaultProps = {
+  loadingCircleColor: 'main2'
 };
 export default MultipleCombobox;

package/dist/es/f/fields/QueryCombobox/styles.scss

@@ -5,11 +5,16 @@
 $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
+$default-loading-circle-displacement: 1em;
 
 .#{bem.$base}.combobox,
 .#{bem.$base}.multiple-combobox {
     position: relative;
 
+    .#{bem.$base}.label {
+        margin-bottom: $default-margin
+    }
+
     .#{bem.$base}.popover {
         width: 100%;
 
@@ -30,6 +35,14 @@ $default-margin: 1em;
     }
 
     >.input-wrapper {
+        position: relative;
+
+        >.#{bem.$base}.loading-circle {
+            position: absolute;
+            top: $default-loading-circle-displacement;
+            right: $default-loading-circle-displacement;
+        }
+
         >.input {
             background: var(--light-y);
             border: var(--theme-border-style) var(--dark-y);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.45",
+  "version": "2.0.0-alpha.46",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

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

@@ -10637,6 +10637,161 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/FormInput With Query Combobox 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-input form-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base choices-input form-input x-background2 y-main2"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main2"
+    >
+      What are your favourite colors ?
+    </p>
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-red"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
+        <label
+          htmlFor="undefined-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-blue"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
+        <label
+          htmlFor="undefined-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-green"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
+        <label
+          htmlFor="undefined-green"
+        >
+          Color Green
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="base combobox form-input y-background2 x-main2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-0-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-0-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-0-menu"
+        aria-labelledby="downshift-0-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-0-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-0-label"
+        className="base menu"
+        id="downshift-0-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/common/Description Base 1`] = `
 <div
   className="base description x-metadata"
@@ -11205,29 +11360,29 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base combobox y-background2"
+    className="base combobox y-background2 x-main2"
   >
     <label
       className="base label x-main2"
       htmlFor="team"
-      id="downshift-0-label"
+      id="downshift-1-label"
     >
       Search for a team
     </label>
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-0-menu"
+      aria-owns="downshift-1-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-0-menu"
-        aria-labelledby="downshift-0-label"
+        aria-controls="downshift-1-menu"
+        aria-labelledby="downshift-1-label"
         autoComplete="off"
         className="input"
-        id="downshift-0-input"
+        id="downshift-1-input"
         onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
@@ -11238,9 +11393,9 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-0-label"
+        aria-labelledby="downshift-1-label"
         className="base menu"
-        id="downshift-0-menu"
+        id="downshift-1-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />
@@ -11284,29 +11439,29 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
   onSubmit={[Function]}
 >
   <div
-    className="base combobox y-background2"
+    className="base combobox y-background2 x-main2"
   >
     <label
       className="base label x-main2"
       htmlFor="team"
-      id="downshift-1-label"
+      id="downshift-2-label"
     >
       Search for a team
     </label>
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-1-menu"
+      aria-owns="downshift-2-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-1-menu"
-        aria-labelledby="downshift-1-label"
+        aria-controls="downshift-2-menu"
+        aria-labelledby="downshift-2-label"
         autoComplete="off"
         className="input"
-        id="downshift-1-input"
+        id="downshift-2-input"
         onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
@@ -11317,9 +11472,9 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-1-label"
+        aria-labelledby="downshift-2-label"
         className="base menu"
-        id="downshift-1-menu"
+        id="downshift-2-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />

package/src/stories/f/FormInput.stories.jsx

@@ -8,6 +8,15 @@ import {
   FormDebugger,
 } from 'ui'
 
+import { fruits } from '../utils/testData'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+} from '../utils/relay'
+
+import generateNodeId from '../utils/generateNodeId'
+
 export default {
   title        :'f/FormInput',
   component    :FormInput,
@@ -25,6 +34,11 @@ export default {
         </Form>
       </Formik>
     ),
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
   ],
   argTypes:{
     backgroundColor:{ control: 'color' },
@@ -99,6 +113,107 @@ export const Base = () => {
   )
 }
 
+const allTeamsMockData = {
+  PageInfo() {
+    return {
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    }
+  },
+  TeamNodeConnection:(args) => {
+    const edges = fruits.map((fruit) => ({
+      node:{
+        id  :generateNodeId('TeamNode'),
+        name:fruit,
+      },
+    }))
+
+    // eslint-disable-next-line camelcase
+    const { name_Icontains } = args?.args || {}
+
+    return ({
+      pageInfo:{
+        hasNextPage    :true,
+        hasPreviousPage:true,
+      },
+      // eslint-disable-next-line camelcase
+      edges:name_Icontains?.trim()
+        ? edges.filter(({ node }) => node.name
+          .toLowerCase()
+          .includes(name_Icontains.toLowerCase()))
+        : [],
+    })
+  },
+}
+
+const FETCH_TEAMS_QUERY = graphql`
+  query FormInputAllTeamsQuery($name_Icontains: String) {
+    allTeams(name_Icontains: $name_Icontains) {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`
+
+export const WithQueryCombobox = () => {
+  const inputMap = [
+    {
+      type :'text',
+      name :'firstName',
+      label:"What's your first name ?",
+    },
+    {
+      type   :'choices',
+      name   :'colors',
+      label  :'What are your favourite colors ?',
+      options:[
+        {
+          value:'red',
+          label:'Color Red',
+        },
+        {
+          value:'blue',
+          label:'Color Blue',
+        },
+        {
+          value:'green',
+          label:'Color Green',
+        },
+      ],
+    },
+    {
+      type         :'query-combobox',
+      name         :'team',
+      query        :FETCH_TEAMS_QUERY,
+      label        :'Search for a team',
+      optionsKeyMap:{
+        value:'id',
+        label:'name',
+      },
+      graphQlNode   :'allTeams',
+      searchVariable:'name_Icontains',
+    },
+  ]
+
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}
+
 export const ExtensibleFormInput = () => {
   const ExtendedTextInput = (props) => (
     <TextInput

package/src/stories/f/__generated__/FormInputAllTeamsQuery.graphql.js

@@ -0,0 +1,139 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type FormInputAllTeamsQueryVariables = {|
+  name_Icontains?: ?string
+|};
+export type FormInputAllTeamsQueryResponse = {|
+  +allTeams: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +name: string,
+      |}
+    |}>
+  |}
+|};
+export type FormInputAllTeamsQuery = {|
+  variables: FormInputAllTeamsQueryVariables,
+  response: FormInputAllTeamsQueryResponse,
+|};
+*/
+
+
+/*
+query FormInputAllTeamsQuery(
+  $name_Icontains: String
+) {
+  allTeams(name_Icontains: $name_Icontains) {
+    edges {
+      node {
+        id
+        name
+      }
+    }
+  }
+}
+*/
+
+const node/*: ConcreteRequest*/ = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "name_Icontains"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "name_Icontains",
+        "variableName": "name_Icontains"
+      }
+    ],
+    "concreteType": "TeamNodeConnection",
+    "kind": "LinkedField",
+    "name": "allTeams",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "TeamNodeEdge",
+        "kind": "LinkedField",
+        "name": "edges",
+        "plural": true,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "TeamNode",
+            "kind": "LinkedField",
+            "name": "node",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "id",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "name",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "FormInputAllTeamsQuery",
+    "selections": (v1/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "FormInputAllTeamsQuery",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "dc9287c6d087d0f0e1be2e8ef405cb1f",
+    "id": null,
+    "metadata": {},
+    "name": "FormInputAllTeamsQuery",
+    "operationKind": "query",
+    "text": "query FormInputAllTeamsQuery(\n  $name_Icontains: String\n) {\n  allTeams(name_Icontains: $name_Icontains) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = 'c76b6f84436895e8a6d0725bdd41cfe0';
+
+module.exports = node;

package/src/ui/f/FormInput/FormInput.jsx

@@ -10,6 +10,7 @@ import {
   TextareaInput,
   ChoicesInput,
   SelectInput,
+  QueryCombobox,
 } from '../fields'
 
 // Local Definitions
@@ -64,6 +65,15 @@ const FormInput = ({
       />
     )
   }
+  if (type === 'query-combobox') {
+    return (
+      <QueryCombobox
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type]
     return (
@@ -106,6 +116,7 @@ FormInput.propTypes = {
     'select',
     'choices',
     'textarea',
+    'query-combobox',
     // to be removed
     'extendedTypeInput',
   ]),

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

@@ -17,6 +17,9 @@ import { Combobox } from './common'
  * This is the component description.
  */
 const QueryCombobox = ({
+  id,
+  style,
+  className,
   query,
   // multiple,
   name,
@@ -85,6 +88,8 @@ const QueryCombobox = ({
   }
 
   const comboboxProps = {
+    id,
+    style,
     options,
     getOptions,
     debounceMs,
@@ -96,6 +101,8 @@ const QueryCombobox = ({
     error,
     value,
     color,
+    isFetching,
+    className,
   }
 
   const Input = Combobox

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

@@ -11,7 +11,7 @@ import styleNames from '@pareto-engineering/bem'
 
 import { FormLabel, FormDescription } from 'ui/f'
 
-import { Popover } from 'ui/a'
+import { Popover, LoadingCircle } from 'ui/a'
 
 // Local Definitions
 
@@ -37,6 +37,8 @@ const Combobox = ({
   description,
   value,
   color,
+  loadingCircleColor,
+  isFetching,
   // ...otherProps
 }) => {
   const {
@@ -85,6 +87,7 @@ const Combobox = ({
         componentClassName,
         userClassName,
         `y-${color}`,
+        `x-${loadingCircleColor}`,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -97,6 +100,9 @@ const Combobox = ({
 
       <div {...getComboboxProps()} className="input-wrapper">
         <input {...getInputProps()} className="input" />
+        {isFetching && (
+        <LoadingCircle />
+        )}
       </div>
 
       <Popover
@@ -189,10 +195,20 @@ Combobox.propTypes = {
    * The base color of the combobox custom select input
    */
   color:PropTypes.string,
+
+  /**
+   * Whether the query getting the combobox options is inFlight
+   */
+  isFetching:PropTypes.bool.isRequired,
+
+  /**
+   * The loading circle color
+   */
+  loadingCircleColor:PropTypes.string,
 }
 
 Combobox.defaultProps = {
-  // someProp:false
+  loadingCircleColor:'main2',
 }
 
 export default Combobox

package/src/ui/f/fields/QueryCombobox/styles.scss

@@ -5,11 +5,16 @@
 $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
+$default-loading-circle-displacement: 1em;
 
 .#{bem.$base}.combobox,
 .#{bem.$base}.multiple-combobox {
     position: relative;
 
+    .#{bem.$base}.label {
+        margin-bottom: $default-margin
+    }
+
     .#{bem.$base}.popover {
         width: 100%;
 
@@ -30,6 +35,14 @@ $default-margin: 1em;
     }
 
     >.input-wrapper {
+        position: relative;
+
+        >.#{bem.$base}.loading-circle {
+            position: absolute;
+            top: $default-loading-circle-displacement;
+            right: $default-loading-circle-displacement;
+        }
+
         >.input {
             background: var(--light-y);
             border: var(--theme-border-style) var(--dark-y);