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

package/esm/filters/components/filtersSavedChipComponent.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 { useCallback, useMemo, useRef, useState } from "react";
 import { Chip } from "../../chip/chip";
@@ -14,111 +15,315 @@ import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { MobileSheet } from "../../mobileSheet/mobileSheet";
 import { getFirstFocusableItem, getNewFocusableItem } from "../../utils/keyboardHelpers";
+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");
 export const FiltersSavedChipComponent = () => {
-    const { translate } = useLanguage();
-    const isMobile = useMobile();
-    const iconDriveClassName = useDriveClassName("icon");
-    const contentDriveClassName = useDriveClassName("zen-filters-saved-popup__content");
-    const { items, active, onRemove, onApply, onSave } = useFiltersSavedItems();
-    const [savedChipOpen, setSavedChipOpen] = useState(false);
-    const [removeModalOpen, setRemoveModalOpen] = useState(false);
-    const [saveModalOpen, setSaveModalOpen] = useState(false);
-    const savedChipRef = useRef(null);
-    const removeChipRef = useRef("");
-    const savedFiltersRef = useRef(null);
-    const handleRemove = useCallback((itemKey) => () => {
-        removeChipRef.current = itemKey;
-        setRemoveModalOpen(true);
-    }, []);
-    const toggleSavedChipOpen = useCallback(() => {
-        if (removeModalOpen || saveModalOpen) {
-            return;
-        }
-        setSavedChipOpen((prev) => !prev);
-    }, [removeModalOpen, saveModalOpen]);
-    const toggleRemoveModal = useCallback(() => {
-        setRemoveModalOpen((prev) => !prev);
-    }, []);
-    const toggleSaveModal = useCallback(() => {
-        setSaveModalOpen((prev) => !prev);
-    }, []);
-    const handleCancelRemoveModal = useCallback(() => {
-        setRemoveModalOpen(false);
-        removeChipRef.current = "";
-    }, []);
-    const handleRemoveItem = useCallback((e) => {
-        e.stopPropagation();
-        setRemoveModalOpen(false);
-        onRemove && onRemove(removeChipRef.current);
-        removeChipRef.current = "";
-    }, [onRemove]);
-    const handleFilterSelect = 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 = useCallback((e) => {
-        if (e.key === "ArrowDown") {
-            const nextItem = getFirstFocusableItem(savedFiltersRef.current);
-            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
-            return;
-        }
-    }, [savedFiltersRef]);
-    const handleItemKeyDown = 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 = getNewFocusableItem(1, savedFiltersRef.current, getSelector());
-            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
-            return;
-        }
-        if (e.key === "ArrowUp") {
-            const prevItem = getNewFocusableItem(-1, savedFiltersRef.current, getSelector());
-            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
-            return;
-        }
-        if (e.key === "ArrowRight" && isListItem) {
-            const nextItem = 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 = getNewFocusableItem(-1, savedFiltersRef.current, `[data-list-item="true"]`);
-            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
-            return;
-        }
-    }, [onApply]);
-    const saveButton = useMemo(() => _jsxs("button", { type: "button", onKeyDown: handleSaveItemKeyDown, onClick: toggleSaveModal, className: "zen-filters-saved-popup__action-button", title: translate("Save new filters"), children: [_jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), _jsx("div", { className: classNames(["", "zen-ellipsis"]), children: translate("Save new") })] }), [iconDriveClassName, toggleSaveModal, translate, handleSaveItemKeyDown]);
-    const memoizedItems = useMemo(() => Array.from(items), [items]);
-    const popupContent = useMemo(() => _jsxs("div", { className: classNames(["zen-filters-saved-popup__content", contentDriveClassName || ""]), children: [onSave ? saveButton : null, _jsx("div", { ref: savedFiltersRef, onClick: handleFilterSelect, children: memoizedItems.map((filterName) => (_jsxs("div", { tabIndex: 0, onKeyDown: handleItemKeyDown, "data-list-item": true, "data-filter-name": filterName, className: classNames(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]), children: [_jsx("div", { className: "zen-filters-saved-popup__name", "data-filter-name": filterName, children: filterName }), onRemove ? _jsx(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: _jsx(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 = useMemo(() => (active.size > 0 && Array.from(items).some(item => active.has(item)) ? "active" : undefined), [active, items]);
-    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: savedChipOpen, className: 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 = useMemo(() => _jsxs(MobileSheet, { label: translate("Saved filters"), triggerRef: savedChipRef, isOpen: savedChipOpen, onHidePanel: toggleSavedChipOpen, onCloseClick: toggleSavedChipOpen, useTrapFocusWithTrigger: false, children: [_jsx(MobileSheet.Title, { children: translate("Saved filters") }), _jsx(MobileSheet.Content, { className: "zen-filters-saved-chip__mobile-sheet", children: popupContent })] }), [popupContent, savedChipOpen, toggleSavedChipOpen, translate]);
-    return (_jsxs(_Fragment, { children: [_jsx(Chip, { className: "zen-filters-saved-chip", isOpen: savedChipOpen, status: memoizedStatus, onClick: toggleSavedChipOpen, title: translate("Saved filters"), icon: IconDisk, triggerRef: savedChipRef }), isMobile ? memoizedMobileView : memoizedDesktopView, _jsxs(Modal, { isOpen: removeModalOpen, onClose: toggleRemoveModal, modalContainerClassName: classNames([isMobile ? "zen-filters-prioritized-modal" : ""]), title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current), children: [_jsx(Modal.SecondaryButton, { title: translate("Cancel"), onClick: handleCancelRemoveModal, children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { title: translate("Confirm"), onClick: handleRemoveItem, type: "destructive", children: translate("Confirm") })] }), onSave ? _jsx(FiltersSaveModal, { prioritize: isMobile, isOpen: saveModalOpen, onClose: setSaveModalOpen, onSave: onSave }) : null] }));
-};
+  const {
+    translate
+  } = useLanguage();
+  const isMobile = useMobile();
+  const iconDriveClassName = useDriveClassName("icon");
+  const contentDriveClassName = useDriveClassName("zen-filters-saved-popup__content");
+  const {
+    items,
+    active,
+    onRemove,
+    onApply,
+    onSave
+  } = useFiltersSavedItems();
+  const [savedChipOpen, setSavedChipOpen] = useState(false);
+  const [removeModalOpen, setRemoveModalOpen] = useState(false);
+  const [saveModalOpen, setSaveModalOpen] = useState(false);
+  const savedChipRef = useRef(null);
+  const removeChipRef = useRef("");
+  const savedFiltersRef = useRef(null);
+  const handleRemove = useCallback(itemKey => () => {
+    removeChipRef.current = itemKey;
+    setRemoveModalOpen(true);
+  }, []);
+  const toggleSavedChipOpen = useCallback(() => {
+    if (removeModalOpen || saveModalOpen) {
+      return;
+    }
+    setSavedChipOpen(prev => !prev);
+  }, [removeModalOpen, saveModalOpen]);
+  const toggleRemoveModal = useCallback(() => {
+    setRemoveModalOpen(prev => !prev);
+  }, []);
+  const toggleSaveModal = useCallback(() => {
+    setSaveModalOpen(prev => !prev);
+  }, []);
+  const handleCancelRemoveModal = useCallback(() => {
+    setRemoveModalOpen(false);
+    removeChipRef.current = "";
+  }, []);
+  const handleRemoveItem = useCallback(e => {
+    e.stopPropagation();
+    setRemoveModalOpen(false);
+    onRemove && onRemove(removeChipRef.current);
+    removeChipRef.current = "";
+  }, [onRemove]);
+  const handleFilterSelect = 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 = useCallback(e => {
+    if (e.key === "ArrowDown") {
+      const nextItem = getFirstFocusableItem(savedFiltersRef.current);
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+      return;
+    }
+  }, [savedFiltersRef]);
+  const handleItemKeyDown = 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 = getNewFocusableItem(1, savedFiltersRef.current, getSelector());
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      const prevItem = getNewFocusableItem(-1, savedFiltersRef.current, getSelector());
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+      return;
+    }
+    if (e.key === "ArrowRight" && isListItem) {
+      const nextItem = 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 = getNewFocusableItem(-1, savedFiltersRef.current, `[data-list-item="true"]`);
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+      return;
+    }
+  }, [onApply]);
+  const saveButton = useMemo(() => _jsxs("button", {
+    type: "button",
+    onKeyDown: handleSaveItemKeyDown,
+    onClick: toggleSaveModal,
+    className: "zen-filters-saved-popup__action-button",
+    title: translate("Save new filters"),
+    children: [_jsx(IconDisk, {
+      description: translate("Save"),
+      className: "svgIcon",
+      size: iconDriveClassName ? "huge" : "large"
+    }), _jsx("div", {
+      className: classNames(["", "zen-ellipsis"]),
+      children: translate("Save new")
+    })]
+  }), [iconDriveClassName, toggleSaveModal, translate, handleSaveItemKeyDown]);
+  const memoizedItems = useMemo(() => Array.from(items), [items]);
+  const popupContent = useMemo(() => _jsxs("div", {
+    className: classNames(["zen-filters-saved-popup__content", contentDriveClassName || ""]),
+    children: [onSave ? saveButton : null, _jsx("div", {
+      ref: savedFiltersRef,
+      onClick: handleFilterSelect,
+      children: memoizedItems.map(filterName => _jsxs("div", {
+        tabIndex: 0,
+        onKeyDown: handleItemKeyDown,
+        "data-list-item": true,
+        "data-filter-name": filterName,
+        className: classNames(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]),
+        children: [_jsx("div", {
+          className: "zen-filters-saved-popup__name",
+          "data-filter-name": filterName,
+          children: filterName
+        }), onRemove ? _jsx(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: _jsx(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 = useMemo(() => active.size > 0 && Array.from(items).some(item => active.has(item)) ? "active" : undefined, [active, items]);
+  const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, {
+    isOpen: savedChipOpen,
+    className: 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 = useMemo(() => _jsxs(MobileSheet, {
+    label: translate("Saved filters"),
+    triggerRef: savedChipRef,
+    isOpen: savedChipOpen,
+    onHidePanel: toggleSavedChipOpen,
+    onCloseClick: toggleSavedChipOpen,
+    useTrapFocusWithTrigger: false,
+    children: [_jsx(MobileSheet.Title, {
+      children: translate("Saved filters")
+    }), _jsx(MobileSheet.Content, {
+      className: "zen-filters-saved-chip__mobile-sheet",
+      children: popupContent
+    })]
+  }), [popupContent, savedChipOpen, toggleSavedChipOpen, translate]);
+  return _jsxs(_Fragment, {
+    children: [_jsx(Chip, {
+      className: "zen-filters-saved-chip",
+      isOpen: savedChipOpen,
+      status: memoizedStatus,
+      onClick: toggleSavedChipOpen,
+      title: translate("Saved filters"),
+      icon: IconDisk,
+      triggerRef: savedChipRef
+    }), isMobile ? memoizedMobileView : memoizedDesktopView, _jsxs(Modal, {
+      isOpen: removeModalOpen,
+      onClose: toggleRemoveModal,
+      modalContainerClassName: classNames([isMobile ? "zen-filters-prioritized-modal" : ""]),
+      title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current),
+      children: [_jsx(Modal.SecondaryButton, {
+        title: translate("Cancel"),
+        onClick: handleCancelRemoveModal,
+        children: translate("Cancel")
+      }), _jsx(Modal.PrimaryButton, {
+        title: translate("Confirm"),
+        onClick: handleRemoveItem,
+        type: "destructive",
+        children: translate("Confirm")
+      })]
+    }), onSave ? _jsx(FiltersSaveModal, {
+      prioritize: isMobile,
+      isOpen: saveModalOpen,
+      onClose: setSaveModalOpen,
+      onSave: onSave
+    }) : null]
+  });
+};

package/esm/filters/components/filtersSearchItemData.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useCallback, useMemo } from "react";
 import { useLanguage } from "../../utils/localization/useLanguage";
@@ -5,51 +6,125 @@ import { Button } from "../../button/button";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { isActiveElement } from "../../list/utils/isActiveElement";
 import { IconClose } from "../../icons/iconClose";
-export const FiltersSearchItemData = ({ id, icon, isActive, iconClassName, name, secondary, onClick, onClose, isDrive, isMobile }) => {
-    const { translate } = useLanguage();
-    const driveClassName = useMemo(() => isDrive
-        ? isMobile ? "zen-search-item-data--drive" : "zen-search-item-data--drive-tablet"
-        : "", [isDrive, isMobile]);
-    const renderIcon = useCallback((iconComponent, iClassName, className) => {
-        if (typeof iconComponent === "function") {
-            return createElement(iconComponent, { size: "large", className: classNames([className || "", iClassName || ""]) });
-        }
-        return iconComponent;
-    }, []);
-    const handleClick = useCallback((e) => {
-        if (!onClick) {
-            return;
-        }
-        if (e.target instanceof HTMLElement && isActiveElement(e.target)) {
-            return;
-        }
-        onClick();
-    }, [onClick]);
-    const handleKeyDown = 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 = 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");
+export const FiltersSearchItemData = ({
+  id,
+  icon,
+  isActive,
+  iconClassName,
+  name,
+  secondary,
+  onClick,
+  onClose,
+  isDrive,
+  isMobile
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const driveClassName = useMemo(() => isDrive ? isMobile ? "zen-search-item-data--drive" : "zen-search-item-data--drive-tablet" : "", [isDrive, isMobile]);
+  const renderIcon = useCallback((iconComponent, iClassName, className) => {
+    if (typeof iconComponent === "function") {
+      return createElement(iconComponent, {
+        size: "large",
+        className: classNames([className || "", iClassName || ""])
+      });
+    }
+    return iconComponent;
+  }, []);
+  const handleClick = useCallback(e => {
+    if (!onClick) {
+      return;
+    }
+    if (e.target instanceof HTMLElement && isActiveElement(e.target)) {
+      return;
+    }
+    onClick();
+  }, [onClick]);
+  const handleKeyDown = 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 _jsx("li", { tabIndex: 0, className: 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: _jsxs("div", { className: "zen-search-item-data__main", children: [icon ? _jsx("div", { className: classNames(["zen-search-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, _jsxs("div", { className: "zen-search-item-data__main-data", children: [_jsxs("div", { className: "zen-search-item-data__identifier", children: [_jsx("div", { className: "zen-search-item-data__name", children: name }), secondary ? _jsx("div", { className: "zen-search-item-data__secondary", children: secondary }) : null] }), onClose ? _jsx(Button, { type: "tertiary-black", className: "zen-search-item-data__close", "data-close-button": true, title: translate("Close"), "aria-label": translate("Close"), onClick: handleClose, children: _jsx(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 = useCallback(e => {
+    if (!onClose) {
+      return;
+    }
+    console.log("handleClose");
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  }, [onClose]);
+  return _jsx("li", {
+    tabIndex: 0,
+    className: 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: _jsxs("div", {
+      className: "zen-search-item-data__main",
+      children: [icon ? _jsx("div", {
+        className: classNames(["zen-search-item-data__icon", iconClassName || ""]),
+        children: renderIcon(icon)
+      }) : null, _jsxs("div", {
+        className: "zen-search-item-data__main-data",
+        children: [_jsxs("div", {
+          className: "zen-search-item-data__identifier",
+          children: [_jsx("div", {
+            className: "zen-search-item-data__name",
+            children: name
+          }), secondary ? _jsx("div", {
+            className: "zen-search-item-data__secondary",
+            children: secondary
+          }) : null]
+        }), onClose ? _jsx(Button, {
+          type: "tertiary-black",
+          className: "zen-search-item-data__close",
+          "data-close-button": true,
+          title: translate("Close"),
+          "aria-label": translate("Close"),
+          onClick: handleClose,
+          children: _jsx(IconClose, {
+            size: "large",
+            className: "zen-search-item-data__close-icon"
+          })
+        }) : null]
+      })]
+    })
+  }, id);
+};