@quintoandar-tokko/dropdown 1.2.388

package/lib/index.js

@@ -0,0 +1,302 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _box = require("@quintoandar-tokko/box");
+var _button = require("@quintoandar-tokko/button");
+var _icons = require("@quintoandar-tokko/icons");
+var _list = require("@quintoandar-tokko/list");
+var _hooks = require("@quintoandar-tokko/hooks");
+var _text = require("@quintoandar-tokko/text");
+var _theme = _interopRequireDefault(require("@quintoandar-tokko/theme"));
+var _excluded = ["children"],
+  _excluded2 = ["icon", "text", "variant", "disabled", "filled", "isButtonIcon", "isArrowStatic", "variantSize", "selection"],
+  _excluded3 = ["children", "width", "height", "clickClose"],
+  _excluded4 = ["disabled", "variantSize"],
+  _excluded5 = ["disabled", "active", "variantSize"],
+  _excluded6 = ["disabled", "active", "icon", "variantSize"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var DropdownContext = /*#__PURE__*/(0, _react.createContext)();
+var Dropdown = exports.Dropdown = function Dropdown(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var ref = _react["default"].useRef();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setIsOpen = _useState2[1];
+  (0, _hooks.useOnClickOutside)(ref, function () {
+    return setIsOpen(false);
+  });
+  var value = _react["default"].useMemo(function () {
+    return {
+      open: open,
+      setIsOpen: setIsOpen,
+      ref: ref
+    };
+  }, [open]);
+  return /*#__PURE__*/_react["default"].createElement(DropdownContext.Provider, {
+    value: value
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
+    ref: ref
+  }, props, {
+    __css: {
+      position: 'relative',
+      height: '200px'
+    }
+  }), children));
+};
+var useDropdownContext = function useDropdownContext() {
+  var context = (0, _react.useContext)(DropdownContext);
+  if (!context) {
+    throw new Error('Dropdown compound components cannot be rendered outside the Dropdown component');
+  }
+  return context;
+};
+var DropdownButton = function DropdownButton(_ref2) {
+  var icon = _ref2.icon,
+    text = _ref2.text,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'dropdown' : _ref2$variant,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$filled = _ref2.filled,
+    filled = _ref2$filled === void 0 ? false : _ref2$filled,
+    _ref2$isButtonIcon = _ref2.isButtonIcon,
+    isButtonIcon = _ref2$isButtonIcon === void 0 ? false : _ref2$isButtonIcon,
+    _ref2$isArrowStatic = _ref2.isArrowStatic,
+    isArrowStatic = _ref2$isArrowStatic === void 0 ? false : _ref2$isArrowStatic,
+    _ref2$variantSize = _ref2.variantSize,
+    variantSize = _ref2$variantSize === void 0 ? 'dropdownSizeNormal' : _ref2$variantSize,
+    selection = _ref2.selection,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _useDropdownContext = useDropdownContext(),
+    setIsOpen = _useDropdownContext.setIsOpen;
+  var variantValues = Object.values(_theme["default"].buttons)[Object.keys(_theme["default"].buttons).indexOf(variant)];
+  var colorFilled = variantValues.colorFilled;
+  var backgroundColorFilled = variantValues.backgroundColorFilled;
+  var colorArrowFilled = variantValues.colorArrowFilled;
+  var borderFilled = variantValues.borderFilled;
+  var sizeArrow = variantValues.sizeArrow;
+  if (sizeArrow === undefined) {
+    sizeArrow = '12px';
+  }
+  // ESTO FALLA CON LOS CASOS QUE MENCIONO MARIAN
+  // Porque llamo al buttonIcon
+  if (isButtonIcon) {
+    return /*#__PURE__*/_react["default"].createElement(_button.ButtonIcon, {
+      variant: [variant, variantSize],
+      icon: icon,
+      filled: filled,
+      holdPress: true,
+      onClick: !disabled ? function () {
+        return setIsOpen(function (prevState) {
+          return !prevState;
+        });
+      } : undefined
+    });
+  }
+  return /*#__PURE__*/_react["default"].createElement(_button.Button, _extends({
+    variant: [variant, variantSize]
+  }, props, {
+    onClick: !disabled ? function () {
+      return setIsOpen(function (prevState) {
+        return !prevState;
+      });
+    } : undefined,
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      textOverflow: 'ellipsis',
+      fontFamily: 'Nunito Sans',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textAlign: 'start',
+      color: filled && colorFilled,
+      border: filled && borderFilled,
+      backgroundColor: filled && backgroundColorFilled,
+      justifyContent: isArrowStatic ? 'center' : 'flex-start',
+      '& span': {
+        flex: 1
+      }
+    }
+  }), icon && (!filled ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    icon: icon,
+    fontSize: "16px"
+  }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    icon: icon,
+    fontSize: "16px",
+    style: {
+      color: colorFilled
+    }
+  })), !filled ? /*#__PURE__*/_react["default"].createElement("span", null, text) : /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      color: colorFilled,
+      overflow: 'hidden',
+      width: '95%',
+      textOverflow: 'ellipsis'
+    }
+  }, text), selection && /*#__PURE__*/_react["default"].createElement("span", {
+    style: disabled ? {
+      color: '#AEBAC0',
+      fontWeight: 700
+    } : {
+      color: '#384248',
+      fontWeight: 700
+    }
+  }, selection), !filled ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    icon: "icon-dropdown",
+    fontSize: sizeArrow,
+    style: {
+      position: isArrowStatic ? 'static' : 'absolute',
+      right: '12px',
+      transform: 'rotate(0deg)'
+    }
+  }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    icon: "icon-dropdown",
+    fontSize: sizeArrow,
+    style: {
+      position: isArrowStatic ? 'static' : 'absolute',
+      right: '12px',
+      transform: 'rotate(0deg)',
+      color: colorArrowFilled
+    }
+  }));
+};
+var DropdownList = function DropdownList(_ref3) {
+  var children = _ref3.children,
+    _ref3$width = _ref3.width,
+    width = _ref3$width === void 0 ? '236px' : _ref3$width,
+    _ref3$height = _ref3.height,
+    height = _ref3$height === void 0 ? '150px' : _ref3$height,
+    _ref3$clickClose = _ref3.clickClose,
+    clickClose = _ref3$clickClose === void 0 ? false : _ref3$clickClose,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  var _useDropdownContext2 = useDropdownContext(),
+    open = _useDropdownContext2.open,
+    setIsOpen = _useDropdownContext2.setIsOpen;
+  return open && /*#__PURE__*/_react["default"].createElement(_list.List, _extends({
+    onClick: clickClose ? function () {
+      return setIsOpen(false);
+    } : function () {}
+  }, props, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 1,
+      py: '5px',
+      backgroundColor: 'white',
+      boxShadow: 'active',
+      borderRadius: 'input',
+      position: 'absolute',
+      top: '38px',
+      zIndex: 1,
+      width: width,
+      maxHeight: height
+    }
+  }), children);
+};
+var DropdownListSearch = function DropdownListSearch(props) {
+  return /*#__PURE__*/_react["default"].createElement(_list.List.Search, props);
+};
+var DropdownListItem = function DropdownListItem(props) {
+  return /*#__PURE__*/_react["default"].createElement(_list.List.Item, _extends({}, props, {
+    sx: {
+      cursor: 'pointer',
+      fontSize: '2',
+      color: 'darkGray'
+    }
+  }));
+};
+var DropdownListDefault = function DropdownListDefault(_ref4) {
+  var disabled = _ref4.disabled,
+    _ref4$variantSize = _ref4.variantSize,
+    variantSize = _ref4$variantSize === void 0 ? 'dropdownSizeNormal' : _ref4$variantSize,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/_react["default"].createElement(_list.List.Default, _extends({
+    disabled: disabled,
+    variantSize: variantSize
+  }, props, {
+    sx: {
+      cursor: disabled ? 'default' : 'pointer',
+      pointerEvents: disabled ? 'none' : undefined,
+      userSelect: disabled ? 'none' : undefined,
+      fontSize: '2',
+      color: 'darkGray'
+    }
+  }));
+};
+var DropdownListMultiselect = function DropdownListMultiselect(_ref5) {
+  var disabled = _ref5.disabled,
+    active = _ref5.active,
+    _ref5$variantSize = _ref5.variantSize,
+    variantSize = _ref5$variantSize === void 0 ? 'dropdownSizeNormal' : _ref5$variantSize,
+    props = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/_react["default"].createElement(_list.List.Multiselect, _extends({
+    disabled: disabled,
+    isActive: active,
+    variantSize: variantSize
+  }, props, {
+    sx: {
+      cursor: disabled ? 'default' : 'pointer',
+      pointerEvents: disabled ? 'none' : undefined,
+      userSelect: disabled ? 'none' : undefined,
+      fontSize: '2',
+      color: 'darkGray'
+    }
+  }));
+};
+var DropdownListIcon = function DropdownListIcon(_ref6) {
+  var disabled = _ref6.disabled,
+    active = _ref6.active,
+    icon = _ref6.icon,
+    _ref6$variantSize = _ref6.variantSize,
+    variantSize = _ref6$variantSize === void 0 ? 'dropdownSizeNormal' : _ref6$variantSize,
+    props = _objectWithoutProperties(_ref6, _excluded6);
+  return /*#__PURE__*/_react["default"].createElement(_list.List.Icon, _extends({
+    disabled: disabled,
+    icon: icon,
+    variantSize: variantSize
+  }, props, {
+    sx: {
+      cursor: disabled ? 'default' : 'pointer',
+      pointerEvents: disabled ? 'none' : undefined,
+      userSelect: disabled ? 'none' : undefined,
+      fontSize: '2',
+      color: 'darkGray'
+    }
+  }));
+};
+var DropdownText = function DropdownText(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/_react["default"].createElement(_text.Text, {
+    variant: "body.fontSize12",
+    style: {
+      padding: '9px 12px 9px 12px'
+    }
+  }, children);
+};
+Dropdown.Button = DropdownButton;
+Dropdown.Items = DropdownList;
+Dropdown.Item = DropdownListItem;
+Dropdown.Default = DropdownListDefault;
+Dropdown.Multiselect = DropdownListMultiselect;
+Dropdown.Icon = DropdownListIcon;
+Dropdown.Text = DropdownText;
+Dropdown.Search = DropdownListSearch;

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@quintoandar-tokko/dropdown",
+  "version": "1.2.388",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "@quintoandar-tokko/box": "^1.2.286",
+    "@quintoandar-tokko/button": "^1.2.371",
+    "@quintoandar-tokko/hooks": "^1.2.308",
+    "@quintoandar-tokko/list": "^1.2.365"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "3c5995a3482c9cd1b428a69e135c934c37bce2ae"
+}