@geotab/zenith 3.8.0-beta.1 → 3.9.0-beta.0

package/esm/filters/components/filtersSidePanel.js

@@ -6,7 +6,8 @@ import { useUniqueId } from "../../commonHelpers/useUniqueId";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { useBodyScroll } from "../../utils/useBodyScroll";
 import { Shield } from "../../shield/shield";
-import { createPortal } from "react-dom";
+import { usePortal } from "../../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../../commonHelpers/hooks/useClientReady";
 import { CUSTOM_POPUP_COMPONENT_CLASSNAME, SidePanel, SidePanelCloseReason } from "../../sidePanel/sidePanel";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { themeContext } from "../../utils/theme/themeContext";
@@ -455,131 +456,137 @@ export const FiltersSidePanel = ({
     }
   }, [isSaveModalOpen, dataShieldId, onClose]);
   const memoizedBigSizeIcon = useMemo(() => (iconMobileClassName || iconDriveClassName) !== undefined, [iconMobileClassName, iconDriveClassName]);
-  return _jsxs(Fragment, {
-    children: [_jsx(Shield, {
-      className: "zen-high-level-shield",
-      dataShieldId: dataShieldId,
-      isVisible: isOpen
-    }), createPortal(_jsx(SidePanel, {
-      triggerRef: triggerRef,
-      isOpen: isOpen,
-      label: translate("All Filters"),
-      onHidePanel: handleHidePanel,
-      className: classNames(["zen-side-panel-filters", dark ? "zen-dark" : ""]),
-      onTransitionEnd: handleReadyForFocus,
-      children: _jsxs("div", {
-        className: "zen-side-panel-filters-wrapper",
-        children: [_jsxs("div", {
-          className: "zen-side-panel-filters__header",
-          children: [_jsx("div", {
-            className: "zen-side-panel-filters__title-wrapper",
-            children: _jsx("div", {
-              className: classNames(["zen-side-panel-filters__title", "zen-ellipsis", titleMobileClassName || ""]),
-              children: translate("All Filters")
-            })
-          }), _jsxs("div", {
-            className: classNames(["zen-side-panel-filters__header-buttons", headerButtonsMobileClassName || ""]),
-            children: [onSave && _jsx(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: _jsx(IconDisk, {
-                description: translate("Save"),
-                className: "svgIcon",
-                size: memoizedBigSizeIcon ? "huge" : "large"
-              })
-            }), onPin && _jsx(Button, {
-              type: "tertiary",
-              className: 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: _jsx(IconPin2, {
-                description: translate("Pin"),
-                className: "svgIcon",
-                size: memoizedBigSizeIcon ? "huge" : "large"
-              })
-            }), _jsx(TextIconButton, {
-              type: "tertiary-black",
-              className: "zen-side-panel-filters__close-button",
-              icon: IconClose,
-              iconSize: memoizedBigSizeIcon ? "huge" : "large",
-              onClick: externalMode ? handleExternalModeClose : onClose,
-              iconPosition: ButtonIconPosition.Start,
-              title: translate("Close")
-            })]
-          })]
-        }), _jsx(Tabs, {
-          activeTabId: activeTabId,
-          className: "zen-side-panel-filters__tab-header",
-          onTabChange: onTabChange,
-          tabs: tabOptions
+  const isClientReady = useClientReady();
+  const modalRoot = (_b = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body;
+  const portal = usePortal(_jsx(SidePanel, {
+    triggerRef: triggerRef,
+    isOpen: isOpen,
+    label: translate("All Filters"),
+    onHidePanel: handleHidePanel,
+    className: classNames(["zen-side-panel-filters", dark ? "zen-dark" : ""]),
+    onTransitionEnd: handleReadyForFocus,
+    children: _jsxs("div", {
+      className: "zen-side-panel-filters-wrapper",
+      children: [_jsxs("div", {
+        className: "zen-side-panel-filters__header",
+        children: [_jsx("div", {
+          className: "zen-side-panel-filters__title-wrapper",
+          children: _jsx("div", {
+            className: classNames(["zen-side-panel-filters__title", "zen-ellipsis", titleMobileClassName || ""]),
+            children: translate("All Filters")
+          })
         }), _jsxs("div", {
-          className: "zen-side-panel-filters__content",
-          children: [_jsx("div", {
-            id: `panel-${ALL_SELECT_OPTION_ID}`,
-            className: classNames(["zen-side-panel-filters__tab-content", activeTabId === ALL_SELECT_OPTION_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]),
-            role: "tabpanel",
-            "aria-labelledby": ALL_SELECT_OPTION_ID,
-            children: activeTabId === ALL_SELECT_OPTION_ID ? tabsContent : null
-          }), _jsx("div", {
-            id: `panel-${SELECTED_TAB_ID}`,
-            className: 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: classNames(["zen-side-panel-filters__header-buttons", headerButtonsMobileClassName || ""]),
+          children: [onSave && _jsx(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: _jsx(IconDisk, {
+              description: translate("Save"),
+              className: "svgIcon",
+              size: memoizedBigSizeIcon ? "huge" : "large"
+            })
+          }), onPin && _jsx(Button, {
+            type: "tertiary",
+            className: 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: _jsx(IconPin2, {
+              description: translate("Pin"),
+              className: "svgIcon",
+              size: memoizedBigSizeIcon ? "huge" : "large"
+            })
+          }), _jsx(TextIconButton, {
+            type: "tertiary-black",
+            className: "zen-side-panel-filters__close-button",
+            icon: IconClose,
+            iconSize: memoizedBigSizeIcon ? "huge" : "large",
+            onClick: externalMode ? handleExternalModeClose : onClose,
+            iconPosition: ButtonIconPosition.Start,
+            title: translate("Close")
           })]
+        })]
+      }), _jsx(Tabs, {
+        activeTabId: activeTabId,
+        className: "zen-side-panel-filters__tab-header",
+        onTabChange: onTabChange,
+        tabs: tabOptions
+      }), _jsxs("div", {
+        className: "zen-side-panel-filters__content",
+        children: [_jsx("div", {
+          id: `panel-${ALL_SELECT_OPTION_ID}`,
+          className: classNames(["zen-side-panel-filters__tab-content", activeTabId === ALL_SELECT_OPTION_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]),
+          role: "tabpanel",
+          "aria-labelledby": ALL_SELECT_OPTION_ID,
+          children: activeTabId === ALL_SELECT_OPTION_ID ? tabsContent : null
         }), _jsx("div", {
-          className: classNames(["zen-side-panel-filters__footer", isMobile ? "zen-side-panel-filters__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters__footer--long-text" : ""]),
-          children: isMobile ? _jsxs(FooterButtons, {
+          id: `panel-${SELECTED_TAB_ID}`,
+          className: 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
+        })]
+      }), _jsx("div", {
+        className: classNames(["zen-side-panel-filters__footer", isMobile ? "zen-side-panel-filters__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters__footer--long-text" : ""]),
+        children: isMobile ? _jsxs(FooterButtons, {
+          children: [_jsx(Button, {
+            className: "zen-side-panel-filters__apply-button",
+            onClick: handleApplyClick,
+            type: "primary",
+            disabled: errorItems.size > 0,
+            children: translate("Apply")
+          }), _jsx(Button, {
+            className: "zen-side-panel-filters__cancel-button",
+            type: "secondary",
+            onClick: handleCancelClick,
+            children: translate("Cancel")
+          }), _jsx(Button, {
+            className: "zen-side-panel-filters__clear-button",
+            onClick: handleClearClick,
+            type: "tertiary",
+            children: translate("Reset")
+          })]
+        }) : _jsxs(_Fragment, {
+          children: [_jsx("div", {
+            className: "zen-side-panel-filters__footer-section",
+            children: _jsx(Button, {
+              type: "tertiary",
+              className: "zen-side-panel-filters__clear-button",
+              onClick: handleClearClick,
+              children: translate("Reset")
+            })
+          }), _jsxs("div", {
+            className: "zen-side-panel-filters__footer-section",
             children: [_jsx(Button, {
-              className: "zen-side-panel-filters__apply-button",
-              onClick: handleApplyClick,
-              type: "primary",
-              disabled: errorItems.size > 0,
-              children: translate("Apply")
-            }), _jsx(Button, {
               className: "zen-side-panel-filters__cancel-button",
               type: "secondary",
               onClick: handleCancelClick,
               children: translate("Cancel")
             }), _jsx(Button, {
-              className: "zen-side-panel-filters__clear-button",
-              onClick: handleClearClick,
-              type: "tertiary",
-              children: translate("Reset")
-            })]
-          }) : _jsxs(_Fragment, {
-            children: [_jsx("div", {
-              className: "zen-side-panel-filters__footer-section",
-              children: _jsx(Button, {
-                type: "tertiary",
-                className: "zen-side-panel-filters__clear-button",
-                onClick: handleClearClick,
-                children: translate("Reset")
-              })
-            }), _jsxs("div", {
-              className: "zen-side-panel-filters__footer-section",
-              children: [_jsx(Button, {
-                className: "zen-side-panel-filters__cancel-button",
-                type: "secondary",
-                onClick: handleCancelClick,
-                children: translate("Cancel")
-              }), _jsx(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.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body), _jsx(FiltersSaveModal, {
+          })]
+        })
+      })]
+    })
+  }), modalRoot !== null && modalRoot !== void 0 ? modalRoot : undefined);
+  if (!isClientReady) {
+    return null;
+  }
+  return _jsxs(Fragment, {
+    children: [_jsx(Shield, {
+      className: "zen-high-level-shield",
+      dataShieldId: dataShieldId,
+      isVisible: isOpen
+    }), portal, _jsx(FiltersSaveModal, {
       className: CUSTOM_POPUP_COMPONENT_CLASSNAME,
       isOpen: isSaveModalOpen,
       onClose: toggleSaveModal,

package/esm/filters/filters.js

@@ -1,7 +1,7 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
 import React from "react";
 import { ALL_SELECT_OPTION_ID, FiltersSelect, getAllOption, getFiltersSearchTypeAllOption } from "./components/filtersSelect";
@@ -21,7 +21,6 @@ import { ChipStatusProvider } from "../chip/chipStatusProvider";
 import { FiltersSavedItemsProvider } from "./components/filtersSavedItemsProvider";
 import { createStateObject, getArrayOfElements, useCombineData, processChildrenWithMetaData } from "./filtersHelper";
 import { FiltersSearch } from "./components/filtersSearch";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 import { isElementsEqual } from "../utils/compareElementsUtils/isElementsEqual";
 import { IconFilter } from "../icons/iconFilter";
 import { FiltersSidePanel } from "./components/filtersSidePanel";
@@ -252,7 +251,7 @@ export const Filters = ({
   const isSavedFiltersMode = Boolean(savedFilters && onRemoveSavedFilter && onSaveFilter);
   const isPinMode = Boolean(typeof isPinned === "boolean" && onPinChange);
   const isRecentSearchesMode = Boolean(recentSearches && onRemoveRecentSearchItem && onSaveRecentSearch);
-  const uniqueKey = useUniqueId();
+  const uniqueKey = useId();
   const popupId = `${uniqueKey}_popup`;
   const isMobile = useMobile();
   const [isSidePanelOpen, setIsSidePanelOpen] = useState(false);

package/esm/filtersBar/filtersBar.d.ts

@@ -18,6 +18,8 @@ export interface IFiltersBar extends IZenComponentProps {
     toggleAllFilters: (isAllFilters: boolean) => void;
     parentElement?: HTMLElement;
     getDefaultFiltersState: () => IFiltersBarChildrenState;
+    /** A single component rendered flush to the right side of the filters bar */
+    trailingContent?: ReactElement;
     /**
      * @deprecated
      * @param onClearAllFilters - will be removed in the next major release

package/esm/filtersBar/filtersBar.js

@@ -60,7 +60,7 @@ const mergeStates = (initialState, newState) => {
     });
     return state;
 };
-export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersButton, parentElement, selectedQuantity, ignoreNewFunctionality, pillName, pillIcon, pillType, toggleAllFilters, getDefaultFiltersState, onClearAllFilters, onApplyAllFilters }) => {
+export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersButton, parentElement, selectedQuantity, trailingContent, ignoreNewFunctionality, pillName, pillIcon, pillType, toggleAllFilters, getDefaultFiltersState, onClearAllFilters, onApplyAllFilters }) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     ignoreNewFunctionality; // TODO: remove after deprecated ignoreNewFunctionality removed
     const allFiltersRef = useRef(null);
@@ -131,7 +131,9 @@ export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFi
         }
     }, [filterBarChildren, memoizedShouldUpdate, sidePanelState, stateFromChildren]);
     const searchChild = childrenArray.find(child => child && typeof child === "object" && "type" in child && child.type === FiltersBarSearch);
-    setSearchComponent(searchChild);
+    useEffect(() => {
+        setSearchComponent(searchChild);
+    }, [searchChild, setSearchComponent]);
     useEffect(() => {
         setFiltersBarToggleAllFiltersFn(toggleAllFilters);
     }, [toggleAllFilters, setFiltersBarToggleAllFiltersFn]);
@@ -233,7 +235,7 @@ export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFi
     if (!isClientReady) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [!isMobile && (_jsxs("div", { ref: toolbarRef, className: classNames(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx(FiltersContainer, { children: filterBarChildren }), _jsx(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 ? sidePanel : null] }));
+    return (_jsxs(_Fragment, { children: [!isMobile && (_jsxs("div", { ref: toolbarRef, className: classNames(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx(FiltersContainer, { children: filterBarChildren }), _jsx(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 }), trailingContent && _jsx("div", { className: "zen-filters-toolbar__trailing-content", children: trailingContent })] })), !isAllFiltersButtonHidden ? sidePanel : null] }));
 };
 FiltersBar.Search = FiltersBarSearch;
 FiltersBar.Dropdown = FiltersBarDropdown;

package/esm/filtersBar/filtersBarActions/filtersBarActions.js

@@ -6,6 +6,7 @@ import { ButtonType } from "../../button/buttonType";
 import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIconButton";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { IconSettings6 } from "../../icons/iconSettings6";
+injectString("en", "Active filters: {}", "Active filters: {}");
 injectString("cs", "Filters", "Filtry");
 injectString("da-DK", "Filters", "Filtre");
 injectString("de", "Filters", "Filter");
@@ -110,6 +111,7 @@ export const FiltersBarActions = ({
       onClick: onShowAllFilters,
       icon: IconSettings6,
       iconPosition: ButtonIconPosition.Start,
+      "aria-label": selectedQuantityToDisplay && selectedQuantityToDisplay > 0 ? translate("Active filters: {}").replace("{}", selectedQuantityToDisplay.toString()) : translate("Filters"),
       children: _jsxs("span", {
         className: "zen-filters-toolbar__action-label",
         children: [translate("Filters"), selectedQuantityToDisplay && selectedQuantityToDisplay > 0 ? _jsx("span", {
@@ -134,4 +136,4 @@ export const FiltersBarActions = ({
     }) : null]
   });
 };
-export const TRANSLATIONS = ["Filters", "Clear", "Search"];
+export const TRANSLATIONS = ["Filters", "Clear", "Search", "Active filters: {}"];

package/esm/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -78,6 +78,7 @@ export const FiltersBarSidePanelRange = ({
 }) => {
   const generatedId = useId();
   const intId = id || generatedId;
+  const rangeErrorId = `${intId}-error`;
   const [currentValue, setCurrentValue] = useState(value);
   const [errorType, setErrorType] = useState(undefined);
   const prevValueRef = useRef(value);
@@ -152,11 +153,13 @@ export const FiltersBarSidePanelRange = ({
   return _jsxs("div", {
     ref: setFieldsContainerRef,
     id: intId,
+    "aria-describedby": errorType !== undefined && directionState === "row" ? rangeErrorId : undefined,
     className: classNames(["zen-filters-bar-side-panel-range", className || ""]),
     children: [_jsxs("div", {
       className: rangeFieldContainerClasses,
       children: [memoizedMinRangeField, memoizedMaxRangeField]
     }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, {
+      id: rangeErrorId,
       className: "zen-filters-bar-side-panel-range__error",
       error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""]
     }) : null]

package/esm/filtersBar/filtersBarSidePanel/filtersBarSidePanel.d.ts

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

package/esm/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -20,8 +20,9 @@ import { useUniqueId } from "../../commonHelpers/useUniqueId";
 import { useBodyScroll } from "../../utils/useBodyScroll";
 import { FooterButtons } from "../../footerButtons/footerButtons";
 import { Pill } from "../../pill/pill";
-import { createPortal } from "react-dom";
 import { zen } from "../../utils/zen";
+import { usePortal } from "../../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../../commonHelpers/hooks/useClientReady";
 injectString("cs", "Reset All", "Obnovit v\u0161e");
 injectString("da-DK", "Reset All", "Nulstil alle");
 injectString("de", "Reset All", "Alles zur\xFCcksetzen");
@@ -301,95 +302,100 @@ export const FiltersBarSidePanel = ({
       handleClose();
     };
   }, [isOpen, setScrollHidden, resetScroll]);
-  return _jsxs(Fragment, {
-    children: [_jsx(Shield, {
-      className: "zen-high-level-shield",
-      dataShieldId: dataShieldId,
-      isVisible: isOpen
-    }), createPortal(_jsx(SidePanel, {
-      triggerRef: triggerRef,
-      isOpen: isOpen,
-      label: translate("All Filters"),
-      onHidePanel: onCloseAction,
-      className: classNames(["zen-side-panel-filters-bar", dark ? "zen-dark" : "", className !== null && className !== void 0 ? className : ""]),
-      onTransitionEnd: handleReadyForFocus,
-      children: _jsxs("div", {
-        className: "zen-side-panel-filters-bar-wrapper",
+  const isClientReady = useClientReady();
+  const portal = usePortal(_jsx(SidePanel, {
+    triggerRef: triggerRef,
+    isOpen: isOpen,
+    label: translate("All Filters"),
+    onHidePanel: onCloseAction,
+    className: classNames(["zen-side-panel-filters-bar", dark ? "zen-dark" : "", className !== null && className !== void 0 ? className : ""]),
+    onTransitionEnd: handleReadyForFocus,
+    children: _jsxs("div", {
+      className: "zen-side-panel-filters-bar-wrapper",
+      children: [_jsxs("div", {
+        className: "zen-side-panel-filters-bar__header",
         children: [_jsxs("div", {
-          className: "zen-side-panel-filters-bar__header",
-          children: [_jsxs("div", {
-            className: "zen-side-panel-filters-bar__title-wrapper",
-            children: [_jsx("div", {
-              className: "zen-side-panel-filters-bar__title zen-ellipsis",
-              children: translate("All Filters")
-            }), pillName ? _jsx("div", {
-              className: "zen-side-panel-filters-bar__title-pill",
-              children: _jsx(Pill, {
-                type: pillType,
-                icon: pillIcon,
-                children: pillName
-              })
-            }) : null]
-          }), _jsx(TextIconButton, {
-            type: "tertiary-black",
-            className: "zen-side-panel-filters-bar__close-button",
-            icon: IconClose,
-            iconSize: isMobile ? "huge" : "large",
+          className: "zen-side-panel-filters-bar__title-wrapper",
+          children: [_jsx("div", {
+            className: "zen-side-panel-filters-bar__title zen-ellipsis",
+            children: translate("All Filters")
+          }), pillName ? _jsx("div", {
+            className: "zen-side-panel-filters-bar__title-pill",
+            children: _jsx(Pill, {
+              type: pillType,
+              icon: pillIcon,
+              children: pillName
+            })
+          }) : null]
+        }), _jsx(TextIconButton, {
+          type: "tertiary-black",
+          className: "zen-side-panel-filters-bar__close-button",
+          icon: IconClose,
+          iconSize: isMobile ? "huge" : "large",
+          onClick: onClosePanel,
+          iconPosition: ButtonIconPosition.Start,
+          title: translate("Close")
+        })]
+      }), _jsx("div", {
+        className: "zen-side-panel-filters-bar__content",
+        children: newChildren
+      }), _jsx("div", {
+        className: classNames(["zen-side-panel-filters-bar__footer", isMobile ? "zen-side-panel-filters-bar__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters-bar__footer--long-text" : ""]),
+        children: isMobile ? _jsxs(FooterButtons, {
+          children: [_jsx(Button, {
+            className: "zen-side-panel-filters-bar__apply-button",
+            disabled: applyDisabled,
+            onClick: onApplyFilters,
+            type: "primary",
+            children: translate("Apply")
+          }), _jsx(Button, {
+            className: "zen-side-panel-filters-bar__cancel-button",
+            type: "secondary",
             onClick: onClosePanel,
-            iconPosition: ButtonIconPosition.Start,
-            title: translate("Close")
+            children: translate("Cancel")
+          }), _jsx(Button, {
+            className: "zen-side-panel-filters-bar__clear-button",
+            onClick: onResetFilters,
+            type: "tertiary",
+            children: translate("Reset All")
           })]
-        }), _jsx("div", {
-          className: "zen-side-panel-filters-bar__content",
-          children: newChildren
-        }), _jsx("div", {
-          className: classNames(["zen-side-panel-filters-bar__footer", isMobile ? "zen-side-panel-filters-bar__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters-bar__footer--long-text" : ""]),
-          children: isMobile ? _jsxs(FooterButtons, {
+        }) : _jsxs(_Fragment, {
+          children: [_jsx("div", {
+            className: "zen-side-panel-filters-bar__footer-section",
+            children: _jsx(Button, {
+              type: "tertiary",
+              className: "zen-side-panel-filters-bar__clear-button",
+              onClick: onResetFilters,
+              children: translate("Reset All")
+            })
+          }), _jsxs("div", {
+            className: "zen-side-panel-filters-bar__footer-section",
             children: [_jsx(Button, {
-              className: "zen-side-panel-filters-bar__apply-button",
-              disabled: applyDisabled,
-              onClick: onApplyFilters,
-              type: "primary",
-              children: translate("Apply")
-            }), _jsx(Button, {
               className: "zen-side-panel-filters-bar__cancel-button",
               type: "secondary",
               onClick: onClosePanel,
               children: translate("Cancel")
             }), _jsx(Button, {
-              className: "zen-side-panel-filters-bar__clear-button",
-              onClick: onResetFilters,
-              type: "tertiary",
-              children: translate("Reset All")
-            })]
-          }) : _jsxs(_Fragment, {
-            children: [_jsx("div", {
-              className: "zen-side-panel-filters-bar__footer-section",
-              children: _jsx(Button, {
-                type: "tertiary",
-                className: "zen-side-panel-filters-bar__clear-button",
-                onClick: onResetFilters,
-                children: translate("Reset All")
-              })
-            }), _jsxs("div", {
-              className: "zen-side-panel-filters-bar__footer-section",
-              children: [_jsx(Button, {
-                className: "zen-side-panel-filters-bar__cancel-button",
-                type: "secondary",
-                onClick: onClosePanel,
-                children: translate("Cancel")
-              }), _jsx(Button, {
-                className: "zen-side-panel-filters-bar__apply-button zen-side-panel-filters-bar__apply-button--desktop",
-                disabled: applyDisabled,
-                onClick: onApplyFilters,
-                type: "primary",
-                children: translate("Apply")
-              })]
+              className: "zen-side-panel-filters-bar__apply-button zen-side-panel-filters-bar__apply-button--desktop",
+              disabled: applyDisabled,
+              onClick: onApplyFilters,
+              type: "primary",
+              children: translate("Apply")
             })]
-          })
-        })]
-      })
-    }), (_b = parentElement !== null && parentElement !== void 0 ? parentElement : (_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body)]
+          })]
+        })
+      })]
+    })
+  }), (_b = parentElement !== null && parentElement !== void 0 ? parentElement : (_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
+  if (!isClientReady) {
+    return null;
+  }
+  return _jsxs(Fragment, {
+    children: [_jsx(Shield, {
+      className: "zen-high-level-shield",
+      dataShieldId: dataShieldId,
+      isVisible: isOpen
+    }), portal]
   });
 };
 export const FiltersBarSidePanelContainer = _ => _jsx(_Fragment, {});

package/esm/formFieldError/formFieldError.d.ts

@@ -1,7 +1,8 @@
 import "./formFieldError.less";
 interface IFormFieldError {
+    id?: string;
     className?: string;
     error?: string | string[];
 }
-export declare const FormFieldError: ({ className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FormFieldError: ({ id, className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/esm/formFieldError/formFieldError.js

@@ -3,11 +3,11 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconException } from "../icons/iconException";
 import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const FormFieldError = ({ className, error }) => {
+export const FormFieldError = ({ id, className, error }) => {
     const driveComponentClass = useDriveClassName("zen-form-field-error");
     const isDrive = useDrive();
     const errorStrings = Array.isArray(error)
         ? error.filter(el => el).map((erStr, ind) => _jsx("div", { children: erStr }, `error_str_${ind}`))
         : error && _jsx("div", { children: error });
-    return error ? (_jsxs("div", { className: classNames(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [_jsx("div", { className: "zen-form-field-error__icon-container", children: _jsx(IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }) }), _jsx("div", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
+    return error ? (_jsxs("span", { id: id, className: classNames(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [_jsx(IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }), _jsx("span", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
 };

package/esm/header/components/collapsedItemsControl/utils/handleCustomMenuWrapper.js

@@ -33,7 +33,7 @@ export const handleCustomMenuWrapper = (reactNode, content, menuItems) => {
         const el = createElement(Menu.Item, {
             id: reactNode.props.id || menu.props.id,
             key: reactNode.props.id || menu.props.id,
-            name: reactNode.props.name || "",
+            name: reactNode.props.name || menu.props.name || "",
             disabled: reactNode.props.disabled || menu.props.disabled,
             link: reactNode.props.link || menu.props.link,
             target: reactNode.props.target || menu.props.target,