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

package/dist/cjs/a/ContentTree/ContentTree.js

@@ -73,7 +73,7 @@ ContentTree.propTypes = {
    * The reference to the parent element.
    */
   target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.instanceOf(Element)
+    current: _propTypes.default.instanceOf(String)
   })])
 };
 ContentTree.defaultProps = {

package/dist/cjs/f/common/Label/Label.js

@@ -32,6 +32,7 @@ var Label = _ref => {
     children,
     name,
     color,
+    optional,
     as: Wrapper // ...otherProps
 
   } = _ref;
@@ -44,7 +45,7 @@ var Label = _ref => {
     className: [baseClassName, componentClassName, userClassName, "x-".concat(color)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, children);
+  }, children, optional && '(Optional)');
 };
 
 Label.propTypes = {
@@ -81,12 +82,17 @@ Label.propTypes = {
   /**
    *  The default color of the label
    */
-  color: _propTypes.default.string
+  color: _propTypes.default.string,
+
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: _propTypes.default.bool
 };
 Label.defaultProps = {
-  // someProp:false
   as: 'label',
-  color: 'main2'
+  color: 'main2',
+  optional: false
 };
 var _default = Label;
 exports.default = _default;

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

@@ -49,6 +49,7 @@ var ChoicesInput = _ref => {
     color,
     colorChecked,
     label,
+    optional,
     disabled // ...otherProps
 
   } = _ref;
@@ -64,7 +65,8 @@ var ChoicesInput = _ref => {
     }, style) // {...otherProps}
 
   }, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
-    as: "p"
+    as: "p",
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "choices"
   }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
@@ -144,7 +146,12 @@ ChoicesInput.propTypes = {
   /**
    * Whether all the Choices inputs should be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,

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

@@ -40,6 +40,7 @@ var QueryCombobox = _ref => {
     name,
     label,
     color,
+    optional,
     description,
     disabled,
     debounceMs,
@@ -117,6 +118,7 @@ var QueryCombobox = _ref => {
     disabled,
     name,
     label,
+    optional,
     description,
     setValue,
     value,
@@ -226,7 +228,12 @@ QueryCombobox.propTypes = {
   /**
    * The query combobox field validator function
    */
-  validate: _propTypes.default.func
+  validate: _propTypes.default.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {

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

@@ -17,6 +17,8 @@ var _ = require("../../../..");
 
 var _a = require("../../../../../a");
 
+var _b = require("../../../../../b");
+
 var _Menu = require("../Menu");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,13 +51,16 @@ var Combobox = _ref => {
     minLength,
     isFetching,
     transformSearch,
-    disabled // ...otherProps
+    disabled,
+    optional // ...otherProps
 
   } = _ref;
   var {
     isOpen,
     selectItem,
     selectedItem,
+    inputValue,
+    setInputValue,
     getLabelProps,
     getMenuProps,
     getInputProps,
@@ -68,9 +73,9 @@ var Combobox = _ref => {
     itemToString: item => item ? item.label : '',
     onInputValueChange: _ref2 => {
       var {
-        inputValue
+        inputValue: searchInputValue
       } = _ref2;
-      var transformedInput = transformSearch(inputValue);
+      var transformedInput = transformSearch(searchInputValue);
 
       if (transformedInput.length > minLength) {
         getOptions(transformedInput);
@@ -91,13 +96,17 @@ var Combobox = _ref => {
     }
   }, [value]);
   var parentRef = (0, React.useRef)(null);
+
+  var resetInputValue = () => setInputValue('');
+
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
     style: style,
     ref: parentRef
   }, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
-    name: name
+    name: name,
+    optional: optional
   }), label), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
@@ -105,7 +114,14 @@ var Combobox = _ref => {
     disabled: disabled
   })), isFetching && /*#__PURE__*/React.createElement(_a.LoadingCircle, {
     className: "x-main2"
-  })), /*#__PURE__*/React.createElement(_a.Popover, {
+  }), inputValue.length > minLength && !isFetching && /*#__PURE__*/React.createElement(_b.Button, {
+    isSimple: true,
+    isCompact: true,
+    color: "main2",
+    onClick: resetInputValue
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "f-icons"
+  }, "Y"))), /*#__PURE__*/React.createElement(_a.Popover, {
     isOpen: isOpen,
     parentRef: parentRef
   }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
@@ -200,7 +216,12 @@ Combobox.propTypes = {
   /**
    * Whether the input filed shpuld be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 Combobox.defaultProps = {// someProp: false
 };

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

@@ -57,6 +57,7 @@ var MultipleCombobox = _ref => {
     style,
     label,
     name,
+    optional,
     options: items,
     getOptions,
     setValue,
@@ -94,7 +95,9 @@ var MultipleCombobox = _ref => {
     getInputProps,
     getComboboxProps,
     highlightedIndex,
-    getItemProps
+    getItemProps,
+    inputValue,
+    setInputValue
   } = (0, _downshift.useCombobox)({
     searchInputValue,
     defaultHighlightedIndex: 0,
@@ -168,12 +171,16 @@ var MultipleCombobox = _ref => {
     }
   }, [value]);
   var parentRef = (0, React.useRef)(null);
+
+  var resetInputValue = () => setInputValue('');
+
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, "y-".concat(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({
@@ -204,7 +211,14 @@ var MultipleCombobox = _ref => {
     disabled: disabled
   })), isFetching && /*#__PURE__*/React.createElement(_a.LoadingCircle, {
     className: "x-main2"
-  })), /*#__PURE__*/React.createElement(_a.Popover, {
+  }), inputValue.length > minLength && !isFetching && /*#__PURE__*/React.createElement(_b.Button, {
+    isSimple: true,
+    isCompact: true,
+    color: "main2",
+    onClick: resetInputValue
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "f-icons"
+  }, "Y"))), /*#__PURE__*/React.createElement(_a.Popover, {
     isOpen: isOpen,
     parentRef: parentRef
   }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
@@ -299,7 +313,12 @@ MultipleCombobox.propTypes = {
   /**
    * Whether the input filed shpuld be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 MultipleCombobox.defaultProps = {// someProp: false
 };

package/dist/cjs/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/cjs/f/fields/QuerySelect/QuerySelect.js

@@ -34,6 +34,7 @@ var QuerySelect = _ref => {
     style,
     name,
     label,
+    optional,
     query,
     variables,
     optionsKeyMap,
@@ -97,6 +98,7 @@ var QuerySelect = _ref => {
     style: style,
     name: name,
     label: label,
+    optional: optional,
     color: color,
     description: description,
     disabled: isFetching || disabled,
@@ -190,7 +192,12 @@ QuerySelect.propTypes = {
   /**
    * The query select field validator function
    */
-  validate: _propTypes.default.func
+  validate: _propTypes.default.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 QuerySelect.defaultProps = {
   disabled: false,

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

@@ -42,6 +42,7 @@ var SelectInput = _ref => {
     color,
     options,
     validate,
+    optional,
     description,
     disabled,
     isLoading,
@@ -61,7 +62,8 @@ var SelectInput = _ref => {
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    name: name
+    name: name,
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "select-wrapper"
   }, /*#__PURE__*/React.createElement("select", _extends({
@@ -154,7 +156,12 @@ SelectInput.propTypes = {
   /**
    * The autoComplete value that the browser should watch for the input
    */
-  autoComplete: _propTypes.default.string
+  autoComplete: _propTypes.default.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 SelectInput.defaultProps = {
   disabled: false,

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

@@ -40,6 +40,7 @@ var TextareaInput = _ref => {
     labelAsDescription,
     textAreaId,
     rows,
+    optional,
     textAreaColor,
     labelColor,
     description,
@@ -64,7 +65,8 @@ var TextareaInput = _ref => {
   }, /*#__PURE__*/React.createElement(_common.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"
@@ -163,7 +165,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.default.string
+  resize: _propTypes.default.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 TextareaInput.defaultProps = {
   rows: 3,

package/dist/cjs/v3/Button/Button.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+// Local Definitions
+var baseClassName = _bem.default.base;
+var componentClassName = 'button';
+/**
+ * This is the component description.
+ */
+
+var Button = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    children // ...otherProps
+
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./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.default.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+
+  /**
+   *  The children JSX
+   */
+  children: _propTypes.default.node
+};
+Button.defaultProps = {// someProp:false
+};
+var _default = Button;
+exports.default = _default;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

package/dist/cjs/v3/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.Button;
+  }
+});
+
+var _Button = require("./Button");

package/dist/es/a/ContentTree/ContentTree.js

@@ -58,7 +58,7 @@ ContentTree.propTypes = {
    * The reference to the parent element.
    */
   target: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
+    current: PropTypes.instanceOf(String)
   })])
 };
 ContentTree.defaultProps = {

package/dist/es/f/common/Label/Label.js

@@ -17,6 +17,7 @@ const Label = ({
   children,
   name,
   color,
+  optional,
   as: Wrapper // ...otherProps
 
 }) => {
@@ -29,7 +30,7 @@ const Label = ({
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, children);
+  }, children, optional && '(Optional)');
 };
 
 Label.propTypes = {
@@ -66,11 +67,16 @@ Label.propTypes = {
   /**
    *  The default color of the label
    */
-  color: PropTypes.string
+  color: PropTypes.string,
+
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: PropTypes.bool
 };
 Label.defaultProps = {
-  // someProp:false
   as: 'label',
-  color: 'main2'
+  color: 'main2',
+  optional: false
 };
 export default Label;

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

@@ -27,6 +27,7 @@ const ChoicesInput = ({
   color,
   colorChecked,
   label,
+  optional,
   disabled // ...otherProps
 
 }) => {
@@ -43,7 +44,8 @@ const ChoicesInput = ({
     } // {...otherProps}
 
   }, label && /*#__PURE__*/React.createElement(FormLabel, {
-    as: "p"
+    as: "p",
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "choices"
   }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
@@ -123,7 +125,12 @@ ChoicesInput.propTypes = {
   /**
    * Whether all the Choices inputs should be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,

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

@@ -19,6 +19,7 @@ const QueryCombobox = ({
   name,
   label,
   color,
+  optional,
   description,
   disabled,
   debounceMs,
@@ -95,6 +96,7 @@ const QueryCombobox = ({
     disabled,
     name,
     label,
+    optional,
     description,
     setValue,
     value,
@@ -204,7 +206,12 @@ QueryCombobox.propTypes = {
   /**
    * The query combobox field validator function
    */
-  validate: PropTypes.func
+  validate: PropTypes.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {

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

@@ -7,7 +7,8 @@ import PropTypes from 'prop-types';
 import { useCombobox } from 'downshift';
 import styleNames from '@pareto-engineering/bem';
 import { FormLabel, FormDescription } from "../../../..";
-import { Popover, LoadingCircle } from "../../../../../a"; // Local Definitions
+import { Popover, LoadingCircle } from "../../../../../a";
+import { Button } from "../../../../../b"; // Local Definitions
 
 import { Menu } from "../Menu";
 const baseClassName = styleNames.base;
@@ -31,13 +32,16 @@ const Combobox = ({
   minLength,
   isFetching,
   transformSearch,
-  disabled // ...otherProps
+  disabled,
+  optional // ...otherProps
 
 }) => {
   const {
     isOpen,
     selectItem,
     selectedItem,
+    inputValue,
+    setInputValue,
     getLabelProps,
     getMenuProps,
     getInputProps,
@@ -49,9 +53,9 @@ const Combobox = ({
     initialSelectedItem: value,
     itemToString: item => item ? item.label : '',
     onInputValueChange: ({
-      inputValue
+      inputValue: searchInputValue
     }) => {
-      const transformedInput = transformSearch(inputValue);
+      const transformedInput = transformSearch(searchInputValue);
 
       if (transformedInput.length > minLength) {
         getOptions(transformedInput);
@@ -72,13 +76,17 @@ const Combobox = ({
     }
   }, [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,
     ref: parentRef
   }, /*#__PURE__*/React.createElement(FormLabel, _extends({}, getLabelProps(), {
-    name: name
+    name: name,
+    optional: optional
   }), label), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
@@ -86,7 +94,14 @@ const Combobox = ({
     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({
@@ -181,7 +196,12 @@ Combobox.propTypes = {
   /**
    * Whether the input filed shpuld be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 Combobox.defaultProps = {// someProp: false
 };