@pelcro/react-pelcro-js 4.0.0-alpha.71 → 4.0.0-alpha.73

package/dist/index.cjs.js

@@ -34728,12 +34728,12 @@ const PaymentMethodDeleteBack = ({
     t
   } = useTranslation("paymentMethod");
   const {
-    switchView
+    switchDashboardView
   } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     variant: "outline",
     onClick: () => {
-      switchView("dashboard");
+      switchDashboardView("payment-cards");
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
     className: "plc-w-full"
@@ -36323,7 +36323,6 @@ const DashboardContent = ({
   const {
     switchView,
     dashboardView,
-    switchDashboardView,
     logout
   } = usePelcro();
   const {
@@ -36376,10 +36375,6 @@ const DashboardContent = ({
     dispatch({
       type: CLOSE_DASHBOARD
     });
-  };
-
-  const closeSubMenusTab = () => {
-    switchDashboardView(null);
   }; // useEffect(() => {
   //   return () => {
   //     document.removeEventListener("click", hideMenuIfClickedOutside);
@@ -36387,7 +36382,9 @@ const DashboardContent = ({
   // }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Transition, {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "pelcro-modal-overlay"
+  }, /*#__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",
@@ -36419,7 +36416,7 @@ const DashboardContent = ({
   }, userHasName && /*#__PURE__*/React__default['default'].createElement("p", {
     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"}`
+    className: `plc-m-0 plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-sm plc-font-bold plc-mt-auto"}`
   }, user.email)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "ghost",
     type: "button",
@@ -36448,13 +36445,6 @@ const DashboardContent = ({
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(subView, {
     store: store$4
-  })), /*#__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 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"
   }))));
 };
 
@@ -37147,6 +37137,7 @@ const Card = ({
   className = "",
   title,
   requestStates,
+  dashboardLayout,
   back,
   ...restProps
 }) => {
@@ -37154,11 +37145,16 @@ const Card = ({
   const {
     switchDashboardView
   } = usePelcro();
+
+  const closeSubMenusTab = () => {
+    switchDashboardView(null);
+  };
+
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: `plc-bg-white plc-border-2 plc-p-6 md:plc-p-8 plc-rounded plc-my-11 md:plc-mb-20 md:plc-mt-40 ${className}`,
+    className: `plc-relative plc-bg-white plc-border-2 plc-p-6 md:plc-p-8 plc-rounded plc-my-11 md:plc-mb-20 md:plc-mt-40 ${className}`,
     id: "plc-dashboard-card"
   }, title && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-items-end plc-justify-between plc-border-b-2 plc-border-primary-400 plc-pb-2 plc-mb-10"
+    className: "plc-flex plc-items-end plc-justify-between plc-border-b-2 plc-border-primary-400 plc-pb-2 plc-mb-10 plc-mt-5"
   }, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "plc-font-bold plc-text-xl"
   }, title), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.loading) && /*#__PURE__*/React__default['default'].createElement("span", {
@@ -37171,7 +37167,14 @@ const Card = ({
     onClick: () => {
       switchDashboardView(back === null || back === void 0 ? void 0 : back.target);
     }
-  }, "Back"))), children);
+  }, "Back"))), children, /*#__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-1 plc-right-1",
+    onClick: closeSubMenusTab
+  }, /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
+    className: "plc-fill-current"
+  })));
 };
 
 const ProfileMenu = props => {

package/dist/index.esm.js

@@ -34698,12 +34698,12 @@ const PaymentMethodDeleteBack = ({
     t
   } = useTranslation("paymentMethod");
   const {
-    switchView
+    switchDashboardView
   } = usePelcro();
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     variant: "outline",
     onClick: () => {
-      switchView("dashboard");
+      switchDashboardView("payment-cards");
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
     className: "plc-w-full"
@@ -36293,7 +36293,6 @@ const DashboardContent = ({
   const {
     switchView,
     dashboardView,
-    switchDashboardView,
     logout
   } = usePelcro();
   const {
@@ -36346,10 +36345,6 @@ const DashboardContent = ({
     dispatch({
       type: CLOSE_DASHBOARD
     });
-  };
-
-  const closeSubMenusTab = () => {
-    switchDashboardView(null);
   }; // useEffect(() => {
   //   return () => {
   //     document.removeEventListener("click", hideMenuIfClickedOutside);
@@ -36357,7 +36352,9 @@ const DashboardContent = ({
   // }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Transition, {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "pelcro-modal-overlay"
+  }, /*#__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",
@@ -36389,7 +36386,7 @@ const DashboardContent = ({
   }, userHasName && /*#__PURE__*/React__default.createElement("p", {
     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"}`
+    className: `plc-m-0 plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-sm plc-font-bold plc-mt-auto"}`
   }, user.email)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Button, {
     variant: "ghost",
     type: "button",
@@ -36418,13 +36415,6 @@ const DashboardContent = ({
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(subView, {
     store: store$4
-  })), /*#__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 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"
   }))));
 };
 
@@ -37117,6 +37107,7 @@ const Card = ({
   className = "",
   title,
   requestStates,
+  dashboardLayout,
   back,
   ...restProps
 }) => {
@@ -37124,11 +37115,16 @@ const Card = ({
   const {
     switchDashboardView
   } = usePelcro();
+
+  const closeSubMenusTab = () => {
+    switchDashboardView(null);
+  };
+
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `plc-bg-white plc-border-2 plc-p-6 md:plc-p-8 plc-rounded plc-my-11 md:plc-mb-20 md:plc-mt-40 ${className}`,
+    className: `plc-relative plc-bg-white plc-border-2 plc-p-6 md:plc-p-8 plc-rounded plc-my-11 md:plc-mb-20 md:plc-mt-40 ${className}`,
     id: "plc-dashboard-card"
   }, title && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-items-end plc-justify-between plc-border-b-2 plc-border-primary-400 plc-pb-2 plc-mb-10"
+    className: "plc-flex plc-items-end plc-justify-between plc-border-b-2 plc-border-primary-400 plc-pb-2 plc-mb-10 plc-mt-5"
   }, /*#__PURE__*/React__default.createElement("h3", {
     className: "plc-font-bold plc-text-xl"
   }, title), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.loading) && /*#__PURE__*/React__default.createElement("span", {
@@ -37141,7 +37137,14 @@ const Card = ({
     onClick: () => {
       switchDashboardView(back === null || back === void 0 ? void 0 : back.target);
     }
-  }, "Back"))), children);
+  }, "Back"))), children, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "ghost",
+    type: "button",
+    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-1 plc-right-1",
+    onClick: closeSubMenusTab
+  }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
+    className: "plc-fill-current"
+  })));
 };
 
 const ProfileMenu = props => {

package/dist/pelcro.css

@@ -2044,10 +2044,6 @@ apple-pay-button {
   top: 0.25rem;
 }
 
-.pelcro-root .plc-top-2{
-  top: 0.5rem;
-}
-
 .pelcro-root .plc-top-4{
   top: 1rem;
 }
@@ -2120,10 +2116,6 @@ apple-pay-button {
   left: 0px;
 }
 
-.pelcro-root .plc-left-2{
-  left: 0.5rem;
-}
-
 .pelcro-root .plc-left-4{
   left: 1rem;
 }
@@ -3852,18 +3844,6 @@ apple-pay-button {
 }
 
 @media (min-width: 768px){
-  .pelcro-root .md\:plc-top-5{
-    top: 1.25rem;
-  }
-
-  .pelcro-root .md\:plc-right-10{
-    right: 2.5rem;
-  }
-
-  .pelcro-root .md\:plc-left-10{
-    left: 2.5rem;
-  }
-
   .pelcro-root .md\:plc-mx-auto{
     margin-left: auto;
     margin-right: auto;

package/package.json

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