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

package/esm/favoriteButton/favoriteButton.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
@@ -6,12 +7,55 @@ import { IconStarFilled } from "../icons/iconStarFilled";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useDrive } from "../utils/theme/useDrive";
-export const FavoriteButton = ({ isFavorite, onChange, className }) => {
-    const { translate } = useLanguage();
-    const driveClassName = useDriveClassName("zen-favorite-button");
-    const isDrive = useDrive();
-    const iconSize = useMemo(() => isDrive ? "huge" : "large", [isDrive]);
-    const filledClassName = isFavorite ? "zen-favorite-button--filled" : "";
-    const onClick = useCallback(() => onChange(!isFavorite), [isFavorite, onChange]);
-    return (_jsxs("button", { onClick: onClick, className: classNames(["zen-favorite-button", driveClassName || "", filledClassName, className || ""]), title: translate("Favorite"), "aria-label": translate("Favorite"), "aria-pressed": isFavorite, children: [_jsx(IconStar, { size: iconSize, className: "zen-favorite-button__empty" }), _jsx(IconStarFilled, { size: iconSize, className: "zen-favorite-button__filled" })] }));
-};
+injectString("cs", "Favorite", "Obl\xEDben\xE9");
+injectString("da-DK", "Favorite", "Favorit");
+injectString("de", "Favorite", "Favorit");
+injectString("en", "Favorite", "Favorite");
+injectString("es", "Favorite", "Favorito");
+injectString("fi-FI", "Favorite", "Suosikki");
+injectString("fr", "Favorite", "Favori");
+injectString("fr-FR", "Favorite", "Favori");
+injectString("hu-HU", "Favorite", "Kedvenc");
+injectString("id", "Favorite", "Favorit");
+injectString("it", "Favorite", "Preferito");
+injectString("ja", "Favorite", "\u304A\u6C17\u306B\u5165\u308A");
+injectString("ko-KR", "Favorite", "\uC990\uACA8\uCC3E\uAE30");
+injectString("ms", "Favorite", "Kegemaran");
+injectString("nb-NO", "Favorite", "Favoritt");
+injectString("nl", "Favorite", "Favoriet");
+injectString("pl", "Favorite", "Ulubione");
+injectString("pt-BR", "Favorite", "Favorito");
+injectString("sk-SK", "Favorite", "Ob\u013E\xFAben\xE9");
+injectString("sv", "Favorite", "Favorit");
+injectString("th", "Favorite", "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E42\u0E1B\u0E23\u0E14");
+injectString("tr", "Favorite", "Favori");
+injectString("zh-Hans", "Favorite", "\u6536\u85CF");
+injectString("zh-TW", "Favorite", "\u6211\u7684\u6700\u611B");
+export const FavoriteButton = ({
+  isFavorite,
+  onChange,
+  className
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const driveClassName = useDriveClassName("zen-favorite-button");
+  const isDrive = useDrive();
+  const iconSize = useMemo(() => isDrive ? "huge" : "large", [isDrive]);
+  const filledClassName = isFavorite ? "zen-favorite-button--filled" : "";
+  const onClick = useCallback(() => onChange(!isFavorite), [isFavorite, onChange]);
+  return _jsxs("button", {
+    onClick: onClick,
+    className: classNames(["zen-favorite-button", driveClassName || "", filledClassName, className || ""]),
+    title: translate("Favorite"),
+    "aria-label": translate("Favorite"),
+    "aria-pressed": isFavorite,
+    children: [_jsx(IconStar, {
+      size: iconSize,
+      className: "zen-favorite-button__empty"
+    }), _jsx(IconStarFilled, {
+      size: iconSize,
+      className: "zen-favorite-button__filled"
+    })]
+  });
+};

package/esm/filters/components/filtersContainer.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
@@ -10,64 +11,143 @@ import { IconClose } from "../../icons/iconClose";
 import { useChipStatus } from "../../chip/chipStatusProvider";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
-export const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersClickHandler, hasSavedFilters, filtersForCalculation, children, filtersChipRef }) => {
-    const chipStatus = useChipStatus();
-    const { translate } = useLanguage();
-    const isMobile = useMobile();
-    const numberOfChangedFilters = useMemo(() => {
-        const suppressedFilters = new Set();
-        filtersForCalculation.forEach(filter => {
-            const filterProps = filter.props;
-            const inhibited = filterProps.inhibit;
-            if (inhibited) {
-                inhibited.forEach((id) => suppressedFilters.add(id));
-            }
-        });
-        const filteredState = getFiltersState(filtersForCalculation.filter(f => !suppressedFilters.has(f.props.id)));
-        return getNumberOfChangedFilters(filteredState);
-    }, [filtersForCalculation]);
-    const filtersChipComponent = useMemo(() => _jsx(Chip, { quantity: numberOfChangedFilters, isOpen: false, status: numberOfChangedFilters > 0 ? chipStatus || "active" : undefined, onClick: filtersClickHandler, icon: IconFilter, title: translate("All Filters"), triggerRef: filtersChipRef, children: "+" }), [numberOfChangedFilters, chipStatus, filtersClickHandler, translate, filtersChipRef]);
-    const childrenSignature = useMemo(() => {
-        const childrenArray = React.Children.toArray(children).filter(Boolean);
-        return childrenArray
-            .map(child => {
-            if (!React.isValidElement(child)) {
-                return "invalid";
-            }
-            const childId = child.props.id || "no-id";
-            const state = child.props.state;
-            const defaultState = child.props.defaultState;
-            const childPropsQuery = JSON.stringify(child.props.fetchState || {});
-            const childPropsDataItems = JSON.stringify(child.props.dataItems || "no-data-items");
-            const stateHash = createStateHash(state);
-            const defaultStateHash = createStateHash(defaultState);
-            const propsHash = createPropsHash(child.props);
-            return `${childId}|${stateHash}|${defaultStateHash}|${propsHash}|${childPropsQuery}|${childPropsDataItems}`;
-        })
-            .join("||");
-    }, [children]);
-    const memoizedChildren = useMemo(() => stabilizeChildrenWithId(children).filter(Boolean), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [childrenSignature]);
-    const handleRemovalClick = useCallback(() => {
-        const defaultState = createStateObject(filtersForCalculation, "defaultState");
-        filtersForCalculation.forEach((child) => {
-            var _a;
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (child) {
-                const childProps = child.props;
-                if (childProps.id) {
-                    const childDefaultState = defaultState[childProps.id];
-                    (_a = childProps.onChange) === null || _a === void 0 ? void 0 : _a.call(childProps, childDefaultState);
-                }
-            }
-        });
-        onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(false);
-        filtersChipRef.current.focus();
-    }, [filtersChipRef, filtersForCalculation, onPinChange]);
-    const chipRemovalComponent = useMemo(() => numberOfChangedFilters ?
-        _jsx(Chip, { title: translate("Clear"), className: "zen-filters-container__removal-chip", active: false, status: isPinned ? "accent" : undefined, onChange: handleRemovalClick, icon: IconClose })
-        : null, [isPinned, handleRemovalClick, translate, numberOfChangedFilters]);
-    const memoizedFiltersElements = useMemo(() => _jsxs(_Fragment, { children: [memoizedChildren, hasSavedFilters ? _jsx(FiltersSavedChipComponent, {}) : null, filtersChipComponent, chipRemovalComponent] }), [chipRemovalComponent, filtersChipComponent, hasSavedFilters, memoizedChildren]);
-    return _jsx("div", { className: classNames(["zen-filters-container", isMobile ? "zen-filters-container--mobile" : "", className || ""]), children: isMobile ? _jsx("div", { className: "zen-filters-container__mobile-scroll-wrapper", children: memoizedFiltersElements }) : memoizedFiltersElements });
-};
+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", "Clear", "Vymazat");
+injectString("da-DK", "Clear", "Ryd");
+injectString("de", "Clear", "L\xF6schen");
+injectString("en", "Clear", "Clear");
+injectString("es", "Clear", "Borrar");
+injectString("fi-FI", "Clear", "Tyhjenn\xE4");
+injectString("fr", "Clear", "Effacer");
+injectString("fr-FR", "Clear", "Effacer");
+injectString("hu-HU", "Clear", "T\xF6r\xF6ld.");
+injectString("id", "Clear", "Hapus");
+injectString("it", "Clear", "Cancella");
+injectString("ja", "Clear", "\u30AF\u30EA\u30A2");
+injectString("ko-KR", "Clear", "\uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear", "Kosongkan");
+injectString("nb-NO", "Clear", "T\xF8m");
+injectString("nl", "Clear", "Wissen");
+injectString("pl", "Clear", "Wyczy\u015B\u0107");
+injectString("pt-BR", "Clear", "Limpar");
+injectString("sk-SK", "Clear", "Vyma\u017E");
+injectString("sv", "Clear", "Rensa");
+injectString("th", "Clear", "\u0E25\u0E49\u0E32\u0E07");
+injectString("tr", "Clear", "Temizle");
+injectString("zh-Hans", "Clear", "\u6E05\u9664");
+injectString("zh-TW", "Clear", "\u6E05\u9664");
+export const FiltersContainer = ({
+  className,
+  isPinned = false,
+  onPinChange,
+  filtersClickHandler,
+  hasSavedFilters,
+  filtersForCalculation,
+  children,
+  filtersChipRef
+}) => {
+  const chipStatus = useChipStatus();
+  const {
+    translate
+  } = useLanguage();
+  const isMobile = useMobile();
+  const numberOfChangedFilters = useMemo(() => {
+    const suppressedFilters = new Set();
+    filtersForCalculation.forEach(filter => {
+      const filterProps = filter.props;
+      const inhibited = filterProps.inhibit;
+      if (inhibited) {
+        inhibited.forEach(id => suppressedFilters.add(id));
+      }
+    });
+    const filteredState = getFiltersState(filtersForCalculation.filter(f => !suppressedFilters.has(f.props.id)));
+    return getNumberOfChangedFilters(filteredState);
+  }, [filtersForCalculation]);
+  const filtersChipComponent = useMemo(() => _jsx(Chip, {
+    quantity: numberOfChangedFilters,
+    isOpen: false,
+    status: numberOfChangedFilters > 0 ? chipStatus || "active" : undefined,
+    onClick: filtersClickHandler,
+    icon: IconFilter,
+    title: translate("All Filters"),
+    triggerRef: filtersChipRef,
+    children: "+"
+  }), [numberOfChangedFilters, chipStatus, filtersClickHandler, translate, filtersChipRef]);
+  const childrenSignature = useMemo(() => {
+    const childrenArray = React.Children.toArray(children).filter(Boolean);
+    return childrenArray.map(child => {
+      if (!React.isValidElement(child)) {
+        return "invalid";
+      }
+      const childId = child.props.id || "no-id";
+      const state = child.props.state;
+      const defaultState = child.props.defaultState;
+      const childPropsQuery = JSON.stringify(child.props.fetchState || {});
+      const childPropsDataItems = JSON.stringify(child.props.dataItems || "no-data-items");
+      const stateHash = createStateHash(state);
+      const defaultStateHash = createStateHash(defaultState);
+      const propsHash = createPropsHash(child.props);
+      return `${childId}|${stateHash}|${defaultStateHash}|${propsHash}|${childPropsQuery}|${childPropsDataItems}`;
+    }).join("||");
+  }, [children]);
+  const memoizedChildren = useMemo(() => stabilizeChildrenWithId(children).filter(Boolean),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [childrenSignature]);
+  const handleRemovalClick = useCallback(() => {
+    const defaultState = createStateObject(filtersForCalculation, "defaultState");
+    filtersForCalculation.forEach(child => {
+      var _a;
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (child) {
+        const childProps = child.props;
+        if (childProps.id) {
+          const childDefaultState = defaultState[childProps.id];
+          (_a = childProps.onChange) === null || _a === void 0 ? void 0 : _a.call(childProps, childDefaultState);
+        }
+      }
+    });
+    onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(false);
+    filtersChipRef.current.focus();
+  }, [filtersChipRef, filtersForCalculation, onPinChange]);
+  const chipRemovalComponent = useMemo(() => numberOfChangedFilters ? _jsx(Chip, {
+    title: translate("Clear"),
+    className: "zen-filters-container__removal-chip",
+    active: false,
+    status: isPinned ? "accent" : undefined,
+    onChange: handleRemovalClick,
+    icon: IconClose
+  }) : null, [isPinned, handleRemovalClick, translate, numberOfChangedFilters]);
+  const memoizedFiltersElements = useMemo(() => _jsxs(_Fragment, {
+    children: [memoizedChildren, hasSavedFilters ? _jsx(FiltersSavedChipComponent, {}) : null, filtersChipComponent, chipRemovalComponent]
+  }), [chipRemovalComponent, filtersChipComponent, hasSavedFilters, memoizedChildren]);
+  return _jsx("div", {
+    className: classNames(["zen-filters-container", isMobile ? "zen-filters-container--mobile" : "", className || ""]),
+    children: isMobile ? _jsx("div", {
+      className: "zen-filters-container__mobile-scroll-wrapper",
+      children: memoizedFiltersElements
+    }) : memoizedFiltersElements
+  });
+};

package/esm/filters/components/filtersEmptySelectedList.js

@@ -1,7 +1,28 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { ImageLooking } from "../../images/imageLooking";
+injectString("en", "No Filters Selected", "No Filters Selected");
+injectString("en", "Selected filters will appear here.", "Selected filters will appear here.");
 export const FiltersEmptySelectedList = () => {
-    const { translate } = useLanguage();
-    return _jsxs("div", { className: "zen-filters-empty-selected-list", children: [_jsx(ImageLooking, { className: "zen-filters-empty-selected-list__image", title: translate("No Filters Selected"), description: translate("Selected filters will appear here.") }), _jsxs("div", { className: "zen-filters-empty-selected-list__text", children: [_jsx("div", { className: "zen-filters-empty-selected-list__header", children: translate("No Filters Selected") }), _jsx("div", { className: "zen-filters-empty-selected-list__description", children: translate("Selected filters will appear here.") })] })] });
-};
+  const {
+    translate
+  } = useLanguage();
+  return _jsxs("div", {
+    className: "zen-filters-empty-selected-list",
+    children: [_jsx(ImageLooking, {
+      className: "zen-filters-empty-selected-list__image",
+      title: translate("No Filters Selected"),
+      description: translate("Selected filters will appear here.")
+    }), _jsxs("div", {
+      className: "zen-filters-empty-selected-list__text",
+      children: [_jsx("div", {
+        className: "zen-filters-empty-selected-list__header",
+        children: translate("No Filters Selected")
+      }), _jsx("div", {
+        className: "zen-filters-empty-selected-list__description",
+        children: translate("Selected filters will appear here.")
+      })]
+    })]
+  });
+};

package/esm/filters/components/filtersSaveModal.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import { Modal } from "../../modal/modal";
@@ -6,44 +7,136 @@ import { TextInput } from "../../textInput/textInput";
 import { useFiltersSavedItems } from "./filtersSavedItemsProvider";
 import { IconDisk } from "../../icons/iconDisk";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
-export const FiltersSaveModal = ({ isOpen, onClose, onSave, className, prioritize }) => {
-    const { translate } = useLanguage();
-    const { items } = useFiltersSavedItems();
-    const iconDriveClassName = useDriveClassName("icon");
-    const [filterName, setFilterName] = useState("");
-    const toggleSaveModal = useCallback(() => {
-        onClose(!isOpen);
-    }, [isOpen, onClose]);
-    const handleCancelSaveModal = useCallback(() => {
-        onClose(false);
-        setFilterName("");
-    }, [onClose]);
-    const isValidFilterName = useCallback((name, existingNames) => {
-        if (!name) {
-            return false;
-        }
-        return !existingNames.map((item) => item.toLowerCase().trim()).includes(name.toLowerCase().trim());
-    }, []);
-    const handleApplySaveModal = useCallback(() => {
-        if (!isValidFilterName(filterName, Array.from(items))) {
-            return;
-        }
-        onClose(false);
-        onSave(filterName);
-        setFilterName("");
-    }, [filterName, isValidFilterName, items, onClose, onSave]);
-    const handleSaveModalFieldChange = useCallback((e) => {
-        setFilterName(e.target.value);
-    }, []);
-    const errorText = useMemo(() => {
-        if (!filterName) {
-            return "";
-        }
-        if (!isValidFilterName(filterName, Array.from(items))) {
-            return translate("Title already in use");
-        }
-        return "";
-    }, [filterName, isValidFilterName, items, translate]);
-    const saveIcon = useCallback(() => _jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), [iconDriveClassName, translate]);
-    return _jsxs(Modal, { focus: "content", modalContainerClassName: prioritize ? "zen-filters-prioritized-modal" : "", isOpen: isOpen, onClose: toggleSaveModal, title: translate("Save filters"), className: className || "", children: [_jsx("div", { className: "zen-filters-modal__content", children: _jsx(TextInput, { value: filterName, ariaLabel: translate("Filter title"), placeholder: translate("Filter title"), onChange: handleSaveModalFieldChange, maxLength: 100, error: errorText }) }), _jsx(Modal.SecondaryButton, { onClick: handleCancelSaveModal, title: translate("Cancel"), children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { onClick: handleApplySaveModal, icon: saveIcon, title: translate("Save"), children: translate("Save") })] });
-};
+injectString("en", "Title already in use", "Title already in use");
+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 filters", "Save filters");
+injectString("en", "Filter title", "Filter title");
+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");
+export const FiltersSaveModal = ({
+  isOpen,
+  onClose,
+  onSave,
+  className,
+  prioritize
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const {
+    items
+  } = useFiltersSavedItems();
+  const iconDriveClassName = useDriveClassName("icon");
+  const [filterName, setFilterName] = useState("");
+  const toggleSaveModal = useCallback(() => {
+    onClose(!isOpen);
+  }, [isOpen, onClose]);
+  const handleCancelSaveModal = useCallback(() => {
+    onClose(false);
+    setFilterName("");
+  }, [onClose]);
+  const isValidFilterName = useCallback((name, existingNames) => {
+    if (!name) {
+      return false;
+    }
+    return !existingNames.map(item => item.toLowerCase().trim()).includes(name.toLowerCase().trim());
+  }, []);
+  const handleApplySaveModal = useCallback(() => {
+    if (!isValidFilterName(filterName, Array.from(items))) {
+      return;
+    }
+    onClose(false);
+    onSave(filterName);
+    setFilterName("");
+  }, [filterName, isValidFilterName, items, onClose, onSave]);
+  const handleSaveModalFieldChange = useCallback(e => {
+    setFilterName(e.target.value);
+  }, []);
+  const errorText = useMemo(() => {
+    if (!filterName) {
+      return "";
+    }
+    if (!isValidFilterName(filterName, Array.from(items))) {
+      return translate("Title already in use");
+    }
+    return "";
+  }, [filterName, isValidFilterName, items, translate]);
+  const saveIcon = useCallback(() => _jsx(IconDisk, {
+    description: translate("Save"),
+    className: "svgIcon",
+    size: iconDriveClassName ? "huge" : "large"
+  }), [iconDriveClassName, translate]);
+  return _jsxs(Modal, {
+    focus: "content",
+    modalContainerClassName: prioritize ? "zen-filters-prioritized-modal" : "",
+    isOpen: isOpen,
+    onClose: toggleSaveModal,
+    title: translate("Save filters"),
+    className: className || "",
+    children: [_jsx("div", {
+      className: "zen-filters-modal__content",
+      children: _jsx(TextInput, {
+        value: filterName,
+        ariaLabel: translate("Filter title"),
+        placeholder: translate("Filter title"),
+        onChange: handleSaveModalFieldChange,
+        maxLength: 100,
+        error: errorText
+      })
+    }), _jsx(Modal.SecondaryButton, {
+      onClick: handleCancelSaveModal,
+      title: translate("Cancel"),
+      children: translate("Cancel")
+    }), _jsx(Modal.PrimaryButton, {
+      onClick: handleApplySaveModal,
+      icon: saveIcon,
+      title: translate("Save"),
+      children: translate("Save")
+    })]
+  });
+};