@geotab/zenith 3.8.0 → 3.9.0-beta.1

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/dateInputInner/dateInputInnerControlBlock.js

@@ -87,23 +87,28 @@ const DateInputInnerControlBlock = props => {
     assistiveText,
     ref
   } = props;
+  const generatedId = (0, react_1.useId)();
+  const fieldId = id || generatedId;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveAssistiveClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
   const isHasDateError = requireSelection && !dateText;
   const isHasTimeError = requireSelection && !timePickerValue;
+  const dateErrorId = `${fieldId}-date-error`;
+  const timeErrorId = `${fieldId}-time-error`;
   const memoizedDateInput = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, {
     className: (0, classNames_1.classNames)(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : ""]),
-    id: id,
+    id: fieldId,
     value: dateText,
     onChange: handleSetDateText,
     onBlur: onBlurDateChangeHandler,
     placeholder: placeholder,
     autocomplete: "off",
     isError: isHasDateError,
+    ariaDescribedby: isHasDateError ? dateErrorId : undefined,
     ref: ref
-  }), [dateText, handleSetDateText, id, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref]);
+  }), [dateText, handleSetDateText, fieldId, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref, dateErrorId]);
   const memoizedTimeSelect = (0, react_1.useMemo)(() => selectTime ? (0, jsx_runtime_1.jsxs)("div", {
     className: "zen-date-input-inner__inputs-block-item",
     children: [(0, jsx_runtime_1.jsx)(timePicker_1.TimePicker, {
@@ -111,18 +116,16 @@ const DateInputInnerControlBlock = props => {
       value: timePickerValue,
       onChange: timeChangeHandler,
       isMobileView: isMobileView,
-      fullWidth: true,
-      // eslint-disable-next-line
-      // @ts-ignore
-      dataTimeId: id
+      fullWidth: true
     }), isHasTimeError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
+      id: timeErrorId,
       error: translate("The time must be set")
     }) : null]
-  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
+  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, timeErrorId]);
   return (0, jsx_runtime_1.jsxs)("div", {
     className: (0, classNames_1.classNames)(["zen-date-input-inner__control-block", className || ""]),
     children: [title ? (0, jsx_runtime_1.jsx)("label", {
-      htmlFor: id,
+      htmlFor: fieldId,
       className: "zen-date-input-inner__label",
       children: title
     }) : null, (0, jsx_runtime_1.jsxs)("div", {
@@ -130,6 +133,7 @@ const DateInputInnerControlBlock = props => {
       children: [(0, jsx_runtime_1.jsxs)("div", {
         className: "zen-date-input-inner__inputs-block-item",
         children: [memoizedDateInput, isHasDateError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
+          id: dateErrorId,
           error: translate("The date must be set")
         }) : null]
       }), memoizedTimeSelect]

package/dist/dateRangeRaw/dateRangeRaw.js

@@ -197,6 +197,7 @@ injectString("zh-Hans", "Previous", "\u524D\u4E00");
 injectString("zh-TW", "Previous", "\u4E0A\u4E00\u500B");
 injectString("ro-RO", "Previous", "\xCEnapoi");
 injectString("ar-SA", "Previous", "\u0627\u0644\u0633\u0627\u0628\u0642");
+injectString("en", "Previous date period", "Previous date period");
 injectString("cs", "Next", "Dal\u0161\xED");
 injectString("da-DK", "Next", "N\xE6ste");
 injectString("de", "Next", "N\xE4chstes");
@@ -224,6 +225,7 @@ injectString("zh-Hans", "Next", "\u4E0B\u4E00\u4E2A");
 injectString("zh-TW", "Next", "\u4E0B\u4E00\u6B65");
 injectString("ro-RO", "Next", "\xCEnainte");
 injectString("ar-SA", "Next", "\u0627\u0644\u062A\u0627\u0644\u064A");
+injectString("en", "Next date period", "Next date period");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const button_1 = require("../button/button");
 const iconCalendar_1 = require("../icons/iconCalendar");
@@ -701,6 +703,7 @@ const DateRangeRaw = props => {
         onClick: decreaseRange,
         className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--left"]),
         title: translate("Previous"),
+        "aria-label": translate("Previous date period"),
         children: (0, jsx_runtime_1.jsx)(iconChevronLeftSmall_1.IconChevronLeftSmall, {
           size: isDrive || isMobile ? "huge" : "large"
         })
@@ -710,6 +713,7 @@ const DateRangeRaw = props => {
         onClick: increaseRange,
         className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--right"]),
         title: translate("Next"),
+        "aria-label": translate("Next date period"),
         children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, {
           size: isDrive || isMobile ? "huge" : "large"
         })
@@ -718,4 +722,4 @@ const DateRangeRaw = props => {
   });
 };
 exports.DateRangeRaw = DateRangeRaw;
-exports.TRANSLATIONS = ["Custom", "Date range", "Clear", "Cancel", "Apply", "Reset", "Today", "Next", "Previous", "Choose dates", "Date range not available", "Choose your date range", "Some of the dates you selected aren't available. Please try a different range.", "Please select the dates you want to view."];
+exports.TRANSLATIONS = ["Custom", "Date range", "Clear", "Cancel", "Apply", "Reset", "Today", "Next", "Previous", "Choose dates", "Date range not available", "Choose your date range", "Some of the dates you selected aren’t available. Please try a different range.", "Please select the dates you want to view.", "Previous date period", "Next date period"];

package/dist/dialog/dialog.js

@@ -10,7 +10,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useBodyScroll_1 = require("../utils/useBodyScroll");
 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");
 /**
  * @deprecated - use Modal instead
  */
@@ -45,10 +45,11 @@ const Dialog = ({ isOpen, children, isElementVisible }) => {
     const labeledId = (0, react_1.useId)();
     const darkClass = dark ? "zen-dark" : "";
     const createDialog = id => ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen_1.zen.pageYOffset || 0}px` }, children: [(0, jsx_runtime_1.jsx)(dialogContent_1.DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), (0, jsx_runtime_1.jsx)("div", { className: "zen-dialog__shield" })] }));
+    const modalRoot = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
+    const portal = (0, usePortal_1.usePortal)(isOpen && (0, react_1.isValidElement)(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
     if (!isClientReady) {
         return null;
     }
-    const modalRoot = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
-    return (0, react_dom_1.createPortal)(isOpen && (0, react_1.isValidElement)(children) ? createDialog(labeledId) : null, modalRoot);
+    return portal;
 };
 exports.Dialog = Dialog;

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/fileUpload/fileUpload.js

@@ -212,28 +212,37 @@ const FileUpload = ({
   const pendingFocusIndexRef = (0, react_1.useRef)(null);
   const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-file-upload");
   const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-file-upload", `zen-file-upload--${size}`, isMobile ? "zen-file-upload--mobile" : "", driveClasses || "", disabled ? "zen-file-upload--disabled" : "", className !== null && className !== void 0 ? className : ""]), [size, isMobile, driveClasses, disabled, className]);
-  const hasReachedLimit = !allowMultiple && value.length > 0;
-  const isUploadDisabled = disabled || hasReachedLimit;
+  const isUploadDisabled = disabled;
   const isInteractionDisabled = isUploadDisabled || isUploading;
   const dropZoneClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-file-upload__drop-zone", `zen-file-upload__drop-zone--${size}`, isMobile ? "zen-file-upload__drop-zone--mobile" : "", isDragOver ? "zen-file-upload__drop-zone--drag-over" : "", isInteractionDisabled ? "zen-file-upload__drop-zone--disabled" : ""]), [size, isMobile, isDragOver, isInteractionDisabled]);
   const handleFilesAdded = (0, react_1.useCallback)(fileList => {
     if (!onChange) {
       return;
     }
-    const newFiles = createUploadedFiles(fileList);
-    const merged = [...value, ...newFiles];
+    let newFiles = createUploadedFiles(fileList);
+    let addedFiles = fileList;
+    // when allowMultiple is false, only take first file
+    if (!allowMultiple && newFiles.length > 1) {
+      newFiles = [newFiles[0]];
+      const firstFile = fileList[0];
+      const singleFileArray = [firstFile];
+      addedFiles = Object.assign(singleFileArray, {
+        item: index => singleFileArray[index] || null
+      });
+    }
+    const merged = allowMultiple ? [...value, ...newFiles] : newFiles;
     onChange(merged, {
       action: "add",
-      addedFiles: fileList
+      addedFiles
     });
-  }, [onChange, value]);
+  }, [onChange, value, allowMultiple]);
   const handleDragOver = (0, react_1.useCallback)(e => {
     e.preventDefault();
     e.stopPropagation();
-    if (!disabled && !isUploading && !hasReachedLimit) {
+    if (!disabled && !isUploading) {
       setIsDragOver(true);
     }
-  }, [disabled, isUploading, hasReachedLimit]);
+  }, [disabled, isUploading]);
   const handleDragLeave = (0, react_1.useCallback)(e => {
     e.preventDefault();
     e.stopPropagation();
@@ -243,7 +252,7 @@ const FileUpload = ({
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
-    if (!disabled && !isUploading && !hasReachedLimit && onChange && e.dataTransfer.files.length > 0) {
+    if (!disabled && !isUploading && onChange && e.dataTransfer.files.length > 0) {
       // DataTransfer.files becomes inaccessible after event, so preserve it
       const filesArray = Array.from(e.dataTransfer.files);
       // Create a simple FileList-like object
@@ -252,12 +261,12 @@ const FileUpload = ({
       });
       handleFilesAdded(fileList);
     }
-  }, [disabled, isUploading, hasReachedLimit, onChange, handleFilesAdded]);
+  }, [disabled, isUploading, onChange, handleFilesAdded]);
   const handleBrowseClick = (0, react_1.useCallback)(() => {
-    if (!disabled && !isUploading && !hasReachedLimit && fileInputRef.current) {
+    if (!disabled && !isUploading && fileInputRef.current) {
       fileInputRef.current.click();
     }
-  }, [disabled, isUploading, hasReachedLimit]);
+  }, [disabled, isUploading]);
   const handleFileInputChange = (0, react_1.useCallback)(e => {
     if (e.target.files && e.target.files.length > 0 && onChange) {
       handleFilesAdded(e.target.files);

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);

package/dist/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