@pareto-engineering/design-system 2.0.0-alpha.64 → 2.0.0-alpha.66

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

@@ -32,6 +32,7 @@ const MultipleCombobox = ({
   style,
   label,
   name,
+  optional,
   options: items,
   getOptions,
   setValue,
@@ -69,7 +70,9 @@ const MultipleCombobox = ({
     getInputProps,
     getComboboxProps,
     highlightedIndex,
-    getItemProps
+    getItemProps,
+    inputValue,
+    setInputValue
   } = useCombobox({
     searchInputValue,
     defaultHighlightedIndex: 0,
@@ -141,12 +144,16 @@ const MultipleCombobox = ({
     }
   }, [value]);
   const parentRef = useRef(null);
+
+  const resetInputValue = () => setInputValue('');
+
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement(FormLabel, _extends({}, getLabelProps(), {
-    name: name
+    name: name,
+    optional: optional
   }), label), (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && /*#__PURE__*/React.createElement("div", {
     className: "selected-items"
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement("div", _extends({
@@ -177,7 +184,14 @@ const MultipleCombobox = ({
     disabled: disabled
   })), isFetching && /*#__PURE__*/React.createElement(LoadingCircle, {
     className: "x-main2"
-  })), /*#__PURE__*/React.createElement(Popover, {
+  }), inputValue.length > minLength && !isFetching && /*#__PURE__*/React.createElement(Button, {
+    isSimple: true,
+    isCompact: true,
+    color: "main2",
+    onClick: resetInputValue
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "f-icons"
+  }, "Y"))), /*#__PURE__*/React.createElement(Popover, {
     isOpen: isOpen,
     parentRef: parentRef
   }, /*#__PURE__*/React.createElement(Menu, _extends({
@@ -272,7 +286,12 @@ MultipleCombobox.propTypes = {
   /**
    * Whether the input filed shpuld be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 MultipleCombobox.defaultProps = {// someProp: false
 };

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

@@ -38,7 +38,8 @@ $default-loading-circle-displacement: 1em;
     >.input-wrapper {
         position: relative;
 
-        >.#{bem.$base}.loading-circle {
+        >.#{bem.$base}.loading-circle,
+        >.#{bem.$base}.button {
             position: absolute;
             top: $default-loading-circle-displacement;
             right: $default-loading-circle-displacement;

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

@@ -16,6 +16,7 @@ const QuerySelect = ({
   style,
   name,
   label,
+  optional,
   query,
   variables,
   optionsKeyMap,
@@ -76,6 +77,7 @@ const QuerySelect = ({
     style: style,
     name: name,
     label: label,
+    optional: optional,
     color: color,
     description: description,
     disabled: isFetching || disabled,
@@ -169,7 +171,12 @@ QuerySelect.propTypes = {
   /**
    * The query select field validator function
    */
-  validate: PropTypes.func
+  validate: PropTypes.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 QuerySelect.defaultProps = {
   disabled: false,

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

@@ -24,6 +24,7 @@ const SelectInput = ({
   color,
   options,
   validate,
+  optional,
   description,
   disabled,
   isLoading,
@@ -43,7 +44,8 @@ const SelectInput = ({
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    name: name
+    name: name,
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "select-wrapper"
   }, /*#__PURE__*/React.createElement("select", _extends({
@@ -136,7 +138,12 @@ SelectInput.propTypes = {
   /**
    * The autoComplete value that the browser should watch for the input
    */
-  autoComplete: PropTypes.string
+  autoComplete: PropTypes.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 SelectInput.defaultProps = {
   disabled: false,

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

@@ -24,6 +24,7 @@ const TextareaInput = ({
   labelAsDescription,
   textAreaId,
   rows,
+  optional,
   textAreaColor,
   labelColor,
   description,
@@ -48,7 +49,8 @@ const TextareaInput = ({
   }, /*#__PURE__*/React.createElement(FormLabel, {
     className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
     name: name,
-    color: labelColor
+    color: labelColor,
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
     className: "textarea"
@@ -147,7 +149,12 @@ TextareaInput.propTypes = {
    * Whether to disable or allow only a certain method of resizing the area
    * Textarea docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
    */
-  resize: PropTypes.string
+  resize: PropTypes.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 TextareaInput.defaultProps = {
   rows: 3,

package/dist/es/v3/Button/Button.js

@@ -0,0 +1,54 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'button';
+/**
+ * This is the component description.
+ */
+
+const Button = ({
+  id,
+  className: userClassName,
+  style,
+  children // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, children);
+};
+
+Button.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 children JSX
+   */
+  children: PropTypes.node
+};
+Button.defaultProps = {// someProp:false
+};
+export default Button;

package/dist/es/v3/Button/index.js

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

package/dist/es/v3/Button/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.button{
+
+}
+
+
+

package/dist/es/v3/index.js

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/package.json

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