contentoh-components-library 21.4.102 → 21.4.104

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

@@ -4,46 +4,55 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RowItem = void 0;
+
 var _styles = require("./styles");
+
 var _ColumnItem = require("./ColumnItem");
+
 var _CheckBox = require("../../atoms/CheckBox");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const RowItem = _ref => {
-  let {
-    productsArray = [],
-    chkOnChange,
-    onGridClick,
-    chkChecked
-  } = _ref;
+
+var RowItem = function RowItem(_ref) {
+  var _ref$productsArray = _ref.productsArray,
+      productsArray = _ref$productsArray === void 0 ? [] : _ref$productsArray,
+      chkOnChange = _ref.chkOnChange,
+      onGridClick = _ref.onGridClick,
+      chkChecked = _ref.chkChecked;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: productsArray.map((_ref2, i) => {
-      let {
-        cols,
-        product,
-        id
-      } = _ref2;
+    children: productsArray.map(function (_ref2, i) {
+      var cols = _ref2.cols,
+          product = _ref2.product,
+          id = _ref2.id;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "row-container",
-        onClick: e => onGridClick && onGridClick(e, product, i),
+        onClick: function onClick(e) {
+          return onGridClick && onGridClick(e, product, i);
+        },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "chk-container",
-          onClick: e => {
+          onClick: function onClick(e) {
             e.stopPropagation();
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
             id: "chk-" + id,
             name: "chk-" + id,
             className: "chk-item",
-            onChange: e => chkOnChange && chkOnChange(e, product),
+            onChange: function onChange(e) {
+              return chkOnChange && chkOnChange(e, product);
+            },
             defaultChecked: chkChecked && chkChecked(product)
           })
-        }), cols.map((col, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnItem.ColumnItem, {
-          element: col.name,
-          flex: col.flex,
-          minWidth: col.minWidth
-        }, id + "-" + i))]
+        }), cols.map(function (col, i) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnItem.ColumnItem, {
+            element: col.name,
+            flex: col.flex,
+            minWidth: col.minWidth
+          }, id + "-" + i);
+        })]
       }, id);
     })
   });
 };
+
 exports.RowItem = RowItem;

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

@@ -1,23 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = exports.Column = 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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: calc(100% - 36px);\n  overflow: auto;\n  min-width: fit-content;\n\n  .row-container {\n    display: flex;\n    cursor: pointer;\n    &:hover {\n      background-color: #fafafa;\n    }\n\n    .chk-container {\n      width: 30px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      .chk-item {\n        width: 16px;\n        height: 16px;\n      }\n    }\n  }\n"])));
-const Column = exports.Column = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: ", ";\n  min-width: ", "px;\n  text-align: center;\n  color: #262626;\n  font-family: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  padding: 10px 5px;\n  display: flex;\n  justify-content: center;\n"])), _ref => {
-  let {
-    flex
-  } = _ref;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: calc(100% - 36px);\n  overflow: auto;\n  min-width: fit-content;\n\n  .row-container {\n    display: flex;\n    cursor: pointer;\n    &:hover {\n      background-color: #fafafa;\n    }\n\n    .chk-container {\n      width: 30px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      .chk-item {\n        width: 16px;\n        height: 16px;\n      }\n    }\n  }\n"])));
+
+exports.Container = Container;
+
+var Column = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: ", ";\n  min-width: ", "px;\n  text-align: center;\n  color: #262626;\n  font-family: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  padding: 10px 5px;\n  display: flex;\n  justify-content: center;\n"])), function (_ref) {
+  var flex = _ref.flex;
   return flex ? flex : 1;
-}, _ref2 => {
-  let {
-    minWidth
-  } = _ref2;
+}, function (_ref2) {
+  var minWidth = _ref2.minWidth;
   return minWidth ? minWidth : 100;
-}, _variables.FontFamily.Lato);
+}, _variables.FontFamily.Lato);
+
+exports.Column = Column;

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

@@ -1,12 +1,19 @@
 "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 = exports.default = {
+
+var _default = {
   title: "Components/molecules/SelectV2",
   component: _index.SelectV2,
   argTypes: {
@@ -42,10 +49,14 @@ var _default = exports.default = {
     }
   }
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SelectV2, {
-  ...args
-});
-const SelectV2Test = exports.SelectV2Test = Template.bind({});
+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",
@@ -103,7 +114,7 @@ SelectV2Test.args = {
   classNameSelect: "selectPrueba",
   classNameDropdown: "dropdownSelectPrueba",
   positionDropdown: undefined,
-  onChange: selectedItems => {
+  onChange: function onChange(selectedItems) {
     console.log("selectedItems:", selectedItems);
   }
 };

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

@@ -1,76 +1,62 @@
 "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");
-const SelectV2 = props => {
+
+var SelectV2 = function SelectV2(props) {
   var _positions$positionDr;
-  const {
-    items /* [
-          {
-          label: string,
-          value: string | number,
-          } , 
-          ...
-          ] */,
-    initialSelectedItems,
-    // { value: null , ... }  -> value = string | number
-    triggerType,
-    // (string) "hover" | "click"
-    selectButton /* {
-                 className: string,
-                 type:	(string) tipos validos de ButtonV2,
-                 transparent: boolean,
-                 disabled: boolean,
-                 label: string ,
-                 size: number ,
-                 iconPosition: string (por default "right")
-                 } */,
-    defaultItem /* {
-                label: string,
-                itemType: (string) "checkbox" | "marginCheckbox" | "labelOnly"
-                showLabelInSelect: boolean, cuando esta seleccionado ver label en el btnSelect??
-                } */,
-    inputSearch /* {
-                className: string,
-                defaultText: string ,
-                } */,
-    maxWidthSelect,
-    // string
-    maxWidthDropdown,
-    // string
-    maxHeightDropdown,
-    // string
-    maxWidthItems,
-    // string
-    alignmentItemsOverflow,
-    // (string) "columns" | "rows" -> por default "rows"
-    typeSelectItems,
-    // (string) "checkbox" | "marginCheckbox" | "labelOnly"
-    multiple,
-    // (boolean) se permite multiple seleccion??
-    borderType,
-    // (string) "rectangle" | "oval" -> por default oval
-    classNameSelect,
-    // (string) clase del container select
-    classNameDropdown,
-    // (string) clase del contenedor tooltip
-    positionDropdown,
-    // (string) posicion del contenedor tooltip (values en object positions)
-    onChange // (selectedItems: {}) = {}  obj con los values de los items seleccionados
-  } = props;
-  const positions = {
+
+  var items = props.items,
+      initialSelectedItems = props.initialSelectedItems,
+      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",
@@ -84,72 +70,105 @@ const SelectV2 = props => {
     leftEnd: "left-end",
     leftCenter: "left"
   };
-  const [selectedItems, setSelectedItems] = (0, _react.useState)(); // { .. }
-  const [customItems, setCustomItems] = (0, _react.useState)([]);
-  const [showDropdown, setShowDropdown] = (0, _react.useState)(false);
-  const [labelSelect, setLabelSelect] = (0, _react.useState)("Sin titulo");
-  const [textInputSearch, setTextInputSearch] = (0, _react.useState)("");
-  const refInputTextSearch = (0, _react.useRef)();
-
-  // cada que cambie la lista de items
-  (0, _react.useEffect)(() => {
+
+  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) || !(0, _utils.isObject)(initialSelectedItems)) {
       setSelectedItems({});
       renderItems();
       renderLabelSelect();
       return;
-    }
-    // items iniciales seleccionados
+    } // items iniciales seleccionados
+
+
     if (!multiple) {
-      const values = Object.keys(initialSelectedItems);
-      if (values.length) setSelectedItems({
-        [values[0]]: null
-      });else setSelectedItems({});
+      var values = Object.keys(initialSelectedItems);
+      if (values.length) setSelectedItems((0, _defineProperty2.default)({}, values[0], null));else setSelectedItems({});
     } else {
       setSelectedItems(initialSelectedItems);
     }
+
     renderItems();
     renderLabelSelect();
-  }, [items]);
+  }, [items]); // cada que cambien los items seleccionados
 
-  // cada que cambien los items seleccionados
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (!(0, _utils.isObject)(selectedItems)) return;
     renderItems();
     renderLabelSelect();
-  }, [selectedItems]);
+  }, [selectedItems]); // evento click de cada item de la lista
+
+  var onClickItem = function onClickItem(isSelected, value) {
+    var selectedItemsCopy = (0, _objectSpread2.default)({}, selectedItems);
 
-  // evento click de cada item de la lista
-  const onClickItem = (isSelected, value) => {
-    let selectedItemsCopy = {
-      ...selectedItems
-    };
     if (isSelected) {
-      multiple ? selectedItemsCopy[value] = null : selectedItemsCopy = {
-        [value]: null
-      };
+      multiple ? selectedItemsCopy[value] = null : selectedItemsCopy = (0, _defineProperty2.default)({}, value, null);
     } else delete selectedItemsCopy[value];
+
     setSelectedItems(selectedItemsCopy);
     onChange && onChange(selectedItemsCopy);
   };
-  const onClickSearch = () => {
+
+  var onClickSearch = function onClickSearch() {
     setTextInputSearch(textInputSearch.trim());
     (refInputTextSearch === null || refInputTextSearch === void 0 ? void 0 : refInputTextSearch.current) && refInputTextSearch.current.blur();
     renderItems(textInputSearch.trim());
   };
-  const renderLabelSelect = () => {
+
+  var renderLabelSelect = function renderLabelSelect() {
     if (!(0, _utils.isObject)(selectedItems)) return;
-    const selectedItemsCopy = Object.keys(selectedItems);
+    var selectedItemsCopy = Object.keys(selectedItems);
+
     if (selectedItemsCopy.length > 1) {
       setLabelSelect("Personalizado");
     } else if (selectedItemsCopy.length === 1) {
-      let labelItem = undefined;
-      for (const item of items) {
-        if (item.value === selectedItemsCopy[0]) {
-          labelItem = item.label;
-          break;
+      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) {
@@ -161,13 +180,15 @@ const SelectV2 = props => {
       }
     }
   };
-  const renderItems = function () {
-    let textSearch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+
+  var renderItems = function renderItems() {
+    var textSearch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
     if ((0, _utils.isArrayEmpty)(items)) setCustomItems([]);
-    setCustomItems(items.map((item, index) => {
+    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,
@@ -177,8 +198,9 @@ const SelectV2 = props => {
       }, classNameSelect + "_item" + index);
     }));
   };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
-    onClickAway: event => {
+    onClickAway: function onClickAway(event) {
       if (triggerType !== "hover") setShowDropdown(false);
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
@@ -215,7 +237,7 @@ const SelectV2 = props => {
               transparent: true,
               size: 14,
               icon: _freeSolidSvgIcons.faSearch,
-              onClick: event => {
+              onClick: function onClick(event) {
                 if ((0, _utils.isStringEmpty)(textInputSearch) && refInputTextSearch !== null && refInputTextSearch !== void 0 && refInputTextSearch.current) {
                   setTextInputSearch("");
                   refInputTextSearch.current.focus();
@@ -230,8 +252,12 @@ const SelectV2 = props => {
               size: 12,
               placeHolder: (0, _utils.isStringEmpty)(inputSearch === null || inputSearch === void 0 ? void 0 : inputSearch.defaultText) ? "Texto a buscar" : inputSearch.defaultText,
               text: textInputSearch,
-              onChangeText: newValue => setTextInputSearch(newValue),
-              onEnter: event => onClickSearch(),
+              onChangeText: function onChangeText(newValue) {
+                return setTextInputSearch(newValue);
+              },
+              onEnter: function onEnter(event) {
+                return onClickSearch();
+              },
               refInputText: refInputTextSearch
             })]
           }), defaultItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItemV.SelectItemV2, {
@@ -239,7 +265,7 @@ const SelectV2 = props => {
             value: null,
             checkbox: defaultItem.itemType === "checkbox" ? true : defaultItem.itemType === "marginCheckbox" ? false : undefined,
             selected: (0, _utils.isObject)(selectedItems) && Object.keys(selectedItems).length ? false : true,
-            onClick: (isSelected, value) => {
+            onClick: function onClick(isSelected, value) {
               if ((0, _utils.isObject)(selectedItems) && Object.keys(selectedItems).length) {
                 setSelectedItems({});
                 onChange && onChange({});
@@ -265,8 +291,10 @@ const SelectV2 = props => {
             size: selectButton === null || selectButton === void 0 ? void 0 : selectButton.size,
             icon: _freeSolidSvgIcons.faCaretDown,
             iconPosition: ["left", "right", "top", "bottom"].includes(selectButton === null || selectButton === void 0 ? void 0 : selectButton.iconPosition) ? selectButton.iconPosition : "right",
-            onClick: event => {
-              if (triggerType !== "hover") setShowDropdown(prev => !prev);
+            onClick: function onClick(event) {
+              if (triggerType !== "hover") setShowDropdown(function (prev) {
+                return !prev;
+              });
             }
           })
         })
@@ -274,4 +302,5 @@ const SelectV2 = props => {
     })
   });
 };
+
 exports.SelectV2 = SelectV2;

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

@@ -1,43 +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;
-const Container = exports.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"])), _ref => {
-  let {
-    maxWidthSelect
-  } = _ref;
+
+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";
-}, _ref2 => {
-  let {
-    borderType
-  } = _ref2;
+}, 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
 });
-const ContainerSelect = exports.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"])), _ref3 => {
-  let {
-    maxWidthDropdown
-  } = _ref3;
+
+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";
-}, _ref4 => {
-  let {
-    maxHeightDropdown
-  } = _ref4;
+}, function (_ref4) {
+  var maxHeightDropdown = _ref4.maxHeightDropdown;
   return maxHeightDropdown ? maxHeightDropdown : "80vh";
-}, _ref5 => {
-  let {
-    alignmentItemsOverflow
-  } = _ref5;
+}, function (_ref5) {
+  var alignmentItemsOverflow = _ref5.alignmentItemsOverflow;
   return alignmentItemsOverflow === "columns" ? "wrap" : "nowrap";
-}, _ref6 => {
-  let {
-    maxWidthItems
-  } = _ref6;
+}, function (_ref6) {
+  var maxWidthItems = _ref6.maxWidthItems;
   return maxWidthItems ? maxWidthItems : "100%";
-});
+});
+
+exports.ContainerSelect = ContainerSelect;

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

@@ -1,14 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TestSelectV2 = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _react = require("react");
+
 var _ = require(".");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const TestSelectV2 = () => {
-  const [items, setItems] = (0, _react.useState)([{
+
+var TestSelectV2 = function TestSelectV2() {
+  var _useState = (0, _react.useState)([{
     label: "item 1",
     value: 1
   }, {
@@ -20,11 +28,19 @@ const TestSelectV2 = () => {
   }, {
     label: "item 4",
     value: 4
-  }]);
-  const [selected, setSelected] = (0, _react.useState)({
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
     2: null,
     4: null
-  });
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.SelectV2, {
       items: items,
@@ -48,11 +64,11 @@ const TestSelectV2 = () => {
       typeSelectItems: "checkbox",
       multiple: false,
       borderType: "oval",
-      onChange: selectedItems => {
+      onChange: function onChange(selectedItems) {
         setSelected(selectedItems);
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      onClick: event => {
+      onClick: function onClick(event) {
         setItems([{
           label: "item 1",
           value: 1
@@ -74,4 +90,5 @@ const TestSelectV2 = () => {
     })]
   });
 };
+
 exports.TestSelectV2 = TestSelectV2;