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

package/dist/filters/components/filtersSavedChipComponent.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.FiltersSavedChipComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -12,117 +18,321 @@ const iconClose_1 = require("../../icons/iconClose");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const modal_1 = require("../../modal/modal");
 const filtersSavedItemsProvider_1 = require("./filtersSavedItemsProvider");
+injectString("en", "Save new filters", "Save new filters");
+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", "Save new", "Save new");
+injectString("cs", "Remove", "Odebrat");
+injectString("da-DK", "Remove", "Fjerne");
+injectString("de", "Remove", "Entfernen");
+injectString("en", "Remove", "Remove");
+injectString("es", "Remove", "Eliminar");
+injectString("fi-FI", "Remove", "Poistaa");
+injectString("fr", "Remove", "Supprimer");
+injectString("fr-FR", "Remove", "Supprimer");
+injectString("hu-HU", "Remove", "T\xE1vol\xEDtsa el");
+injectString("id", "Remove", "Hapus");
+injectString("it", "Remove", "Rimuovere");
+injectString("ja", "Remove", "\u524A\u9664");
+injectString("ko-KR", "Remove", "\uC81C\uAC70");
+injectString("ms", "Remove", "Alih Keluar");
+injectString("nb-NO", "Remove", "Fjern");
+injectString("nl", "Remove", "Verwijderen");
+injectString("pl", "Remove", "Usu\u0144");
+injectString("pt-BR", "Remove", "Remover");
+injectString("sk-SK", "Remove", "Odstr\xE1ni\u0165");
+injectString("sv", "Remove", "Ta bort");
+injectString("th", "Remove", "\u0E25\u0E1A");
+injectString("tr", "Remove", "Kald\u0131r");
+injectString("zh-Hans", "Remove", "\u5220\u9664");
+injectString("zh-TW", "Remove", "\u79FB\u9664");
+injectString("en", "Saved filters", "Saved filters");
+injectString("en", "Remove saved {name} filter?", "Remove saved {name} filter?");
+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", "Confirm", "Potvrdit");
+injectString("da-DK", "Confirm", "Bekr\xE6fte");
+injectString("de", "Confirm", "Best\xE4tigen");
+injectString("en", "Confirm", "Confirm");
+injectString("es", "Confirm", "Confirmar");
+injectString("fi-FI", "Confirm", "Vahvistaa");
+injectString("fr", "Confirm", "Confirmer");
+injectString("fr-FR", "Confirm", "Confirmer");
+injectString("hu-HU", "Confirm", "Meger\u0151s\xEDt\xE9s");
+injectString("id", "Confirm", "Konfirmasi");
+injectString("it", "Confirm", "Confermare");
+injectString("ja", "Confirm", "\u78BA\u8A8D");
+injectString("ko-KR", "Confirm", "\uD655\uC778");
+injectString("ms", "Confirm", "Sahkan");
+injectString("nb-NO", "Confirm", "Bekreft");
+injectString("nl", "Confirm", "Bevestigen");
+injectString("pl", "Confirm", "Potwierd\u017A");
+injectString("pt-BR", "Confirm", "Confirmar");
+injectString("sk-SK", "Confirm", "Potvrdi\u0165");
+injectString("sv", "Confirm", "Bekr\xE4fta");
+injectString("th", "Confirm", "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19");
+injectString("tr", "Confirm", "Onayla");
+injectString("zh-Hans", "Confirm", "\u786E\u8BA4");
+injectString("zh-TW", "Confirm", "\u78BA\u8A8D");
 const filtersSaveModal_1 = require("./filtersSaveModal");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const mobileSheet_1 = require("../../mobileSheet/mobileSheet");
 const keyboardHelpers_1 = require("../../utils/keyboardHelpers");
 const FiltersSavedChipComponent = () => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
-    const contentDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-filters-saved-popup__content");
-    const { items, active, onRemove, onApply, onSave } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
-    const [savedChipOpen, setSavedChipOpen] = (0, react_1.useState)(false);
-    const [removeModalOpen, setRemoveModalOpen] = (0, react_1.useState)(false);
-    const [saveModalOpen, setSaveModalOpen] = (0, react_1.useState)(false);
-    const savedChipRef = (0, react_1.useRef)(null);
-    const removeChipRef = (0, react_1.useRef)("");
-    const savedFiltersRef = (0, react_1.useRef)(null);
-    const handleRemove = (0, react_1.useCallback)((itemKey) => () => {
-        removeChipRef.current = itemKey;
-        setRemoveModalOpen(true);
-    }, []);
-    const toggleSavedChipOpen = (0, react_1.useCallback)(() => {
-        if (removeModalOpen || saveModalOpen) {
-            return;
-        }
-        setSavedChipOpen((prev) => !prev);
-    }, [removeModalOpen, saveModalOpen]);
-    const toggleRemoveModal = (0, react_1.useCallback)(() => {
-        setRemoveModalOpen((prev) => !prev);
-    }, []);
-    const toggleSaveModal = (0, react_1.useCallback)(() => {
-        setSaveModalOpen((prev) => !prev);
-    }, []);
-    const handleCancelRemoveModal = (0, react_1.useCallback)(() => {
-        setRemoveModalOpen(false);
-        removeChipRef.current = "";
-    }, []);
-    const handleRemoveItem = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        setRemoveModalOpen(false);
-        onRemove && onRemove(removeChipRef.current);
-        removeChipRef.current = "";
-    }, [onRemove]);
-    const handleFilterSelect = (0, react_1.useCallback)((e) => {
-        var _a;
-        const filterName = e.target.dataset.filterName;
-        if (!filterName) {
-            return;
-        }
-        onApply && onApply(filterName);
-        setSavedChipOpen((prev) => !prev);
-        (_a = savedChipRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [onApply]);
-    const handleSaveItemKeyDown = (0, react_1.useCallback)((e) => {
-        if (e.key === "ArrowDown") {
-            const nextItem = (0, keyboardHelpers_1.getFirstFocusableItem)(savedFiltersRef.current);
-            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
-            return;
-        }
-    }, [savedFiltersRef]);
-    const handleItemKeyDown = (0, react_1.useCallback)((e) => {
-        var _a;
-        if (e.key === "Enter" || e.key === " ") {
-            const filterName = e.currentTarget.dataset.filterName;
-            const isRemoveButton = e.target.dataset.removeButton;
-            if (isRemoveButton || !filterName) {
-                return;
-            }
-            onApply && onApply(filterName);
-            setSavedChipOpen((prev) => !prev);
-            (_a = savedChipRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        const isListItem = e.target instanceof HTMLElement && e.target.dataset.listItem === "true";
-        const isButtonItem = e.target instanceof HTMLElement && e.target.dataset.removeButton === "true";
-        const getSelector = () => {
-            if (isListItem) {
-                return `[data-list-item="true"]`;
-            }
-            if (isButtonItem) {
-                return `[data-remove-button="true"]`;
-            }
-            return undefined;
-        };
-        if (e.key === "ArrowDown") {
-            const nextItem = (0, keyboardHelpers_1.getNewFocusableItem)(1, savedFiltersRef.current, getSelector());
-            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
-            return;
-        }
-        if (e.key === "ArrowUp") {
-            const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, savedFiltersRef.current, getSelector());
-            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
-            return;
-        }
-        if (e.key === "ArrowRight" && isListItem) {
-            const nextItem = (0, keyboardHelpers_1.getNewFocusableItem)(1, savedFiltersRef.current, `[data-remove-button="true"]`);
-            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
-            return;
-        }
-        if (e.key === "ArrowLeft" && isButtonItem) {
-            const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, savedFiltersRef.current, `[data-list-item="true"]`);
-            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
-            return;
-        }
-    }, [onApply]);
-    const saveButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("button", { type: "button", onKeyDown: handleSaveItemKeyDown, onClick: toggleSaveModal, className: "zen-filters-saved-popup__action-button", title: translate("Save new filters"), children: [(0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["", "zen-ellipsis"]), children: translate("Save new") })] }), [iconDriveClassName, toggleSaveModal, translate, handleSaveItemKeyDown]);
-    const memoizedItems = (0, react_1.useMemo)(() => Array.from(items), [items]);
-    const popupContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-saved-popup__content", contentDriveClassName || ""]), children: [onSave ? saveButton : null, (0, jsx_runtime_1.jsx)("div", { ref: savedFiltersRef, onClick: handleFilterSelect, children: memoizedItems.map((filterName) => ((0, jsx_runtime_1.jsxs)("div", { tabIndex: 0, onKeyDown: handleItemKeyDown, "data-list-item": true, "data-filter-name": filterName, className: (0, classNames_1.classNames)(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-saved-popup__name", "data-filter-name": filterName, children: filterName }), onRemove ? (0, jsx_runtime_1.jsx)(button_1.Button, { "data-remove-button": true, type: "tertiary-black", className: "zen-filters-saved-popup__action", onClick: handleRemove(filterName), title: translate("Remove"), "aria-label": translate("Remove"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: iconDriveClassName ? "huge" : "large", className: "zen-filters-saved-popup__close-icon" }) }) : null] }, filterName))) })] }), [active, contentDriveClassName, handleFilterSelect, handleItemKeyDown, handleRemove, iconDriveClassName, memoizedItems, onRemove, onSave, saveButton, translate]);
-    const memoizedStatus = (0, react_1.useMemo)(() => (active.size > 0 && Array.from(items).some(item => active.has(item)) ? "active" : undefined), [active, items]);
-    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: savedChipOpen, className: (0, classNames_1.classNames)(["zen-filters-saved-popup"]), onOpenChange: toggleSavedChipOpen, useTrapFocusWithTrigger: "on", shouldHoldScroll: true, triggerRef: savedChipRef, ariaLabel: translate("Saved filters"), recalculateOnScroll: true, children: popupContent }), [popupContent, savedChipOpen, toggleSavedChipOpen, savedChipRef, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: translate("Saved filters"), triggerRef: savedChipRef, isOpen: savedChipOpen, onHidePanel: toggleSavedChipOpen, onCloseClick: toggleSavedChipOpen, useTrapFocusWithTrigger: false, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: translate("Saved filters") }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { className: "zen-filters-saved-chip__mobile-sheet", children: popupContent })] }), [popupContent, savedChipOpen, toggleSavedChipOpen, translate]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(chip_1.Chip, { className: "zen-filters-saved-chip", isOpen: savedChipOpen, status: memoizedStatus, onClick: toggleSavedChipOpen, title: translate("Saved filters"), icon: iconDisk_1.IconDisk, triggerRef: savedChipRef }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsxs)(modal_1.Modal, { isOpen: removeModalOpen, onClose: toggleRemoveModal, modalContainerClassName: (0, classNames_1.classNames)([isMobile ? "zen-filters-prioritized-modal" : ""]), title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current), children: [(0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { title: translate("Cancel"), onClick: handleCancelRemoveModal, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { title: translate("Confirm"), onClick: handleRemoveItem, type: "destructive", children: translate("Confirm") })] }), onSave ? (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, { prioritize: isMobile, isOpen: saveModalOpen, onClose: setSaveModalOpen, onSave: onSave }) : null] }));
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
+  const contentDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-filters-saved-popup__content");
+  const {
+    items,
+    active,
+    onRemove,
+    onApply,
+    onSave
+  } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
+  const [savedChipOpen, setSavedChipOpen] = (0, react_1.useState)(false);
+  const [removeModalOpen, setRemoveModalOpen] = (0, react_1.useState)(false);
+  const [saveModalOpen, setSaveModalOpen] = (0, react_1.useState)(false);
+  const savedChipRef = (0, react_1.useRef)(null);
+  const removeChipRef = (0, react_1.useRef)("");
+  const savedFiltersRef = (0, react_1.useRef)(null);
+  const handleRemove = (0, react_1.useCallback)(itemKey => () => {
+    removeChipRef.current = itemKey;
+    setRemoveModalOpen(true);
+  }, []);
+  const toggleSavedChipOpen = (0, react_1.useCallback)(() => {
+    if (removeModalOpen || saveModalOpen) {
+      return;
+    }
+    setSavedChipOpen(prev => !prev);
+  }, [removeModalOpen, saveModalOpen]);
+  const toggleRemoveModal = (0, react_1.useCallback)(() => {
+    setRemoveModalOpen(prev => !prev);
+  }, []);
+  const toggleSaveModal = (0, react_1.useCallback)(() => {
+    setSaveModalOpen(prev => !prev);
+  }, []);
+  const handleCancelRemoveModal = (0, react_1.useCallback)(() => {
+    setRemoveModalOpen(false);
+    removeChipRef.current = "";
+  }, []);
+  const handleRemoveItem = (0, react_1.useCallback)(e => {
+    e.stopPropagation();
+    setRemoveModalOpen(false);
+    onRemove && onRemove(removeChipRef.current);
+    removeChipRef.current = "";
+  }, [onRemove]);
+  const handleFilterSelect = (0, react_1.useCallback)(e => {
+    var _a;
+    const filterName = e.target.dataset.filterName;
+    if (!filterName) {
+      return;
+    }
+    onApply && onApply(filterName);
+    setSavedChipOpen(prev => !prev);
+    (_a = savedChipRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [onApply]);
+  const handleSaveItemKeyDown = (0, react_1.useCallback)(e => {
+    if (e.key === "ArrowDown") {
+      const nextItem = (0, keyboardHelpers_1.getFirstFocusableItem)(savedFiltersRef.current);
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+      return;
+    }
+  }, [savedFiltersRef]);
+  const handleItemKeyDown = (0, react_1.useCallback)(e => {
+    var _a;
+    if (e.key === "Enter" || e.key === " ") {
+      const filterName = e.currentTarget.dataset.filterName;
+      const isRemoveButton = e.target.dataset.removeButton;
+      if (isRemoveButton || !filterName) {
+        return;
+      }
+      onApply && onApply(filterName);
+      setSavedChipOpen(prev => !prev);
+      (_a = savedChipRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      return;
+    }
+    const isListItem = e.target instanceof HTMLElement && e.target.dataset.listItem === "true";
+    const isButtonItem = e.target instanceof HTMLElement && e.target.dataset.removeButton === "true";
+    const getSelector = () => {
+      if (isListItem) {
+        return `[data-list-item="true"]`;
+      }
+      if (isButtonItem) {
+        return `[data-remove-button="true"]`;
+      }
+      return undefined;
+    };
+    if (e.key === "ArrowDown") {
+      const nextItem = (0, keyboardHelpers_1.getNewFocusableItem)(1, savedFiltersRef.current, getSelector());
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, savedFiltersRef.current, getSelector());
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+      return;
+    }
+    if (e.key === "ArrowRight" && isListItem) {
+      const nextItem = (0, keyboardHelpers_1.getNewFocusableItem)(1, savedFiltersRef.current, `[data-remove-button="true"]`);
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+      return;
+    }
+    if (e.key === "ArrowLeft" && isButtonItem) {
+      const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, savedFiltersRef.current, `[data-list-item="true"]`);
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+      return;
+    }
+  }, [onApply]);
+  const saveButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("button", {
+    type: "button",
+    onKeyDown: handleSaveItemKeyDown,
+    onClick: toggleSaveModal,
+    className: "zen-filters-saved-popup__action-button",
+    title: translate("Save new filters"),
+    children: [(0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, {
+      description: translate("Save"),
+      className: "svgIcon",
+      size: iconDriveClassName ? "huge" : "large"
+    }), (0, jsx_runtime_1.jsx)("div", {
+      className: (0, classNames_1.classNames)(["", "zen-ellipsis"]),
+      children: translate("Save new")
+    })]
+  }), [iconDriveClassName, toggleSaveModal, translate, handleSaveItemKeyDown]);
+  const memoizedItems = (0, react_1.useMemo)(() => Array.from(items), [items]);
+  const popupContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-filters-saved-popup__content", contentDriveClassName || ""]),
+    children: [onSave ? saveButton : null, (0, jsx_runtime_1.jsx)("div", {
+      ref: savedFiltersRef,
+      onClick: handleFilterSelect,
+      children: memoizedItems.map(filterName => (0, jsx_runtime_1.jsxs)("div", {
+        tabIndex: 0,
+        onKeyDown: handleItemKeyDown,
+        "data-list-item": true,
+        "data-filter-name": filterName,
+        className: (0, classNames_1.classNames)(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]),
+        children: [(0, jsx_runtime_1.jsx)("div", {
+          className: "zen-filters-saved-popup__name",
+          "data-filter-name": filterName,
+          children: filterName
+        }), onRemove ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+          "data-remove-button": true,
+          type: "tertiary-black",
+          className: "zen-filters-saved-popup__action",
+          onClick: handleRemove(filterName),
+          title: translate("Remove"),
+          "aria-label": translate("Remove"),
+          children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+            size: iconDriveClassName ? "huge" : "large",
+            className: "zen-filters-saved-popup__close-icon"
+          })
+        }) : null]
+      }, filterName))
+    })]
+  }), [active, contentDriveClassName, handleFilterSelect, handleItemKeyDown, handleRemove, iconDriveClassName, memoizedItems, onRemove, onSave, saveButton, translate]);
+  const memoizedStatus = (0, react_1.useMemo)(() => active.size > 0 && Array.from(items).some(item => active.has(item)) ? "active" : undefined, [active, items]);
+  const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, {
+    isOpen: savedChipOpen,
+    className: (0, classNames_1.classNames)(["zen-filters-saved-popup"]),
+    onOpenChange: toggleSavedChipOpen,
+    useTrapFocusWithTrigger: "on",
+    shouldHoldScroll: true,
+    triggerRef: savedChipRef,
+    ariaLabel: translate("Saved filters"),
+    recalculateOnScroll: true,
+    children: popupContent
+  }), [popupContent, savedChipOpen, toggleSavedChipOpen, savedChipRef, translate]);
+  const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
+    label: translate("Saved filters"),
+    triggerRef: savedChipRef,
+    isOpen: savedChipOpen,
+    onHidePanel: toggleSavedChipOpen,
+    onCloseClick: toggleSavedChipOpen,
+    useTrapFocusWithTrigger: false,
+    children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, {
+      children: translate("Saved filters")
+    }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, {
+      className: "zen-filters-saved-chip__mobile-sheet",
+      children: popupContent
+    })]
+  }), [popupContent, savedChipOpen, toggleSavedChipOpen, translate]);
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)(chip_1.Chip, {
+      className: "zen-filters-saved-chip",
+      isOpen: savedChipOpen,
+      status: memoizedStatus,
+      onClick: toggleSavedChipOpen,
+      title: translate("Saved filters"),
+      icon: iconDisk_1.IconDisk,
+      triggerRef: savedChipRef
+    }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsxs)(modal_1.Modal, {
+      isOpen: removeModalOpen,
+      onClose: toggleRemoveModal,
+      modalContainerClassName: (0, classNames_1.classNames)([isMobile ? "zen-filters-prioritized-modal" : ""]),
+      title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current),
+      children: [(0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, {
+        title: translate("Cancel"),
+        onClick: handleCancelRemoveModal,
+        children: translate("Cancel")
+      }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, {
+        title: translate("Confirm"),
+        onClick: handleRemoveItem,
+        type: "destructive",
+        children: translate("Confirm")
+      })]
+    }), onSave ? (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, {
+      prioritize: isMobile,
+      isOpen: saveModalOpen,
+      onClose: setSaveModalOpen,
+      onSave: onSave
+    }) : null]
+  });
 };
-exports.FiltersSavedChipComponent = FiltersSavedChipComponent;
+exports.FiltersSavedChipComponent = FiltersSavedChipComponent;

package/dist/filters/components/filtersSearchItemData.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.FiltersSearchItemData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -8,52 +14,126 @@ const button_1 = require("../../button/button");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const isActiveElement_1 = require("../../list/utils/isActiveElement");
 const iconClose_1 = require("../../icons/iconClose");
-const FiltersSearchItemData = ({ id, icon, isActive, iconClassName, name, secondary, onClick, onClose, isDrive, isMobile }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const driveClassName = (0, react_1.useMemo)(() => isDrive
-        ? isMobile ? "zen-search-item-data--drive" : "zen-search-item-data--drive-tablet"
-        : "", [isDrive, isMobile]);
-    const renderIcon = (0, react_1.useCallback)((iconComponent, iClassName, className) => {
-        if (typeof iconComponent === "function") {
-            return (0, react_1.createElement)(iconComponent, { size: "large", className: (0, classNames_1.classNames)([className || "", iClassName || ""]) });
-        }
-        return iconComponent;
-    }, []);
-    const handleClick = (0, react_1.useCallback)((e) => {
-        if (!onClick) {
-            return;
-        }
-        if (e.target instanceof HTMLElement && (0, isActiveElement_1.isActiveElement)(e.target)) {
-            return;
-        }
-        onClick();
-    }, [onClick]);
-    const handleKeyDown = (0, react_1.useCallback)((e) => {
-        if (!onClick) {
-            return;
-        }
-        if (e.key === "Enter" || e.key === " ") {
-            const isCloseButton = e.target instanceof HTMLElement && (e.target.dataset.closeButton === "true");
-            if (isCloseButton) {
-                e.preventDefault();
-                e.stopPropagation();
-                onClose === null || onClose === void 0 ? void 0 : onClose();
-                return;
-            }
-            e.preventDefault();
-            onClick();
-        }
-    }, [onClick, onClose]);
-    const handleClose = (0, react_1.useCallback)((e) => {
-        if (!onClose) {
-            return;
-        }
-        console.log("handleClose");
+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 FiltersSearchItemData = ({
+  id,
+  icon,
+  isActive,
+  iconClassName,
+  name,
+  secondary,
+  onClick,
+  onClose,
+  isDrive,
+  isMobile
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const driveClassName = (0, react_1.useMemo)(() => isDrive ? isMobile ? "zen-search-item-data--drive" : "zen-search-item-data--drive-tablet" : "", [isDrive, isMobile]);
+  const renderIcon = (0, react_1.useCallback)((iconComponent, iClassName, className) => {
+    if (typeof iconComponent === "function") {
+      return (0, react_1.createElement)(iconComponent, {
+        size: "large",
+        className: (0, classNames_1.classNames)([className || "", iClassName || ""])
+      });
+    }
+    return iconComponent;
+  }, []);
+  const handleClick = (0, react_1.useCallback)(e => {
+    if (!onClick) {
+      return;
+    }
+    if (e.target instanceof HTMLElement && (0, isActiveElement_1.isActiveElement)(e.target)) {
+      return;
+    }
+    onClick();
+  }, [onClick]);
+  const handleKeyDown = (0, react_1.useCallback)(e => {
+    if (!onClick) {
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      const isCloseButton = e.target instanceof HTMLElement && e.target.dataset.closeButton === "true";
+      if (isCloseButton) {
         e.preventDefault();
         e.stopPropagation();
-        onClose();
-    }, [onClose]);
-    return (0, jsx_runtime_1.jsx)("li", { tabIndex: 0, className: (0, classNames_1.classNames)(["zen-search-item-data", isActive ? "zen-search-item-data--active" : "",
-            onClick ? "zen-search-item-data--clickable" : "", driveClassName || ""]), "data-list-item-id": id, onClick: handleClick, onKeyDown: handleKeyDown, "data-list-item": true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__main", children: [icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-search-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__main-data", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__identifier", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-search-item-data__name", children: name }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-search-item-data__secondary", children: secondary }) : null] }), onClose ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-search-item-data__close", "data-close-button": true, title: translate("Close"), "aria-label": translate("Close"), onClick: handleClose, children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: "large", className: "zen-search-item-data__close-icon" }) }) : null] })] }) }, id);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        return;
+      }
+      e.preventDefault();
+      onClick();
+    }
+  }, [onClick, onClose]);
+  const handleClose = (0, react_1.useCallback)(e => {
+    if (!onClose) {
+      return;
+    }
+    console.log("handleClose");
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  }, [onClose]);
+  return (0, jsx_runtime_1.jsx)("li", {
+    tabIndex: 0,
+    className: (0, classNames_1.classNames)(["zen-search-item-data", isActive ? "zen-search-item-data--active" : "", onClick ? "zen-search-item-data--clickable" : "", driveClassName || ""]),
+    "data-list-item-id": id,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    "data-list-item": true,
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-search-item-data__main",
+      children: [icon ? (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-search-item-data__icon", iconClassName || ""]),
+        children: renderIcon(icon)
+      }) : null, (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-search-item-data__main-data",
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-search-item-data__identifier",
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: "zen-search-item-data__name",
+            children: name
+          }), secondary ? (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-search-item-data__secondary",
+            children: secondary
+          }) : null]
+        }), onClose ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+          type: "tertiary-black",
+          className: "zen-search-item-data__close",
+          "data-close-button": true,
+          title: translate("Close"),
+          "aria-label": translate("Close"),
+          onClick: handleClose,
+          children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+            size: "large",
+            className: "zen-search-item-data__close-icon"
+          })
+        }) : null]
+      })]
+    })
+  }, id);
 };
-exports.FiltersSearchItemData = FiltersSearchItemData;
+exports.FiltersSearchItemData = FiltersSearchItemData;