contentoh-components-library 21.4.136 → 21.4.138

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

@@ -0,0 +1,58 @@
+"use strict";
+
+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");
+
+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(function (_ref2, i) {
+      var cols = _ref2.cols,
+          product = _ref2.product,
+          id = _ref2.id;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "row-container",
+        onClick: function onClick(e) {
+          return onGridClick && onGridClick(e, product, i);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "chk-container",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+            id: "chk-" + id,
+            name: "chk-" + id,
+            className: "chk-item",
+            onChange: function onChange(e) {
+              return chkOnChange && chkOnChange(e, product);
+            },
+            defaultChecked: chkChecked && chkChecked(product)
+          })
+        }), 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

@@ -0,0 +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;
+
+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;
+}, function (_ref2) {
+  var minWidth = _ref2.minWidth;
+  return minWidth ? minWidth : 100;
+}, _variables.FontFamily.Lato);
+
+exports.Column = Column;

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

@@ -0,0 +1,120 @@
+"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",
+    iconPosition: "left"
+  },
+  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,306 @@
+"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,
+      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",
+    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) || !(0, _utils.isObject)(initialSelectedItems)) {
+      setSelectedItems({});
+      renderItems();
+      renderLabelSelect();
+      return;
+    } // items iniciales seleccionados
+
+
+    if (!multiple) {
+      var values = Object.keys(initialSelectedItems);
+      if (values.length) setSelectedItems((0, _defineProperty2.default)({}, values[0], null));else setSelectedItems({});
+    } else {
+      setSelectedItems(initialSelectedItems);
+    }
+
+    renderItems();
+    renderLabelSelect();
+  }, [items]); // cada que cambien los items seleccionados
+
+  (0, _react.useEffect)(function () {
+    if (!(0, _utils.isObject)(selectedItems)) return;
+    renderItems();
+    renderLabelSelect();
+  }, [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] = null : selectedItemsCopy = (0, _defineProperty2.default)({}, value, null);
+    } else delete selectedItemsCopy[value];
+
+    setSelectedItems(selectedItemsCopy);
+    onChange && onChange(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 (!(0, _utils.isObject)(selectedItems)) return;
+    var selectedItemsCopy = Object.keys(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: (0, _utils.isObject)(selectedItems) && selectedItems[item.value] !== undefined ? 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: (0, _utils.isObject)(selectedItems) && Object.keys(selectedItems).length ? false : true,
+            onClick: function onClick(isSelected, value) {
+              if ((0, _utils.isObject)(selectedItems) && Object.keys(selectedItems).length) {
+                setSelectedItems({});
+                onChange && onChange({});
+              }
+            }
+          }), /*#__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: ["left", "right", "top", "bottom"].includes(selectButton === null || selectButton === void 0 ? void 0 : selectButton.iconPosition) ? selectButton.iconPosition : "right",
+            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;

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

@@ -0,0 +1,94 @@
+"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");
+
+var TestSelectV2 = function TestSelectV2() {
+  var _useState = (0, _react.useState)([{
+    label: "item 1",
+    value: 1
+  }, {
+    label: "item 2",
+    value: 2
+  }, {
+    label: "item 3",
+    value: 3
+  }, {
+    label: "item 4",
+    value: 4
+  }]),
+      _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,
+      initialSelectedItems: undefined,
+      triggerType: "hover",
+      selectButton: {
+        type: "whiteS3",
+        transparent: true,
+        disabled: false,
+        label: "Prueba select",
+        size: 12
+      },
+      defaultItem: {
+        label: "default opcion",
+        itemType: "labelOnly",
+        showLabelInSelect: true
+      },
+      inputSearch: {
+        defaultText: "Buscar"
+      },
+      typeSelectItems: "checkbox",
+      multiple: false,
+      borderType: "oval",
+      onChange: function onChange(selectedItems) {
+        setSelected(selectedItems);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      onClick: function onClick(event) {
+        setItems([{
+          label: "item 1",
+          value: 1
+        }, {
+          label: "item 2",
+          value: 2
+        }, {
+          label: "item 3",
+          value: 3
+        }, {
+          label: "item 4",
+          value: 4
+        }, {
+          label: "item 5",
+          value: 5
+        }]);
+      },
+      children: "Refresh lista"
+    })]
+  });
+};
+
+exports.TestSelectV2 = TestSelectV2;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Test = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _test = require("./test");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/SelectV2/TestSelectV2",
+  component: _test.TestSelectV2
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_test.TestSelectV2, (0, _objectSpread2.default)({}, args));
+};
+
+var Test = Template.bind({});
+exports.Test = Test;