@pelcro/react-pelcro-js 4.0.0-alpha.64 → 4.0.0-alpha.65

package/dist/index.cjs.js

@@ -38996,7 +38996,7 @@ const hasActiveMemberships = () => {
 };
 
 const DashboardContent = props => {
-  var _window$Pelcro$user$r, _window$Pelcro, _window$Pelcro$uiSett, _props$children;
+  var _window$Pelcro$user$r, _props$children;
 
   const {
     state: {
@@ -39020,24 +39020,25 @@ const DashboardContent = props => {
   const menuRef = React.useRef(null);
   const user = window.Pelcro.user.read();
   const userHasName = user.first_name || user.last_name;
-  const profilePicture = (_window$Pelcro$user$r = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : userSolidIcon;
-  const newsletters = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.newsletters;
-  Array.isArray(newsletters) && newsletters.length > 0;
-
-  const initializeHideMenuHandler = () => {
-    document.addEventListener("click", hideMenuIfClickedOutside);
-  };
-
-  const hideMenuIfClickedOutside = event => {
-    const dashboardSubmenus = document.getElementById("pelcro-view-dashboard-submenus");
-    const didClickOutsideMenu = isOpen && menuRef.current && !menuRef.current.contains(event.target) && !(dashboardSubmenus !== null && dashboardSubmenus !== void 0 && dashboardSubmenus.contains(event.target));
-
-    if (didClickOutsideMenu) {
-      dispatch({
-        type: CLOSE_DASHBOARD
-      });
-    }
-  };
+  const profilePicture = (_window$Pelcro$user$r = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : userSolidIcon; // const newsletters = window.Pelcro?.uiSettings?.newsletters;
+  // const siteHasNewslettersDefined =
+  //   Array.isArray(newsletters) && newsletters.length > 0;
+  // const initializeHideMenuHandler = () => {
+  //   document.addEventListener("click", hideMenuIfClickedOutside);
+  // };
+  // const hideMenuIfClickedOutside = (event) => {
+  //   const dashboardSubmenus = document.getElementById(
+  //     "pelcro-view-dashboard-submenus"
+  //   );
+  //   const didClickOutsideMenu =
+  //     isOpen &&
+  //     menuRef.current &&
+  //     !menuRef.current.contains(event.target) &&
+  //     !dashboardSubmenus?.contains(event.target);
+  //   if (didClickOutsideMenu) {
+  //     dispatch({ type: CLOSE_DASHBOARD });
+  //   }
+  // };
 
   const setActiveDashboardLink = submenuName => {
     dispatch({
@@ -39176,18 +39177,25 @@ const DashboardContent = props => {
     });
   };
 
-  React.useEffect(() => {
-    return () => {
-      document.removeEventListener("click", hideMenuIfClickedOutside);
-    };
-  }, []);
+  const closeSubMenusTab = () => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: null
+    });
+  }; // useEffect(() => {
+  //   return () => {
+  //     document.removeEventListener("click", hideMenuIfClickedOutside);
+  //   };
+  // }, []);
+
+
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Transition, {
     className: `plc-fixed plc-inset-y-0 plc-h-full lg:plc-w-3/12 plc-w-full plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max ${dashboardLayout == "left" ? "plc-left-0" : "plc-right-0"}`,
     show: isOpen,
     enter: "plc-transform plc-transition plc-duration-500",
     enterFrom: `${dashboardLayout == "left" ? "plc--translate-x-full" : "plc-translate-x-full"}`,
-    enterTo: "plc-translate-x-0",
-    afterEnter: initializeHideMenuHandler,
+    enterTo: "plc-translate-x-0" // afterEnter={initializeHideMenuHandler}
+    ,
     leave: "plc-transform plc-transition plc-duration-500",
     leaveFrom: "plc-translate-x-0",
     leaveTo: `${dashboardLayout == "left" ? "plc--translate-x-full" : "plc-translate-x-full"}`,
@@ -39214,12 +39222,10 @@ const DashboardContent = props => {
     className: "plc-font-bold plc-break-all"
   }, user.first_name, " ", user.last_name), /*#__PURE__*/React__default['default'].createElement("p", {
     className: `plc-m-0 plc-text-sm plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-lg plc-font-bold plc-mt-auto"}`
-  }, user.email)), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "lg:plc-hidden"
-  }, /*#__PURE__*/React__default['default'].createElement(Button, {
+  }, user.email)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "ghost",
     type: "button",
-    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-5 plc-right-10",
+    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-5 plc-right-5",
     onClick: closeDashboard
   }, /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
     className: "plc-fill-current"
@@ -39257,8 +39263,8 @@ const DashboardContent = props => {
   }), activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default['default'].createElement(OrdersMenu, null), activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default['default'].createElement(InvoicesMenu, null), activeDashboardLink === SUB_MENUS.LOGOUT && logout(), /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "ghost",
     type: "button",
-    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-2 plc-right-2 md:plc-top-5 md:plc-right-10",
-    onClick: closeDashboard
+    className: `plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-2 md:plc-top-5 ${dashboardLayout == "left" ? "plc-right-2 md:plc-right-10" : "plc-left-2 md:plc-left-10"}`,
+    onClick: closeSubMenusTab
   }, /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
     className: "plc-fill-current"
   }))));

package/dist/index.esm.js

@@ -38966,7 +38966,7 @@ const hasActiveMemberships = () => {
 };
 
 const DashboardContent = props => {
-  var _window$Pelcro$user$r, _window$Pelcro, _window$Pelcro$uiSett, _props$children;
+  var _window$Pelcro$user$r, _props$children;
 
   const {
     state: {
@@ -38990,24 +38990,25 @@ const DashboardContent = props => {
   const menuRef = useRef(null);
   const user = window.Pelcro.user.read();
   const userHasName = user.first_name || user.last_name;
-  const profilePicture = (_window$Pelcro$user$r = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : userSolidIcon;
-  const newsletters = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.newsletters;
-  Array.isArray(newsletters) && newsletters.length > 0;
-
-  const initializeHideMenuHandler = () => {
-    document.addEventListener("click", hideMenuIfClickedOutside);
-  };
-
-  const hideMenuIfClickedOutside = event => {
-    const dashboardSubmenus = document.getElementById("pelcro-view-dashboard-submenus");
-    const didClickOutsideMenu = isOpen && menuRef.current && !menuRef.current.contains(event.target) && !(dashboardSubmenus !== null && dashboardSubmenus !== void 0 && dashboardSubmenus.contains(event.target));
-
-    if (didClickOutsideMenu) {
-      dispatch({
-        type: CLOSE_DASHBOARD
-      });
-    }
-  };
+  const profilePicture = (_window$Pelcro$user$r = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : userSolidIcon; // const newsletters = window.Pelcro?.uiSettings?.newsletters;
+  // const siteHasNewslettersDefined =
+  //   Array.isArray(newsletters) && newsletters.length > 0;
+  // const initializeHideMenuHandler = () => {
+  //   document.addEventListener("click", hideMenuIfClickedOutside);
+  // };
+  // const hideMenuIfClickedOutside = (event) => {
+  //   const dashboardSubmenus = document.getElementById(
+  //     "pelcro-view-dashboard-submenus"
+  //   );
+  //   const didClickOutsideMenu =
+  //     isOpen &&
+  //     menuRef.current &&
+  //     !menuRef.current.contains(event.target) &&
+  //     !dashboardSubmenus?.contains(event.target);
+  //   if (didClickOutsideMenu) {
+  //     dispatch({ type: CLOSE_DASHBOARD });
+  //   }
+  // };
 
   const setActiveDashboardLink = submenuName => {
     dispatch({
@@ -39146,18 +39147,25 @@ const DashboardContent = props => {
     });
   };
 
-  useEffect(() => {
-    return () => {
-      document.removeEventListener("click", hideMenuIfClickedOutside);
-    };
-  }, []);
+  const closeSubMenusTab = () => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: null
+    });
+  }; // useEffect(() => {
+  //   return () => {
+  //     document.removeEventListener("click", hideMenuIfClickedOutside);
+  //   };
+  // }, []);
+
+
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Transition, {
     className: `plc-fixed plc-inset-y-0 plc-h-full lg:plc-w-3/12 plc-w-full plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max ${dashboardLayout == "left" ? "plc-left-0" : "plc-right-0"}`,
     show: isOpen,
     enter: "plc-transform plc-transition plc-duration-500",
     enterFrom: `${dashboardLayout == "left" ? "plc--translate-x-full" : "plc-translate-x-full"}`,
-    enterTo: "plc-translate-x-0",
-    afterEnter: initializeHideMenuHandler,
+    enterTo: "plc-translate-x-0" // afterEnter={initializeHideMenuHandler}
+    ,
     leave: "plc-transform plc-transition plc-duration-500",
     leaveFrom: "plc-translate-x-0",
     leaveTo: `${dashboardLayout == "left" ? "plc--translate-x-full" : "plc-translate-x-full"}`,
@@ -39184,12 +39192,10 @@ const DashboardContent = props => {
     className: "plc-font-bold plc-break-all"
   }, user.first_name, " ", user.last_name), /*#__PURE__*/React__default.createElement("p", {
     className: `plc-m-0 plc-text-sm plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-lg plc-font-bold plc-mt-auto"}`
-  }, user.email)), /*#__PURE__*/React__default.createElement("div", {
-    className: "lg:plc-hidden"
-  }, /*#__PURE__*/React__default.createElement(Button, {
+  }, user.email)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Button, {
     variant: "ghost",
     type: "button",
-    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-5 plc-right-10",
+    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-5 plc-right-5",
     onClick: closeDashboard
   }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
     className: "plc-fill-current"
@@ -39227,8 +39233,8 @@ const DashboardContent = props => {
   }), activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default.createElement(OrdersMenu, null), activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default.createElement(InvoicesMenu, null), activeDashboardLink === SUB_MENUS.LOGOUT && logout(), /*#__PURE__*/React__default.createElement(Button, {
     variant: "ghost",
     type: "button",
-    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-2 plc-right-2 md:plc-top-5 md:plc-right-10",
-    onClick: closeDashboard
+    className: `plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-2 md:plc-top-5 ${dashboardLayout == "left" ? "plc-right-2 md:plc-right-10" : "plc-left-2 md:plc-left-10"}`,
+    onClick: closeSubMenusTab
   }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
     className: "plc-fill-current"
   }))));

package/dist/pelcro.css

@@ -2104,10 +2104,6 @@ apple-pay-button {
   right: 1.25rem;
 }
 
-.pelcro-root .plc-right-10{
-  right: 2.5rem;
-}
-
 .pelcro-root .plc--right-14{
   right: -3.5rem;
 }
@@ -2124,6 +2120,10 @@ apple-pay-button {
   left: 0px;
 }
 
+.pelcro-root .plc-left-2{
+  left: 0.5rem;
+}
+
 .pelcro-root .plc-left-4{
   left: 1rem;
 }
@@ -3860,6 +3860,10 @@ apple-pay-button {
     right: 2.5rem;
   }
 
+  .pelcro-root .md\:plc-left-10{
+    left: 2.5rem;
+  }
+
   .pelcro-root .md\:plc-mx-auto{
     margin-left: auto;
     margin-right: auto;
@@ -3952,10 +3956,6 @@ apple-pay-button {
 }
 
 @media (min-width: 1024px){
-  .pelcro-root .lg\:plc-hidden{
-    display: none;
-  }
-
   .pelcro-root .lg\:plc-w-3\/12{
     width: 25%;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "4.0.0-alpha.64",
+  "version": "4.0.0-alpha.65",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",