@geotab/zenith 3.9.0-beta.ssr.0 → 3.9.0-beta.ssr.2

package/dist/card/card.d.ts

@@ -1,7 +1,7 @@
 import React, { FC, FunctionComponent, ReactNode } from "react";
 import { IAbsoluteSize, TContainerSize } from "../cardContainer/cardContainer";
 import { TCardStatus } from "./components/status";
-import { TIconType } from "./components/title";
+import { TIconType } from "../title/title";
 import { IActions } from "./components/actions";
 import { IContent } from "./components/content";
 import "./card.less";

package/dist/card/card.js

@@ -71,7 +71,7 @@ const cardContainer_1 = require("../cardContainer/cardContainer");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
 const status_1 = require("./components/status");
-const title_1 = require("./components/title");
+const title_1 = require("../title/title");
 const actions_1 = require("./components/actions");
 const content_1 = require("./components/content");
 const useCardSize_1 = require("./hooks/useCardSize");

package/dist/card/helpers/getIconTypeFromStatus.d.ts

@@ -1,3 +1,3 @@
 import { TCardStatus } from "../components/status";
-import { TIconType } from "../components/title";
+import { TIconType } from "../../title/title";
 export declare const getIconTypeFromStatus: (status: TCardStatus) => TIconType | undefined;

package/dist/commonHelpers/generateId.d.ts

@@ -1 +1,9 @@
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 export declare function generateId(): string;

package/dist/commonHelpers/generateId.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateId = void 0;
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 function generateId() {
     return "id" + Math.random().toString().substring(2) + Math.random().toString().substring(2);
 }

package/dist/commonHelpers/hooks/ssrProvider.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from "react";
+import { DeviceType } from "./deviceType";
+interface ISSRContext {
+    isClientReady: boolean;
+    deviceType?: DeviceType;
+}
+export declare const SSRContext: import("react").Context<ISSRContext | null>;
+export declare const SSRProvider: ({ deviceType, isClientReady, children }: PropsWithChildren<{
+    deviceType?: DeviceType;
+    isClientReady?: boolean;
+}>) => import("react/jsx-runtime").JSX.Element;
+export declare const useSSRContext: () => ISSRContext | null;
+export declare const useIsSSRProviderMounted: () => boolean;
+export {};

package/dist/commonHelpers/hooks/ssrProvider.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsSSRProviderMounted = exports.useSSRContext = exports.SSRProvider = exports.SSRContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.SSRContext = (0, react_1.createContext)(null);
+const SSRProvider = ({ deviceType, isClientReady = false, children }) => ((0, jsx_runtime_1.jsx)(exports.SSRContext.Provider, { value: { isClientReady, deviceType }, children: children }));
+exports.SSRProvider = SSRProvider;
+const useSSRContext = () => (0, react_1.useContext)(exports.SSRContext);
+exports.useSSRContext = useSSRContext;
+const useIsSSRProviderMounted = () => (0, react_1.useContext)(exports.SSRContext) !== null;
+exports.useIsSSRProviderMounted = useIsSSRProviderMounted;

package/dist/commonHelpers/hooks/useClientReady.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClientReady = void 0;
 const react_1 = require("react");
 const isDomEnv_1 = require("../isDomEnv");
+const ssrProvider_1 = require("./ssrProvider");
 const useClientReady = () => {
-    const [isClientReady, setIsClientReady] = (0, react_1.useState)(true);
+    const ctx = (0, react_1.useContext)(ssrProvider_1.SSRContext);
+    const [isClientReady, setIsClientReady] = (0, react_1.useState)(ctx !== null ? ctx.isClientReady : true);
     (0, react_1.useEffect)(() => {
         if ((0, isDomEnv_1.isDomEnv)()) {
             setIsClientReady(true);

package/dist/commonHelpers/hooks/useDeviceType.js

@@ -7,6 +7,7 @@ const deviceType_1 = require("./deviceType");
 const topWindowContext_1 = require("../../utils/topWindow/topWindowContext");
 const getParentWindow_1 = require("../../utils/getParentWindow");
 const zen_1 = require("../../utils/zen");
+const ssrProvider_1 = require("./ssrProvider");
 const MobileMaxWidth = 640;
 const getDeviceType = (width) => {
     if (width > MobileMaxWidth) {
@@ -16,9 +17,11 @@ const getDeviceType = (width) => {
 };
 exports.getDeviceType = getDeviceType;
 const useDeviceType = (callback) => {
+    const ctx = (0, react_1.useContext)(ssrProvider_1.SSRContext);
+    const ssrDeviceType = ctx === null || ctx === void 0 ? void 0 : ctx.deviceType;
     const { topWindow } = (0, react_1.useContext)(topWindowContext_1.topWindowContext);
     const win = (0, react_1.useMemo)(() => topWindow || (0, getParentWindow_1.getParentWindow)(zen_1.zen), [topWindow]);
-    const [deviceType, setDeviceType] = (0, react_1.useState)((0, exports.getDeviceType)(win.innerWidth));
+    const [deviceType, setDeviceType] = (0, react_1.useState)(ssrDeviceType !== null && ssrDeviceType !== void 0 ? ssrDeviceType : (0, exports.getDeviceType)(win.innerWidth));
     (0, useResize_1.useResize)(() => {
         setDeviceType((0, exports.getDeviceType)(win.innerWidth));
     }, true);

package/dist/commonHelpers/hooks/useMobile.js

@@ -5,13 +5,14 @@ const react_1 = require("react");
 const deviceType_1 = require("./deviceType");
 const useDeviceType_1 = require("./useDeviceType");
 const getParentWindow_1 = require("../../utils/getParentWindow");
-const deviceProvider_1 = require("./deviceProvider");
+const ssrProvider_1 = require("./ssrProvider");
 const zen_1 = require("../../utils/zen");
 const initialParent = (0, getParentWindow_1.getParentWindow)(zen_1.zen);
 exports.initialValue = (0, useDeviceType_1.getDeviceType)(initialParent.innerWidth);
 const useMobile = () => {
-    const deviceTypeFromProvider = (0, react_1.useContext)(deviceProvider_1.DeviceContext);
-    const [deviceType, setDeviceType] = (0, react_1.useState)(deviceTypeFromProvider || exports.initialValue);
+    var _a;
+    const ctx = (0, react_1.useContext)(ssrProvider_1.SSRContext);
+    const [deviceType, setDeviceType] = (0, react_1.useState)((_a = ctx === null || ctx === void 0 ? void 0 : ctx.deviceType) !== null && _a !== void 0 ? _a : exports.initialValue);
     (0, useDeviceType_1.useDeviceType)(setDeviceType);
     const isMobile = (0, react_1.useMemo)(() => deviceType === deviceType_1.DeviceType.Mobile, [deviceType]);
     return isMobile;

package/dist/commonHelpers/hooks/usePortal.js

@@ -4,13 +4,10 @@ exports.usePortal = void 0;
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const usePortal = (children, container, key) => {
-    const [portalContainer, setPortalContainer] = (0, react_1.useState)(container);
+    const [portalContainer, setPortalContainer] = (0, react_1.useState)(undefined);
     (0, react_1.useEffect)(() => {
-        if (portalContainer || !container) {
-            return;
-        }
         setPortalContainer(container);
-    }, [portalContainer, container]);
+    }, [container]);
     return portalContainer ? (0, react_dom_1.createPortal)(children, portalContainer, key) : null;
 };
 exports.usePortal = usePortal;

package/dist/commonHelpers/useUniqueId.d.ts

@@ -6,6 +6,12 @@
  * component. This can be particularly useful for assigning unique keys to elements
  * in a list, or for generating unique identifiers for form inputs, labels, etc.
  *
+ * @remarks
+ * **Prefer `React.useId()`** when possible. `useId` generates IDs that are stable
+ * across server and client renders, preventing SSR hydration mismatches.
+ * Use `useUniqueId` only when `useId` is not suitable — for example, when the ID
+ * must be truly random and is never rendered during SSR.
+ *
  * @returns {string} A unique identifier.
  *
  * Example usage:

package/dist/commonHelpers/useUniqueId.js

@@ -11,6 +11,12 @@ const utils_1 = require("./utils");
  * component. This can be particularly useful for assigning unique keys to elements
  * in a list, or for generating unique identifiers for form inputs, labels, etc.
  *
+ * @remarks
+ * **Prefer `React.useId()`** when possible. `useId` generates IDs that are stable
+ * across server and client renders, preventing SSR hydration mismatches.
+ * Use `useUniqueId` only when `useId` is not suitable — for example, when the ID
+ * must be truly random and is never rendered during SSR.
+ *
  * @returns {string} A unique identifier.
  *
  * Example usage:

package/dist/commonHelpers/utils.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 export declare const generateId: () => string;
 export declare const echo: <T = unknown>(_: T) => T;
 export declare function flattenArrays<T>(arrayOfArrays: T[][]): T[];

package/dist/commonHelpers/utils.js

@@ -2,6 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deepClone = exports.deepMerge = exports.flattenArrays = exports.echo = exports.generateId = void 0;
 const zen_1 = require("../utils/zen");
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 const generateId = () => "id" + Math.random().toString().substring(2);
 exports.generateId = generateId;
 const echo = (_) => _;

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -7,19 +7,21 @@ import { DeviceType } from "../../../../commonHelpers/hooks/deviceType";
 type TBulkAction = IBulkActionLink | IBulkActionButton;
 export interface IBulkActionsProps extends IZenComponentProps {
     selected: number;
+    /**
+     * When `true`, displays "All selected" instead of a count, and enables action buttons
+     * even when `selected` is 0 (i.e., cross-page "select all" is active).
+     */
     allSelected?: boolean;
     onClearSelection: () => void;
-    onSelectAll?: () => void;
     gridType?: DeviceType;
     children?: ReactElement<TBulkAction> | null | (ReactElement<TBulkAction> | null)[];
-    turnOffSelectAll?: boolean;
 }
 export interface IBulkActions extends IBulkActionsProps {
     ActionLink: (props: IBulkActionLink) => ReactNode;
     ActionButton: (props: IBulkActionButton) => ReactNode;
 }
 export declare const BulkActions: {
-    ({ selected, allSelected, className, onClearSelection, onSelectAll, gridType, children, turnOffSelectAll }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ selected, allSelected, className, onClearSelection, gridType, children }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
     ActionLink: ({ title, icon, link, disabled, type, ref }: IBulkActionLink) => import("react/jsx-runtime").JSX.Element;
     ActionButton: ({ title, icon, clickHandler, onClick, disabled, type, ref }: IBulkActionButton) => import("react/jsx-runtime").JSX.Element;
     translations: string[];

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.js

@@ -89,33 +89,6 @@ injectString("zh-Hans", "Clear selection", "\u6E05\u9664\u9009\u62E9");
 injectString("zh-TW", "Clear selection", "\u6E05\u9664\u9078\u53D6\u9805\u76EE");
 injectString("ro-RO", "Clear selection", "\u0218terge\u021Bi selec\u021Bia");
 injectString("ar-SA", "Clear selection", "\u0645\u0633\u062D \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
-injectString("cs", "Select all", "Vybrat v\u0161e");
-injectString("da-DK", "Select all", "V\xE6lg alle");
-injectString("de", "Select all", "Alle ausw\xE4hlen");
-injectString("en", "Select all", "Select all");
-injectString("es", "Select all", "Seleccionar todo");
-injectString("fi-FI", "Select all", "Valitse kaikki");
-injectString("fr", "Select all", "S\xE9lectionner tout");
-injectString("fr-FR", "Select all", "S\xE9lectionner tout");
-injectString("hu-HU", "Select all", "V\xE1laszd ki az \xF6sszeset.");
-injectString("id", "Select all", "Pilih semua");
-injectString("it", "Select all", "Selezionare tutto");
-injectString("ja", "Select all", "\u3059\u3079\u3066\u9078\u629E");
-injectString("ko-KR", "Select all", "\uBAA8\uB450 \uC120\uD0DD");
-injectString("ms", "Select all", "Pilih semua");
-injectString("nb-NO", "Select all", "Velg alle");
-injectString("nl", "Select all", "Alles selecteren");
-injectString("pl", "Select all", "Wybierz wszystko");
-injectString("pt-BR", "Select all", "Selecionar tudo");
-injectString("pt-PT", "Select all", "Selecionar tudo");
-injectString("sk-SK", "Select all", "Vyber v\u0161etko.");
-injectString("sv", "Select all", "V\xE4lj alla");
-injectString("th", "Select all", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
-injectString("tr", "Select all", "T\xFCm\xFCn\xFC se\xE7");
-injectString("zh-Hans", "Select all", "\u5168\u9009");
-injectString("zh-TW", "Select all", "\u5168\u9078");
-injectString("ro-RO", "Select all", "Selecta\u021Bi tot");
-injectString("ar-SA", "Select all", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "More", "V\xEDce");
 injectString("da-DK", "More", "Mere");
 injectString("de", "More", "Mehr");
@@ -155,16 +128,13 @@ const useNonFittingElements_1 = require("../../../../header/hooks/useNonFittingE
 const useResizeObserver_1 = require("../../../../commonHelpers/hooks/useResizeObserver");
 const menu_1 = require("../../../../menu/menu");
 const iconDotVertical_1 = require("../../../../icons/iconDotVertical");
-const button_1 = require("../../../../button/button");
 const BulkActions = ({
   selected,
   allSelected,
   className,
   onClearSelection,
-  onSelectAll,
   gridType = deviceType_1.DeviceType.Desktop,
-  children,
-  turnOffSelectAll
+  children
 }) => {
   var _a;
   const {
@@ -208,13 +178,7 @@ const BulkActions = ({
     }), (0, jsx_runtime_1.jsx)("span", {
       className: "zen-bulk-actions__number-of-selected ellipsis",
       children: text
-    }), onSelectAll && !turnOffSelectAll ? (0, jsx_runtime_1.jsx)(button_1.Button, {
-      type: "tertiary",
-      className: "zen-bulk-actions__select-all",
-      disabled: allSelected,
-      onClick: onSelectAll,
-      children: translate("Select all")
-    }) : null, (0, jsx_runtime_1.jsxs)("div", {
+    }), (0, jsx_runtime_1.jsxs)("div", {
       className: "zen-bulk-actions__action-button-holder",
       ref: buttonHolder,
       children: [react_1.Children.map(visibleElements, element => (0, react_1.cloneElement)(element, {

package/dist/feedbackContainer/feedbackContainer.js

@@ -35,9 +35,9 @@ const getAlertAnimation_1 = require("./utils/getAlertAnimation");
 const getToastAnimation_1 = require("./utils/getToastAnimation");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
-const react_dom_1 = require("react-dom");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 const FeedbackContainer = () => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     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);
@@ -74,11 +74,11 @@ const FeedbackContainer = () => {
             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 }), (_b = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body) !== null && _b !== void 0 ? _b : undefined);
+    const toastsPortal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)("div", { className: toastClasses, children: toastsToRender }), (_d = (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body) !== null && _d !== void 0 ? _d : undefined);
     if (!isClientReady) {
         return null;
     }
-    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/filters/components/filtersSidePanel.d.ts

@@ -12,4 +12,4 @@ export interface IFiltersSidePanel {
     setExternalState?: (newState: Partial<Record<string, TFiltersComponentsItemState>>) => void;
     triggerRef: React.RefObject<HTMLElement>;
 }
-export declare const FiltersSidePanel: ({ isOpen, onApply, onClose, onPin, isPinned, filters, externalState, setExternalState, triggerRef }: IFiltersSidePanel) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSidePanel: ({ isOpen, onApply, onClose, onPin, isPinned, filters, externalState, setExternalState, triggerRef }: IFiltersSidePanel) => import("react/jsx-runtime").JSX.Element | null;

package/dist/filters/components/filtersSidePanel.js

@@ -14,7 +14,8 @@ const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const useBodyScroll_1 = require("../../utils/useBodyScroll");
 const shield_1 = require("../../shield/shield");
-const react_dom_1 = require("react-dom");
+const usePortal_1 = require("../../commonHelpers/hooks/usePortal");
+const useClientReady_1 = require("../../commonHelpers/hooks/useClientReady");
 const sidePanel_1 = require("../../sidePanel/sidePanel");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const themeContext_1 = require("../../utils/theme/themeContext");
@@ -463,131 +464,137 @@ const FiltersSidePanel = ({
     }
   }, [isSaveModalOpen, dataShieldId, onClose]);
   const memoizedBigSizeIcon = (0, react_1.useMemo)(() => (iconMobileClassName || iconDriveClassName) !== undefined, [iconMobileClassName, iconDriveClassName]);
-  return (0, jsx_runtime_1.jsxs)(react_1.Fragment, {
-    children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, {
-      className: "zen-high-level-shield",
-      dataShieldId: dataShieldId,
-      isVisible: isOpen
-    }), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, {
-      triggerRef: triggerRef,
-      isOpen: isOpen,
-      label: translate("All Filters"),
-      onHidePanel: handleHidePanel,
-      className: (0, classNames_1.classNames)(["zen-side-panel-filters", dark ? "zen-dark" : ""]),
-      onTransitionEnd: handleReadyForFocus,
-      children: (0, jsx_runtime_1.jsxs)("div", {
-        className: "zen-side-panel-filters-wrapper",
-        children: [(0, jsx_runtime_1.jsxs)("div", {
-          className: "zen-side-panel-filters__header",
-          children: [(0, jsx_runtime_1.jsx)("div", {
-            className: "zen-side-panel-filters__title-wrapper",
-            children: (0, jsx_runtime_1.jsx)("div", {
-              className: (0, classNames_1.classNames)(["zen-side-panel-filters__title", "zen-ellipsis", titleMobileClassName || ""]),
-              children: translate("All Filters")
-            })
-          }), (0, jsx_runtime_1.jsxs)("div", {
-            className: (0, classNames_1.classNames)(["zen-side-panel-filters__header-buttons", headerButtonsMobileClassName || ""]),
-            children: [onSave && (0, jsx_runtime_1.jsx)(button_1.Button, {
-              type: "tertiary",
-              ref: saveButtonRef,
-              className: "zen-side-panel-filters__save-button zen-side-panel-filters__header-button",
-              title: translate("Save"),
-              "aria-label": translate("Save"),
-              onClick: toggleSaveModal,
-              children: (0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, {
-                description: translate("Save"),
-                className: "svgIcon",
-                size: memoizedBigSizeIcon ? "huge" : "large"
-              })
-            }), onPin && (0, jsx_runtime_1.jsx)(button_1.Button, {
-              type: "tertiary",
-              className: (0, classNames_1.classNames)(["zen-side-panel-filters__pin-button", isPinned ? "zen-side-panel-filters__header-button--active" : "", "zen-side-panel-filters__header-button"]),
-              title: translate("Pin"),
-              "aria-label": translate("Pin"),
-              onClick: onPin,
-              children: (0, jsx_runtime_1.jsx)(iconPin2_1.IconPin2, {
-                description: translate("Pin"),
-                className: "svgIcon",
-                size: memoizedBigSizeIcon ? "huge" : "large"
-              })
-            }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
-              type: "tertiary-black",
-              className: "zen-side-panel-filters__close-button",
-              icon: iconClose_1.IconClose,
-              iconSize: memoizedBigSizeIcon ? "huge" : "large",
-              onClick: externalMode ? handleExternalModeClose : onClose,
-              iconPosition: textIconButton_1.ButtonIconPosition.Start,
-              title: translate("Close")
-            })]
-          })]
-        }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, {
-          activeTabId: activeTabId,
-          className: "zen-side-panel-filters__tab-header",
-          onTabChange: onTabChange,
-          tabs: tabOptions
+  const isClientReady = (0, useClientReady_1.useClientReady)();
+  const modalRoot = (_b = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body;
+  const portal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, {
+    triggerRef: triggerRef,
+    isOpen: isOpen,
+    label: translate("All Filters"),
+    onHidePanel: handleHidePanel,
+    className: (0, classNames_1.classNames)(["zen-side-panel-filters", dark ? "zen-dark" : ""]),
+    onTransitionEnd: handleReadyForFocus,
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-side-panel-filters-wrapper",
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-side-panel-filters__header",
+        children: [(0, jsx_runtime_1.jsx)("div", {
+          className: "zen-side-panel-filters__title-wrapper",
+          children: (0, jsx_runtime_1.jsx)("div", {
+            className: (0, classNames_1.classNames)(["zen-side-panel-filters__title", "zen-ellipsis", titleMobileClassName || ""]),
+            children: translate("All Filters")
+          })
         }), (0, jsx_runtime_1.jsxs)("div", {
-          className: "zen-side-panel-filters__content",
-          children: [(0, jsx_runtime_1.jsx)("div", {
-            id: `panel-${filtersSelect_1.ALL_SELECT_OPTION_ID}`,
-            className: (0, classNames_1.classNames)(["zen-side-panel-filters__tab-content", activeTabId === filtersSelect_1.ALL_SELECT_OPTION_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]),
-            role: "tabpanel",
-            "aria-labelledby": filtersSelect_1.ALL_SELECT_OPTION_ID,
-            children: activeTabId === filtersSelect_1.ALL_SELECT_OPTION_ID ? tabsContent : null
-          }), (0, jsx_runtime_1.jsx)("div", {
-            id: `panel-${SELECTED_TAB_ID}`,
-            className: (0, classNames_1.classNames)(["zen-side-panel-filters__tab-content", activeTabId === SELECTED_TAB_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]),
-            role: "tabpanel",
-            "aria-labelledby": SELECTED_TAB_ID,
-            children: activeTabId === SELECTED_TAB_ID ? selectedTabsContent : null
+          className: (0, classNames_1.classNames)(["zen-side-panel-filters__header-buttons", headerButtonsMobileClassName || ""]),
+          children: [onSave && (0, jsx_runtime_1.jsx)(button_1.Button, {
+            type: "tertiary",
+            ref: saveButtonRef,
+            className: "zen-side-panel-filters__save-button zen-side-panel-filters__header-button",
+            title: translate("Save"),
+            "aria-label": translate("Save"),
+            onClick: toggleSaveModal,
+            children: (0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, {
+              description: translate("Save"),
+              className: "svgIcon",
+              size: memoizedBigSizeIcon ? "huge" : "large"
+            })
+          }), onPin && (0, jsx_runtime_1.jsx)(button_1.Button, {
+            type: "tertiary",
+            className: (0, classNames_1.classNames)(["zen-side-panel-filters__pin-button", isPinned ? "zen-side-panel-filters__header-button--active" : "", "zen-side-panel-filters__header-button"]),
+            title: translate("Pin"),
+            "aria-label": translate("Pin"),
+            onClick: onPin,
+            children: (0, jsx_runtime_1.jsx)(iconPin2_1.IconPin2, {
+              description: translate("Pin"),
+              className: "svgIcon",
+              size: memoizedBigSizeIcon ? "huge" : "large"
+            })
+          }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+            type: "tertiary-black",
+            className: "zen-side-panel-filters__close-button",
+            icon: iconClose_1.IconClose,
+            iconSize: memoizedBigSizeIcon ? "huge" : "large",
+            onClick: externalMode ? handleExternalModeClose : onClose,
+            iconPosition: textIconButton_1.ButtonIconPosition.Start,
+            title: translate("Close")
           })]
+        })]
+      }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, {
+        activeTabId: activeTabId,
+        className: "zen-side-panel-filters__tab-header",
+        onTabChange: onTabChange,
+        tabs: tabOptions
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-side-panel-filters__content",
+        children: [(0, jsx_runtime_1.jsx)("div", {
+          id: `panel-${filtersSelect_1.ALL_SELECT_OPTION_ID}`,
+          className: (0, classNames_1.classNames)(["zen-side-panel-filters__tab-content", activeTabId === filtersSelect_1.ALL_SELECT_OPTION_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]),
+          role: "tabpanel",
+          "aria-labelledby": filtersSelect_1.ALL_SELECT_OPTION_ID,
+          children: activeTabId === filtersSelect_1.ALL_SELECT_OPTION_ID ? tabsContent : null
         }), (0, jsx_runtime_1.jsx)("div", {
-          className: (0, classNames_1.classNames)(["zen-side-panel-filters__footer", isMobile ? "zen-side-panel-filters__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters__footer--long-text" : ""]),
-          children: isMobile ? (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
+          id: `panel-${SELECTED_TAB_ID}`,
+          className: (0, classNames_1.classNames)(["zen-side-panel-filters__tab-content", activeTabId === SELECTED_TAB_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]),
+          role: "tabpanel",
+          "aria-labelledby": SELECTED_TAB_ID,
+          children: activeTabId === SELECTED_TAB_ID ? selectedTabsContent : null
+        })]
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-side-panel-filters__footer", isMobile ? "zen-side-panel-filters__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters__footer--long-text" : ""]),
+        children: isMobile ? (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
+          children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+            className: "zen-side-panel-filters__apply-button",
+            onClick: handleApplyClick,
+            type: "primary",
+            disabled: errorItems.size > 0,
+            children: translate("Apply")
+          }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+            className: "zen-side-panel-filters__cancel-button",
+            type: "secondary",
+            onClick: handleCancelClick,
+            children: translate("Cancel")
+          }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+            className: "zen-side-panel-filters__clear-button",
+            onClick: handleClearClick,
+            type: "tertiary",
+            children: translate("Reset")
+          })]
+        }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: "zen-side-panel-filters__footer-section",
+            children: (0, jsx_runtime_1.jsx)(button_1.Button, {
+              type: "tertiary",
+              className: "zen-side-panel-filters__clear-button",
+              onClick: handleClearClick,
+              children: translate("Reset")
+            })
+          }), (0, jsx_runtime_1.jsxs)("div", {
+            className: "zen-side-panel-filters__footer-section",
             children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
-              className: "zen-side-panel-filters__apply-button",
-              onClick: handleApplyClick,
-              type: "primary",
-              disabled: errorItems.size > 0,
-              children: translate("Apply")
-            }), (0, jsx_runtime_1.jsx)(button_1.Button, {
               className: "zen-side-panel-filters__cancel-button",
               type: "secondary",
               onClick: handleCancelClick,
               children: translate("Cancel")
             }), (0, jsx_runtime_1.jsx)(button_1.Button, {
-              className: "zen-side-panel-filters__clear-button",
-              onClick: handleClearClick,
-              type: "tertiary",
-              children: translate("Reset")
-            })]
-          }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-            children: [(0, jsx_runtime_1.jsx)("div", {
-              className: "zen-side-panel-filters__footer-section",
-              children: (0, jsx_runtime_1.jsx)(button_1.Button, {
-                type: "tertiary",
-                className: "zen-side-panel-filters__clear-button",
-                onClick: handleClearClick,
-                children: translate("Reset")
-              })
-            }), (0, jsx_runtime_1.jsxs)("div", {
-              className: "zen-side-panel-filters__footer-section",
-              children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
-                className: "zen-side-panel-filters__cancel-button",
-                type: "secondary",
-                onClick: handleCancelClick,
-                children: translate("Cancel")
-              }), (0, jsx_runtime_1.jsx)(button_1.Button, {
-                className: "zen-side-panel-filters__apply-button zen-side-panel-filters__apply-button--desktop",
-                onClick: handleApplyClick,
-                type: "primary",
-                disabled: errorItems.size > 0,
-                children: translate("Apply")
-              })]
+              className: "zen-side-panel-filters__apply-button zen-side-panel-filters__apply-button--desktop",
+              onClick: handleApplyClick,
+              type: "primary",
+              disabled: errorItems.size > 0,
+              children: translate("Apply")
             })]
-          })
-        })]
-      })
-    }), (_b = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body), (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, {
+          })]
+        })
+      })]
+    })
+  }), modalRoot !== null && modalRoot !== void 0 ? modalRoot : undefined);
+  if (!isClientReady) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsxs)(react_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, {
+      className: "zen-high-level-shield",
+      dataShieldId: dataShieldId,
+      isVisible: isOpen
+    }), portal, (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, {
       className: sidePanel_1.CUSTOM_POPUP_COMPONENT_CLASSNAME,
       isOpen: isSaveModalOpen,
       onClose: toggleSaveModal,

package/dist/filters/filters.js

@@ -223,7 +223,6 @@ const chipStatusProvider_1 = require("../chip/chipStatusProvider");
 const filtersSavedItemsProvider_1 = require("./components/filtersSavedItemsProvider");
 const filtersHelper_1 = require("./filtersHelper");
 const filtersSearch_1 = require("./components/filtersSearch");
-const useUniqueId_1 = require("../commonHelpers/useUniqueId");
 const isElementsEqual_1 = require("../utils/compareElementsUtils/isElementsEqual");
 const iconFilter_1 = require("../icons/iconFilter");
 const filtersSidePanel_1 = require("./components/filtersSidePanel");
@@ -265,7 +264,7 @@ const Filters = ({
   const isSavedFiltersMode = Boolean(savedFilters && onRemoveSavedFilter && onSaveFilter);
   const isPinMode = Boolean(typeof isPinned === "boolean" && onPinChange);
   const isRecentSearchesMode = Boolean(recentSearches && onRemoveRecentSearchItem && onSaveRecentSearch);
-  const uniqueKey = (0, useUniqueId_1.useUniqueId)();
+  const uniqueKey = (0, react_1.useId)();
   const popupId = `${uniqueKey}_popup`;
   const isMobile = (0, useMobile_1.useMobile)();
   const [isSidePanelOpen, setIsSidePanelOpen] = (0, react_1.useState)(false);