contentoh-components-library 21.2.105 → 21.2.106

package/dist/components/molecules/ImageTooltip/ImageTooltip.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageTooltipTest = exports.ImageTooltipOK = exports.ImageTooltipERROR = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ImageTooltip",
+  component: _index.ImageTooltip,
+  argTypes: {
+    position: {
+      options: [undefined, "topStart", "topEnd", "topCenter", "rightStart", "rightEnd", "rightCenter", "bottomStart", "bottomEnd", "bottomCenter", "leftStart", "leftEnd", "leftCenter"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ImageTooltip, (0, _objectSpread2.default)({}, args));
+};
+
+var keyS3_test = "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg";
+var srcTest = "https://content-management-images.s3.amazonaws.com/".concat(keyS3_test);
+var ImageTooltipTest = Template.bind({});
+exports.ImageTooltipTest = ImageTooltipTest;
+ImageTooltipTest.args = {
+  width: "200px",
+  sizeLoading: "50",
+  colorLoading: "#bbbbbb",
+  src: "bn",
+  componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: "test error"
+  }),
+  componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " mensaje del tooltip test "
+  }),
+  position: undefined
+};
+var keyS3_OK = "84300/1/chat/f6579ed5-16e5-48d8-ace5-6be8e8e68f53-38896acf-9179-4686-9088-9784df624ab8.png";
+var srcOK = "https://content-management-images.s3.amazonaws.com/".concat(keyS3_OK);
+var ImageTooltipOK = Template.bind({});
+exports.ImageTooltipOK = ImageTooltipOK;
+ImageTooltipOK.args = {
+  width: "250px",
+  sizeLoading: "40",
+  src: srcOK,
+  componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " img no cargada "
+  }),
+  componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " mensaje del tooltip OK "
+  }),
+  position: undefined
+};
+var keyS3_ERROR = "84300/1/chat/21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg";
+var srcERROR = "https://content-management-images.s3.amazonaws.com/".concat(keyS3_ERROR);
+var ImageTooltipERROR = Template.bind({});
+exports.ImageTooltipERROR = ImageTooltipERROR;
+ImageTooltipERROR.args = {
+  width: "300px",
+  sizeLoading: "60",
+  src: srcERROR,
+  componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " ERROR al cargar "
+  }),
+  componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " mensaje del tooltip ERROR "
+  }),
+  position: undefined
+};

package/dist/components/molecules/ImageTooltip/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageTooltip = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
+var _react = require("react");
+
+var _Tooltip = require("../../atoms/Tooltip");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ImageTooltip = function ImageTooltip(props) {
+  var className = props.className,
+      width = props.width,
+      sizeLoading = props.sizeLoading,
+      colorLoading = props.colorLoading,
+      classNameLoading = props.classNameLoading,
+      src = props.src,
+      componentDefault = props.componentDefault,
+      classNameImg = props.classNameImg,
+      classNameTooltip = props.classNameTooltip,
+      componentTooltip = props.componentTooltip,
+      position = props.position;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      imgLoad = _useState2[0],
+      setImgLoad = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+  /* solo para hacer pruebas en modo dev
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+  }, []);
+  */
+
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tooltip.Tooltip, {
+    position: position !== null && position !== void 0 ? position : "topCenter",
+    addArrow: false,
+    transitionType: "zoom",
+    followCursor: false,
+    className: className,
+    classNameTooltip: classNameTooltip,
+    componentTooltip: imgLoad !== undefined && !loading && componentTooltip,
+    children: [src && (imgLoad === undefined || loading) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerLoading, {
+      className: classNameLoading,
+      sizeLoading: sizeLoading,
+      colorLoading: colorLoading,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+        pulse: true,
+        icon: _freeSolidSvgIcons.faSpinner
+      })
+    }), (!src || imgLoad === false && !loading) && componentDefault, /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Img, {
+      className: classNameImg,
+      src: src,
+      onLoad: function onLoad(event) {
+        return setImgLoad(true);
+      },
+      onError: function onError(event) {
+        return setImgLoad(false);
+      },
+      show: imgLoad === true && !loading
+    })]
+  });
+};
+
+exports.ImageTooltip = ImageTooltip;

package/dist/components/molecules/ImageTooltip/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Img = exports.ContainerLoading = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2;
+
+var ContainerLoading = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: grid;\n  place-items: center;\n  min-width: min-content;\n  font-size: ", "px;\n  color: ", ";\n  padding: 5px;\n"])), function (_ref) {
+  var sizeLoading = _ref.sizeLoading;
+  return sizeLoading ? sizeLoading : "30";
+}, function (_ref2) {
+  var colorLoading = _ref2.colorLoading;
+  return colorLoading ? colorLoading : "#9e2674";
+});
+
+exports.ContainerLoading = ContainerLoading;
+
+var Img = _styledComponents.default.img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  width: 100%;\n  object-fit: contain;\n"])), function (_ref3) {
+  var show = _ref3.show;
+  return show ? "grid" : "none";
+});
+
+exports.Img = Img;

package/dist/components/molecules/SelectV2/SelectV2.stories.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectV2Test = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/SelectV2",
+  component: _index.SelectV2,
+  argTypes: {
+    positionDropdown: {
+      options: [undefined, "topStart", "topEnd", "topCenter", "rightStart", "rightEnd", "rightCenter", "bottomStart", "bottomEnd", "bottomCenter", "leftStart", "leftEnd", "leftCenter"],
+      control: {
+        type: "select"
+      }
+    },
+    triggerType: {
+      options: [undefined, "hover", "click"],
+      control: {
+        type: "select"
+      }
+    },
+    typeSelectItems: {
+      options: [undefined, "checkbox", "marginCheckbox", "labelOnly"],
+      control: {
+        type: "select"
+      }
+    },
+    borderType: {
+      options: [undefined, "rectangle", "oval"],
+      control: {
+        type: "select"
+      }
+    },
+    alignmentItemsOverflow: {
+      options: [undefined, "columns", "rows"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SelectV2, (0, _objectSpread2.default)({}, args));
+};
+
+var SelectV2Test = Template.bind({});
+exports.SelectV2Test = SelectV2Test;
+SelectV2Test.args = {
+  items: [{
+    label: "Palomitas de maiz",
+    value: 1,
+    selected: false
+  }, {
+    label: "Sabritas",
+    value: 2,
+    selected: true
+  }, {
+    label: "sabritas Doritos",
+    value: 3,
+    selected: false
+  }, {
+    label: "Este es un texto muy largo que deberia llegar al limite establecido para el width",
+    value: 4,
+    selected: true
+  }, {
+    label: "galletas",
+    value: 5,
+    selected: false
+  }, {
+    label: "jugo de uva",
+    value: 6,
+    selected: false
+  }],
+  triggerType: "hover",
+  selectButton: {
+    className: "btnSelectPrueba",
+    type: "whiteS3",
+    transparent: undefined,
+    disabled: false,
+    label: "select de prueba",
+    size: 12,
+    borderType: "oval"
+  },
+  defaultItem: {
+    label: "Ningun filtro",
+    itemType: undefined,
+    showLabelInSelect: true
+  },
+  inputSearch: {
+    className: "inputBusqueda",
+    defaultText: "hola"
+  },
+  typeSelectItems: undefined,
+  borderType: undefined,
+  maxWidthSelect: "150px",
+  maxWidthDropdown: "300px",
+  maxHeightDropdown: "300px",
+  maxWidthItems: "100px",
+  alignmentItemsOverflow: undefined,
+  multiple: true,
+  classNameSelect: "selectPrueba",
+  classNameDropdown: "dropdownSelectPrueba",
+  positionDropdown: undefined,
+  onChange: function onChange(selectedItems) {
+    console.log("selectedItems:", selectedItems);
+  }
+};

package/dist/components/molecules/SelectV2/index.js

@@ -0,0 +1,298 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectV2 = void 0;
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _material = require("@mui/material");
+
+var _styles = require("./styles");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
+var _utils = require("../../../global-files/utils");
+
+var _SelectItemV = require("../../atoms/SelectItemV2");
+
+var _InputText = require("../../atoms/InputText");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var SelectV2 = function SelectV2(props) {
+  var _positions$positionDr;
+
+  var items = props.items,
+      triggerType = props.triggerType,
+      selectButton = props.selectButton,
+      defaultItem = props.defaultItem,
+      inputSearch = props.inputSearch,
+      maxWidthSelect = props.maxWidthSelect,
+      maxWidthDropdown = props.maxWidthDropdown,
+      maxHeightDropdown = props.maxHeightDropdown,
+      maxWidthItems = props.maxWidthItems,
+      alignmentItemsOverflow = props.alignmentItemsOverflow,
+      typeSelectItems = props.typeSelectItems,
+      multiple = props.multiple,
+      borderType = props.borderType,
+      classNameSelect = props.classNameSelect,
+      classNameDropdown = props.classNameDropdown,
+      positionDropdown = props.positionDropdown,
+      onChange = props.onChange;
+  var positions = {
+    topStart: "top-start",
+    topEnd: "top-end",
+    topCenter: "top",
+    rightStart: "right-start",
+    rightEnd: "right-end",
+    rightCenter: "right",
+    bottomStart: "bottom-start",
+    bottomEnd: "bottom-end",
+    bottomCenter: "bottom",
+    leftStart: "left-start",
+    leftEnd: "left-end",
+    leftCenter: "left"
+  };
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selectedItems = _useState2[0],
+      setSelectedItems = _useState2[1]; // { .. }
+
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      customItems = _useState4[0],
+      setCustomItems = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showDropdown = _useState6[0],
+      setShowDropdown = _useState6[1];
+
+  var _useState7 = (0, _react.useState)("Sin titulo"),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      labelSelect = _useState8[0],
+      setLabelSelect = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      textInputSearch = _useState10[0],
+      setTextInputSearch = _useState10[1];
+
+  var refInputTextSearch = (0, _react.useRef)(); // cada que cambie la lista de items
+
+  (0, _react.useEffect)(function () {
+    if ((0, _utils.isArrayEmpty)(items)) {
+      setSelectedItems({});
+      return;
+    } // items iniciales seleccionados
+
+
+    var initialSelectedItems = {};
+    items.forEach(function (item) {
+      if (item.selected) {
+        if (multiple) initialSelectedItems[item.value] = item.value;else initialSelectedItems = (0, _defineProperty2.default)({}, item.value, item.value);
+      }
+    });
+    setSelectedItems(initialSelectedItems);
+  }, [items]); // cada que cambien los items seleccionados
+
+  (0, _react.useEffect)(function () {
+    if (!selectedItems) return;
+    renderItems();
+    renderLabelSelect();
+    onChange && onChange(Object.values(selectedItems));
+  }, [selectedItems]); // evento click de cada item de la lista
+
+  var onClickItem = function onClickItem(isSelected, value) {
+    var selectedItemsCopy = (0, _objectSpread2.default)({}, selectedItems);
+
+    if (isSelected) {
+      multiple ? selectedItemsCopy[value] = value : selectedItemsCopy = (0, _defineProperty2.default)({}, value, value);
+    } else delete selectedItemsCopy[value];
+
+    setSelectedItems(selectedItemsCopy);
+  };
+
+  var onClickSearch = function onClickSearch() {
+    setTextInputSearch(textInputSearch.trim());
+    (refInputTextSearch === null || refInputTextSearch === void 0 ? void 0 : refInputTextSearch.current) && refInputTextSearch.current.blur();
+    renderItems(textInputSearch.trim());
+  };
+
+  var renderLabelSelect = function renderLabelSelect() {
+    if (!selectedItems) return;
+    var selectedItemsCopy = Object.values(selectedItems);
+
+    if (selectedItemsCopy.length > 1) {
+      setLabelSelect("Personalizado");
+    } else if (selectedItemsCopy.length === 1) {
+      var labelItem = undefined;
+
+      var _iterator = (0, _createForOfIteratorHelper2.default)(items),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var item = _step.value;
+
+          if (item.value == selectedItemsCopy[0]) {
+            labelItem = item.label;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      !(0, _utils.isStringEmpty)(labelItem) ? setLabelSelect(labelItem) : setLabelSelect("Sin titulo");
+    } else {
+      if (!(0, _utils.isStringEmpty)(defaultItem === null || defaultItem === void 0 ? void 0 : defaultItem.label) && defaultItem !== null && defaultItem !== void 0 && defaultItem.showLabelInSelect) {
+        setLabelSelect(defaultItem.label);
+      } else if (!(0, _utils.isStringEmpty)(selectButton === null || selectButton === void 0 ? void 0 : selectButton.label)) {
+        setLabelSelect(selectButton.label);
+      } else {
+        setLabelSelect("Sin titulo");
+      }
+    }
+  };
+
+  var renderItems = function renderItems() {
+    var textSearch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+    if ((0, _utils.isArrayEmpty)(items)) setCustomItems([]);
+    setCustomItems(items.map(function (item, index) {
+      if (!(0, _utils.isStringEmpty)(textSearch) && !item.label.trim().toLowerCase().includes(textSearch.trim().toLowerCase())) {
+        return null;
+      }
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItemV.SelectItemV2, {
+        label: item.label,
+        value: item.value,
+        checkbox: typeSelectItems === "checkbox" ? true : typeSelectItems === "marginCheckbox" ? false : undefined,
+        selected: selectedItems && selectedItems[item.value] ? true : false,
+        onClick: onClickItem
+      }, classNameSelect + "_item" + index);
+    }));
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+    onClickAway: function onClickAway(event) {
+      if (triggerType !== "hover") setShowDropdown(false);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      className: !(0, _utils.isStringEmpty)(classNameSelect) ? classNameSelect : "",
+      borderType: borderType,
+      maxWidthSelect: maxWidthSelect,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        placement: (_positions$positionDr = positions[positionDropdown]) !== null && _positions$positionDr !== void 0 ? _positions$positionDr : positions.bottomCenter,
+        open: triggerType !== "hover" ? showDropdown : undefined,
+        arrow: false,
+        componentsProps: {
+          tooltip: {
+            className: "dropdownSelect" + ((0, _utils.isStringEmpty)(classNameDropdown) ? "" : " " + classNameDropdown)
+          },
+          popper: {
+            disablePortal: true
+          },
+          transition: {
+            timeout: 300
+          }
+        },
+        TransitionComponent: _material.Fade,
+        enterDelay: 100,
+        followCursor: false,
+        disableFocusListener: true,
+        disableTouchListener: true,
+        disableHoverListener: triggerType !== "hover" || (selectButton === null || selectButton === void 0 ? void 0 : selectButton.disabled),
+        title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [inputSearch && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "container-inputSearch" + (!(0, _utils.isStringEmpty)(inputSearch === null || inputSearch === void 0 ? void 0 : inputSearch.className) ? " " + inputSearch.className : ""),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+              className: "buttonSearch",
+              type: "gray",
+              transparent: true,
+              size: 14,
+              icon: _freeSolidSvgIcons.faSearch,
+              onClick: function onClick(event) {
+                if ((0, _utils.isStringEmpty)(textInputSearch) && refInputTextSearch !== null && refInputTextSearch !== void 0 && refInputTextSearch.current) {
+                  setTextInputSearch("");
+                  refInputTextSearch.current.focus();
+                } else {
+                  onClickSearch();
+                }
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputText.InputText, {
+              className: "inputSearch",
+              type: "black",
+              transparent: true,
+              size: 12,
+              placeHolder: (0, _utils.isStringEmpty)(inputSearch === null || inputSearch === void 0 ? void 0 : inputSearch.defaultText) ? "Texto a buscar" : inputSearch.defaultText,
+              text: textInputSearch,
+              onChangeText: function onChangeText(newValue) {
+                return setTextInputSearch(newValue);
+              },
+              onEnter: function onEnter(event) {
+                return onClickSearch();
+              },
+              refInputText: refInputTextSearch
+            })]
+          }), defaultItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItemV.SelectItemV2, {
+            label: defaultItem.label,
+            value: null,
+            checkbox: defaultItem.itemType === "checkbox" ? true : defaultItem.itemType === "marginCheckbox" ? false : undefined,
+            selected: selectedItems && Object.keys(selectedItems).length ? false : true,
+            onClick: function onClick(isSelected, value) {
+              selectedItems && Object.keys(selectedItems).length && setSelectedItems({});
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "container-items",
+            children: customItems
+          })]
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerSelect, {
+          className: "container-buttonSelect",
+          maxWidthDropdown: maxWidthDropdown,
+          maxHeightDropdown: maxHeightDropdown,
+          alignmentItemsOverflow: alignmentItemsOverflow,
+          maxWidthItems: maxWidthItems,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+            className: "buttonSelect" + (!(0, _utils.isStringEmpty)(selectButton === null || selectButton === void 0 ? void 0 : selectButton.className) ? " " + selectButton.className : ""),
+            disabled: selectButton === null || selectButton === void 0 ? void 0 : selectButton.disabled,
+            type: selectButton === null || selectButton === void 0 ? void 0 : selectButton.type,
+            transparent: selectButton === null || selectButton === void 0 ? void 0 : selectButton.transparent,
+            label: labelSelect,
+            size: selectButton === null || selectButton === void 0 ? void 0 : selectButton.size,
+            icon: _freeSolidSvgIcons.faCaretDown,
+            iconPosition: "end",
+            onClick: function onClick(event) {
+              if (triggerType !== "hover") setShowDropdown(function (prev) {
+                return !prev;
+              });
+            }
+          })
+        })
+      })
+    })
+  });
+};
+
+exports.SelectV2 = SelectV2;

package/dist/components/molecules/SelectV2/styles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerSelect = exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _variables = require("../../../global-files/variables");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  max-width: ", ";\n  //border: 1px solid red;\n  border-radius: ", ";\n"])), function (_ref) {
+  var maxWidthSelect = _ref.maxWidthSelect;
+  return maxWidthSelect ? maxWidthSelect : "unset";
+}, function (_ref2) {
+  var borderType = _ref2.borderType;
+  return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "6px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "oval" ? "17px" : "0px"; // default none
+});
+
+exports.Container = Container;
+
+var ContainerSelect = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border-radius: inherit;\n\n  .buttonSelect {\n    width: 100%;\n    border-radius: inherit;\n\n    .button {\n      padding: 10px 16px;\n      gap: 10px;\n      .icon {\n        font-size: 13px;\n      }\n    }\n  }\n\n  + .MuiTooltip-popper {\n    background-color: transparent;\n\n    .dropdownSelect {\n      --background: white;\n      box-shadow: 0px 0px 10px 1px gray;\n      background-color: var(--background);\n      padding: 0px 0px;\n      border-radius: 7px;\n      display: flex;\n      flex-direction: column;\n      gap: 0px;\n      overflow: hidden;\n      max-width: ", ";\n      max-height: ", ";\n\n      .container-inputSearch {\n        width: 100%;\n        display: flex;\n        flex-direction: row;\n        flex-wrap: nowrap;\n        align-items: center;\n        gap: 0px;\n        padding: 0px 10px 8px 10px;\n        border-bottom: 1px solid #f0f0f0;\n\n        .inputSearch {\n          padding-left: 8px;\n          flex-grow: 2;\n        }\n      }\n\n      .selectItemV2 {\n        width: 100%;\n\n        .button {\n          justify-content: flex-start;\n        }\n      }\n\n      .container-items {\n        flex-grow: 2;\n        display: flex;\n        flex-direction: column;\n        flex-wrap: ", ";\n        overflow: auto;\n\n        .selectItemV2 {\n          width: ", ";\n        }\n      }\n    }\n\n    &[data-popper-placement*=\"bottom\"] .dropdownSelect {\n      margin-top: 10px;\n    }\n    &[data-popper-placement*=\"top\"] .dropdownSelect {\n      margin-bottom: 10px;\n    }\n    &[data-popper-placement*=\"left\"] .dropdownSelect {\n      margin-right: 10px;\n    }\n    &[data-popper-placement*=\"right\"] .dropdownSelect {\n      margin-left: 10px;\n    }\n  }\n"])), function (_ref3) {
+  var maxWidthDropdown = _ref3.maxWidthDropdown;
+  return maxWidthDropdown ? maxWidthDropdown : "400px";
+}, function (_ref4) {
+  var maxHeightDropdown = _ref4.maxHeightDropdown;
+  return maxHeightDropdown ? maxHeightDropdown : "80vh";
+}, function (_ref5) {
+  var alignmentItemsOverflow = _ref5.alignmentItemsOverflow;
+  return alignmentItemsOverflow === "columns" ? "wrap" : "nowrap";
+}, function (_ref6) {
+  var maxWidthItems = _ref6.maxWidthItems;
+  return maxWidthItems ? maxWidthItems : "100%";
+});
+
+exports.ContainerSelect = ContainerSelect;