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

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

@@ -7,12 +7,12 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
+var _formik = require("formik");
+
 var _reactRelay = require("react-relay");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
 var _common = require("./common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,19 +27,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var baseClassName = _bem.default.base;
-var componentClassName = 'query-combobox';
 /**
  * This is the component description.
  */
-
 var QueryCombobox = _ref => {
   var {
-    id,
-    className: userClassName,
-    style,
     query,
-    multiple,
+    // multiple,
     name,
     label,
     color,
@@ -49,34 +43,45 @@ var QueryCombobox = _ref => {
     graphQlNode,
     searchVariable,
     extraVariables,
-    optionsKeyMap,
-    setValue,
-    setError,
-    error // ...otherProps
+    optionsKeyMap // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
+  var [, meta, helpers] = (0, _formik.useField)(name);
+  var {
+    setValue,
+    setError
+  } = helpers;
+  var {
+    error,
+    value
+  } = meta;
   var environment = (0, _reactRelay.useRelayEnvironment)();
   var [isFetching, setIsFetching] = (0, React.useState)(false);
   var [options, setOptions] = (0, React.useState)([]);
 
-  var fetchOptions = inputValue => {
+  var getOptions = inputValue => {
     if (isFetching) return;
-    (0, _reactRelay.fetchQuery)(environment, query, _objectSpread({
+    var variables = {
       [searchVariable]: inputValue
-    }, extraVariables)).subscribe({
+    };
+
+    if (extraVariables) {
+      variables = _objectSpread(_objectSpread({}, variables), extraVariables);
+    }
+
+    (0, _reactRelay.fetchQuery)(environment, query, variables).subscribe({
       start: () => {
         setIsFetching(true);
       },
       complete: () => {
         setIsFetching(false);
       },
-      error: theError => {
-        console.log(theError);
+      error: fetchError => {
         setIsFetching(false);
-        if (setError) setError(theError);
+        if (setError) setError(fetchError.message);
       },
       next: data => {
         setOptions(data[graphQlNode].edges.map(_ref2 => {
@@ -94,22 +99,19 @@ var QueryCombobox = _ref => {
 
   var comboboxProps = {
     options,
-    fetchOptions,
+    getOptions,
     debounceMs,
     disabled,
     name,
     label,
     description,
     setValue,
-    error
+    error,
+    value,
+    color
   };
-  var Component = multiple ? _common.MultipleCombobox : _common.Combobox;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement(Component, comboboxProps));
+  var Input = _common.Combobox;
+  return /*#__PURE__*/React.createElement(Input, comboboxProps);
 };
 
 QueryCombobox.propTypes = {
@@ -138,11 +140,6 @@ QueryCombobox.propTypes = {
    */
   label: _propTypes.default.string,
 
-  /**
-   * The input field validator function
-   */
-  validate: _propTypes.default.func,
-
   /**
    * The custom select input description
    */
@@ -180,7 +177,7 @@ QueryCombobox.propTypes = {
   optionsKeyMap: _propTypes.default.shape({
     value: _propTypes.default.string.isRequired,
     label: _propTypes.default.string.isRequired
-  }).isRequired,
+  }),
 
   /**
    * Whether to allow multiple items selection
@@ -195,25 +192,13 @@ QueryCombobox.propTypes = {
   /**
    * The variable to be used to search the data
    */
-  searchVariable: _propTypes.default.string,
-
-  /**
-   * The function to be called when the value changes
-   */
-  setValue: _propTypes.default.func.isRequired,
-
-  /**
-   * The function to be called with an error when the it occurs
-   */
-  setError: _propTypes.default.func,
-
-  /**
-   * The error object
-   */
-  error: _propTypes.default.objectOf(_propTypes.default.string)
+  searchVariable: _propTypes.default.string
 };
 QueryCombobox.defaultProps = {
-  extraVariables: {},
+  optionsKeyMap: {
+    value: 'id',
+    label: 'name'
+  },
   multiple: false,
   color: 'background2',
   searchVariable: 'search'

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

@@ -15,6 +15,8 @@ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
 var _ = require("../../../..");
 
+var _a = require("../../../../../a");
+
 var _Menu = require("../Menu");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,14 +41,17 @@ var Combobox = _ref => {
     label,
     name,
     options: items,
-    fetchOptions,
+    getOptions,
     setValue,
     error,
-    description // ...otherProps
+    description,
+    value,
+    color // ...otherProps
 
   } = _ref;
   var {
     isOpen,
+    selectItem,
     selectedItem,
     getLabelProps,
     getMenuProps,
@@ -56,34 +61,49 @@ var Combobox = _ref => {
     getItemProps
   } = (0, _downshift.useCombobox)({
     items,
+    initialSelectedItem: value,
     itemToString: item => item ? item.label : '',
     onInputValueChange: _ref2 => {
       var {
         inputValue
       } = _ref2;
-      fetchOptions(inputValue);
+      getOptions(inputValue);
     }
-  });
+  }); // 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
+
   (0, React.useEffect)(() => {
     if (selectedItem) {
-      setValue(selectedItem.value);
+      setValue(selectedItem);
     }
-  }, [selectedItem]);
+  }, [selectedItem]); // If the formik state has a value, we'll set the selected item to the combobox state
+
+  (0, React.useEffect)(() => {
+    if ((value === null || value === void 0 ? void 0 : value.value) !== (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value)) {
+      selectItem(value);
+    }
+  }, [value]);
+  var parentRef = (0, React.useRef)(null);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
+    className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
+    style: style,
+    ref: parentRef
   }, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
-    className: "input-label",
     name: name
-  }), label), /*#__PURE__*/React.createElement("div", getComboboxProps(), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
+  }), label), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
+    className: "input-wrapper"
+  }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
     className: "input"
-  }))), /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
+  }))), /*#__PURE__*/React.createElement(_a.Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef
+  }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
     isOpen: isOpen,
     getItemProps: getItemProps,
     highlightedIndex: highlightedIndex,
     items: items
-  }, getMenuProps())), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
+  }, getMenuProps()))), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
     isError: !!error
   }, error || description));
 };
@@ -125,7 +145,7 @@ Combobox.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
@@ -140,7 +160,20 @@ Combobox.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.shape({
+    value: _propTypes.default.string,
+    label: _propTypes.default.string
+  }),
+
+  /**
+   * The base color of the combobox custom select input
+   */
+  color: _propTypes.default.string
 };
 Combobox.defaultProps = {// someProp:false
 };

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

@@ -55,7 +55,7 @@ var Menu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     item,
     index
   }), {
-    className: "item ".concat(highlightedIndex === index ? _bem.default.modifierActive : '')
+    className: ['item', highlightedIndex === index && _bem.default.modifierActive].filter(Boolean).join(' ')
   }), /*#__PURE__*/React.createElement("p", null, item.label))));
 });
 Menu.propTypes = {

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

@@ -15,15 +15,7 @@ Object.defineProperty(exports, "Combobox", {
     return _Combobox.Combobox;
   }
 });
-Object.defineProperty(exports, "MultipleCombobox", {
-  enumerable: true,
-  get: function get() {
-    return _MultipleCombobox.MultipleCombobox;
-  }
-});
 
 var _Menu = require("./Menu");
 
-var _Combobox = require("./Combobox");
-
-var _MultipleCombobox = require("./MultipleCombobox");
+var _Combobox = require("./Combobox");

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

@@ -6,60 +6,66 @@ $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
 
-.#{bem.$base}.query-combobox {
-    .input {
-        background: var(--light-y);
-        border: var(--theme-border-style) var(--dark-y);
-        color: var(--on-y);
-        padding: $default-input-padding;
+.#{bem.$base}.combobox,
+.#{bem.$base}.multiple-combobox {
+    position: relative;
+
+    .#{bem.$base}.popover {
         width: 100%;
 
-        &::placeholder {
-            color: var(--metadata);
-        }
+        >.menu {
+            list-style: none;
+            margin: 0;
+            outline: 0;
+            padding: 0;
 
-        &:not(:disabled):hover {
-            border: var(--theme-border-style) var(--light-background4);
-        }
-
-        &:disabled {
-            background-color: var(--dark-y);
-        }
+            >.item {
+                padding: $default-padding / 2;
 
-        &:focus {
-            background: var(--light-background4);
+                &.#{bem.$modifier-active} {
+                    background-color: var(--background2);
+                }
+            }
         }
     }
 
-    .menu {
-        list-style: none;
-        margin: 0;
-        outline: 0;
-        padding: 0;
+    >.input-wrapper {
+        >.input {
+            background: var(--light-y);
+            border: var(--theme-border-style) var(--dark-y);
+            color: var(--on-y);
+            padding: $default-input-padding;
+            width: 100%;
 
-        /* stylelint-disable selector-max-universal -- Allow */
-        >* {
-            padding-block: $default-padding / 2;
-        }
+            &::placeholder {
+                color: var(--metadata);
+            }
 
-        /* stylelint-enable selector-max-universal */
-        >.item {
-            &.#{bem.$modifier-active} {
-                background-color: var(--background2);
+            &:not(:disabled):hover {
+                border: var(--theme-border-style) var(--light-background4);
+            }
+
+            &:disabled {
+                background-color: var(--dark-y);
+            }
+
+            &:focus {
+                background: var(--light-background4);
             }
         }
     }
+}
 
-    .multiple-combobox {
-        .selected-items {
-            display: flex;
 
-            /* stylelint-disable selector-max-universal -- Allow */
-            >*:not(:first-child) {
-                margin-left: $default-margin;
-            }
+.#{bem.$base}.multiple-combobox {
+    >.selected-items {
+        display: flex;
 
-            /* stylelint-enable selector-max-universal */
+        /* stylelint-disable selector-max-universal -- Allow */
+        >*:not(:first-child) {
+            margin-left: $default-margin;
         }
+
+        /* stylelint-enable selector-max-universal */
     }
 }

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

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "RatingsInput", {
     return _RatingsInput.RatingsInput;
   }
 });
+Object.defineProperty(exports, "QueryCombobox", {
+  enumerable: true,
+  get: function get() {
+    return _QueryCombobox.QueryCombobox;
+  }
+});
 
 var _TextInput = require("./TextInput");
 
@@ -42,4 +48,6 @@ var _ChoicesInput = require("./ChoicesInput");
 
 var _TextareaInput = require("./TextareaInput");
 
-var _RatingsInput = require("./RatingsInput");
+var _RatingsInput = require("./RatingsInput");
+
+var _QueryCombobox = require("./QueryCombobox");

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

@@ -1,23 +1,18 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { useState, useLayoutEffect } from 'react';
+import { useField } from 'formik';
 import { useRelayEnvironment, fetchQuery } from 'react-relay';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import PropTypes from 'prop-types'; // Local Definitions
 
-import { MultipleCombobox, Combobox } from "./common";
-const baseClassName = styleNames.base;
-const componentClassName = 'query-combobox';
+import { Combobox } from "./common";
 /**
  * This is the component description.
  */
 
 const QueryCombobox = ({
-  id,
-  className: userClassName,
-  style,
   query,
-  multiple,
+  // multiple,
   name,
   label,
   color,
@@ -27,35 +22,47 @@ const QueryCombobox = ({
   graphQlNode,
   searchVariable,
   extraVariables,
-  optionsKeyMap,
-  setValue,
-  setError,
-  error // ...otherProps
+  optionsKeyMap // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
+  const [, meta, helpers] = useField(name);
+  const {
+    setValue,
+    setError
+  } = helpers;
+  const {
+    error,
+    value
+  } = meta;
   const environment = useRelayEnvironment();
   const [isFetching, setIsFetching] = useState(false);
   const [options, setOptions] = useState([]);
 
-  const fetchOptions = inputValue => {
+  const getOptions = inputValue => {
     if (isFetching) return;
-    fetchQuery(environment, query, {
-      [searchVariable]: inputValue,
-      ...extraVariables
-    }).subscribe({
+    let variables = {
+      [searchVariable]: inputValue
+    };
+
+    if (extraVariables) {
+      variables = { ...variables,
+        ...extraVariables
+      };
+    }
+
+    fetchQuery(environment, query, variables).subscribe({
       start: () => {
         setIsFetching(true);
       },
       complete: () => {
         setIsFetching(false);
       },
-      error: theError => {
-        console.log(theError);
+      error: fetchError => {
         setIsFetching(false);
-        if (setError) setError(theError);
+        if (setError) setError(fetchError.message);
       },
       next: data => {
         setOptions(data[graphQlNode].edges.map(({
@@ -70,22 +77,19 @@ const QueryCombobox = ({
 
   const comboboxProps = {
     options,
-    fetchOptions,
+    getOptions,
     debounceMs,
     disabled,
     name,
     label,
     description,
     setValue,
-    error
+    error,
+    value,
+    color
   };
-  const Component = multiple ? MultipleCombobox : Combobox;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement(Component, comboboxProps));
+  const Input = Combobox;
+  return /*#__PURE__*/React.createElement(Input, comboboxProps);
 };
 
 QueryCombobox.propTypes = {
@@ -114,11 +118,6 @@ QueryCombobox.propTypes = {
    */
   label: PropTypes.string,
 
-  /**
-   * The input field validator function
-   */
-  validate: PropTypes.func,
-
   /**
    * The custom select input description
    */
@@ -156,7 +155,7 @@ QueryCombobox.propTypes = {
   optionsKeyMap: PropTypes.shape({
     value: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired
-  }).isRequired,
+  }),
 
   /**
    * Whether to allow multiple items selection
@@ -171,25 +170,13 @@ QueryCombobox.propTypes = {
   /**
    * The variable to be used to search the data
    */
-  searchVariable: PropTypes.string,
-
-  /**
-   * The function to be called when the value changes
-   */
-  setValue: PropTypes.func.isRequired,
-
-  /**
-   * The function to be called with an error when the it occurs
-   */
-  setError: PropTypes.func,
-
-  /**
-   * The error object
-   */
-  error: PropTypes.objectOf(PropTypes.string)
+  searchVariable: PropTypes.string
 };
 QueryCombobox.defaultProps = {
-  extraVariables: {},
+  optionsKeyMap: {
+    value: 'id',
+    label: 'name'
+  },
   multiple: false,
   color: 'background2',
   searchVariable: 'search'