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

package/esm/filters/components/filtersSidePanel.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLanguage } from "../../utils/localization/useLanguage";
@@ -24,185 +25,511 @@ import { FiltersSidePanelItem } from "./filtersSidePanelItem";
 import { FiltersSaveModal } from "./filtersSaveModal";
 import { isElementsEqual } from "../../utils/compareElementsUtils/isElementsEqual";
 import { FiltersEmptySelectedList } from "./filtersEmptySelectedList";
+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("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("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("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("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", "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("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("en", "Pin", "Pin");
+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 SELECTED_TAB_ID = "Selected";
-const getSelectedOption = (translate) => ({
-    id: SELECTED_TAB_ID,
-    name: translate("Selected")
+const getSelectedOption = translate => ({
+  id: SELECTED_TAB_ID,
+  name: translate("Selected")
 });
-export const FiltersSidePanel = ({ isOpen, onApply, onClose, onPin, isPinned, filters, externalState, setExternalState, triggerRef }) => {
-    var _a;
-    const { translate } = useLanguage();
-    const isLongTextLanguages = useMemo(() => `${translate("Reset")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
-    const dataShieldId = useUniqueId();
-    const iconDriveClassName = useDriveClassName("icon");
-    const { dark } = useContext(themeContext);
-    const isMobile = useMobile();
-    const { setScrollHidden, resetScroll } = useBodyScroll();
-    const { onSave } = useFiltersSavedItems();
-    const [activeTabId, setActiveTabId] = useState(ALL_SELECT_OPTION_ID);
-    const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
-    const [filtersInternalState, setFiltersInternalState] = useState(createStateObject(filters, "state"));
-    const [initialExternalState, setInitialExternalState] = useState(externalState);
-    const prevIsOpenRef = useRef(false);
-    const [selectedIds, setSelectedIds] = useState([]);
-    const [errorItems, setErrorItems] = useState(new Set());
-    const saveButtonRef = useRef(null);
-    const externalMode = useMemo(() => {
-        if (externalState === undefined || setExternalState === undefined) {
-            return false;
-        }
-        return true;
-    }, [externalState, setExternalState]);
-    const handleInternalFiltersStateChange = useCallback((id) => (newState) => {
-        setFiltersInternalState((prevState) => (Object.assign(Object.assign({}, prevState), { [id]: newState })));
-    }, []);
-    const handleExternalFiltersStateChange = useCallback((id) => (newState) => {
-        setExternalState && setExternalState({ [id]: newState });
-    }, [setExternalState]);
-    const currentState = useMemo(() => externalMode ? externalState
-        : filtersInternalState, [externalMode, externalState, filtersInternalState]);
-    const currentFilters = 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([ALL_SELECT_OPTION_ID], currentState) || item.props.visible([ALL_SELECT_OPTION_ID])))), [currentState, filters]);
-    const inhibitedFilters = 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 = useMemo(() => currentFilters.filter((item) => !externalMode ? !inhibitedFilters.has(item.props.id) : true), [currentFilters, externalMode, inhibitedFilters]);
-    const handleReadyForFocus = useCallback((isCurrentOpen) => {
-        if (!isCurrentOpen) {
-            triggerRef.current.focus();
-            return;
-        }
-    }, [triggerRef]);
-    useEffect(() => {
-        const handleOpen = () => {
-            setScrollHidden();
-        };
-        const handleClose = () => {
-            resetScroll();
-        };
-        if (isOpen) {
-            handleOpen();
-        }
-        else {
-            handleClose();
-        }
-        return () => { handleClose(); };
-    }, [isOpen, setScrollHidden, resetScroll]);
-    const handleClearClick = useCallback(() => {
-        const newState = createStateObject(filters, "defaultState");
-        externalMode && setExternalState ? setExternalState(Object.assign({}, newState)) : setFiltersInternalState(newState);
-    }, [externalMode, filters, setExternalState]);
-    const handleApplyClick = 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 = useCallback(() => {
-        const newState = createStateObject(filters, "state");
-        externalMode && setExternalState ? setExternalState(Object.assign({}, newState)) : setFiltersInternalState(newState);
-        onClose();
-    }, [externalMode, filters, onClose, setExternalState]);
-    const handleExternalModeClose = useCallback(() => {
-        if (!(externalMode && initialExternalState && setExternalState)) {
-            return;
-        }
-        setExternalState(initialExternalState);
-        onClose();
-    }, [externalMode, initialExternalState, onClose, setExternalState]);
-    const toggleSaveModal = useCallback(() => {
-        var _a;
-        isSaveModalOpen && ((_a = saveButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-        setIsSaveModalOpen(val => !val);
-    }, [isSaveModalOpen]);
-    const handleSaveFilters = 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 = useCallback((id) => externalMode ? handleExternalFiltersStateChange(id) : handleInternalFiltersStateChange(id), [externalMode, handleExternalFiltersStateChange, handleInternalFiltersStateChange]);
-    const handleErrorCheck = 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 = useMemo(() => filteredCurrentFilters
-        .map((item) => (_jsx(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 = useMemo(() => createStateObject(filteredCurrentFilters, "defaultState"), [filteredCurrentFilters]);
-    const getSelectedIds = useCallback(() => {
-        const selected = [];
-        filteredCurrentFilters.forEach((el) => {
-            const itemState = currentState[el.props.id];
-            const defaultState = defaultStateObject[el.props.id];
-            if (!isElementsEqual(itemState, defaultState) && !inhibitedFilters.has(el.props.id)) {
-                selected.push(el.props.id);
-            }
-        });
-        return selected;
-    }, [currentState, defaultStateObject, filteredCurrentFilters, inhibitedFilters]);
-    const tabOptions = useMemo(() => [
-        getAllOption(translate),
-        Object.assign(Object.assign({}, getSelectedOption(translate)), { quantity: getSelectedIds().length || undefined })
-    ], [getSelectedIds, translate]);
-    const onTabChange = (newVal) => {
-        setActiveTabId(newVal);
+export const FiltersSidePanel = ({
+  isOpen,
+  onApply,
+  onClose,
+  onPin,
+  isPinned,
+  filters,
+  externalState,
+  setExternalState,
+  triggerRef
+}) => {
+  var _a;
+  const {
+    translate
+  } = useLanguage();
+  const isLongTextLanguages = useMemo(() => `${translate("Reset")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
+  const dataShieldId = useUniqueId();
+  const iconDriveClassName = useDriveClassName("icon");
+  const {
+    dark
+  } = useContext(themeContext);
+  const isMobile = useMobile();
+  const {
+    setScrollHidden,
+    resetScroll
+  } = useBodyScroll();
+  const {
+    onSave
+  } = useFiltersSavedItems();
+  const [activeTabId, setActiveTabId] = useState(ALL_SELECT_OPTION_ID);
+  const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
+  const [filtersInternalState, setFiltersInternalState] = useState(createStateObject(filters, "state"));
+  const [initialExternalState, setInitialExternalState] = useState(externalState);
+  const prevIsOpenRef = useRef(false);
+  const [selectedIds, setSelectedIds] = useState([]);
+  const [errorItems, setErrorItems] = useState(new Set());
+  const saveButtonRef = useRef(null);
+  const externalMode = useMemo(() => {
+    if (externalState === undefined || setExternalState === undefined) {
+      return false;
+    }
+    return true;
+  }, [externalState, setExternalState]);
+  const handleInternalFiltersStateChange = useCallback(id => newState => {
+    setFiltersInternalState(prevState => Object.assign(Object.assign({}, prevState), {
+      [id]: newState
+    }));
+  }, []);
+  const handleExternalFiltersStateChange = useCallback(id => newState => {
+    setExternalState && setExternalState({
+      [id]: newState
+    });
+  }, [setExternalState]);
+  const currentState = useMemo(() => externalMode ? externalState : filtersInternalState, [externalMode, externalState, filtersInternalState]);
+  const currentFilters = 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([ALL_SELECT_OPTION_ID], currentState) || item.props.visible([ALL_SELECT_OPTION_ID]))), [currentState, filters]);
+  const inhibitedFilters = 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 = useMemo(() => currentFilters.filter(item => !externalMode ? !inhibitedFilters.has(item.props.id) : true), [currentFilters, externalMode, inhibitedFilters]);
+  const handleReadyForFocus = useCallback(isCurrentOpen => {
+    if (!isCurrentOpen) {
+      triggerRef.current.focus();
+      return;
+    }
+  }, [triggerRef]);
+  useEffect(() => {
+    const handleOpen = () => {
+      setScrollHidden();
     };
-    const selectedTabsContent = useMemo(() => selectedIds.length ? filteredCurrentFilters.filter((el) => selectedIds.includes(el.props.id))
-        .map((item) => (_jsx(FiltersSidePanelItem, { item: item, itemState: currentState[item.props.id], changeHandler: sidePanelItemChangeHandler(item.props.id), errorCheck: handleErrorCheck(item.props.id) }, item.props.id)))
-        : _jsx(FiltersEmptySelectedList, {}), [selectedIds, filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
-    useEffect(() => {
-        if (!isOpen) {
-            return;
-        }
-        if (activeTabId === SELECTED_TAB_ID) {
-            return;
-        }
-        setSelectedIds(getSelectedIds());
-    }, [activeTabId, getSelectedIds, isOpen]);
-    const resetInitialComponentState = useCallback(() => {
-        setIsSaveModalOpen(false);
-        setActiveTabId(ALL_SELECT_OPTION_ID);
-        setFiltersInternalState(createStateObject(filters, "state"));
-        setInitialExternalState(externalState);
-        setSelectedIds([]);
-        setSelectedIds(getSelectedIds());
-    }, [externalState, filters, getSelectedIds]);
-    useEffect(() => {
-        if (isOpen !== prevIsOpenRef.current) {
-            prevIsOpenRef.current = isOpen;
-            isOpen && resetInitialComponentState();
-        }
-    }, [isOpen, resetInitialComponentState]);
-    const handleHidePanel = useCallback((reason, shieldId) => {
-        if (isSaveModalOpen) {
-            return;
+    const handleClose = () => {
+      resetScroll();
+    };
+    if (isOpen) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+    return () => {
+      handleClose();
+    };
+  }, [isOpen, setScrollHidden, resetScroll]);
+  const handleClearClick = useCallback(() => {
+    const newState = createStateObject(filters, "defaultState");
+    externalMode && setExternalState ? setExternalState(Object.assign({}, newState)) : setFiltersInternalState(newState);
+  }, [externalMode, filters, setExternalState]);
+  const handleApplyClick = useCallback(() => {
+    const stateForApply = externalMode ? currentState : {};
+    if (!externalMode) {
+      Object.keys(currentState).forEach(key => {
+        if (!inhibitedFilters.has(key)) {
+          stateForApply[key] = currentState[key];
         }
-        if (reason === SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === SidePanelCloseReason.Escape) {
-            onClose();
-            return;
+      });
+    }
+    onApply(stateForApply);
+    onClose();
+  }, [currentState, externalMode, inhibitedFilters, onApply, onClose]);
+  const handleCancelClick = useCallback(() => {
+    const newState = createStateObject(filters, "state");
+    externalMode && setExternalState ? setExternalState(Object.assign({}, newState)) : setFiltersInternalState(newState);
+    onClose();
+  }, [externalMode, filters, onClose, setExternalState]);
+  const handleExternalModeClose = useCallback(() => {
+    if (!(externalMode && initialExternalState && setExternalState)) {
+      return;
+    }
+    setExternalState(initialExternalState);
+    onClose();
+  }, [externalMode, initialExternalState, onClose, setExternalState]);
+  const toggleSaveModal = useCallback(() => {
+    var _a;
+    isSaveModalOpen && ((_a = saveButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    setIsSaveModalOpen(val => !val);
+  }, [isSaveModalOpen]);
+  const handleSaveFilters = useCallback(filterName => {
+    const stateForApply = externalMode ? currentState : {};
+    if (!externalMode) {
+      Object.keys(currentState).forEach(key => {
+        if (!inhibitedFilters.has(key)) {
+          stateForApply[key] = currentState[key];
         }
-    }, [isSaveModalOpen, dataShieldId, onClose]);
-    return _jsxs(Fragment, { children: [_jsx(Shield, { className: "zen-high-level-shield", dataShieldId: dataShieldId, isVisible: isOpen }), createPortal(_jsx(SidePanel, { triggerRef: triggerRef, isOpen: isOpen, label: translate("All Filters"), onHidePanel: handleHidePanel, className: classNames(["zen-side-panel-filters", dark ? "zen-dark" : ""]), onTransitionEnd: handleReadyForFocus, children: _jsxs("div", { className: "zen-side-panel-filters-wrapper", children: [_jsxs("div", { className: "zen-side-panel-filters__header", children: [_jsx("div", { className: "zen-side-panel-filters__title-wrapper", children: _jsx("div", { className: "zen-side-panel-filters__title zen-ellipsis", children: translate("All Filters") }) }), _jsxs("div", { className: "zen-side-panel-filters__header-buttons", children: [onSave && _jsx(Button, { type: "tertiary", ref: saveButtonRef, className: "zen-side-panel-filters__save-button zen-side-panel-filters__header-button", title: translate("Save"), "aria-label": translate("Save"), onClick: toggleSaveModal, children: _jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) }), onPin && _jsx(Button, { type: "tertiary", className: classNames(["zen-side-panel-filters__pin-button", isPinned ? "zen-side-panel-filters__header-button--active" : "", "zen-side-panel-filters__header-button"]), title: translate("Pin"), "aria-label": translate("Pin"), onClick: onPin, children: _jsx(IconPin2, { description: translate("Pin"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) }), _jsx(TextIconButton, { type: "tertiary-black", className: "zen-side-panel-filters__close-button", icon: IconClose, iconSize: "large", onClick: externalMode ? handleExternalModeClose : onClose, iconPosition: ButtonIconPosition.Start, title: translate("Close") })] })] }), _jsx(Tabs, { activeTabId: activeTabId, className: "zen-side-panel-filters__tab-header", onTabChange: onTabChange, tabs: tabOptions }), _jsxs("div", { className: "zen-side-panel-filters__content", children: [_jsx("div", { id: `panel-${ALL_SELECT_OPTION_ID}`, className: classNames(["zen-side-panel-filters__tab-content", activeTabId === ALL_SELECT_OPTION_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]), role: "tabpanel", "aria-labelledby": ALL_SELECT_OPTION_ID, children: activeTabId === ALL_SELECT_OPTION_ID ? tabsContent : null }), _jsx("div", { id: `panel-${SELECTED_TAB_ID}`, className: classNames(["zen-side-panel-filters__tab-content", activeTabId === SELECTED_TAB_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]), role: "tabpanel", "aria-labelledby": SELECTED_TAB_ID, children: activeTabId === SELECTED_TAB_ID ? selectedTabsContent : null })] }), _jsx("div", { className: classNames(["zen-side-panel-filters__footer", isMobile ? "zen-side-panel-filters__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters__footer--long-text" : ""]), children: isMobile ? _jsxs(FooterButtons, { children: [_jsx(Button, { className: "zen-side-panel-filters__apply-button", onClick: handleApplyClick, type: "primary", disabled: errorItems.size > 0, children: translate("Apply") }), _jsx(Button, { className: "zen-side-panel-filters__cancel-button", type: "secondary", onClick: handleCancelClick, children: translate("Cancel") }), _jsx(Button, { className: "zen-side-panel-filters__clear-button", onClick: handleClearClick, type: "tertiary", children: translate("Reset") })] }) : _jsxs(_Fragment, { children: [_jsx("div", { className: "zen-side-panel-filters__footer-section", children: _jsx(Button, { type: "tertiary", className: "zen-side-panel-filters__clear-button", onClick: handleClearClick, children: translate("Reset") }) }), _jsxs("div", { className: "zen-side-panel-filters__footer-section", children: [_jsx(Button, { className: "zen-side-panel-filters__cancel-button", type: "secondary", onClick: handleCancelClick, children: translate("Cancel") }), _jsx(Button, { className: "zen-side-panel-filters__apply-button zen-side-panel-filters__apply-button--desktop", onClick: handleApplyClick, type: "primary", disabled: errorItems.size > 0, children: translate("Apply") })] })] }) })] }) }), (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body), _jsx(FiltersSaveModal, { className: CUSTOM_POPUP_COMPONENT_CLASSNAME, isOpen: isSaveModalOpen, onClose: toggleSaveModal, onSave: handleSaveFilters })] });
-};
+      });
+    }
+    onSave && onSave(filterName, stateForApply);
+  }, [externalMode, currentState, onSave, inhibitedFilters]);
+  const sidePanelItemChangeHandler = useCallback(id => externalMode ? handleExternalFiltersStateChange(id) : handleInternalFiltersStateChange(id), [externalMode, handleExternalFiltersStateChange, handleInternalFiltersStateChange]);
+  const handleErrorCheck = 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 = useMemo(() => filteredCurrentFilters.map(item => _jsx(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 = useMemo(() => createStateObject(filteredCurrentFilters, "defaultState"), [filteredCurrentFilters]);
+  const getSelectedIds = useCallback(() => {
+    const selected = [];
+    filteredCurrentFilters.forEach(el => {
+      const itemState = currentState[el.props.id];
+      const defaultState = defaultStateObject[el.props.id];
+      if (!isElementsEqual(itemState, defaultState) && !inhibitedFilters.has(el.props.id)) {
+        selected.push(el.props.id);
+      }
+    });
+    return selected;
+  }, [currentState, defaultStateObject, filteredCurrentFilters, inhibitedFilters]);
+  const tabOptions = useMemo(() => [getAllOption(translate), Object.assign(Object.assign({}, getSelectedOption(translate)), {
+    quantity: getSelectedIds().length || undefined
+  })], [getSelectedIds, translate]);
+  const onTabChange = newVal => {
+    setActiveTabId(newVal);
+  };
+  const selectedTabsContent = useMemo(() => selectedIds.length ? filteredCurrentFilters.filter(el => selectedIds.includes(el.props.id)).map(item => _jsx(FiltersSidePanelItem, {
+    item: item,
+    itemState: currentState[item.props.id],
+    changeHandler: sidePanelItemChangeHandler(item.props.id),
+    errorCheck: handleErrorCheck(item.props.id)
+  }, item.props.id)) : _jsx(FiltersEmptySelectedList, {}), [selectedIds, filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    if (activeTabId === SELECTED_TAB_ID) {
+      return;
+    }
+    setSelectedIds(getSelectedIds());
+  }, [activeTabId, getSelectedIds, isOpen]);
+  const resetInitialComponentState = useCallback(() => {
+    setIsSaveModalOpen(false);
+    setActiveTabId(ALL_SELECT_OPTION_ID);
+    setFiltersInternalState(createStateObject(filters, "state"));
+    setInitialExternalState(externalState);
+    setSelectedIds([]);
+    setSelectedIds(getSelectedIds());
+  }, [externalState, filters, getSelectedIds]);
+  useEffect(() => {
+    if (isOpen !== prevIsOpenRef.current) {
+      prevIsOpenRef.current = isOpen;
+      isOpen && resetInitialComponentState();
+    }
+  }, [isOpen, resetInitialComponentState]);
+  const handleHidePanel = useCallback((reason, shieldId) => {
+    if (isSaveModalOpen) {
+      return;
+    }
+    if (reason === SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === SidePanelCloseReason.Escape) {
+      onClose();
+      return;
+    }
+  }, [isSaveModalOpen, dataShieldId, onClose]);
+  return _jsxs(Fragment, {
+    children: [_jsx(Shield, {
+      className: "zen-high-level-shield",
+      dataShieldId: dataShieldId,
+      isVisible: isOpen
+    }), createPortal(_jsx(SidePanel, {
+      triggerRef: triggerRef,
+      isOpen: isOpen,
+      label: translate("All Filters"),
+      onHidePanel: handleHidePanel,
+      className: classNames(["zen-side-panel-filters", dark ? "zen-dark" : ""]),
+      onTransitionEnd: handleReadyForFocus,
+      children: _jsxs("div", {
+        className: "zen-side-panel-filters-wrapper",
+        children: [_jsxs("div", {
+          className: "zen-side-panel-filters__header",
+          children: [_jsx("div", {
+            className: "zen-side-panel-filters__title-wrapper",
+            children: _jsx("div", {
+              className: "zen-side-panel-filters__title zen-ellipsis",
+              children: translate("All Filters")
+            })
+          }), _jsxs("div", {
+            className: "zen-side-panel-filters__header-buttons",
+            children: [onSave && _jsx(Button, {
+              type: "tertiary",
+              ref: saveButtonRef,
+              className: "zen-side-panel-filters__save-button zen-side-panel-filters__header-button",
+              title: translate("Save"),
+              "aria-label": translate("Save"),
+              onClick: toggleSaveModal,
+              children: _jsx(IconDisk, {
+                description: translate("Save"),
+                className: "svgIcon",
+                size: iconDriveClassName ? "huge" : "large"
+              })
+            }), onPin && _jsx(Button, {
+              type: "tertiary",
+              className: classNames(["zen-side-panel-filters__pin-button", isPinned ? "zen-side-panel-filters__header-button--active" : "", "zen-side-panel-filters__header-button"]),
+              title: translate("Pin"),
+              "aria-label": translate("Pin"),
+              onClick: onPin,
+              children: _jsx(IconPin2, {
+                description: translate("Pin"),
+                className: "svgIcon",
+                size: iconDriveClassName ? "huge" : "large"
+              })
+            }), _jsx(TextIconButton, {
+              type: "tertiary-black",
+              className: "zen-side-panel-filters__close-button",
+              icon: IconClose,
+              iconSize: "large",
+              onClick: externalMode ? handleExternalModeClose : onClose,
+              iconPosition: ButtonIconPosition.Start,
+              title: translate("Close")
+            })]
+          })]
+        }), _jsx(Tabs, {
+          activeTabId: activeTabId,
+          className: "zen-side-panel-filters__tab-header",
+          onTabChange: onTabChange,
+          tabs: tabOptions
+        }), _jsxs("div", {
+          className: "zen-side-panel-filters__content",
+          children: [_jsx("div", {
+            id: `panel-${ALL_SELECT_OPTION_ID}`,
+            className: classNames(["zen-side-panel-filters__tab-content", activeTabId === ALL_SELECT_OPTION_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]),
+            role: "tabpanel",
+            "aria-labelledby": ALL_SELECT_OPTION_ID,
+            children: activeTabId === ALL_SELECT_OPTION_ID ? tabsContent : null
+          }), _jsx("div", {
+            id: `panel-${SELECTED_TAB_ID}`,
+            className: classNames(["zen-side-panel-filters__tab-content", activeTabId === SELECTED_TAB_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]),
+            role: "tabpanel",
+            "aria-labelledby": SELECTED_TAB_ID,
+            children: activeTabId === SELECTED_TAB_ID ? selectedTabsContent : null
+          })]
+        }), _jsx("div", {
+          className: classNames(["zen-side-panel-filters__footer", isMobile ? "zen-side-panel-filters__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters__footer--long-text" : ""]),
+          children: isMobile ? _jsxs(FooterButtons, {
+            children: [_jsx(Button, {
+              className: "zen-side-panel-filters__apply-button",
+              onClick: handleApplyClick,
+              type: "primary",
+              disabled: errorItems.size > 0,
+              children: translate("Apply")
+            }), _jsx(Button, {
+              className: "zen-side-panel-filters__cancel-button",
+              type: "secondary",
+              onClick: handleCancelClick,
+              children: translate("Cancel")
+            }), _jsx(Button, {
+              className: "zen-side-panel-filters__clear-button",
+              onClick: handleClearClick,
+              type: "tertiary",
+              children: translate("Reset")
+            })]
+          }) : _jsxs(_Fragment, {
+            children: [_jsx("div", {
+              className: "zen-side-panel-filters__footer-section",
+              children: _jsx(Button, {
+                type: "tertiary",
+                className: "zen-side-panel-filters__clear-button",
+                onClick: handleClearClick,
+                children: translate("Reset")
+              })
+            }), _jsxs("div", {
+              className: "zen-side-panel-filters__footer-section",
+              children: [_jsx(Button, {
+                className: "zen-side-panel-filters__cancel-button",
+                type: "secondary",
+                onClick: handleCancelClick,
+                children: translate("Cancel")
+              }), _jsx(Button, {
+                className: "zen-side-panel-filters__apply-button zen-side-panel-filters__apply-button--desktop",
+                onClick: handleApplyClick,
+                type: "primary",
+                disabled: errorItems.size > 0,
+                children: translate("Apply")
+              })]
+            })]
+          })
+        })]
+      })
+    }), (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body), _jsx(FiltersSaveModal, {
+      className: CUSTOM_POPUP_COMPONENT_CLASSNAME,
+      isOpen: isSaveModalOpen,
+      onClose: toggleSaveModal,
+      onSave: handleSaveFilters
+    })]
+  });
+};