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

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

@@ -2,11 +2,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useCombobox } from 'downshift';
 import styleNames from '@pareto-engineering/bem';
-import { FormLabel, FormDescription } from "../../../.."; // Local Definitions
+import { FormLabel, FormDescription } from "../../../..";
+import { Popover } from "../../../../../a"; // Local Definitions
 
 import { Menu } from "../Menu";
 const baseClassName = styleNames.base;
@@ -22,14 +23,17 @@ const Combobox = ({
   label,
   name,
   options: items,
-  fetchOptions,
+  getOptions,
   setValue,
   error,
-  description // ...otherProps
+  description,
+  value,
+  color // ...otherProps
 
 }) => {
   const {
     isOpen,
+    selectItem,
     selectedItem,
     getLabelProps,
     getMenuProps,
@@ -39,33 +43,48 @@ const Combobox = ({
     getItemProps
   } = useCombobox({
     items,
+    initialSelectedItem: value,
     itemToString: item => item ? item.label : '',
     onInputValueChange: ({
       inputValue
     }) => {
-      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
+
   useEffect(() => {
     if (selectedItem) {
-      setValue(selectedItem.value);
+      setValue(selectedItem);
+    }
+  }, [selectedItem]); // If the formik state has a value, we'll set the selected item to the combobox state
+
+  useEffect(() => {
+    if ((value === null || value === void 0 ? void 0 : value.value) !== (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value)) {
+      selectItem(value);
     }
-  }, [selectedItem]);
+  }, [value]);
+  const parentRef = useRef(null);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
+    className: [baseClassName, componentClassName, userClassName, `y-${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, _extends({
+  }))), /*#__PURE__*/React.createElement(Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef
+  }, /*#__PURE__*/React.createElement(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));
 };
@@ -107,7 +126,7 @@ Combobox.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
@@ -122,7 +141,20 @@ Combobox.propTypes = {
   /**
    * The error object
    */
-  error: PropTypes.objectOf(PropTypes.string)
+  error: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The value of the custom select input
+   */
+  value: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  }),
+
+  /**
+   * The base color of the combobox custom select input
+   */
+  color: PropTypes.string
 };
 Combobox.defaultProps = {// someProp:false
 };

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

@@ -31,7 +31,7 @@ const Menu = /*#__PURE__*/React.forwardRef(({
   item,
   index
 }), {
-  className: `item ${highlightedIndex === index ? styleNames.modifierActive : ''}`
+  className: ['item', highlightedIndex === index && styleNames.modifierActive].filter(Boolean).join(' ')
 }), /*#__PURE__*/React.createElement("p", null, item.label)))));
 Menu.propTypes = {
   /**

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

@@ -1,3 +1,2 @@
 export { Menu } from "./Menu";
-export { Combobox } from "./Combobox";
-export { MultipleCombobox } from "./MultipleCombobox";
+export { Combobox } from "./Combobox";

package/dist/es/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/es/f/fields/index.js

@@ -2,4 +2,5 @@ export { TextInput } from "./TextInput";
 export { SelectInput } from "./SelectInput";
 export { ChoicesInput } from "./ChoicesInput";
 export { TextareaInput } from "./TextareaInput";
-export { RatingsInput } from "./RatingsInput";
+export { RatingsInput } from "./RatingsInput";
+export { QueryCombobox } from "./QueryCombobox";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.44",
+  "version": "2.0.0-alpha.45",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -88,10 +88,11 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.18",
+    "@pareto-engineering/assets": "^2.0.0-alpha.21",
     "@pareto-engineering/bem": "^0.1.5",
     "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",
+    "downshift": "^6.1.7",
     "formik": "^2.2.9",
     "hamburgers": "^1.1.3",
     "lodash": "^4.17.21",

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

@@ -11198,6 +11198,164 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base combobox y-background2"
+  >
+    <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
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Replace initial value
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base combobox y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-1-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-1-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-1-menu"
+        aria-labelledby="downshift-1-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-1-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="Apple"
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-1-label"
+        className="base menu"
+        id="downshift-1-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Replace initial value
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/RatingsInput Base 1`] = `
 <form
   action="#"

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

@@ -0,0 +1,220 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form, useField } from 'formik'
+
+import { Button, FormDebugger, QueryCombobox } from 'ui'
+
+import { fruits } from '../utils/testData'
+
+import generateNodeId from '../utils/generateNodeId'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+  // environment,
+} from '../utils/relay'
+
+export default {
+  title        :'f/fields/QueryCombobox',
+  component    :QueryCombobox,
+  subcomponents:{
+    // Item:QueryCombobox.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+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 QueryComboboxAllTeamsQuery($name_Icontains: String) {
+    allTeams(name_Icontains: $name_Icontains) {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`
+
+// eslint-disable-next-line react/prop-types
+const ResolvedTemplate = ({ multiple, defaultFormikState = {} }) => {
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+
+  const Content = () => {
+    const name = multiple ? 'teams' : 'team'
+
+    const [, , helpers] = useField(name)
+
+    const { setValue } = helpers
+
+    const updateFormikState = () => {
+      setValue({
+        value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
+        label:'Kafagoho',
+      })
+    }
+
+    return (
+      <>
+        <QueryCombobox
+          query={FETCH_TEAMS_QUERY}
+          label="Search for a team"
+          optionsKeyMap={{
+            value:'id',
+            label:'name',
+          }}
+          name={name}
+          multiple={multiple}
+          graphQlNode="allTeams"
+          searchVariable="name_Icontains"
+        />
+        <div
+          style={{
+            display      :'flex',
+            alignItems   :'flex-end',
+            flexDirection:'column',
+          }}
+        >
+          <FormDebugger />
+          <Button
+            onClick={updateFormikState}
+          >
+            {multiple ? 'Add more initial values' : 'Replace initial value'}
+          </Button>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <Formik
+      initialValues={defaultFormikState}
+    >
+      <Form>
+        <Content />
+      </Form>
+    </Formik>
+  )
+}
+
+export const SingleSelect = ResolvedTemplate.bind({})
+SingleSelect.args = {
+  multiple:false,
+}
+
+export const SingleSelectWithDefaultFormikState = ResolvedTemplate.bind({})
+SingleSelectWithDefaultFormikState.args = {
+  multiple          :false,
+  defaultFormikState:{
+    team:{
+      value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+      label:'Apple',
+    },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+// const RejectedTemplate = ({ multiple }) => {
+//   const Content = () => {
+//     environment.mock.queuePendingOperation(
+//       FETCH_TEAMS_QUERY,
+//       { name_Icontains: 'a' },
+//     )
+
+//     environment.mock.rejectMostRecentOperation('An error has occured while fetching the teams')
+
+//     const name = multiple ? 'teams' : 'team'
+
+//     const [, meta, helpers] = useField(name)
+
+//     const { setValue, setError } = helpers
+
+//     const { error } = meta
+
+//     return (
+//       <>
+//         <QueryCombobox
+//           query={FETCH_TEAMS_QUERY}
+//           label="Search for a team"
+//           optionsKeyMap={{
+//             value:'id',
+//             label:'name',
+//           }}
+//           error={error}
+//           setValue={setValue}
+//           setError={setError}
+//           name={name}
+//           multiple={multiple}
+//           graphQlNode="allTeams"
+//           searchVariable="name_Icontains"
+//         />
+//         <FormDebugger />
+//       </>
+//     )
+//   }
+
+//   return (
+//     <Formik
+//       initialValues={{ team: '' }}
+//     >
+//       <Form>
+//         <Content />
+//       </Form>
+//     </Formik>
+//   )
+// }
+
+// export const SingleSelectWithError = RejectedTemplate.bind({})
+// SingleSelectWithError.args = {
+//   multiple:false,
+// }
+
+// export const MultipleSelectWithError = RejectedTemplate.bind({})
+// MultipleSelectWithError.args = {
+//   multiple:true,
+// }