@geotab/zenith 3.6.1 → 3.6.2

package/dist/filters/components/filtersSidePanel.js

@@ -0,0 +1,567 @@
+"use strict";
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FiltersSidePanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+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 sidePanel_1 = require("../../sidePanel/sidePanel");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const themeContext_1 = require("../../utils/theme/themeContext");
+const textIconButton_1 = require("../../textIconButton/textIconButton");
+const iconClose_1 = require("../../icons/iconClose");
+const button_1 = require("../../button/button");
+const footerButtons_1 = require("../../footerButtons/footerButtons");
+const iconDisk_1 = require("../../icons/iconDisk");
+const iconPin2_1 = require("../../icons/iconPin2");
+const filtersSavedItemsProvider_1 = require("./filtersSavedItemsProvider");
+const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const filtersSelect_1 = require("./filtersSelect");
+const filtersHelper_1 = require("../filtersHelper");
+const tabs_1 = require("../../tabs/tabs");
+const filtersSidePanelItem_1 = require("./filtersSidePanelItem");
+const filtersSaveModal_1 = require("./filtersSaveModal");
+const isElementsEqual_1 = require("../../utils/compareElementsUtils/isElementsEqual");
+const filtersEmptyState_1 = require("./filtersEmptyState");
+const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
+injectString("cs", "Selected", "Vybr\xE1no");
+injectString("da-DK", "Selected", "Valgt");
+injectString("de", "Selected", "Ausgew\xE4hlt");
+injectString("en", "Selected", "Selected");
+injectString("es", "Selected", "Seleccionado");
+injectString("fi-FI", "Selected", "Valittu");
+injectString("fr", "Selected", "S\xE9lectionn\xE9");
+injectString("fr-FR", "Selected", "S\xE9lectionn\xE9");
+injectString("hu-HU", "Selected", "Kiv\xE1lasztott");
+injectString("id", "Selected", "Dipilih");
+injectString("it", "Selected", "Selezionato");
+injectString("ja", "Selected", "\u9078\u629E\u8ECA\u4E21");
+injectString("ko-KR", "Selected", "\uC120\uD0DD\uB428");
+injectString("ms", "Selected", "Dipilih");
+injectString("nb-NO", "Selected", "Valgt");
+injectString("nl", "Selected", "Geselecteerd");
+injectString("pl", "Selected", "Wybrano");
+injectString("pt-BR", "Selected", "Selecionado");
+injectString("pt-PT", "Selected", "Selecionado");
+injectString("sk-SK", "Selected", "Vybran\xE9");
+injectString("sv", "Selected", "Valda");
+injectString("th", "Selected", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E25\u0E49\u0E27");
+injectString("tr", "Selected", "Se\xE7ildi");
+injectString("zh-Hans", "Selected", "\u9009\u4E2D\u7684");
+injectString("zh-TW", "Selected", "\u5DF2\u9078\u53D6");
+injectString("ro-RO", "Selected", "Selec\u021Bie");
+injectString("cs", "Reset", "Obnovit");
+injectString("da-DK", "Reset", "Nulstil");
+injectString("de", "Reset", "Zur\xFCcksetzen");
+injectString("en", "Reset", "Reset");
+injectString("es", "Reset", "Restaurar");
+injectString("fi-FI", "Reset", "Palauta");
+injectString("fr", "Reset", "R\xE9initialiser");
+injectString("fr-FR", "Reset", "R\xE9initialiser");
+injectString("hu-HU", "Reset", "\xC1ll\xEDtsd vissza.");
+injectString("id", "Reset", "Atur Ulang");
+injectString("it", "Reset", "Ripristinare");
+injectString("ja", "Reset", "\u30EA\u30BB\u30C3\u30C8");
+injectString("ko-KR", "Reset", "\uC7AC\uC124\uC815");
+injectString("ms", "Reset", "Tetap Semula");
+injectString("nb-NO", "Reset", "Tilbakestill");
+injectString("nl", "Reset", "Herstellen");
+injectString("pl", "Reset", "Resetuj");
+injectString("pt-BR", "Reset", "Redefinir");
+injectString("pt-PT", "Reset", "Repor");
+injectString("sk-SK", "Reset", "Obnov");
+injectString("sv", "Reset", "\xC5terst\xE4ll");
+injectString("th", "Reset", "\u0E23\u0E35\u0E40\u0E0B\u0E47\u0E15");
+injectString("tr", "Reset", "S\u0131f\u0131rla");
+injectString("zh-Hans", "Reset", "\u91CD\u7F6E");
+injectString("zh-TW", "Reset", "\u91CD\u8A2D");
+injectString("ro-RO", "Reset", "Reseta\u021Bi");
+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("pt-PT", "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("ro-RO", "Cancel", "Anula\u021Bi");
+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("pt-PT", "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("ro-RO", "Apply", "Aplica\u021Bi");
+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("pt-PT", "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("ro-RO", "All Filters", "Toate filtrele");
+injectString("cs", "Save", "Ulo\u017Eit");
+injectString("da-DK", "Save", "Spare");
+injectString("de", "Save", "Speichern");
+injectString("en", "Save", "Save");
+injectString("es", "Save", "Guardar");
+injectString("fi-FI", "Save", "S\xE4\xE4st\xE4\xE4");
+injectString("fr", "Save", "Enregistrer");
+injectString("fr-FR", "Save", "Enregistrer");
+injectString("hu-HU", "Save", "Ment\xE9s");
+injectString("id", "Save", "Simpan");
+injectString("it", "Save", "Salvare");
+injectString("ja", "Save", "\u4FDD\u5B58");
+injectString("ko-KR", "Save", "\uC800\uC7A5");
+injectString("ms", "Save", "Simpan");
+injectString("nb-NO", "Save", "Lagre");
+injectString("nl", "Save", "Opslaan");
+injectString("pl", "Save", "Zapisz");
+injectString("pt-BR", "Save", "Salvar");
+injectString("pt-PT", "Save", "Guardar");
+injectString("sk-SK", "Save", "Ulo\u017Ei\u0165");
+injectString("sv", "Save", "Spara");
+injectString("th", "Save", "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01");
+injectString("tr", "Save", "Kaydet");
+injectString("zh-Hans", "Save", "\u4FDD\u5B58");
+injectString("zh-TW", "Save", "\u5132\u5B58");
+injectString("ro-RO", "Save", "Salva\u021Bi");
+injectString("en", "Pin", "Pin");
+injectString("pt-PT", "Pin", "Fixar");
+injectString("ro-RO", "Pin", "Fixa\u021Bi");
+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("pt-PT", "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");
+injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+const zen_1 = require("../../utils/zen");
+const SELECTED_TAB_ID = "Selected";
+const getSelectedOption = translate => ({
+  id: SELECTED_TAB_ID,
+  name: translate("Selected")
+});
+const FiltersSidePanel = ({
+  isOpen,
+  onApply,
+  onClose,
+  onPin,
+  isPinned,
+  filters,
+  externalState,
+  setExternalState,
+  triggerRef
+  // eslint-disable-next-line complexity
+}) => {
+  var _a, _b, _c;
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isLongTextLanguages = (0, react_1.useMemo)(() => `${translate("Reset")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
+  const dataShieldId = (0, useUniqueId_1.useUniqueId)();
+  const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
+  const iconMobileClassName = (0, useMobileClassName_1.useMobileClassName)("icon");
+  const headerButtonsMobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-side-panel-filters__header-buttons");
+  const titleMobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-side-panel-filters__title");
+  const {
+    dark
+  } = (0, react_1.useContext)(themeContext_1.themeContext);
+  const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    setScrollHidden,
+    resetScroll
+  } = (0, useBodyScroll_1.useBodyScroll)();
+  const {
+    onSave
+  } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
+  const [activeTabId, setActiveTabId] = (0, react_1.useState)(filtersSelect_1.ALL_SELECT_OPTION_ID);
+  const [isSaveModalOpen, setIsSaveModalOpen] = (0, react_1.useState)(false);
+  const [filtersInternalState, setFiltersInternalState] = (0, react_1.useState)((0, filtersHelper_1.createStateObject)(filters, "state"));
+  const [initialExternalState, setInitialExternalState] = (0, react_1.useState)(externalState);
+  const prevIsOpenRef = (0, react_1.useRef)(false);
+  const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
+  const [errorItems, setErrorItems] = (0, react_1.useState)(new Set());
+  const saveButtonRef = (0, react_1.useRef)(null);
+  const externalMode = (0, react_1.useMemo)(() => {
+    if (externalState === undefined || setExternalState === undefined) {
+      return false;
+    }
+    return true;
+  }, [externalState, setExternalState]);
+  const handleInternalFiltersStateChange = (0, react_1.useCallback)(id => newState => {
+    setFiltersInternalState(prevState => Object.assign(Object.assign({}, prevState), {
+      [id]: newState
+    }));
+  }, []);
+  const handleExternalFiltersStateChange = (0, react_1.useCallback)(id => newState => {
+    setExternalState && setExternalState({
+      [id]: newState
+    });
+  }, [setExternalState]);
+  const currentState = (0, react_1.useMemo)(() => externalMode ? externalState : filtersInternalState, [externalMode, externalState, filtersInternalState]);
+  const currentFilters = (0, react_1.useMemo)(() => filters.filter(item => currentState.hasOwnProperty(item.props.id) && (typeof item.props.visible === "boolean" ? item.props.visible : item.props.visible === undefined ? true : item.props.visible([filtersSelect_1.ALL_SELECT_OPTION_ID], currentState) || item.props.visible([filtersSelect_1.ALL_SELECT_OPTION_ID]))), [currentState, filters]);
+  const inhibitedFilters = (0, react_1.useMemo)(() => {
+    const inhibited = new Set();
+    currentFilters.forEach(item => {
+      if (item.props.inhibit && item.props.inhibit.length > 0) {
+        item.props.inhibit.forEach(id => inhibited.add(id));
+      }
+    });
+    return inhibited;
+  }, [currentFilters]);
+  const filteredCurrentFilters = (0, react_1.useMemo)(() => currentFilters.filter(item => !externalMode ? !inhibitedFilters.has(item.props.id) : true), [currentFilters, externalMode, inhibitedFilters]);
+  const handleReadyForFocus = (0, react_1.useCallback)(isCurrentOpen => {
+    if (!isCurrentOpen) {
+      triggerRef.current.focus();
+      return;
+    }
+  }, [triggerRef]);
+  (0, react_1.useEffect)(() => {
+    const handleOpen = () => {
+      setScrollHidden();
+    };
+    const handleClose = () => {
+      resetScroll();
+    };
+    if (isOpen) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+    return () => {
+      handleClose();
+    };
+  }, [isOpen, setScrollHidden, resetScroll]);
+  const handleClearClick = (0, react_1.useCallback)(() => {
+    const newState = (0, filtersHelper_1.createStateObject)(filters, "defaultState");
+    externalMode && setExternalState ? setExternalState(Object.assign({}, newState)) : setFiltersInternalState(newState);
+  }, [externalMode, filters, setExternalState]);
+  const handleApplyClick = (0, react_1.useCallback)(() => {
+    const stateForApply = externalMode ? currentState : {};
+    if (!externalMode) {
+      Object.keys(currentState).forEach(key => {
+        if (!inhibitedFilters.has(key)) {
+          stateForApply[key] = currentState[key];
+        }
+      });
+    }
+    onApply(stateForApply);
+    onClose();
+  }, [currentState, externalMode, inhibitedFilters, onApply, onClose]);
+  const handleCancelClick = (0, react_1.useCallback)(() => {
+    const newState = (0, filtersHelper_1.createStateObject)(filters, "state");
+    externalMode && setExternalState ? setExternalState(Object.assign({}, newState)) : setFiltersInternalState(newState);
+    onClose();
+  }, [externalMode, filters, onClose, setExternalState]);
+  const handleExternalModeClose = (0, react_1.useCallback)(() => {
+    if (!(externalMode && initialExternalState && setExternalState)) {
+      return;
+    }
+    setExternalState(initialExternalState);
+    onClose();
+  }, [externalMode, initialExternalState, onClose, setExternalState]);
+  const toggleSaveModal = (0, react_1.useCallback)(() => {
+    var _a;
+    isSaveModalOpen && ((_a = saveButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    setIsSaveModalOpen(val => !val);
+  }, [isSaveModalOpen]);
+  const handleSaveFilters = (0, react_1.useCallback)(filterName => {
+    const stateForApply = externalMode ? currentState : {};
+    if (!externalMode) {
+      Object.keys(currentState).forEach(key => {
+        if (!inhibitedFilters.has(key)) {
+          stateForApply[key] = currentState[key];
+        }
+      });
+    }
+    onSave && onSave(filterName, stateForApply);
+  }, [externalMode, currentState, onSave, inhibitedFilters]);
+  const sidePanelItemChangeHandler = (0, react_1.useCallback)(id => externalMode ? handleExternalFiltersStateChange(id) : handleInternalFiltersStateChange(id), [externalMode, handleExternalFiltersStateChange, handleInternalFiltersStateChange]);
+  const handleErrorCheck = (0, react_1.useCallback)(id => isError => {
+    if (isError && errorItems.has(id) || !isError && !errorItems.has(id)) {
+      return;
+    }
+    const newErrorItems = new Set(errorItems);
+    newErrorItems[isError ? "add" : "delete"](id);
+    setErrorItems(newErrorItems);
+  }, [errorItems]);
+  const tabsContent = (0, react_1.useMemo)(() => filteredCurrentFilters.map(item => (0, jsx_runtime_1.jsx)(filtersSidePanelItem_1.FiltersSidePanelItem, {
+    item: item,
+    itemState: currentState[item.props.id],
+    changeHandler: sidePanelItemChangeHandler(item.props.id),
+    errorCheck: handleErrorCheck(item.props.id)
+  }, item.props.id)), [filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
+  const defaultStateObject = (0, react_1.useMemo)(() => (0, filtersHelper_1.createStateObject)(filteredCurrentFilters, "defaultState"), [filteredCurrentFilters]);
+  const getSelectedIds = (0, react_1.useCallback)(() => {
+    const selected = [];
+    filteredCurrentFilters.forEach(el => {
+      const itemState = currentState[el.props.id];
+      const defaultState = defaultStateObject[el.props.id];
+      if (!(0, isElementsEqual_1.isElementsEqual)(itemState, defaultState) && !inhibitedFilters.has(el.props.id)) {
+        selected.push(el.props.id);
+      }
+    });
+    return selected;
+  }, [currentState, defaultStateObject, filteredCurrentFilters, inhibitedFilters]);
+  const tabOptions = (0, react_1.useMemo)(() => [(0, filtersSelect_1.getAllOption)(translate), Object.assign(Object.assign({}, getSelectedOption(translate)), {
+    quantity: getSelectedIds().length || undefined
+  })], [getSelectedIds, translate]);
+  const onTabChange = newVal => {
+    setActiveTabId(newVal);
+  };
+  const selectedTabsContent = (0, react_1.useMemo)(() => selectedIds.length ? filteredCurrentFilters.filter(el => selectedIds.includes(el.props.id)).map(item => (0, jsx_runtime_1.jsx)(filtersSidePanelItem_1.FiltersSidePanelItem, {
+    item: item,
+    itemState: currentState[item.props.id],
+    changeHandler: sidePanelItemChangeHandler(item.props.id),
+    errorCheck: handleErrorCheck(item.props.id)
+  }, item.props.id)) : (0, jsx_runtime_1.jsx)(filtersEmptyState_1.FiltersEmptyState, {}), [selectedIds, filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
+  (0, react_1.useEffect)(() => {
+    if (!isOpen) {
+      return;
+    }
+    if (activeTabId === SELECTED_TAB_ID) {
+      return;
+    }
+    setSelectedIds(getSelectedIds());
+  }, [activeTabId, getSelectedIds, isOpen]);
+  const resetInitialComponentState = (0, react_1.useCallback)(() => {
+    setIsSaveModalOpen(false);
+    setActiveTabId(filtersSelect_1.ALL_SELECT_OPTION_ID);
+    setFiltersInternalState((0, filtersHelper_1.createStateObject)(filters, "state"));
+    setInitialExternalState(externalState);
+    setSelectedIds([]);
+    setSelectedIds(getSelectedIds());
+  }, [externalState, filters, getSelectedIds]);
+  (0, react_1.useEffect)(() => {
+    if (isOpen !== prevIsOpenRef.current) {
+      prevIsOpenRef.current = isOpen;
+      isOpen && resetInitialComponentState();
+    }
+  }, [isOpen, resetInitialComponentState]);
+  const handleHidePanel = (0, react_1.useCallback)((reason, shieldId) => {
+    if (isSaveModalOpen) {
+      return;
+    }
+    if (reason === sidePanel_1.SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === sidePanel_1.SidePanelCloseReason.Escape) {
+      onClose();
+      return;
+    }
+  }, [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
+        }), (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
+          })]
+        }), (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__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")
+              })]
+            })]
+          })
+        })]
+      })
+    }), (_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, {
+      className: sidePanel_1.CUSTOM_POPUP_COMPONENT_CLASSNAME,
+      isOpen: isSaveModalOpen,
+      onClose: toggleSaveModal,
+      onSave: handleSaveFilters
+    })]
+  });
+};
+exports.FiltersSidePanel = FiltersSidePanel;

package/dist/filters/components/filtersSidePanelChip.d.ts

@@ -0,0 +1,8 @@
+interface IFiltersSidePanelChip {
+    currentState: boolean;
+    handleStateChange: (newState: boolean) => void;
+    children: string;
+    id: string;
+}
+export declare const FiltersSidePanelChip: ({ currentState, handleStateChange, id, children }: IFiltersSidePanelChip) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/filters/components/filtersSidePanelChip.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSidePanelChip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const checkbox_1 = require("../../checkbox/checkbox");
+const FiltersSidePanelChip = ({ currentState, handleStateChange, id, children }) => {
+    const handleChange = (0, react_1.useCallback)((e) => {
+        handleStateChange(e.target.checked);
+    }, [handleStateChange]);
+    return (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { fullWidth: true, id: `${id}-side-panel`, onChange: handleChange, checked: currentState, children: children });
+};
+exports.FiltersSidePanelChip = FiltersSidePanelChip;

package/dist/filters/components/filtersSidePanelDateRange.d.ts

@@ -0,0 +1,2 @@
+import { IFiltersDateRangeItem, IFiltersDateRangeProps } from "./filtersDateRange";
+export declare const FiltersSidePanelDateRange: <P extends IFiltersDateRangeProps = IFiltersDateRangeProps>({ className, classNamePopup, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>) => React.JSX.Element;

package/dist/filters/components/filtersSidePanelDateRange.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSidePanelDateRange = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dateRangeRaw_1 = require("../../dateRangeRaw/dateRangeRaw");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const FiltersSidePanelDateRange = (_a) => {
+    var { className, classNamePopup, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon } = _a, dateRangeProps = __rest(_a, ["className", "classNamePopup", "state", "defaultState", "name", "onChange", "id", "allowUnsetValue", "chipIcon"]);
+    const component = (0, react_1.useMemo)(() => allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, dateRangeProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: (0, classNames_1.classNames)(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: true, chip: false })) : (0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, dateRangeProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: (0, classNames_1.classNames)(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: false, chip: false })), [allowUnsetValue, dateRangeProps, id, classNamePopup, className, state, onChangeState, defaultState]);
+    return component;
+};
+exports.FiltersSidePanelDateRange = FiltersSidePanelDateRange;

package/dist/filters/components/filtersSidePanelDropdown.d.ts

@@ -0,0 +1,5 @@
+import { TFiltersDropdownAllStates } from "./filtersDropdown";
+import { IFiltersSidePanelComponentProps } from "./filtersSidePanelItem";
+type IFiltersSidePanelDropdown = IFiltersSidePanelComponentProps<TFiltersDropdownAllStates>;
+export declare const FiltersSidePanelDropdown: ({ elemProps, currentState, handleStateChange }: IFiltersSidePanelDropdown) => import("react/jsx-runtime").JSX.Element;
+export {};