@quintoandar-tokko/collapsible 1.2.373

package/lib/index.js

@@ -0,0 +1,127 @@
+"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.Collapsible = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _framerMotion = require("framer-motion");
+var _button = require("@quintoandar-tokko/button");
+var _box = require("@quintoandar-tokko/box");
+var _excluded = ["children", "isOpen"],
+  _excluded2 = ["children", "isMainButton", "isSmallButtonIcon", "active", "icon", "text", "isExpanded", "isCollapsible", "badgeValue", "badgeVariant", "setExpand"];
+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 _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 CollapsibleContext = /*#__PURE__*/(0, _react.createContext)();
+var Collapsible = exports.Collapsible = function Collapsible(_ref) {
+  var children = _ref.children,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var ref = _react["default"].useRef();
+  var value = _react["default"].useMemo(function () {
+    return {
+      isOpen: isOpen,
+      ref: ref
+    };
+  }, [isOpen]);
+  return /*#__PURE__*/_react["default"].createElement(CollapsibleContext.Provider, {
+    value: value
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, props, children));
+};
+var useCollapsibleContext = function useCollapsibleContext() {
+  var context = (0, _react.useContext)(CollapsibleContext);
+  if (!context) {
+    throw new Error('Collapsible compound components cannot be rendered outside the Collapsible component');
+  }
+  return context;
+};
+var CollapsibleButton = function CollapsibleButton(_ref2) {
+  var children = _ref2.children,
+    _ref2$isMainButton = _ref2.isMainButton,
+    isMainButton = _ref2$isMainButton === void 0 ? false : _ref2$isMainButton,
+    _ref2$isSmallButtonIc = _ref2.isSmallButtonIcon,
+    isSmallButtonIcon = _ref2$isSmallButtonIc === void 0 ? false : _ref2$isSmallButtonIc,
+    _ref2$active = _ref2.active,
+    active = _ref2$active === void 0 ? false : _ref2$active,
+    icon = _ref2.icon,
+    text = _ref2.text,
+    _ref2$isExpanded = _ref2.isExpanded,
+    isExpanded = _ref2$isExpanded === void 0 ? false : _ref2$isExpanded,
+    isCollapsible = _ref2.isCollapsible,
+    badgeValue = _ref2.badgeValue,
+    badgeVariant = _ref2.badgeVariant,
+    setExpand = _ref2.setExpand,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  if (isSmallButtonIcon || isMainButton) {
+    return /*#__PURE__*/_react["default"].createElement(_button.ButtonIcon, _extends({}, props, {
+      icon: icon,
+      text: text,
+      isCollapsible: isCollapsible,
+      isExpanded: isExpanded,
+      active: active,
+      badgeValue: badgeValue,
+      badgeVariant: badgeVariant,
+      setExpand: setExpand,
+      holdPress: true,
+      sx: {
+        width: isMainButton && '100%',
+        '+ .content': {
+          overflow: 'hidden'
+        }
+      }
+    }));
+  } else {
+    return /*#__PURE__*/_react["default"].createElement(_button.Button, _extends({}, props, {
+      sx: {
+        width: '100%',
+        border: 'none',
+        borderRadius: '0',
+        padding: '10px 0',
+        textAlign: 'left',
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'space-between',
+        '+ .content': {
+          overflow: 'hidden'
+        }
+      }
+    }), children);
+  }
+};
+var CollapsibleBody = function CollapsibleBody(_ref3) {
+  var children = _ref3.children;
+  var _useCollapsibleContex = useCollapsibleContext(),
+    isOpen = _useCollapsibleContex.isOpen;
+  return /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, isOpen && /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
+    className: "content",
+    initial: "collapsed",
+    animate: "open",
+    exit: "collapsed",
+    variants: {
+      open: {
+        height: 'auto',
+        transition: {
+          duration: 0.2,
+          ease: 'easeIn'
+        }
+      },
+      collapsed: {
+        height: 0,
+        transition: {
+          duration: 0.2,
+          ease: 'easeOut'
+        },
+        overflow: 'hidden'
+      }
+    }
+  }, children));
+};
+Collapsible.Button = CollapsibleButton;
+Collapsible.Body = CollapsibleBody;

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@quintoandar-tokko/collapsible",
+  "version": "1.2.373",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "@quintoandar-tokko/box": "^1.2.286",
+    "@quintoandar-tokko/button": "^1.2.371",
+    "framer-motion": "2.9.4"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "3c5995a3482c9cd1b428a69e135c934c37bce2ae"
+}