@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.FiltersBarSidePanelContainer = exports.FiltersBarSidePanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
@@ -19,116 +25,366 @@ const textIconButton_2 = require("../../textIconButton/textIconButton");
 const button_1 = require("../../button/button");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const sidePanelReducer_1 = require("./sidePanelReducer");
+injectString("cs", "Reset All", "Obnovit v\u0161e");
+injectString("da-DK", "Reset All", "Nulstil alle");
+injectString("de", "Reset All", "Alles zur\xFCcksetzen");
+injectString("en", "Reset All", "Reset all");
+injectString("es", "Reset All", "Restablecer todo");
+injectString("fi-FI", "Reset All", "Palauta kaikki");
+injectString("fr", "Reset All", "R\xE9initialiser tout");
+injectString("fr-FR", "Reset All", "R\xE9initialiser tout");
+injectString("hu-HU", "Reset All", "\xC1ll\xEDtsd vissza mindet.");
+injectString("id", "Reset All", "Atur ulang semua");
+injectString("it", "Reset All", "Ripristinare tutto");
+injectString("ja", "Reset All", "\u3059\u3079\u3066\u30EA\u30BB\u30C3\u30C8");
+injectString("ko-KR", "Reset All", "\uC804\uCCB4 \uC7AC\uC124\uC815");
+injectString("ms", "Reset All", "Tetapkan semula semua");
+injectString("nb-NO", "Reset All", "Tilbakestill alt");
+injectString("nl", "Reset All", "Alles resetten");
+injectString("pl", "Reset All", "Resetuj wszystko");
+injectString("pt-BR", "Reset All", "Redefinir tudo");
+injectString("sk-SK", "Reset All", "Vynulova\u0165 v\u0161etko");
+injectString("sv", "Reset All", "\xC5terst\xE4ll alla");
+injectString("th", "Reset All", "\u0E23\u0E35\u0E40\u0E0B\u0E47\u0E15\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "Reset All", "T\xFCm\xFCn\xFC s\u0131f\u0131rla");
+injectString("zh-Hans", "Reset All", "\u5168\u90E8\u91CD\u7F6E");
+injectString("zh-TW", "Reset All", "\u5168\u90E8\u91CD\u8A2D");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
+injectString("cs", "Apply", "Pou\u017E\xEDt");
+injectString("da-DK", "Apply", "Anvend");
+injectString("de", "Apply", "Anwenden");
+injectString("en", "Apply", "Apply");
+injectString("es", "Apply", "Aplicar");
+injectString("fi-FI", "Apply", "K\xE4yt\xE4");
+injectString("fr", "Apply", "Appliquer");
+injectString("fr-FR", "Apply", "Appliquer");
+injectString("hu-HU", "Apply", "Alkalmazd.");
+injectString("id", "Apply", "Terapkan");
+injectString("it", "Apply", "Applicare");
+injectString("ja", "Apply", "\u9069\u7528");
+injectString("ko-KR", "Apply", "\uC801\uC6A9");
+injectString("ms", "Apply", "Gunakan");
+injectString("nb-NO", "Apply", "Bruk");
+injectString("nl", "Apply", "Toepassen");
+injectString("pl", "Apply", "Zastosuj");
+injectString("pt-BR", "Apply", "Aplicar");
+injectString("sk-SK", "Apply", "Pou\u017Ei");
+injectString("sv", "Apply", "Ans\xF6k");
+injectString("th", "Apply", "\u0E43\u0E0A\u0E49");
+injectString("tr", "Apply", "Uygula");
+injectString("zh-Hans", "Apply", "\u5E94\u7528");
+injectString("zh-TW", "Apply", "\u5957\u7528");
+injectString("cs", "All Filters", "V\u0161echny filtry");
+injectString("da-DK", "All Filters", "Alle filtre");
+injectString("de", "All Filters", "Alle Filter");
+injectString("en", "All Filters", "All Filters");
+injectString("es", "All Filters", "Todos los filtros");
+injectString("fi-FI", "All Filters", "Kaikki suodattimet");
+injectString("fr", "All Filters", "Tous les filtres");
+injectString("fr-FR", "All Filters", "Tous les filtres");
+injectString("hu-HU", "All Filters", "Minden sz\u0171r\u0151");
+injectString("id", "All Filters", "Semua Filter");
+injectString("it", "All Filters", "Tutti i filtri");
+injectString("ja", "All Filters", "\u3059\u3079\u3066\u306E\u30D5\u30A3\u30EB\u30BF\u30FC");
+injectString("ko-KR", "All Filters", "\uBAA8\uB4E0 \uD544\uD130");
+injectString("ms", "All Filters", "Semua Penyaring");
+injectString("nb-NO", "All Filters", "Alle filtre");
+injectString("nl", "All Filters", "Alle filters");
+injectString("pl", "All Filters", "Wszystkie filtry");
+injectString("pt-BR", "All Filters", "Todos os filtros");
+injectString("sk-SK", "All Filters", "V\u0161etky filtre");
+injectString("sv", "All Filters", "Alla filter");
+injectString("th", "All Filters", "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "All Filters", "T\xFCm Filtreler");
+injectString("zh-Hans", "All Filters", "\u6240\u6709\u7B5B\u9009\u5668");
+injectString("zh-TW", "All Filters", "\u6240\u6709\u7BE9\u9078\u5668");
+injectString("cs", "Close", "Zav\u0159\xEDt");
+injectString("da-DK", "Close", "Luk");
+injectString("de", "Close", "Schlie\xDFen");
+injectString("en", "Close", "Close");
+injectString("es", "Close", "Cerrar");
+injectString("fi-FI", "Close", "Sulje");
+injectString("fr", "Close", "Fermer");
+injectString("fr-FR", "Close", "Fermer");
+injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("id", "Close", "Tutup");
+injectString("it", "Close", "Chiudere");
+injectString("ja", "Close", "\u9589\u3058\u308B");
+injectString("ko-KR", "Close", "\uB2EB\uAE30");
+injectString("ms", "Close", "Tutup");
+injectString("nb-NO", "Close", "Lukk");
+injectString("nl", "Close", "Sluiten");
+injectString("pl", "Close", "Zamknij");
+injectString("pt-BR", "Close", "Fechar");
+injectString("sk-SK", "Close", "Zatvor");
+injectString("sv", "Close", "St\xE4ng");
+injectString("th", "Close", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Close", "Kapat");
+injectString("zh-Hans", "Close", "\u5173\u95ED");
+injectString("zh-TW", "Close", "\u95DC\u9589");
 const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
 const useBodyScroll_1 = require("../../utils/useBodyScroll");
 const footerButtons_1 = require("../../footerButtons/footerButtons");
 const pill_1 = require("../../pill/pill");
-const getChangeHandlers = (children) => {
-    const handlers = {};
-    react_1.Children.map(children, (child) => {
-        handlers[child.props.id] = child.props.onChange;
-    });
-    return handlers;
+const getChangeHandlers = children => {
+  const handlers = {};
+  react_1.Children.map(children, child => {
+    handlers[child.props.id] = child.props.onChange;
+  });
+  return handlers;
 };
-const FiltersBarSidePanel = ({ isOpen, className, children, triggerRef, parentElement, pillName, pillIcon, pillType = "info", onClosePanel, getDefaultFiltersState, state, dispatch, onApplyAllFilters }) => {
-    var _a;
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isLongTextLanguages = (0, react_1.useMemo)(() => `${translate("Reset All")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
-    const dataShieldId = (0, useUniqueId_1.useUniqueId)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
-    const onChangeHandlers = (0, react_1.useMemo)(() => getChangeHandlers(children), [children]);
-    const { setScrollHidden, resetScroll } = (0, useBodyScroll_1.useBodyScroll)();
-    const onChangeState = (0, react_1.useCallback)((id, inputState) => {
-        const componentState = state[id];
-        if (componentState) {
-            const action = { type: sidePanelReducer_1.StateActionType.Change, payload: { id: id, value: { state: (0, utils_1.deepClone)(inputState) } } };
-            dispatch(action);
-        }
-    }, [state, dispatch]);
-    const onHasErrorState = (0, react_1.useCallback)((id, isError) => {
-        const componentState = state[id];
-        if (componentState) {
-            dispatch({ type: sidePanelReducer_1.StateActionType.SetError, payload: { id: id, value: isError } });
-        }
-    }, [state, dispatch]);
-    const onCloseAction = (0, react_1.useCallback)((reason, shieldId) => {
-        if (reason === sidePanel_1.SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === sidePanel_1.SidePanelCloseReason.Escape) {
-            onClosePanel();
-            return;
-        }
-    }, [onClosePanel, dataShieldId]);
-    const newChildren = (0, react_1.useMemo)(() => react_1.Children.map(children, (child) => {
-        if (!child) {
-            return null;
-        }
-        const element = child;
-        let hasCheckError = false;
-        const childState = state[element.props.id];
-        if (!element.props.showInSidePanel && !isMobile || !childState) {
-            return null;
-        }
-        if (element.type === filtersBarRange_1.FiltersBarRange || element.type === filtersBarPeriodPicker_1.FiltersBarPeriodPicker) {
-            hasCheckError = true;
+const FiltersBarSidePanel = ({
+  isOpen,
+  className,
+  children,
+  triggerRef,
+  parentElement,
+  pillName,
+  pillIcon,
+  pillType = "info",
+  onClosePanel,
+  getDefaultFiltersState,
+  state,
+  dispatch,
+  onApplyAllFilters
+}) => {
+  var _a;
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isLongTextLanguages = (0, react_1.useMemo)(() => `${translate("Reset All")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
+  const dataShieldId = (0, useUniqueId_1.useUniqueId)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    dark
+  } = (0, react_1.useContext)(themeContext_1.themeContext);
+  const onChangeHandlers = (0, react_1.useMemo)(() => getChangeHandlers(children), [children]);
+  const {
+    setScrollHidden,
+    resetScroll
+  } = (0, useBodyScroll_1.useBodyScroll)();
+  const onChangeState = (0, react_1.useCallback)((id, inputState) => {
+    const componentState = state[id];
+    if (componentState) {
+      const action = {
+        type: sidePanelReducer_1.StateActionType.Change,
+        payload: {
+          id: id,
+          value: {
+            state: (0, utils_1.deepClone)(inputState)
+          }
         }
-        return (0, react_1.cloneElement)(child, Object.assign(Object.assign(Object.assign({}, element.props), { useSidePanelView: true, id: element.props.id + "-side-panel", state: (0, utils_1.deepClone)(childState.state), key: element.props.id + "-side-panelKey", onChange: (newState) => onChangeState(element.props.id, newState) }), (hasCheckError ? { checkError: (hasError) => onHasErrorState(element.props.id, hasError) } : {})));
-    }), [children, state, isMobile, onChangeState, onHasErrorState]);
-    const onApplyFilters = (0, react_1.useCallback)(() => {
-        let isHasError = false;
-        Object.keys(state).forEach((key) => {
-            const resultState = state[key];
-            if (resultState === null || resultState === void 0 ? void 0 : resultState.hasError) {
-                isHasError = true;
-            }
-        });
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (isHasError) {
-            return;
+      };
+      dispatch(action);
+    }
+  }, [state, dispatch]);
+  const onHasErrorState = (0, react_1.useCallback)((id, isError) => {
+    const componentState = state[id];
+    if (componentState) {
+      dispatch({
+        type: sidePanelReducer_1.StateActionType.SetError,
+        payload: {
+          id: id,
+          value: isError
         }
-        onApplyAllFilters && onApplyAllFilters(Object.assign({}, state));
-        Object.keys(state).forEach((key) => {
-            const resultState = state[key];
-            const changeHandler = onChangeHandlers[key];
-            changeHandler === null || changeHandler === void 0 ? void 0 : changeHandler(resultState === null || resultState === void 0 ? void 0 : resultState.state);
-        });
-        onClosePanel();
-    }, [state, onApplyAllFilters, onClosePanel, onChangeHandlers]);
-    const onResetFilters = (0, react_1.useCallback)(() => {
-        const defaultState = getDefaultFiltersState();
-        dispatch({ type: sidePanelReducer_1.StateActionType.Reset, payload: defaultState });
-    }, [getDefaultFiltersState, dispatch]);
-    const applyDisabled = (0, react_1.useMemo)(() => Object.values(state).map(el => el === null || el === void 0 ? void 0 : el.hasError).filter(el => el).length > 0, [state]);
-    const handleReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
-        var _a;
-        if (!isCurrentOpen) {
-            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-    }, [triggerRef]);
-    (0, react_1.useEffect)(() => {
-        const handleOpen = () => {
-            setScrollHidden();
-        };
-        const handleClose = () => {
-            resetScroll();
-        };
-        if (isOpen) {
-            handleOpen();
-        }
-        else {
-            handleClose();
-        }
-        return () => { handleClose(); };
-    }, [isOpen, setScrollHidden, resetScroll]);
-    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: onCloseAction, className: (0, classNames_1.classNames)(["zen-side-panel-filters-bar", dark ? "zen-dark" : "", className !== null && className !== void 0 ? className : ""]), onTransitionEnd: handleReadyForFocus, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar__header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar__title-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__title zen-ellipsis", children: translate("All Filters") }), pillName ? (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__title-pill", children: (0, jsx_runtime_1.jsx)(pill_1.Pill, { type: pillType, icon: pillIcon, children: pillName }) }) : null] }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: "tertiary-black", className: "zen-side-panel-filters-bar__close-button", icon: iconClose_1.IconClose, iconSize: "large", onClick: onClosePanel, iconPosition: textIconButton_2.ButtonIconPosition.Start, title: translate("Close") })] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__content", children: newChildren }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.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 ? (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-side-panel-filters-bar__apply-button", disabled: applyDisabled, onClick: onApplyFilters, type: "primary", children: translate("Apply") }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-side-panel-filters-bar__cancel-button", type: "secondary", onClick: onClosePanel, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-side-panel-filters-bar__clear-button", onClick: onResetFilters, type: "tertiary", children: translate("Reset All") })] }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters-bar__footer-section", children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", className: "zen-side-panel-filters-bar__clear-button", onClick: onResetFilters, children: translate("Reset All") }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters-bar__footer-section", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-side-panel-filters-bar__cancel-button", type: "secondary", onClick: onClosePanel, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.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") })] })] }) })] }) }), (_a = parentElement !== null && parentElement !== void 0 ? parentElement : document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body)] });
+      });
+    }
+  }, [state, dispatch]);
+  const onCloseAction = (0, react_1.useCallback)((reason, shieldId) => {
+    if (reason === sidePanel_1.SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === sidePanel_1.SidePanelCloseReason.Escape) {
+      onClosePanel();
+      return;
+    }
+  }, [onClosePanel, dataShieldId]);
+  const newChildren = (0, react_1.useMemo)(() => react_1.Children.map(children, child => {
+    if (!child) {
+      return null;
+    }
+    const element = child;
+    let hasCheckError = false;
+    const childState = state[element.props.id];
+    if (!element.props.showInSidePanel && !isMobile || !childState) {
+      return null;
+    }
+    if (element.type === filtersBarRange_1.FiltersBarRange || element.type === filtersBarPeriodPicker_1.FiltersBarPeriodPicker) {
+      hasCheckError = true;
+    }
+    return (0, react_1.cloneElement)(child, Object.assign(Object.assign(Object.assign({}, element.props), {
+      useSidePanelView: true,
+      id: element.props.id + "-side-panel",
+      state: (0, utils_1.deepClone)(childState.state),
+      key: element.props.id + "-side-panelKey",
+      onChange: newState => onChangeState(element.props.id, newState)
+    }), hasCheckError ? {
+      checkError: hasError => onHasErrorState(element.props.id, hasError)
+    } : {}));
+  }), [children, state, isMobile, onChangeState, onHasErrorState]);
+  const onApplyFilters = (0, react_1.useCallback)(() => {
+    let isHasError = false;
+    Object.keys(state).forEach(key => {
+      const resultState = state[key];
+      if (resultState === null || resultState === void 0 ? void 0 : resultState.hasError) {
+        isHasError = true;
+      }
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (isHasError) {
+      return;
+    }
+    onApplyAllFilters && onApplyAllFilters(Object.assign({}, state));
+    Object.keys(state).forEach(key => {
+      const resultState = state[key];
+      const changeHandler = onChangeHandlers[key];
+      changeHandler === null || changeHandler === void 0 ? void 0 : changeHandler(resultState === null || resultState === void 0 ? void 0 : resultState.state);
+    });
+    onClosePanel();
+  }, [state, onApplyAllFilters, onClosePanel, onChangeHandlers]);
+  const onResetFilters = (0, react_1.useCallback)(() => {
+    const defaultState = getDefaultFiltersState();
+    dispatch({
+      type: sidePanelReducer_1.StateActionType.Reset,
+      payload: defaultState
+    });
+  }, [getDefaultFiltersState, dispatch]);
+  const applyDisabled = (0, react_1.useMemo)(() => Object.values(state).map(el => el === null || el === void 0 ? void 0 : el.hasError).filter(el => el).length > 0, [state]);
+  const handleReadyForFocus = (0, react_1.useCallback)(isCurrentOpen => {
+    var _a;
+    if (!isCurrentOpen) {
+      (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      return;
+    }
+  }, [triggerRef]);
+  (0, react_1.useEffect)(() => {
+    const handleOpen = () => {
+      setScrollHidden();
+    };
+    const handleClose = () => {
+      resetScroll();
+    };
+    if (isOpen) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+    return () => {
+      handleClose();
+    };
+  }, [isOpen, setScrollHidden, resetScroll]);
+  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: onCloseAction,
+      className: (0, classNames_1.classNames)(["zen-side-panel-filters-bar", dark ? "zen-dark" : "", className !== null && className !== void 0 ? className : ""]),
+      onTransitionEnd: handleReadyForFocus,
+      children: (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-side-panel-filters-bar-wrapper",
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-side-panel-filters-bar__header",
+          children: [(0, jsx_runtime_1.jsxs)("div", {
+            className: "zen-side-panel-filters-bar__title-wrapper",
+            children: [(0, jsx_runtime_1.jsx)("div", {
+              className: "zen-side-panel-filters-bar__title zen-ellipsis",
+              children: translate("All Filters")
+            }), pillName ? (0, jsx_runtime_1.jsx)("div", {
+              className: "zen-side-panel-filters-bar__title-pill",
+              children: (0, jsx_runtime_1.jsx)(pill_1.Pill, {
+                type: pillType,
+                icon: pillIcon,
+                children: pillName
+              })
+            }) : null]
+          }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+            type: "tertiary-black",
+            className: "zen-side-panel-filters-bar__close-button",
+            icon: iconClose_1.IconClose,
+            iconSize: "large",
+            onClick: onClosePanel,
+            iconPosition: textIconButton_2.ButtonIconPosition.Start,
+            title: translate("Close")
+          })]
+        }), (0, jsx_runtime_1.jsx)("div", {
+          className: "zen-side-panel-filters-bar__content",
+          children: newChildren
+        }), (0, jsx_runtime_1.jsx)("div", {
+          className: (0, classNames_1.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 ? (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
+            children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+              className: "zen-side-panel-filters-bar__apply-button",
+              disabled: applyDisabled,
+              onClick: onApplyFilters,
+              type: "primary",
+              children: translate("Apply")
+            }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+              className: "zen-side-panel-filters-bar__cancel-button",
+              type: "secondary",
+              onClick: onClosePanel,
+              children: translate("Cancel")
+            }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+              className: "zen-side-panel-filters-bar__clear-button",
+              onClick: onResetFilters,
+              type: "tertiary",
+              children: translate("Reset All")
+            })]
+          }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [(0, jsx_runtime_1.jsx)("div", {
+              className: "zen-side-panel-filters-bar__footer-section",
+              children: (0, jsx_runtime_1.jsx)(button_1.Button, {
+                type: "tertiary",
+                className: "zen-side-panel-filters-bar__clear-button",
+                onClick: onResetFilters,
+                children: translate("Reset All")
+              })
+            }), (0, jsx_runtime_1.jsxs)("div", {
+              className: "zen-side-panel-filters-bar__footer-section",
+              children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+                className: "zen-side-panel-filters-bar__cancel-button",
+                type: "secondary",
+                onClick: onClosePanel,
+                children: translate("Cancel")
+              }), (0, jsx_runtime_1.jsx)(button_1.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")
+              })]
+            })]
+          })
+        })]
+      })
+    }), (_a = parentElement !== null && parentElement !== void 0 ? parentElement : document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body)]
+  });
 };
 exports.FiltersBarSidePanel = FiltersBarSidePanel;
-const FiltersBarSidePanelContainer = (_) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+const FiltersBarSidePanelContainer = _ => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 exports.FiltersBarSidePanelContainer = FiltersBarSidePanelContainer;
-exports.TRANSLATIONS = [
-    "Apply",
-    "Clear",
-    "Reset All",
-    "Close",
-    "Cancel"
-];
+exports.TRANSLATIONS = ["Apply", "Clear", "Reset All", "Close", "Cancel"];