@epignosis_llc/gnosis 5.2.4 → 5.3.0

package/dist/esm/src/components/Drawer/Drawer.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/Drawer/components/Body.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/Drawer/components/Footer.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/Drawer/components/Header.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/Drawer/components/Mask.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/Drawer/components/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/Drawer/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/Dropdown/Dropdown.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/Dropdown/helpers.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/Dropdown/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/CheckboxGroup/Checkbox.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/CheckboxGroup/CheckboxGroup.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/CheckboxGroup/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/FormError/FormError.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/FormError/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/Input/Input.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/Input/SearchInput.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/Input/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/InputError/InputError.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/InputError/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/Label/Label.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/Label/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/RadioButtonGroup/RadioButton.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/RadioButtonGroup/RadioButtonGroup.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/RadioButtonGroup/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/RadioGroup/Radio.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/RadioGroup/RadioGroup.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/RadioGroup/styles.js

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 

package/dist/esm/src/components/FormElements/Select/Select.js

@@ -2,43 +2,31 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v5.2.3
+   * @epignosis_llc/gnosis.js v5.2.4
    * Released under the MIT license.
    */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useRef, useState } from 'react';
 import StateManagedSelect$1 from '../../../../node_modules/react-select/dist/react-select.esm.js';
+import CreatableSelect$1 from '../../../../node_modules/react-select/creatable/dist/react-select-creatable.esm.js';
 import useClickAway from '../../../../node_modules/ahooks/es/useClickAway/index.js';
-import classNames from '../../../../node_modules/classnames/index.js';
 import Label from '../Label/Label.js';
-import { inputHeight } from '../styles.js';
+import Tooltip from '../../Tooltip/Tooltip.js';
+import SvgAddOperator from '../../../icons/add_operator.svg.js';
 import CustomValueContainer from './components/CustomValueContainer.js';
-import { selectContainer } from './styles.js';
+import { selectContainer, resolveStyles } from './styles.js';
 import CustomMenuList from './components/CustomMenuList.js';
-import '../../../theme/default/colors.js';
-import '../../../theme/default/config/button.js';
-import '../../../theme/default/config/card.js';
-import formElements from '../../../theme/default/config/formElements.js';
-import '../../../theme/default/config/table.js';
-import '../../../theme/default/config/pagination.js';
-import scrollbar from '../../../theme/default/config/scrollbar.js';
+import { MAX_MENU_HEIGHT, INNER_PLACEHOLDER, OUTER_PLACEHOLDER, MIN_WIDTH, MAX_WIDTH } from './constants.js';
+import { containerClassNames } from './heleprs.js';
 import { createElement as jsx } from '../../../../node_modules/@emotion/react/dist/emotion-react.browser.esm.js';
 
-var _excluded = ["id", "label", "options", "size", "inline", "status", "isInlineFlex", "hasInnerSearch", "isMulti", "maxMenuHeight", "innerPlaceholder", "minWidth", "maxWidth", "placeholder", "onChange"];
-var MAX_MENU_HEIGHT = 300;
-var OUTER_PLACEHOLDER = "Select...";
-var INNER_PLACEHOLDER = "Search...";
-var MIN_WIDTH = "5rem";
-var MAX_WIDTH = "25rem";
-var containerClassNames = function containerClassNames(status, size) {
-  var _classNames;
-  return classNames((_classNames = {}, _defineProperty(_classNames, "control-".concat(size), true), _defineProperty(_classNames, "valid", status === "valid"), _defineProperty(_classNames, "error", status === "error"), _classNames));
-};
+var _excluded = ["id", "label", "options", "size", "inline", "status", "isInlineFlex", "hasInnerSearch", "isMulti", "isCreatable", "creatableTooltip", "maxMenuHeight", "innerPlaceholder", "minWidth", "maxWidth", "placeholder", "onChange"];
 var Select = function Select(props, forwardedRef) {
   var _props$id = props.id,
     id = _props$id === void 0 ? "" : _props$id,
-    label = props.label,
+    _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
     _props$options = props.options,
     options = _props$options === void 0 ? [] : _props$options,
     _props$size = props.size,
@@ -53,6 +41,10 @@ var Select = function Select(props, forwardedRef) {
     hasInnerSearch = _props$hasInnerSearch === void 0 ? false : _props$hasInnerSearch,
     _props$isMulti = props.isMulti,
     isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
+    _props$isCreatable = props.isCreatable,
+    isCreatable = _props$isCreatable === void 0 ? false : _props$isCreatable,
+    _props$creatableToolt = props.creatableTooltip,
+    creatableTooltip = _props$creatableToolt === void 0 ? "Create" : _props$creatableToolt,
     _props$maxMenuHeight = props.maxMenuHeight,
     maxMenuHeight = _props$maxMenuHeight === void 0 ? MAX_MENU_HEIGHT : _props$maxMenuHeight,
     _props$innerPlacehold = props.innerPlaceholder,
@@ -75,143 +67,20 @@ var Select = function Select(props, forwardedRef) {
     _useState4 = _slicedToArray(_useState3, 2),
     inputValue = _useState4[0],
     setInputValue = _useState4[1];
-  var styles = {
-    menu: function menu(base) {
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        zIndex: 1060
-      });
-    },
-    placeholder: function placeholder(base, _ref) {
-      var isDisabled = _ref.isDisabled;
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        fontStyle: "italic",
-        color: isDisabled ? formElements.input.disabledColor : formElements.input.placeholderColor
-      });
-    },
-    dropdownIndicator: function dropdownIndicator(base, _ref2) {
-      var selectProps = _ref2.selectProps;
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        transform: selectProps.menuIsOpen ? "rotate(-180deg)" : "rotate(0)",
-        transition: "all .2s ease",
-        color: selectProps.isDisabled ? base.color : formElements.input.iconColor,
-        "&:hover": {
-          color: formElements.input.iconHoverColor,
-          cursor: "pointer"
-        }
-      });
-    },
-    clearIndicator: function clearIndicator(base, _ref3) {
-      var selectProps = _ref3.selectProps;
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        color: selectProps.isDisabled ? base.color : formElements.input.iconColor,
-        "&:hover": {
-          color: formElements.input.iconHoverColor,
-          cursor: "pointer"
-        }
-      });
-    },
-    control: function control(base, _ref4) {
-      var isFocused = _ref4.isFocused,
-        isDisabled = _ref4.isDisabled;
-      var border = isDisabled ? "1px solid ".concat(formElements.input.disabledBorder) : isFocused ? "1px solid ".concat(formElements.input.borderFocusColor) : // default case, set border equal to the background color to avoid pixel shift
-      "1px solid ".concat(formElements.input.background);
-      var backgroundColor = isDisabled ? formElements.input.disabledBackground : isFocused ? formElements.input.backgroundFocus : formElements.input.background;
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        border: border,
-        backgroundColor: backgroundColor,
-        boxShadow: "none",
-        borderRadius: "5px",
-        "&:hover": {
-          border: "1px solid ".concat(formElements.input.borderHoverColor)
-        },
-        color: !isDisabled ? base.color : formElements.input.disabledColor
-      });
-    },
-    multiValueLabel: function multiValueLabel(base, _ref5) {
-      var isDisabled = _ref5.isDisabled;
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        color: !isDisabled ? base.color : formElements.input.disabledColor
-      });
-    },
-    multiValueRemove: function multiValueRemove(base) {
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        ":hover": {
-          cursor: "pointer",
-          color: formElements.input.iconHoverColor
-        }
-      });
-    },
-    option: function option(base, _ref6) {
-      var isSelected = _ref6.isSelected,
-        isFocused = _ref6.isFocused;
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        backgroundColor: isSelected ? formElements.input.borderFocus : !isFocused ? "transparent" : formElements.input.hoverColor,
-        color: isSelected ? formElements.input.textColorFocused : "inherit",
-        borderRadius: hasInnerSearch ? "5px" : "none",
-        "&:hover": {
-          color: isSelected ? formElements.input.textColorFocused : formElements.input.textColor,
-          backgroundColor: isFocused ? !isSelected ? formElements.input.hoverColor : formElements.input.borderFocus : "transparent"
-        }
-      });
-    },
-    menuList: function menuList(base) {
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        margin: "0.5rem 0",
-        padding: "0",
-        "::-webkit-scrollbar": {
-          width: "5px"
-        },
-        "::-webkit-scrollbar-track": {
-          background: scrollbar.background,
-          borderRadius: "10px"
-        },
-        "::-webkit-scrollbar-thumb": {
-          backgroundColor: scrollbar.color,
-          borderRadius: "10px"
-        }
-      });
-    },
-    indicatorsContainer: function indicatorsContainer(base) {
-      return _objectSpread2(_objectSpread2({}, base), {}, {
-        // it is important to set the indicator size to the same height as the input to avoid centering issues
-        height: "calc(".concat(inputHeight[size], " - 2px)")
-      });
-    }
+  var styles = resolveStyles(size, hasInnerSearch);
+  var formatCreateLabel = function formatCreateLabel(inputValue) {
+    return jsx("div", null, jsx(Tooltip, {
+      content: creatableTooltip
+    }, jsx("div", {
+      className: "select-create-label"
+    }, jsx("span", null, inputValue, " "), jsx("span", null, jsx(SvgAddOperator, {
+      color: "black",
+      height: 12
+    })))));
   };
-  useClickAway(function (e) {
-    // Ignore clicks on the close icon, can be one of the three following:
-    var _ref7 = e.target,
-      nodeName = _ref7.nodeName,
-      className = _ref7.className;
-    var isSvg = nodeName === "svg";
-    var isPath = nodeName === "path";
-    var isCloseIcon = className === "close-icon";
-    if (isSvg || isPath || isCloseIcon) return;
-    setIsFocused(false);
-    setInputValue("");
-  }, [containerRef]);
-  return jsx("div", {
-    css: function css(theme) {
-      return selectContainer(theme, {
-        size: size,
-        inline: inline,
-        isInlineFlex: isInlineFlex,
-        minWidth: minWidth,
-        maxWidth: maxWidth,
-        hasInnerSearch: hasInnerSearch
-      });
-    }
-  }, hasLabel && jsx(Label, {
-    htmlFor: id,
-    "aria-labelledby": id
-  }, label), jsx("div", {
-    className: "select-input-wrapper",
-    "data-testid": "custom-react-select",
-    ref: containerRef
-  }, jsx(StateManagedSelect$1, _extends({}, rest, {
-    ref: forwardedRef
-    // react-select props
-    ,
+  var customSelectProps = _objectSpread2(_objectSpread2({}, rest), {}, {
+    ref: forwardedRef,
+    styles: styles,
     blurInputOnSelect: !isMulti,
     closeMenuOnSelect: !isMulti,
     isMulti: isMulti,
@@ -234,16 +103,13 @@ var Select = function Select(props, forwardedRef) {
         }));
       }
     },
+    formatCreateLabel: formatCreateLabel,
     isSearchable: false,
     maxMenuHeight: maxMenuHeight,
     menuIsOpen: isFocused || undefined,
     options: options,
     placeholder: outerPlaceholder,
-    styles: styles,
-    inputValue: inputValue
-    // custom props
-    ,
-
+    inputValue: inputValue,
     onMenuInputFocus: function onMenuInputFocus() {
       return setIsFocused(true);
     },
@@ -252,7 +118,6 @@ var Select = function Select(props, forwardedRef) {
     },
     innerPlaceholder: innerPlaceholder,
     hasInnerSearch: hasInnerSearch,
-    // events
     onChange: function onChange(option, action) {
       setIsFocused(false);
       _onChange && _onChange(option, action);
@@ -260,7 +125,40 @@ var Select = function Select(props, forwardedRef) {
     onInputChange: function onInputChange(val) {
       return setInputValue(val);
     }
-  }))));
+  });
+  useClickAway(function (e) {
+    // Ignore clicks on the close icon, can be one of the three following:
+    var _ref = e.target,
+      nodeName = _ref.nodeName,
+      className = _ref.className;
+    var isSvg = nodeName === "svg";
+    var isPath = nodeName === "path";
+    var isCloseIcon = className === "close-icon";
+    if (isSvg || isPath || isCloseIcon) return;
+    setIsFocused(false);
+    setInputValue("");
+  }, [containerRef]);
+  return jsx("div", {
+    css: function css(theme) {
+      return selectContainer(theme, {
+        size: size,
+        inline: inline,
+        isInlineFlex: isInlineFlex,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        hasInnerSearch: hasInnerSearch
+      });
+    }
+  }, hasLabel && jsx(Label, {
+    htmlFor: id,
+    "aria-labelledby": id
+  }, label), jsx("div", {
+    className: "select-input-wrapper",
+    "data-testid": "custom-react-select",
+    ref: containerRef
+  }, isCreatable ? jsx(CreatableSelect$1, _extends({}, customSelectProps, {
+    createOptionPosition: "first"
+  })) : jsx(StateManagedSelect$1, customSelectProps)));
 };
 var Select$1 = /*#__PURE__*/forwardRef(Select);