@pareto-engineering/design-system 4.0.0-alpha.72 → 4.0.0-alpha.74

package/dist/es/f/fields/SelectInput/common/Single/Single.js

@@ -0,0 +1,96 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useField } from 'formik';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import { LoadingCircle } from "../../../../../a";
+import { FormLabel, FormDescription } from "../../../../../../../dist/cjs";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'single';
+
+/**
+ * This is the component description.
+ */
+const Single = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  labelColor,
+  color,
+  options,
+  validate,
+  optional,
+  description,
+  disabled,
+  isLoading,
+  autoComplete
+  // ...otherProps
+}) => {
+  const [field] = useField({
+    name,
+    validate
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: `select-wrapper${disabled ? ' disabled' : ''}`
+  }, /*#__PURE__*/React.createElement("select", _extends({
+    className: `input y-${color}`
+  }, field, {
+    value: field.value || '',
+    id: name,
+    disabled: disabled,
+    autoComplete: autoComplete
+  }), options.map(option => {
+    // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
+    const newOption = typeof option === 'string' ? {
+      value: option,
+      label: option
+    } : option;
+    return /*#__PURE__*/React.createElement("option", {
+      key: newOption.value,
+      value: newOption.value,
+      disabled: newOption?.disabled || false
+    }, newOption.label);
+  })), isLoading && /*#__PURE__*/React.createElement(LoadingCircle, {
+    className: "x-main"
+  })), /*#__PURE__*/React.createElement(FormDescription, {
+    className: "s-1",
+    description: description,
+    name: name
+  }));
+};
+Single.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The base color of the component
+   */
+  color: PropTypes.string
+};
+Single.defaultProps = {
+  color: 'paragraph'
+};
+export default Single;

package/dist/es/f/fields/SelectInput/common/Single/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Single } from "./Single";

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

@@ -0,0 +1,3 @@
+export { Multiple } from "./Multiple";
+export { Single } from "./Single";
+export { Menu } from "./Menu";

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

@@ -14,72 +14,176 @@ $hover-border: var(--theme-hover-input-border);
 $focus-border: var(--theme-focus-input-border);
 $default-background: var(--background-inputs);
 $disabled-background: var(--background-inputs-30);
+$default-gap: var(--gap);
 
-.#{bem.$base}.select-input {
-  display: flex;
-  flex-direction: column;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
 
-  .select-wrapper {
-    background-color: $default-background;
-    border: $default-border;
-    border-radius: $default-input-border-radius;
+.#{bem.$base}.select-input {
+  > .#{bem.$base}.single {
     display: flex;
     flex-direction: column;
-    padding: $default-padding;
-    padding-right: 0;
-    position: relative;
 
-    &:not(.disabled) {
-      &:hover,
-      &:active {
-        border: $hover-border;
+    > .#{bem.$base}.form-label {
+      margin-bottom: var(--gap);
+    }
+
+    .select-wrapper {
+      background-color: $default-background;
+      border: $default-border;
+      border-radius: $default-input-border-radius;
+      display: flex;
+      flex-direction: column;
+      padding: $default-padding;
+      padding-right: 0;
+      position: relative;
+
+      &:not(.disabled) {
+        &:hover,
+        &:active {
+          border: $hover-border;
+        }
+
+        &:focus {
+          border: $focus-border;
+        }
       }
 
-      &:focus {
-        border: $focus-border;
+      &.disabled {
+        background: $disabled-background;
       }
-    }
 
-    &.disabled {
-      background: $disabled-background;
+      &::placeholder {
+        color: var(--metadata);
+      }
+
+      &::after {
+        border-radius: $default-input-border-radius;
+      }
+
+      >.#{bem.$base}.loading-circle {
+        position: absolute;
+        right: $default-spacing-size;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      select {
+        appearance: none;
+        background-color: $default-background;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
+        background-position: calc(100% - $default-spacing-size);
+        background-repeat: no-repeat;
+        background-size: $default-spacing-size;
+        padding-right: $default-spacing-size;
+
+        &.input {
+          border: none;
+          color: var(--y);
+          outline: none;
+          width: 100%;
+
+          /* stylelint-disable-next-line max-nesting-depth -- required */
+          &:disabled {
+            opacity: 0%;
+          }
+        }
+      }
     }
+  }
 
-    &::placeholder {
-      color: var(--metadata);
+  > .#{bem.$base}.multiple {
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    position: relative;
+
+    > .#{bem.$base}.form-label {
+      margin-bottom: var(--gap);
     }
 
-    &::after {
+
+    .#{bem.$base}.popover {
+      border: $default-border;
       border-radius: $default-input-border-radius;
-    }
+      width: 100%;
+
+      >.menu {
+        list-style: none;
+        margin: 0;
+        outline: 0;
+        padding: 0;
+
+        /* stylelint-disable selector-max-compound-selectors -- required */
+        >.item {
+          border-radius: $default-input-border-radius;
+          padding: $default-padding;
+
+          /* stylelint-disable max-nesting-depth -- required */
+          > p {
+            margin: 0;
+          }
 
-    >.#{bem.$base}.loading-circle {
-      position: absolute;
-      right: $default-spacing-size;
-      top: 50%;
-      transform: translateY(-50%);
+          &.#{bem.$modifier-active} {
+            background-color: var(--y);
+
+            > p {
+              color: var(--on-y);
+            }
+          }
+        }
+      }
     }
 
-    select {
-      appearance: none;
-      background-color: $default-background;
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
-      background-position: calc(100% - $default-spacing-size);
-      background-repeat: no-repeat;
-      background-size: $default-spacing-size;
-      padding-right: $default-spacing-size;
-
-      &.input {
-        border: none;
-        color: var(--y);
+
+    > .input-container {
+      position: relative;
+
+      > .input {
+        background: $default-background;
+        border: $default-border;
+        border-radius: calc(var(--theme-default-border-radius) / 2);
+        color: var(--paragraph);
         outline: none;
+        padding: $default-padding;
         width: 100%;
 
+        &::placeholder {
+          color: var(--metadata);
+        }
+
         &:disabled {
-          opacity: 0%;
+          background-color: $disabled-background;
+          color: var(--paragraph);
+        }
+
+        &:not(:disabled) {
+          &:hover,
+          &:active {
+            border: $hover-border;
+          }
+
+          &:focus {
+            border: $focus-border;
+          }
+        }
+      }
+    }
+
+
+    >.selected-items {
+      display: flex;
+      flex-wrap: wrap;
+      gap: calc($default-gap / 2);
+      margin-bottom: calc($default-gap / 2);
+
+      >.item {
+        >.#{bem.$base}.button {
+          align-items: center;
+          display: flex;
+          gap: calc($default-gap / 2);
+        }
+
+        .close {
+          font-size: calc(var(--s-3) * 1em);
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.72",
+  "version": "4.0.0-alpha.74",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -52,10 +52,10 @@
   "dependencies": {
     "@codemirror/lang-xml": "^6.0.2",
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.72",
+    "@pareto-engineering/assets": "^4.0.0-alpha.73",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
-    "@pareto-engineering/styles": "^4.0.0-alpha.72",
-    "@pareto-engineering/utils": "^4.0.0-alpha.72",
+    "@pareto-engineering/styles": "^4.0.0-alpha.73",
+    "@pareto-engineering/utils": "^4.0.0-alpha.73",
     "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
@@ -73,5 +73,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "68d099be75ce95a8ff22f53015d1a722af04e8b5"
+  "gitHead": "81827866347e056b8fb3ba1cb7c6e6f22c5eddbb"
 }

package/src/stories/f/SelectInput.stories.jsx

@@ -93,3 +93,18 @@ DisabledWithDescriptionSelectInput.args = {
   disabled   :true,
   description:'This is a description',
 }
+
+export const Multiple = Template.bind({})
+Multiple.args = {
+  name       :'status',
+  label      :'Status',
+  getTagColor:(tag) => tag.color,
+  options    :[
+    { value: 'Approved', label: 'Approved', color: 'green' },
+    { value: 'To be reviewed', label: 'To be reviewed', color: 'purple' },
+    { value: 'Revised', label: 'Revised', color: 'blue' },
+    { value: 'Rejected', label: 'Rejected', color: 'red' },
+  ],
+  placeholder:'Type to search',
+  multiple   :true,
+}

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

@@ -3,18 +3,14 @@ import * as React from 'react'
 
 import { memo } from 'react'
 
-import { useField } from 'formik'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import { LoadingCircle } from 'ui/a'
-
-import { FormLabel, FormDescription } from '../../common'
-
 import './styles.scss'
 
+import { Single, Multiple } from './common'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -39,9 +35,28 @@ const SelectInput = ({
   disabled,
   isLoading,
   autoComplete,
+  placeholder,
+  getTagColor,
+  multiple,
   // ...otherProps
 }) => {
-  const [field] = useField({ name, validate })
+  const inputProps = {
+    name,
+    label,
+    labelColor,
+    color,
+    options,
+    validate,
+    optional,
+    description,
+    disabled,
+    isLoading,
+    placeholder,
+    getTagColor,
+    autoComplete,
+  }
+
+  const Input = multiple ? Multiple : Single
 
   return (
     <div
@@ -55,45 +70,7 @@ const SelectInput = ({
         .join(' ')}
       style={style}
     >
-      <FormLabel
-        name={name}
-        color={labelColor}
-        optional={optional}
-      // {...otherProps}
-      >
-        {label}
-      </FormLabel>
-      <div className={`select-wrapper${disabled ? ' disabled' : ''}`}>
-        <select
-          className={`input y-${color}`}
-          {...field}
-          value={field.value || ''}
-          id={name}
-          disabled={disabled}
-          autoComplete={autoComplete}
-        >
-          {
-          options.map((option) => {
-            // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
-            const newOption = typeof option === 'string' ? { value: option, label: option } : option
-
-            return (
-              <option
-                key={newOption.value}
-                value={newOption.value}
-                disabled={newOption?.disabled || false}
-              >
-                {newOption.label}
-              </option>
-            )
-          })
-        }
-        </select>
-        {isLoading && (
-          <LoadingCircle className="x-main" />
-        )}
-      </div>
-      <FormDescription className="s-1" description={description} name={name} />
+      <Input {...inputProps} />
     </div>
   )
 }
@@ -175,11 +152,21 @@ SelectInput.propTypes = {
   * Whether the input is optional or not
   */
   optional:PropTypes.bool,
+
+  /**
+   * Whether the select input should allow multiple selections
+   */
+  multiple:PropTypes.bool,
+
+  /**
+   * The placeholder of the select input
+   */
+  placeholder:PropTypes.string,
 }
 
 SelectInput.defaultProps = {
   disabled:false,
-  color   :'paragraph',
+  multiple:false,
 }
 
 export default memo(SelectInput)

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

@@ -0,0 +1,103 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'menu'
+
+/**
+ * This is the component description.
+ */
+const Menu = React.forwardRef(({
+  id,
+  className:userClassName,
+  style,
+  items,
+  isOpen,
+  highlightedIndex,
+  getItemProps,
+  ...otherProps
+}, ref) => (
+  <ul
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    ref={ref}
+    {...otherProps}
+  >
+    {isOpen && items.map((item, index) => (
+      <li
+        key={item.label}
+        {...getItemProps({ item, index })}
+        className={[
+          'item',
+          highlightedIndex === index && styleNames.modifierActive,
+        ].filter(Boolean)
+          .join(' ')}
+      >
+        <p>
+          {item.label}
+        </p>
+      </li>
+    ))}
+  </ul>
+))
+Menu.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The items to be displayed in the menu
+   */
+  items:PropTypes.arrayOf(PropTypes.shape({
+    value:PropTypes.string,
+    label:PropTypes.string,
+  })),
+
+  /**
+   * Whether or not the menu is open
+   */
+  isOpen:PropTypes.bool,
+
+  /**
+   * The index of the highlighted item
+   */
+  highlightedIndex:PropTypes.number,
+
+  /**
+   * The function to get the item props
+   */
+  getItemProps:PropTypes.func,
+}
+
+Menu.defaultProps = {
+  // someProp:false
+}
+
+export default Menu

package/src/ui/f/fields/SelectInput/common/Menu/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Menu } from './Menu'