@geotab/zenith 1.22.1-beta.ssr.1 → 1.22.1

package/dist/dataGrid/withFlexibleColumns/flexibleColumnsReorder.js

@@ -1,25 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexibleColumnReorder = void 0;
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 const simpleEventHandler_1 = require("../../commonHelpers/simpleEventHandler");
 const dataGrid_1 = require("../dataGrid");
 class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
     createColumnToDrag() {
-        var _a;
         if (this.dragElt === undefined) {
-            this.dragElt = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.createElement("table");
+            this.dragElt = document.createElement("table");
             this.dragElt.classList.add("zen-table-column");
         }
         this.list.append(this.dragElt);
         return this.dragElt;
     }
     cloneCell(columnCell) {
-        var _a;
         let cell = columnCell;
         const cellPart = columnCell.querySelector("[data-column]");
         if (cellPart !== null) {
-            cell = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.createElement("td");
+            cell = document.createElement("td");
             cell.classList.add("zen-data-grid__row-cell");
             cell.append(cellPart.cloneNode(true));
             return cell;
@@ -27,14 +24,13 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
         return cell.cloneNode(true);
     }
     cloneCellContent(cell, parent) {
-        var _a;
         const clone = this.cloneCell(cell);
         // we should prevent id duplication
         const eltsWithIds = clone.querySelectorAll("[id]");
         eltsWithIds.forEach(elt => {
             elt.id = "";
         });
-        const p = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.createElement("tr");
+        const p = document.createElement("tr");
         p.classList.add("zen-table-column__row");
         p.append(clone);
         parent.append(p);
@@ -153,15 +149,14 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
             configurable: true,
             writable: true,
             value: () => {
-                var _a, _b, _c;
                 this.pageX = 0;
                 this.pageY = 0;
                 this.columnIndex = 0;
                 this.pointerOffset = 0;
                 this.closest = -1;
-                (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("pointermove", this.moveColumn);
-                (_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.removeEventListener("pointerup", this.endColumn);
-                (_c = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _c === void 0 ? void 0 : _c.removeEventListener("pointercancel", this.stopMoving);
+                document.removeEventListener("pointermove", this.moveColumn);
+                document.removeEventListener("pointerup", this.endColumn);
+                document.removeEventListener("pointercancel", this.stopMoving);
                 this.list.classList.remove(dataGrid_1.NOT_INTERACTIVE_MODIFIER);
                 this.list.classList.remove(dataGrid_1.DRAGGING_MODIFIER);
                 if (this.dragElt === undefined) {
@@ -237,13 +232,13 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
             configurable: true,
             writable: true,
             value: (e) => {
-                var _a, _b, _c, _d;
+                var _a;
                 if (e.button !== 0) {
                     return;
                 }
                 this.pageX = e.pageX;
                 this.pageY = e.pageY;
-                (_a = globalThis.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+                (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
                 const th = e.target.closest("th");
                 if (th === null) {
                     return;
@@ -253,9 +248,9 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
                 this.offsetTop = th.offsetTop;
                 this.columnIndex = Math.max(th.cellIndex, 0);
                 this.pointerOffset = (e.offsetX || (th.clientWidth / 2));
-                (_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.addEventListener("pointermove", this.moveColumn);
-                (_c = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _c === void 0 ? void 0 : _c.addEventListener("pointerup", this.endColumn);
-                (_d = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _d === void 0 ? void 0 : _d.addEventListener("pointercancel", this.stopMoving);
+                document.addEventListener("pointermove", this.moveColumn);
+                document.addEventListener("pointerup", this.endColumn);
+                document.addEventListener("pointercancel", this.stopMoving);
                 this.closest = this.columnIndex;
             }
         });

package/dist/dataGrid/withFlexibleColumns/flexibleColumnsResizer.js

@@ -6,9 +6,8 @@ const dataGrid_1 = require("../dataGrid");
 const MIN_COLUMN_WIDTH = 100;
 class FlexibleColumnResizer extends simpleEventHandler_1.SimpleEventHandler {
     createResizer() {
-        var _a;
         if (this.resizer === undefined) {
-            const resizer = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.createElement("DIV");
+            const resizer = document.createElement("DIV");
             resizer.classList.add("zen-resizer", "zen-resizer--active", "zen-resizer--vertical");
             this.resizer = resizer;
         }
@@ -79,13 +78,12 @@ class FlexibleColumnResizer extends simpleEventHandler_1.SimpleEventHandler {
             configurable: true,
             writable: true,
             value: () => {
-                var _a, _b, _c;
                 this.pageX = 0;
                 this.currentWidth = 0;
                 this.columnIndex = 0;
-                (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("pointermove", this.resizeColumn);
-                (_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.removeEventListener("pointerup", this.endColumn);
-                (_c = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _c === void 0 ? void 0 : _c.removeEventListener("pointercancel", this.stopResizing);
+                document.removeEventListener("pointermove", this.resizeColumn);
+                document.removeEventListener("pointerup", this.endColumn);
+                document.removeEventListener("pointercancel", this.stopResizing);
                 this.listRef.classList.remove(dataGrid_1.NOT_INTERACTIVE_MODIFIER);
                 this.hideResizer();
             }
@@ -119,7 +117,7 @@ class FlexibleColumnResizer extends simpleEventHandler_1.SimpleEventHandler {
             configurable: true,
             writable: true,
             value: (e) => {
-                var _a, _b, _c, _d;
+                var _a;
                 if (e.button !== 0) {
                     return;
                 }
@@ -137,9 +135,9 @@ class FlexibleColumnResizer extends simpleEventHandler_1.SimpleEventHandler {
                     return;
                 }
                 this.currentWidth = headerEl.offsetWidth || 0;
-                (_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.addEventListener("pointermove", this.resizeColumn);
-                (_c = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _c === void 0 ? void 0 : _c.addEventListener("pointerup", this.endColumn);
-                (_d = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _d === void 0 ? void 0 : _d.addEventListener("pointercancel", this.stopResizing);
+                document.addEventListener("pointermove", this.resizeColumn);
+                document.addEventListener("pointerup", this.endColumn);
+                document.addEventListener("pointercancel", this.stopResizing);
                 this.listRef.classList.add(dataGrid_1.NOT_INTERACTIVE_MODIFIER);
                 const scrollTop = this.listRef.scrollTop;
                 const resizer = this.createResizer();

package/dist/dateInput/dateInput.js

@@ -10,6 +10,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const buttonType_1 = require("../button/buttonType");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
+const useUniqueId_1 = require("../commonHelpers/useUniqueId");
 const formatDate_1 = require("../utils/formatDate");
 const controlledPopup_1 = require("../controlledPopup/controlledPopup");
 const dateInputInner_1 = require("../dateInputInner/dateInputInner");
@@ -35,7 +36,7 @@ const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, i
     const [prevValue, setPrevValue] = (0, react_1.useState)(value);
     const isDefaultState = (0, react_1.useMemo)(() => (0, cutSeconds_1.cutSeconds)(defaultValue) === (0, cutSeconds_1.cutSeconds)(customDate), [defaultValue, customDate]);
     const isValueState = (0, react_1.useMemo)(() => (0, cutSeconds_1.cutSeconds)(value) === (0, cutSeconds_1.cutSeconds)(customDate), [value, customDate]);
-    const componentId = (0, react_1.useId)();
+    const componentId = (0, useUniqueId_1.useUniqueId)();
     const cssClass = (0, classNames_1.classNames)([
         "zen-date-input",
         error ? "zen-date-input--error" : "",

package/dist/dialog/dialog.js

@@ -2,54 +2,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const dialogContent_1 = require("./dialogContent");
 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");
 /**
  * @deprecated - use Modal instead
 */
 const Dialog = ({ isOpen, children, isElementVisible }) => {
-    var _a, _b, _c;
-    const lastActiveOutsideElement = (0, react_1.useRef)((_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.activeElement);
-    const modalRoot = ((_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _c === void 0 ? void 0 : _c.body);
+    const lastActiveOutsideElement = (0, react_1.useRef)(document.activeElement);
+    const modalRoot = document.fullscreenElement || document.body;
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     const { resetScroll } = (0, useBodyScroll_1.useBodyScroll)();
-    const isClientReady = (0, useClientReady_1.useClientReady)();
     (0, react_1.useEffect)(() => {
-        if (!isClientReady) {
-            return () => { };
-        }
         const copyActive = lastActiveOutsideElement.current;
         return () => {
             (0, dialogHelpers_1.isFocusable)(copyActive) && copyActive.focus();
         };
-    }, [isClientReady]);
+    }, []);
     (0, react_1.useEffect)(() => {
-        var _a;
-        if (!isClientReady) {
-            return;
-        }
         if (isOpen) {
             return;
         }
-        const modalCont = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body.querySelectorAll(".zen-dialog");
+        const modalCont = document.body.querySelectorAll(".zen-dialog");
         if (!modalCont.length) {
             resetScroll();
         }
-    }, [isClientReady, isOpen, resetScroll]);
+    }, [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: `${globalThis.pageYOffset}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");
-    if (!isClientReady) {
-        return null;
-    }
-    return portal;
+    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: `${window.pageYOffset}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" })] });
+    return (0, react_dom_1.createPortal)(isOpen && (0, react_1.isValidElement)(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
 };
 exports.Dialog = Dialog;

package/dist/dialog/dialogHelpers.js

@@ -3,15 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFocusableStartInd = exports.isFocusable = exports.isElementInsideContainer = void 0;
 const buttonType_1 = require("../button/buttonType");
 const isElementInsideContainer = (element, container) => {
-    var _a;
     let el = element;
     while (el) {
         if (el === container) {
             return true;
         }
         el = el.parentNode;
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (el === ((_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body) && el !== container) {
+        if (el === document.body && el !== container) {
             return false;
         }
     }
@@ -28,7 +26,7 @@ const isFocusable = (element) => {
     if (element.tabIndex === -1) {
         return false;
     }
-    const style = globalThis.getComputedStyle(element);
+    const style = window.getComputedStyle(element);
     if (style.display === "none" || style.visibility === "hidden") {
         return false;
     }

package/dist/dropdown/dropdownTrigger.js

@@ -18,17 +18,12 @@ const filterButton_1 = require("../filterButton/filterButton");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const formFieldError_1 = require("../formFieldError/formFieldError");
-const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const DropdownTrigger = (_a) => {
     var { isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange = () => { }, width, title, triggerAriaLabel, count, inputRef, buttonType, error } = _a, otherProps = __rest(_a, ["isActive", "id", "triggerRef", "searchField", "placeholder", "disabled", "fullWidth", "currentSelection", "handleClick", "inputValue", "className", "onSearchChange", "width", "title", "triggerAriaLabel", "count", "inputRef", "buttonType", "error"]);
     const elInpRef = (0, react_1.useRef)(null);
     const handleButtonClick = () => {
         handleClick(!isActive);
     };
-    const isClientReady = (0, useClientReady_1.useClientReady)();
-    if (!isClientReady) {
-        return null;
-    }
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchField ? (0, jsx_runtime_1.jsx)(dropdownSearchableTrigger_1.DropdownSearchableTrigger, Object.assign({ value: inputValue || "", onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: !!error, fullWidth: fullWidth }, otherProps)) : (0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: triggerRef, id: id, className: (0, classNames_1.classNames)(["zen-dropdown__trigger-button", error ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel }, otherProps, { children: currentSelection ? (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-dropdown__trigger-button-text", buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""]), children: currentSelection }) : placeholder })), (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
 };
 exports.DropdownTrigger = DropdownTrigger;

package/dist/dropdownOld/dropdownOld.js

@@ -18,7 +18,7 @@ const DropdownOld = (props) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const innerTriggerRef = (0, react_1.useRef)(null);
     // items IDs
-    const buttonReactId = (0, react_1.useId)();
+    const buttonReactId = (0, useUniqueId_1.useUniqueId)();
     const selectListId = (0, useUniqueId_1.useUniqueId)();
     const popupId = (0, useUniqueId_1.useUniqueId)();
     // memoized items

package/dist/feedbackContainer/feedbackContainer.js

@@ -28,20 +28,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const feedbackContext_1 = require("./feedbackContext");
 const alertRaw_1 = require("../alertRaw/alertRaw");
+const react_dom_1 = require("react-dom");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 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 FeedbackContainer = () => {
-    var _a, _b;
     const { alerts, removeAlert, toasts, removeToast, activeFeedback, removedAlertId, removedToastId, mode } = react_1.default.useContext(feedbackContext_1.FeedbackContext);
     const prevAlertsLength = react_1.default.useRef(alerts.length);
     const prevToastsLength = react_1.default.useRef(toasts.length);
     const isAPIMode = mode === "api";
-    const isClientReady = (0, useClientReady_1.useClientReady)();
     const isMobile = (0, useMobile_1.useMobile)();
     const isAlertAdded = alerts.length > prevAlertsLength.current;
     const isToastAdded = toasts.length > prevToastsLength.current;
@@ -62,16 +59,13 @@ const FeedbackContainer = () => {
         }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : (0, getAlertAnimation_1.getAlertAnimation)(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons }, 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 alertsPortal = (0, react_1.useMemo)(() => (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: alertClasses, children: alertsToRender }), document.body), [alertsToRender, alertClasses]);
     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, 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 = globalThis === null || globalThis === void 0 ? void 0 : globalThis.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 = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.body);
-    if (!isClientReady) {
-        return null;
-    }
+    const toastsPortal = (0, react_1.useMemo)(() => (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: toastClasses, children: toastsToRender }), document.body), [toastsToRender, toastClasses]);
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isAPIMode && alertsPortal, !isAPIMode && toastsPortal] });
 };
 exports.FeedbackContainer = FeedbackContainer;

package/dist/feedbackContainer/hooks/useFeedbackAlert.js

@@ -14,7 +14,7 @@ const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const { alerts, setAlerts, alertsQueue, setAlertsQueue, alertsAnimation, setAlertsAnimation, removedAlertId, apiAlertActions, setApiAlertActions } = (0, useFeedbackAlertState_1.useFeedbackAlertState)();
     const isAPIMode = mode === "api";
-    const topView = (0, getParentWindow_1.getParentWindow)(globalThis) || globalThis;
+    const topView = (0, getParentWindow_1.getParentWindow)(window) || window;
     const alertsMaxNumber = isMobile ? ALERTS_MAX_NUMBER_MOBILE : ALERTS_MAX_NUMBER_DESKTOP;
     const removeAlert = (0, react_2.useCallback)((id, important) => {
         if (isAPIMode) {

package/dist/feedbackContainer/hooks/useFeedbackToast.js

@@ -13,7 +13,7 @@ const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
     const { toasts, setToasts, toastsQueue, setToastsQueue, toastsAnimation, setToastsAnimation, removedToastId, apiToastActions, setApiToastActions } = (0, useFeedbackToastState_1.useFeedbackToastState)();
     const isMobile = (0, useMobile_1.useMobile)();
     const toastMaxNumber = isMobile ? TOASTS_MAX_NUMBER_MOBILE : TOAST_MAX_NUMBER_DESKTOP;
-    const topView = (0, getParentWindow_1.getParentWindow)(globalThis) || globalThis;
+    const topView = (0, getParentWindow_1.getParentWindow)(window) || window;
     const removeToast = (0, react_1.useCallback)((id, important) => {
         if (isAPIMode) {
             if (!apiToastActions.find(el => el.id === id)) {

package/dist/feedbackProvider/utils/getDefaultProviderMode.js

@@ -6,8 +6,8 @@ const getDefaultProviderMode = (mode) => {
     if (mode) {
         return mode;
     }
-    const parent = (0, getParentWindow_1.getParentWindow)(globalThis);
-    const isTopWindow = globalThis === parent;
+    const parent = (0, getParentWindow_1.getParentWindow)(window);
+    const isTopWindow = window === parent;
     // if initialized in iframe
     if (!isTopWindow) {
         return "api";

package/dist/filtersBar/components/filtersBarDropdown/filtersBarDropdown.js

@@ -7,6 +7,7 @@ const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell"
 const dropdown_1 = require("../../../dropdown/dropdown");
 const filtersBarSidePanelRadioGroup_1 = require("../../filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup");
 const filtersBarSidePanelCheckboxGroup_1 = require("../../filtersBarSidePanel/components/filtersBarSidePanelCheckboxGroup/filtersBarSidePanelCheckboxGroup");
+const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const pillBox_1 = require("../../../pillBox/pillBox");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
 const groupsHelper_1 = require("../../../groupsFilter/groupsHelper");
@@ -21,10 +22,10 @@ const FiltersBarDropdown = ({ sidePanelTitle, className, props, state, useSidePa
     const isCurrentAllSelected = (0, react_1.useMemo)(() => isFullSelectionMode ? state.isAllSelected : undefined, [isFullSelectionMode, state]);
     const [_, setNamedFnReady] = (0, react_1.useState)(false);
     const namedItemsFnRef = (0, react_1.useRef)(items => items.map(el => ({ id: el, name: "..." })));
-    const dropdownId = (0, react_1.useId)();
-    const checkBoxLabelledId = (0, react_1.useId)();
-    const radioGroupLabelledId = (0, react_1.useId)();
-    const dropdownLabelledId = (0, react_1.useId)();
+    const dropdownId = (0, useUniqueId_1.useUniqueId)();
+    const checkBoxLabelledId = (0, useUniqueId_1.useUniqueId)();
+    const radioGroupLabelledId = (0, useUniqueId_1.useUniqueId)();
+    const dropdownLabelledId = (0, useUniqueId_1.useUniqueId)();
     const sortedItems = (0, react_1.useMemo)(() => (0, dropdownHelper_1.sortDropdownItemArray)(props.dataItems || [], props.sortFn), [props.sortFn, props.dataItems]);
     const handleRemove = (0, react_1.useCallback)((removedId) => {
         if (isFullSelectionMode) {

package/dist/filtersBar/components/filtersBarGroupButton/filtersBarGroupButton.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersBarGroupButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
+const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const groupButton_1 = require("../../../groupButton/groupButton");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
 const FiltersBarGroupButton = ({ className, state, props, onChange: onChangeState, useSidePanelView, sidePanelTitle }) => {
     const groupData = props.groupData;
-    const groupButtonLabelledId = (0, react_1.useId)();
+    const groupButtonLabelledId = (0, useUniqueId_1.useUniqueId)();
     const fullGroupData = groupData.map(item => (Object.assign(Object.assign({}, item), { selected: item.value === state.selectedValue })));
     const onChangeEvent = (event) => {
         const value = event.target.value;

package/dist/filtersBar/components/filtersBarGroupsFilter/filtersBarGroupsFilter.js

@@ -4,10 +4,10 @@ exports.FiltersBarGroupsFilter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const groupsFilter_1 = require("../../../groupsFilter/groupsFilter");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
-const react_1 = require("react");
+const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const FiltersBarGroupsFilter = ({ props, state, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
     const component = (0, jsx_runtime_1.jsx)(groupsFilter_1.GroupsFilter, Object.assign({}, props, { fullSize: useSidePanelView, initialFilterState: state.value, onChange: (value) => onChangeState({ value }) }));
-    const groupFilterLabelledId = (0, react_1.useId)();
+    const groupFilterLabelledId = (0, useUniqueId_1.useUniqueId)();
     if (!useSidePanelView) {
         return component;
     }

package/dist/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
 const dateRangeInner_1 = require("../../../dateRangeInner/dateRangeInner");
+const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const getRangeOption_1 = require("./getRangeOption");
 const dateRange_1 = require("../../../dateRange/dateRange");
@@ -16,10 +17,10 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
     const { options: optionsArg, withCalendar, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, lockStartDate, lockEndDate, classNamePopup } = props;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const { toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
-    const id = (0, react_1.useId)();
+    const id = (0, useUniqueId_1.useUniqueId)();
     const optionsMap = (0, react_1.useMemo)(() => (0, getRangeOption_1.getOptionsPeriodMap)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
     const [selectedRange, setSelectedRange] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state));
-    const filterBarLabelledId = (0, react_1.useId)();
+    const filterBarLabelledId = (0, useUniqueId_1.useUniqueId)();
     const [prevSelection, setPrevSelection] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state));
     const getCustomRange = (0, react_1.useCallback)(() => ({ from: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from) || new Date(), to: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to) || new Date() }), [prevSelection]);
     const options = (0, react_1.useMemo)(() => (0, getRangeOption_1.getRangeOptionsArray)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === dateRangeInner_1.CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);

package/dist/filtersBar/components/filtersBarRange/filtersBarRange.js

@@ -6,12 +6,12 @@ const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell"
 const range_1 = require("../../../range/range");
 const filtersBarSidePanelRange_1 = require("../../filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange");
 const rangeHelper_1 = require("../../../range/rangeHelper");
-const react_1 = require("react");
+const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const FiltersBarRange = ({ sidePanelTitle, props, state, useSidePanelView, onChange, checkError }) => {
     const component = (0, jsx_runtime_1.jsx)(range_1.Range, Object.assign({}, props, { value: state.value, onChange: newValue => {
             onChange({ value: newValue });
         } }));
-    const rangeLabelledId = (0, react_1.useId)();
+    const rangeLabelledId = (0, useUniqueId_1.useUniqueId)();
     if (!useSidePanelView) {
         return component;
     }

package/dist/filtersBar/components/filtersBarSearch/filtersBarSearch.js

@@ -4,11 +4,11 @@ exports.FiltersBarSearch = exports.FiltersBarSearchDisplayName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const searchInputRaw_1 = require("../../../searchInputRaw/searchInputRaw");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
-const react_1 = require("react");
+const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 exports.FiltersBarSearchDisplayName = "FiltersBarSearch";
 const FiltersBarSearch = ({ className, state, props, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
-    const inputId = (0, react_1.useId)();
-    const filterBarLabelledId = (0, react_1.useId)();
+    const inputId = (0, useUniqueId_1.useUniqueId)();
+    const filterBarLabelledId = (0, useUniqueId_1.useUniqueId)();
     const component = (0, jsx_runtime_1.jsx)(searchInputRaw_1.SearchInputRaw, Object.assign({}, props, { id: inputId, onChange: value => onChangeState({ value }), value: state.value, className: className }));
     if (!useSidePanelView) {
         return component;

package/dist/filtersBar/filtersBar.js

@@ -20,7 +20,6 @@ const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const getNumberOfChangedFilters_1 = require("./utils/getNumberOfChangedFilters");
 const filtersBarProvider_1 = require("./filtersBarProvider");
 const filtersBarProviderSearch_1 = require("./filtersBarProviderSearch");
-const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 /* eslint-enable @typescript-eslint/naming-convention */
 exports.FiltersBarDisplayName = "FiltersBar";
 const getChildren = (children) => (!children
@@ -145,10 +144,6 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
     }, [childrenArray, parentElement, isAllFiltersVisible, getDefaultFiltersState, onClosePanel, handleApplyAllFilters, sidePanelState, handleClearClick, filterBarChildren]);
     const noActions = (0, react_1.useMemo)(() => isAllFiltersButtonHidden && (selectedQuantity === undefined && filtersBarState.currentNumberOfChangedFilters === 0 || selectedQuantity === 0)
         && (!isApplyButtonShown || onApplyAllFilters === undefined), [isAllFiltersButtonHidden, selectedQuantity, filtersBarState.currentNumberOfChangedFilters, isApplyButtonShown, onApplyAllFilters]);
-    const isClientReady = (0, useClientReady_1.useClientReady)();
-    if (!isClientReady) {
-        return null;
-    }
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, { ignoreNewFunctionality: ignoreNewFunctionality, getDefaultFiltersState: getDefaultFiltersState, children: filterBarChildren }), (0, jsx_runtime_1.jsx)(filtersBarActions_1.FiltersBarActions, { allFiltersRef: allFiltersRef, onShowAllFilters: () => toggleAllFiltersCallback(true), onClearFilters: handleClearClick, selectedQuantity: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.currentNumberOfChangedFilters, selectedQuantityToDisplay: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.numberOfChangedFilters, hideAllFiltersButton: isAllFiltersButtonHidden, onApplyButtonClick: onApplyAllFilters ? handleApplyAllFilters(false) : undefined, isApplyButtonShown: isApplyButtonShown })] }), !isAllFiltersButtonHidden && isAllFiltersVisible
                 ? sidePanel
                 : null] });

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelCheckboxGroup/filtersBarSidePanelCheckboxGroup.js

@@ -4,8 +4,9 @@ exports.FiltersBarSidePanelCheckboxGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const checkbox_1 = require("../../../../checkbox/checkbox");
 const react_1 = require("react");
+const useUniqueId_1 = require("../../../../commonHelpers/useUniqueId");
 const FiltersBarSidePanelCheckboxGroup = ({ name, items, selectedItems, onChange }) => {
-    const reactId = (0, react_1.useId)();
+    const reactId = (0, useUniqueId_1.useUniqueId)();
     const checkboxGroupName = name || reactId;
     const onChangeHandler = (0, react_1.useCallback)((event) => {
         const target = event.target;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersBarSidePanelRadioGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const radioGroup_1 = require("../../../../radioGroup/radioGroup");
-const react_1 = require("react");
+const useUniqueId_1 = require("../../../../commonHelpers/useUniqueId");
 const FiltersBarSidePanelRadioGroup = (props) => {
-    const name = (0, react_1.useId)();
+    const name = (0, useUniqueId_1.useUniqueId)();
     return (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-radio-group", children: (0, jsx_runtime_1.jsx)(radioGroup_1.RadioGroup, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
 };
 exports.FiltersBarSidePanelRadioGroup = FiltersBarSidePanelRadioGroup;

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.d.ts

@@ -22,7 +22,7 @@ interface IFiltersBarSidePanelInternal extends IZenComponentProps {
 }
 export interface IFiltersBarSidePanel extends Pick<IFiltersBarSidePanelInternal, "className" | "children" | "state" | "dispatch"> {
 }
-export declare const FiltersBarSidePanel: ({ isOpen, className, children, triggerRef, parentElement, onClearFilters, onClosePanel, getDefaultFiltersState, state, dispatch, onApplyAllFilters }: IFiltersBarSidePanelInternal) => import("react").ReactPortal | null;
+export declare const FiltersBarSidePanel: ({ isOpen, className, children, triggerRef, parentElement, onClearFilters, onClosePanel, getDefaultFiltersState, state, dispatch, onApplyAllFilters }: IFiltersBarSidePanelInternal) => import("react/jsx-runtime").JSX.Element;
 export declare const FiltersBarSidePanelContainer: (_: IFiltersBarSidePanel) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -8,6 +8,7 @@ const themeContext_1 = require("../../utils/theme/themeContext");
 const filtersBarRange_1 = require("../components/filtersBarRange/filtersBarRange");
 const filtersBarPeriodPicker_1 = require("../components/filtersBarPeriodPicker/filtersBarPeriodPicker");
 const utils_1 = require("../../commonHelpers/utils");
+const react_dom_1 = require("react-dom");
 const shield_1 = require("../../shield/shield");
 const sidePanel_1 = require("../../sidePanel/sidePanel");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
@@ -20,7 +21,6 @@ const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const sidePanelReducer_1 = require("./sidePanelReducer");
 const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
 const useBodyScroll_1 = require("../../utils/useBodyScroll");
-const usePortal_1 = require("../../commonHelpers/hooks/usePortal");
 const getChangeHandlers = (children) => {
     const handlers = {};
     react_1.Children.map(children, (child) => {
@@ -29,7 +29,7 @@ const getChangeHandlers = (children) => {
     return handlers;
 };
 const FiltersBarSidePanel = ({ isOpen, className, children, triggerRef, parentElement, onClearFilters, onClosePanel, getDefaultFiltersState, state, dispatch, onApplyAllFilters }) => {
-    var _a, _b, _c;
+    var _a;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const dataShieldId = (0, useUniqueId_1.useUniqueId)();
     const isMobile = (0, useMobile_1.useMobile)();
@@ -114,10 +114,7 @@ const FiltersBarSidePanel = ({ isOpen, className, children, triggerRef, parentEl
         }
         return () => { handleClose(); };
     }, [isOpen, setScrollHidden, resetScroll]);
-    const sidePanelPortal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isOpen ? (0, jsx_runtime_1.jsx)(shield_1.Shield, { className: "zen-high-level-shield", dataShieldId: dataShieldId }) : null, (0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, { triggerRef: triggerRef, isOpen: isOpen, label: translate("Filters"), onHidePanel: onCloseAction, className: (0, classNames_1.classNames)(["zen-side-panel-filters-bar", dark ? "zen-dark" : "", className !== null && className !== void 0 ? className : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__title zen-ellipsis", children: translate("Filters") }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: "tertiary-black", className: "zen-side-panel-filters-bar__close-button", icon: iconClose_1.IconClose, iconSize: "large", onClick: onClosePanel, iconPosition: textIconButton_2.ButtonIconPosition.Start, title: translate("Close") })] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__content", children: newChildren }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar__footer", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__footer-section", children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, className: "zen-side-panel-filters-bar__clear-button", onClick: onResetFilters, children: translate("Clear") }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__footer-section", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-side-panel-filters-bar__apply-button", disabled: applyDisabled, onClick: onApplyFilters, type: buttonType_1.ButtonType.Primary, children: translate("Apply") }) })] })] }) })] }), 
-    // eslint-disable-next-line
-    (_b = parentElement !== null && parentElement !== void 0 ? parentElement : (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _c === void 0 ? void 0 : _c.body);
-    return sidePanelPortal;
+    return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isOpen ? (0, jsx_runtime_1.jsx)(shield_1.Shield, { className: "zen-high-level-shield", dataShieldId: dataShieldId }) : null, (0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, { triggerRef: triggerRef, isOpen: isOpen, label: translate("Filters"), onHidePanel: onCloseAction, className: (0, classNames_1.classNames)(["zen-side-panel-filters-bar", dark ? "zen-dark" : "", className !== null && className !== void 0 ? className : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__title zen-ellipsis", children: translate("Filters") }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: "tertiary-black", className: "zen-side-panel-filters-bar__close-button", icon: iconClose_1.IconClose, iconSize: "large", onClick: onClosePanel, iconPosition: textIconButton_2.ButtonIconPosition.Start, title: translate("Close") })] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__content", children: newChildren }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar__footer", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__footer-section", children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, className: "zen-side-panel-filters-bar__clear-button", onClick: onResetFilters, children: translate("Clear") }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__footer-section", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-side-panel-filters-bar__apply-button", disabled: applyDisabled, onClick: onApplyFilters, type: buttonType_1.ButtonType.Primary, children: translate("Apply") }) })] })] }) })] }), (_a = parentElement !== null && parentElement !== void 0 ? parentElement : document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body) });
 };
 exports.FiltersBarSidePanel = FiltersBarSidePanel;
 const FiltersBarSidePanelContainer = (_) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});