@geotab/zenith 3.6.2 → 3.6.3-beta.0

package/dist/dialog/dialog.d.ts

@@ -8,5 +8,5 @@ export interface IDialog {
 }
 /**
  * @deprecated - use Modal instead
-*/
+ */
 export declare const Dialog: ({ isOpen, children, isElementVisible }: IDialog) => import("react").ReactPortal | null;

package/dist/dialog/dialog.js

@@ -8,16 +8,15 @@ const dialogHelpers_1 = require("./dialogHelpers");
 const themeContext_1 = require("../utils/theme/themeContext");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useBodyScroll_1 = require("../utils/useBodyScroll");
-const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
+const react_dom_1 = require("react-dom");
 /**
  * @deprecated - use Modal instead
-*/
+ */
 const Dialog = ({ isOpen, children, isElementVisible }) => {
     var _a, _b, _c;
     const lastActiveOutsideElement = (0, react_1.useRef)((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
-    const modalRoot = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     const { resetScroll } = (0, useBodyScroll_1.useBodyScroll)();
     const isClientReady = (0, useClientReady_1.useClientReady)();
@@ -45,11 +44,11 @@ const Dialog = ({ isOpen, children, isElementVisible }) => {
     }, [isClientReady, isOpen, resetScroll]);
     const labeledId = (0, react_1.useId)();
     const darkClass = dark ? "zen-dark" : "";
-    const createDialog = (id) => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen_1.zen.pageYOffset || 0}px` }, children: [(0, jsx_runtime_1.jsx)(dialogContent_1.DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), (0, jsx_runtime_1.jsx)("div", { className: "zen-dialog__shield" })] });
-    const portal = (0, usePortal_1.usePortal)(isOpen && (0, react_1.isValidElement)(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
+    const createDialog = id => ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen_1.zen.pageYOffset || 0}px` }, children: [(0, jsx_runtime_1.jsx)(dialogContent_1.DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), (0, jsx_runtime_1.jsx)("div", { className: "zen-dialog__shield" })] }));
     if (!isClientReady) {
         return null;
     }
-    return portal;
+    const modalRoot = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
+    return (0, react_dom_1.createPortal)(isOpen && (0, react_1.isValidElement)(children) ? createDialog(labeledId) : null, modalRoot);
 };
 exports.Dialog = Dialog;

package/dist/feedbackContainer/feedbackContainer.js

@@ -33,9 +33,9 @@ const toastRaw_1 = require("../toastRaw/toastRaw");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const getAlertAnimation_1 = require("./utils/getAlertAnimation");
 const getToastAnimation_1 = require("./utils/getToastAnimation");
-const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
+const react_dom_1 = require("react-dom");
 const FeedbackContainer = () => {
     var _a, _b;
     const { alerts, removeAlert, toasts, removeToast, activeFeedback, removedAlertId, removedToastId, mode } = react_1.default.useContext(feedbackContext_1.FeedbackContext);
@@ -58,23 +58,23 @@ const FeedbackContainer = () => {
         prevAlertsLength.current = alerts.length;
         prevToastsLength.current = toasts.length;
     }, [alerts.length, toasts.length]);
-    const alertsToRender = (0, react_1.useMemo)(() => alerts.map((alert, indx) => (0, jsx_runtime_1.jsx)(alertRaw_1.AlertRaw, { id: alert.id, header: alert.header, text: alert.text, isOpen: true, onClose: () => {
+    const alertsToRender = (0, react_1.useMemo)(() => alerts.map((alert, indx) => ((0, jsx_runtime_1.jsx)(alertRaw_1.AlertRaw, { id: alert.id, header: alert.header, text: alert.text, isOpen: true, onClose: () => {
             removeAlert(alert.id);
             removedAlertId.current = indx;
             alert.onClose();
-        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : (0, getAlertAnimation_1.getAlertAnimation)(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id)), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
+        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : (0, getAlertAnimation_1.getAlertAnimation)(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id))), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
     const alertClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-alerts", isMobile ? "zen-alerts--mobile" : ""]), [isMobile]);
     const toastClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-toasts", isMobile ? "zen-toasts--mobile" : ""]), [isMobile]);
-    const toastsToRender = (0, react_1.useMemo)(() => toasts.map((toast, indx, arr) => (0, jsx_runtime_1.jsx)(toastRaw_1.ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : (0, getToastAnimation_1.getToastAnimation)(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
+    const toastsToRender = (0, react_1.useMemo)(() => toasts.map((toast, indx, arr) => ((0, jsx_runtime_1.jsx)(toastRaw_1.ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : (0, getToastAnimation_1.getToastAnimation)(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
             removeToast(toast.id);
             removedToastId.current = indx;
             toast.onClose();
-        }, type: toast.type, hasIcon: toast.hasIcon, action: toast.action }, toast.id)), [toasts, sameToastsLength, isToastAdded, removedToastId, isMobile, activeFeedback, removeToast]);
-    const alertsPortal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)("div", { className: alertClasses, children: alertsToRender }), (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body);
-    const toastsPortal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)("div", { className: toastClasses, children: toastsToRender }), (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
+        }, type: toast.type, hasIcon: toast.hasIcon, action: toast.action }, toast.id))), [toasts, sameToastsLength, isToastAdded, removedToastId, isMobile, activeFeedback, removeToast]);
     if (!isClientReady) {
         return null;
     }
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isAPIMode && alertsPortal, !isAPIMode && toastsPortal] });
+    const alertsPortal = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body) ? (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: alertClasses, children: alertsToRender }), zen_1.zen.document.body) : null;
+    const toastsPortal = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body) ? (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: toastClasses, children: toastsToRender }), zen_1.zen.document.body) : null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isAPIMode && alertsPortal, !isAPIMode && toastsPortal] }));
 };
 exports.FeedbackContainer = FeedbackContainer;

package/dist/index.css

@@ -15466,6 +15466,9 @@ button.zen-summary__clickable {
   align-items: center;
   gap: 4px;
 }
+.zen-nav-item__dnd {
+  touch-action: none;
+}
 .zen-nav-item__action {
   display: flex;
   flex: 0 0 auto;

package/dist/list/hooks/useDragAndDrop.js

@@ -103,7 +103,7 @@ const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDr
         }
     }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging]);
     const onDragStart = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         e.preventDefault();
         const listItemElement = (0, findElement_1.findElement)(e.currentTarget, cssMarks.general);
         if (!listItemElement) {
@@ -147,7 +147,7 @@ const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDr
             }
         };
         const onDragEnd = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if (dragImageRef.current) {
                 dragImageRef.current.remove();
                 dragImageRef.current = null;
@@ -167,11 +167,13 @@ const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDr
                 onChangeOrder(startPosition, endPosition);
             }
             (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body.removeEventListener("pointerup", onDragEnd, false);
-            (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.removeEventListener("mouseleave", onDragEnd);
+            (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.body.removeEventListener("pointercancel", onDragEnd, false);
+            (_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.removeEventListener("mouseleave", onDragEnd);
         };
         (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body.addEventListener("pointermove", dragMoveRef.current, false);
         (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body.addEventListener("pointerup", onDragEnd, false);
-        (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.addEventListener("mouseleave", onDragEnd);
+        (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.body.addEventListener("pointercancel", onDragEnd, false);
+        (_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.addEventListener("mouseleave", onDragEnd);
     }, [cancelMoveScroll, containerRef, moveScroll, onChangeOrder, removePlaceholders, setPlaceholder, cssMarks.general, cssMarks.placeholder, cssMarks.dragging, cssMarks.dragged]);
     return { onDragStart };
 };

package/dist/nav/nav.js

@@ -86,7 +86,7 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
     const primaryFooter = footer && (0, navUtils_1.filterPrimaryNavItems)(footer, false);
     const footerToRender = isEditState ? editFooter : (isMobile ? secondaryFooter : footer);
     const primaryItems = [...primarySections, ...(primaryFooter ? [primaryFooter] : [])].flatMap(e => (0, navUtils_1.collectNavItems)(e));
-    const editListItems = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) === "NavEditSection"; });
+    const editListItems = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavEditSection"; });
     const onSearchOpen = (0, react_1.useCallback)((isOpen) => {
         isOpen && onCollapseToggle && onCollapseToggle(false);
         setIsSearchOpen(isOpen || isMobile);
@@ -95,9 +95,9 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
         onIsMobileMenuOpenToggle && onIsMobileMenuOpenToggle(!isMobileMenuOpen);
     }, [isMobileMenuOpen, onIsMobileMenuOpenToggle]);
     const onEditStateToggle = (0, react_1.useCallback)((isEdit) => {
-        isEdit && onCollapseToggle && onCollapseToggle(false);
+        isEdit && !isMobile && onCollapseToggle && onCollapseToggle(false);
         editListItems && editFooter && setIsEditState(isEdit);
-    }, [onCollapseToggle, setIsEditState, editListItems, editFooter]);
+    }, [onCollapseToggle, setIsEditState, editListItems, editFooter, isMobile]);
     (0, react_1.useEffect)(() => {
         const wasMobile = prevIsMobileRef.current;
         prevIsMobileRef.current = isMobile;
@@ -144,6 +144,6 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
                                 : sectionsToRender.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, react_1.cloneElement)(section, {
                                             className: (0, classNames_1.classNames)(["zen-nav__section", section.props.className || ""])
                                         }), isMobile || index < sectionsToRender.length - 1 ? (0, jsx_runtime_1.jsx)(navDivider_1.NavDivider, {}) : null] }, index))) }), footerToRender] })
-                : null, mobileBarContainer && isMobile && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(navMobileBar_1.NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: editListItems ? editListItems : primaryItems }), mobileBarContainer)] });
+                : null, mobileBarContainer && isMobile && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(navMobileBar_1.NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: isEditState ? editListItems : primaryItems }), mobileBarContainer)] });
 };
 exports.Nav = Nav;

package/dist/nav/navEditSection/navEditSection.d.ts

@@ -1,3 +1,6 @@
 import "./navEditSection.less";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
-export declare const NavEditSection: ({ children, className }: IZenComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavEditSection: {
+    ({ children, className }: IZenComponentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/nav/navEditSection/navEditSection.js

@@ -5,3 +5,4 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const NavEditSection = ({ children, className }) => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-nav-edit-section", className || ""]), children: children });
 exports.NavEditSection = NavEditSection;
+exports.NavEditSection.displayName = "NavEditSection";

package/dist/pageHeader/pageHeaderActions.js

@@ -14,8 +14,10 @@ const collapsedItemsControl_1 = require("../header/components/collapsedItemsCont
 const pageHeaderButton_1 = require("./pageHeaderButton");
 const pageHeaderMenu_1 = require("./pageHeaderMenu");
 const pageHeaderHelpers_1 = require("./pageHeaderHelpers");
-const usePortal_1 = require("../commonHelpers/hooks/usePortal");
+const react_dom_1 = require("react-dom");
+const zen_1 = require("../utils/zen");
 const PageHeaderActions = ({ className = "", children }) => {
+    var _a, _b;
     const isMobile = (0, useMobile_1.useMobile)();
     const childrenArray = (0, react_1.useMemo)(() => (0, pageHeaderHelpers_1.getItemsFromFragments)(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -32,10 +34,10 @@ const PageHeaderActions = ({ className = "", children }) => {
     }), [childrenArray]);
     const moreButton = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(collapsedItemsControl_1.PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key")), [nonFittingElements]);
     const actionsContent = childrenArray.length ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-page-header-component__actions", isMobile ? "zen-page-header-component__actions--mobile-portal" : "", className]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
-    const portal = (0, usePortal_1.usePortal)(actionsContent);
     // For mobile, render actions in a portal at the bottom center of viewport
     if (isMobile && actionsContent) {
-        return portal;
+        const modalRoot = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
+        return (0, react_dom_1.createPortal)(actionsContent, modalRoot);
     }
     return actionsContent;
 };

package/dist/sidePanel/sidePanel.js

@@ -17,9 +17,9 @@ const useFadeComponent_1 = require("../utils/useFadeComponent");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const isAlertTarget_1 = require("../alert/utils/isAlertTarget");
 const isToastTarget_1 = require("../toast/utils/isToastTarget");
-const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
+const react_dom_1 = require("react-dom");
 /* eslint-enable @typescript-eslint/naming-convention */
 const isChildPopup = (target, stopElement) => {
     var _a;
@@ -31,9 +31,7 @@ const isChildPopup = (target, stopElement) => {
     if (parentPopup === stopElement || parentSidePanel === stopElement) {
         return true;
     }
-    const popupTrigger = parentPopup
-        ? (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-popup-id='${parentPopup.id}']`)
-        : undefined;
+    const popupTrigger = parentPopup ? (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-popup-id='${parentPopup.id}']`) : undefined;
     if (!popupTrigger) {
         return false;
     }
@@ -106,31 +104,21 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
                 onHidePanel(SidePanelCloseReason.ClickOutside, dataShieldId);
                 return;
             }
-            const isGroupsFilterBackButton = [
-                "zen-groups-filter-menu__currently-selected-button",
-                "zen-groups-filter-menu__action-button-back"
-            ]
-                .some((groupsFilterButton) => e.target.classList.contains(groupsFilterButton));
+            const isGroupsFilterBackButton = ["zen-groups-filter-menu__currently-selected-button", "zen-groups-filter-menu__action-button-back"].some(groupsFilterButton => e.target.classList.contains(groupsFilterButton));
             const isOpenAdvancedDialog = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(".zen-advanced-groups-filter")) !== null;
             const isOpenDropdownMobile = (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-dropdown--mobile");
             const isOpenPeriodPicker = (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.querySelector(".zen-filters-bar-period-picker__popup");
             const isOpenTimePicker = (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.querySelector(".zen-time-picker__popup");
             const isOpenYearPicker = (_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.querySelector(".zen-parallel-selection-popup");
             const openedCustomComponents = (_f = zen_1.zen.document) === null || _f === void 0 ? void 0 : _f.querySelectorAll(`.${exports.CUSTOM_POPUP_COMPONENT_CLASSNAME}`);
-            const isClickInChildPopup = (0, exports.isChildPopup)(e.target, sidePanelRef.current)
-                || isOpenDropdownMobile && (0, isChildOf_1.isChildOf)(e.target, isOpenDropdownMobile)
-                || isOpenPeriodPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenPeriodPicker)
-                || isOpenPeriodPicker && isOpenTimePicker && (0, isChildOf_1.isChildOf)(e.target, isOpenTimePicker)
-                || isOpenPeriodPicker && isOpenYearPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenYearPicker)
-                || (openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => (0, isChildOf_1.isChildOf)(e.target, el));
-            const isClickInPopup = !isClickInChildPopup
-                ? false
-                : isClickInChildPopup;
-            const isClickOnTrigger = triggerRef
-                ? triggerRef.current
-                    ? e.target === triggerRef.current || (0, isChildOf_1.isChildOf)(e.target, triggerRef.current)
-                    : false
-                : false;
+            const isClickInChildPopup = (0, exports.isChildPopup)(e.target, sidePanelRef.current) ||
+                (isOpenDropdownMobile && (0, isChildOf_1.isChildOf)(e.target, isOpenDropdownMobile)) ||
+                (isOpenPeriodPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenPeriodPicker)) ||
+                (isOpenPeriodPicker && isOpenTimePicker && (0, isChildOf_1.isChildOf)(e.target, isOpenTimePicker)) ||
+                (isOpenPeriodPicker && isOpenYearPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenYearPicker)) ||
+                ((openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => (0, isChildOf_1.isChildOf)(e.target, el)));
+            const isClickInPopup = !isClickInChildPopup ? false : isClickInChildPopup;
+            const isClickOnTrigger = triggerRef ? (triggerRef.current ? e.target === triggerRef.current || (0, isChildOf_1.isChildOf)(e.target, triggerRef.current) : false) : false;
             const isAlert = (0, isAlertTarget_1.isAlertTarget)(e);
             const isToast = (0, isToastTarget_1.isToastTarget)(e);
             if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog || isAlert || isToast) {
@@ -156,32 +144,22 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
     (0, react_1.useEffect)(() => {
         setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
-    const positioningClass = panelPosition === "left"
-        ? "zen-side-panel--left-positioned"
-        : panelPosition === "right" ? "zen-side-panel--right-positioned" : "zen-side-panel--bottom-positioned";
-    const memoizedChildForRender = (0, react_1.useMemo)(() => isOpen || renderComponent ? children : null, [children, isOpen, renderComponent]);
+    const positioningClass = panelPosition === "left" ? "zen-side-panel--left-positioned" : panelPosition === "right" ? "zen-side-panel--right-positioned" : "zen-side-panel--bottom-positioned";
+    const memoizedChildForRender = (0, react_1.useMemo)(() => (isOpen || renderComponent ? children : null), [children, isOpen, renderComponent]);
     const memoizedStyles = (0, react_1.useMemo)(() => {
         if (width && !isMobile && panelPosition !== "bottom") {
             return { style: { width: (0, exports.formatWidth)(width) } };
         }
         return {};
     }, [width, isMobile, panelPosition]);
-    const portalContainer = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
-    const portal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)([
-            "zen-side-panel",
-            driveClassName || "",
-            dark ? "zen-dark" : "",
-            showContent ? "zen-side-panel--shown" : "",
-            positioningClass,
-            className !== null && className !== void 0 ? className : ""
-        ]), children: memoizedChildForRender })), portalContainer);
     if (!renderComponent && !isOpen) {
         return null;
     }
     if (!isClientReady) {
         return undefined;
     }
-    return portal;
+    const portalContainer = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)(["zen-side-panel", driveClassName || "", dark ? "zen-dark" : "", showContent ? "zen-side-panel--shown" : "", positioningClass, className !== null && className !== void 0 ? className : ""]), children: memoizedChildForRender })), portalContainer);
 };
 exports.SidePanel = SidePanel;
 exports.SidePanel.Cell = sidePanelCell_1.SidePanelCell;

package/esm/dialog/dialog.d.ts

@@ -8,5 +8,5 @@ export interface IDialog {
 }
 /**
  * @deprecated - use Modal instead
-*/
+ */
 export declare const Dialog: ({ isOpen, children, isElementVisible }: IDialog) => import("react").ReactPortal | null;

package/esm/dialog/dialog.js

@@ -5,16 +5,15 @@ import { isFocusable } from "./dialogHelpers";
 import { themeContext } from "../utils/theme/themeContext";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useBodyScroll } from "../utils/useBodyScroll";
-import { usePortal } from "../commonHelpers/hooks/usePortal";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
+import { createPortal } from "react-dom";
 /**
  * @deprecated - use Modal instead
-*/
+ */
 export const Dialog = ({ isOpen, children, isElementVisible }) => {
     var _a, _b, _c;
     const lastActiveOutsideElement = useRef((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
-    const modalRoot = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
     const { dark } = useContext(themeContext);
     const { resetScroll } = useBodyScroll();
     const isClientReady = useClientReady();
@@ -42,10 +41,10 @@ export const Dialog = ({ isOpen, children, isElementVisible }) => {
     }, [isClientReady, isOpen, resetScroll]);
     const labeledId = useId();
     const darkClass = dark ? "zen-dark" : "";
-    const createDialog = (id) => _jsxs("div", { className: classNames(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen.pageYOffset || 0}px` }, children: [_jsx(DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), _jsx("div", { className: "zen-dialog__shield" })] });
-    const portal = usePortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
+    const createDialog = id => (_jsxs("div", { className: classNames(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen.pageYOffset || 0}px` }, children: [_jsx(DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), _jsx("div", { className: "zen-dialog__shield" })] }));
     if (!isClientReady) {
         return null;
     }
-    return portal;
+    const modalRoot = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
+    return createPortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot);
 };

package/esm/feedbackContainer/feedbackContainer.js

@@ -7,9 +7,9 @@ import { ToastRaw } from "../toastRaw/toastRaw";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getAlertAnimation } from "./utils/getAlertAnimation";
 import { getToastAnimation } from "./utils/getToastAnimation";
-import { usePortal } from "../commonHelpers/hooks/usePortal";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
+import { createPortal } from "react-dom";
 export const FeedbackContainer = () => {
     var _a, _b;
     const { alerts, removeAlert, toasts, removeToast, activeFeedback, removedAlertId, removedToastId, mode } = React.useContext(FeedbackContext);
@@ -32,22 +32,22 @@ export const FeedbackContainer = () => {
         prevAlertsLength.current = alerts.length;
         prevToastsLength.current = toasts.length;
     }, [alerts.length, toasts.length]);
-    const alertsToRender = useMemo(() => alerts.map((alert, indx) => _jsx(AlertRaw, { id: alert.id, header: alert.header, text: alert.text, isOpen: true, onClose: () => {
+    const alertsToRender = useMemo(() => alerts.map((alert, indx) => (_jsx(AlertRaw, { id: alert.id, header: alert.header, text: alert.text, isOpen: true, onClose: () => {
             removeAlert(alert.id);
             removedAlertId.current = indx;
             alert.onClose();
-        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : getAlertAnimation(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id)), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
+        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : getAlertAnimation(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id))), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
     const alertClasses = useMemo(() => classNames(["zen-alerts", isMobile ? "zen-alerts--mobile" : ""]), [isMobile]);
     const toastClasses = useMemo(() => classNames(["zen-toasts", isMobile ? "zen-toasts--mobile" : ""]), [isMobile]);
-    const toastsToRender = useMemo(() => toasts.map((toast, indx, arr) => _jsx(ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : getToastAnimation(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
+    const toastsToRender = useMemo(() => toasts.map((toast, indx, arr) => (_jsx(ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : getToastAnimation(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
             removeToast(toast.id);
             removedToastId.current = indx;
             toast.onClose();
-        }, type: toast.type, hasIcon: toast.hasIcon, action: toast.action }, toast.id)), [toasts, sameToastsLength, isToastAdded, removedToastId, isMobile, activeFeedback, removeToast]);
-    const alertsPortal = usePortal(_jsx("div", { className: alertClasses, children: alertsToRender }), (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body);
-    const toastsPortal = usePortal(_jsx("div", { className: toastClasses, children: toastsToRender }), (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+        }, type: toast.type, hasIcon: toast.hasIcon, action: toast.action }, toast.id))), [toasts, sameToastsLength, isToastAdded, removedToastId, isMobile, activeFeedback, removeToast]);
     if (!isClientReady) {
         return null;
     }
-    return _jsxs(_Fragment, { children: [!isAPIMode && alertsPortal, !isAPIMode && toastsPortal] });
+    const alertsPortal = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.body) ? createPortal(_jsx("div", { className: alertClasses, children: alertsToRender }), zen.document.body) : null;
+    const toastsPortal = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body) ? createPortal(_jsx("div", { className: toastClasses, children: toastsToRender }), zen.document.body) : null;
+    return (_jsxs(_Fragment, { children: [!isAPIMode && alertsPortal, !isAPIMode && toastsPortal] }));
 };

package/esm/list/hooks/useDragAndDrop.js

@@ -100,7 +100,7 @@ export const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onB
         }
     }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging]);
     const onDragStart = useCallback((e) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         e.preventDefault();
         const listItemElement = findElement(e.currentTarget, cssMarks.general);
         if (!listItemElement) {
@@ -144,7 +144,7 @@ export const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onB
             }
         };
         const onDragEnd = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if (dragImageRef.current) {
                 dragImageRef.current.remove();
                 dragImageRef.current = null;
@@ -164,11 +164,13 @@ export const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onB
                 onChangeOrder(startPosition, endPosition);
             }
             (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body.removeEventListener("pointerup", onDragEnd, false);
-            (_d = zen.document) === null || _d === void 0 ? void 0 : _d.removeEventListener("mouseleave", onDragEnd);
+            (_d = zen.document) === null || _d === void 0 ? void 0 : _d.body.removeEventListener("pointercancel", onDragEnd, false);
+            (_e = zen.document) === null || _e === void 0 ? void 0 : _e.removeEventListener("mouseleave", onDragEnd);
         };
         (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body.addEventListener("pointermove", dragMoveRef.current, false);
         (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body.addEventListener("pointerup", onDragEnd, false);
-        (_d = zen.document) === null || _d === void 0 ? void 0 : _d.addEventListener("mouseleave", onDragEnd);
+        (_d = zen.document) === null || _d === void 0 ? void 0 : _d.body.addEventListener("pointercancel", onDragEnd, false);
+        (_e = zen.document) === null || _e === void 0 ? void 0 : _e.addEventListener("mouseleave", onDragEnd);
     }, [cancelMoveScroll, containerRef, moveScroll, onChangeOrder, removePlaceholders, setPlaceholder, cssMarks.general, cssMarks.placeholder, cssMarks.dragging, cssMarks.dragged]);
     return { onDragStart };
 };

package/esm/nav/nav.js

@@ -83,7 +83,7 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
     const primaryFooter = footer && filterPrimaryNavItems(footer, false);
     const footerToRender = isEditState ? editFooter : (isMobile ? secondaryFooter : footer);
     const primaryItems = [...primarySections, ...(primaryFooter ? [primaryFooter] : [])].flatMap(e => collectNavItems(e));
-    const editListItems = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) === "NavEditSection"; });
+    const editListItems = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavEditSection"; });
     const onSearchOpen = useCallback((isOpen) => {
         isOpen && onCollapseToggle && onCollapseToggle(false);
         setIsSearchOpen(isOpen || isMobile);
@@ -92,9 +92,9 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
         onIsMobileMenuOpenToggle && onIsMobileMenuOpenToggle(!isMobileMenuOpen);
     }, [isMobileMenuOpen, onIsMobileMenuOpenToggle]);
     const onEditStateToggle = useCallback((isEdit) => {
-        isEdit && onCollapseToggle && onCollapseToggle(false);
+        isEdit && !isMobile && onCollapseToggle && onCollapseToggle(false);
         editListItems && editFooter && setIsEditState(isEdit);
-    }, [onCollapseToggle, setIsEditState, editListItems, editFooter]);
+    }, [onCollapseToggle, setIsEditState, editListItems, editFooter, isMobile]);
     useEffect(() => {
         const wasMobile = prevIsMobileRef.current;
         prevIsMobileRef.current = isMobile;
@@ -141,5 +141,5 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
                                 : sectionsToRender.map((section, index) => (_jsxs(Fragment, { children: [cloneElement(section, {
                                             className: classNames(["zen-nav__section", section.props.className || ""])
                                         }), isMobile || index < sectionsToRender.length - 1 ? _jsx(NavDivider, {}) : null] }, index))) }), footerToRender] })
-                : null, mobileBarContainer && isMobile && createPortal(_jsx(NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: editListItems ? editListItems : primaryItems }), mobileBarContainer)] });
+                : null, mobileBarContainer && isMobile && createPortal(_jsx(NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: isEditState ? editListItems : primaryItems }), mobileBarContainer)] });
 };

package/esm/nav/navEditSection/navEditSection.d.ts

@@ -1,3 +1,6 @@
 import "./navEditSection.less";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
-export declare const NavEditSection: ({ children, className }: IZenComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavEditSection: {
+    ({ children, className }: IZenComponentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/nav/navEditSection/navEditSection.js

@@ -1,3 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 export const NavEditSection = ({ children, className }) => _jsx("div", { className: classNames(["zen-nav-edit-section", className || ""]), children: children });
+NavEditSection.displayName = "NavEditSection";

package/esm/pageHeader/pageHeaderActions.js

@@ -8,8 +8,10 @@ import { PageToolbarCollapsedItemsControl } from "../header/components/collapsed
 import { PageHeaderButtonDisplayName } from "./pageHeaderButton";
 import { PageHeaderMenuDisplayName } from "./pageHeaderMenu";
 import { getItemsFromFragments } from "./pageHeaderHelpers";
-import { usePortal } from "../commonHelpers/hooks/usePortal";
+import { createPortal } from "react-dom";
+import { zen } from "../utils/zen";
 export const PageHeaderActions = ({ className = "", children }) => {
+    var _a, _b;
     const isMobile = useMobile();
     const childrenArray = useMemo(() => getItemsFromFragments(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -26,10 +28,10 @@ export const PageHeaderActions = ({ className = "", children }) => {
     }), [childrenArray]);
     const moreButton = useMemo(() => (_jsx(PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key")), [nonFittingElements]);
     const actionsContent = childrenArray.length ? (_jsxs("div", { className: classNames(["zen-page-header-component__actions", isMobile ? "zen-page-header-component__actions--mobile-portal" : "", className]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
-    const portal = usePortal(actionsContent);
     // For mobile, render actions in a portal at the bottom center of viewport
     if (isMobile && actionsContent) {
-        return portal;
+        const modalRoot = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+        return createPortal(actionsContent, modalRoot);
     }
     return actionsContent;
 };

package/esm/sidePanel/sidePanel.js

@@ -14,9 +14,9 @@ import { useFadeComponent } from "../utils/useFadeComponent";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { isAlertTarget } from "../alert/utils/isAlertTarget";
 import { isToastTarget } from "../toast/utils/isToastTarget";
-import { usePortal } from "../commonHelpers/hooks/usePortal";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
+import { createPortal } from "react-dom";
 /* eslint-enable @typescript-eslint/naming-convention */
 export const isChildPopup = (target, stopElement) => {
     var _a;
@@ -28,9 +28,7 @@ export const isChildPopup = (target, stopElement) => {
     if (parentPopup === stopElement || parentSidePanel === stopElement) {
         return true;
     }
-    const popupTrigger = parentPopup
-        ? (_a = zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-popup-id='${parentPopup.id}']`)
-        : undefined;
+    const popupTrigger = parentPopup ? (_a = zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-popup-id='${parentPopup.id}']`) : undefined;
     if (!popupTrigger) {
         return false;
     }
@@ -101,31 +99,21 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
                 onHidePanel(SidePanelCloseReason.ClickOutside, dataShieldId);
                 return;
             }
-            const isGroupsFilterBackButton = [
-                "zen-groups-filter-menu__currently-selected-button",
-                "zen-groups-filter-menu__action-button-back"
-            ]
-                .some((groupsFilterButton) => e.target.classList.contains(groupsFilterButton));
+            const isGroupsFilterBackButton = ["zen-groups-filter-menu__currently-selected-button", "zen-groups-filter-menu__action-button-back"].some(groupsFilterButton => e.target.classList.contains(groupsFilterButton));
             const isOpenAdvancedDialog = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(".zen-advanced-groups-filter")) !== null;
             const isOpenDropdownMobile = (_b = zen.document) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-dropdown--mobile");
             const isOpenPeriodPicker = (_c = zen.document) === null || _c === void 0 ? void 0 : _c.querySelector(".zen-filters-bar-period-picker__popup");
             const isOpenTimePicker = (_d = zen.document) === null || _d === void 0 ? void 0 : _d.querySelector(".zen-time-picker__popup");
             const isOpenYearPicker = (_e = zen.document) === null || _e === void 0 ? void 0 : _e.querySelector(".zen-parallel-selection-popup");
             const openedCustomComponents = (_f = zen.document) === null || _f === void 0 ? void 0 : _f.querySelectorAll(`.${CUSTOM_POPUP_COMPONENT_CLASSNAME}`);
-            const isClickInChildPopup = isChildPopup(e.target, sidePanelRef.current)
-                || isOpenDropdownMobile && isChildOf(e.target, isOpenDropdownMobile)
-                || isOpenPeriodPicker && isChildOf(e.target, isOpenPeriodPicker)
-                || isOpenPeriodPicker && isOpenTimePicker && isChildOf(e.target, isOpenTimePicker)
-                || isOpenPeriodPicker && isOpenYearPicker && isChildOf(e.target, isOpenYearPicker)
-                || (openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => isChildOf(e.target, el));
-            const isClickInPopup = !isClickInChildPopup
-                ? false
-                : isClickInChildPopup;
-            const isClickOnTrigger = triggerRef
-                ? triggerRef.current
-                    ? e.target === triggerRef.current || isChildOf(e.target, triggerRef.current)
-                    : false
-                : false;
+            const isClickInChildPopup = isChildPopup(e.target, sidePanelRef.current) ||
+                (isOpenDropdownMobile && isChildOf(e.target, isOpenDropdownMobile)) ||
+                (isOpenPeriodPicker && isChildOf(e.target, isOpenPeriodPicker)) ||
+                (isOpenPeriodPicker && isOpenTimePicker && isChildOf(e.target, isOpenTimePicker)) ||
+                (isOpenPeriodPicker && isOpenYearPicker && isChildOf(e.target, isOpenYearPicker)) ||
+                ((openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => isChildOf(e.target, el)));
+            const isClickInPopup = !isClickInChildPopup ? false : isClickInChildPopup;
+            const isClickOnTrigger = triggerRef ? (triggerRef.current ? e.target === triggerRef.current || isChildOf(e.target, triggerRef.current) : false) : false;
             const isAlert = isAlertTarget(e);
             const isToast = isToastTarget(e);
             if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog || isAlert || isToast) {
@@ -151,31 +139,21 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
     useEffect(() => {
         setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
-    const positioningClass = panelPosition === "left"
-        ? "zen-side-panel--left-positioned"
-        : panelPosition === "right" ? "zen-side-panel--right-positioned" : "zen-side-panel--bottom-positioned";
-    const memoizedChildForRender = useMemo(() => isOpen || renderComponent ? children : null, [children, isOpen, renderComponent]);
+    const positioningClass = panelPosition === "left" ? "zen-side-panel--left-positioned" : panelPosition === "right" ? "zen-side-panel--right-positioned" : "zen-side-panel--bottom-positioned";
+    const memoizedChildForRender = useMemo(() => (isOpen || renderComponent ? children : null), [children, isOpen, renderComponent]);
     const memoizedStyles = useMemo(() => {
         if (width && !isMobile && panelPosition !== "bottom") {
             return { style: { width: formatWidth(width) } };
         }
         return {};
     }, [width, isMobile, panelPosition]);
-    const portalContainer = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
-    const portal = usePortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: classNames([
-            "zen-side-panel",
-            driveClassName || "",
-            dark ? "zen-dark" : "",
-            showContent ? "zen-side-panel--shown" : "",
-            positioningClass,
-            className !== null && className !== void 0 ? className : ""
-        ]), children: memoizedChildForRender })), portalContainer);
     if (!renderComponent && !isOpen) {
         return null;
     }
     if (!isClientReady) {
         return undefined;
     }
-    return portal;
+    const portalContainer = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    return createPortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: classNames(["zen-side-panel", driveClassName || "", dark ? "zen-dark" : "", showContent ? "zen-side-panel--shown" : "", positioningClass, className !== null && className !== void 0 ? className : ""]), children: memoizedChildForRender })), portalContainer);
 };
 SidePanel.Cell = SidePanelCell;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.6.2",
+    "version": "3.6.3-beta.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",