@geotab/zenith 3.13.0-beta.0 → 3.13.1-beta.0

package/esm/filters/components/filtersContainer.js

@@ -1,17 +1,20 @@
 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 { useCallback, useMemo, useRef, useState } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { Chip } from "../../chip/chip";
 import React from "react";
 import { IconFilter } from "../../icons/iconFilter";
 import { createPropsHash, createStateHash, createStateObject, getFiltersState, getNumberOfChangedFilters, stabilizeChildrenWithId } from "../filtersHelper";
 import { FiltersSavedChipComponent } from "./filtersSavedChipComponent";
-import { IconClose } from "../../icons/iconClose";
+import { IconCloseCircle } from "../../icons/iconCloseCircle";
+import { IconDisk } from "../../icons/iconDisk";
 import { useChipStatus } from "../../chip/chipStatusProvider";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { getNewFocusableItem } from "../../utils/keyboardHelpers";
+import { useFiltersSavedItems } from "./filtersSavedItemsProvider";
+import { FiltersSaveModal } from "./filtersSaveModal";
 injectString("cs", "All Filters", "V\u0161echny filtry");
 injectString("da-DK", "All Filters", "Alle filtre");
 injectString("de", "All Filters", "Alle Filter");
@@ -66,6 +69,33 @@ injectString("zh-Hans", "Clear", "\u6E05\u9664");
 injectString("zh-TW", "Clear", "\u6E05\u9664");
 injectString("ro-RO", "Clear", "\u0218terge\u021Bi");
 injectString("ar", "Clear", "\u0645\u0633\u062D");
+injectString("cs", "Save", "Ulo\u017Eit");
+injectString("da-DK", "Save", "Spare");
+injectString("de", "Save", "Speichern");
+injectString("en", "Save", "Save");
+injectString("es", "Save", "Guardar");
+injectString("fi-FI", "Save", "S\xE4\xE4st\xE4\xE4");
+injectString("fr", "Save", "Enregistrer");
+injectString("fr-FR", "Save", "Enregistrer");
+injectString("hu-HU", "Save", "Ment\xE9s");
+injectString("id", "Save", "Simpan");
+injectString("it", "Save", "Salvare");
+injectString("ja", "Save", "\u4FDD\u5B58");
+injectString("ko-KR", "Save", "\uC800\uC7A5");
+injectString("ms", "Save", "Simpan");
+injectString("nb-NO", "Save", "Lagre");
+injectString("nl", "Save", "Opslaan");
+injectString("pl", "Save", "Zapisz");
+injectString("pt-BR", "Save", "Salvar");
+injectString("pt-PT", "Save", "Guardar");
+injectString("sk-SK", "Save", "Ulo\u017Ei\u0165");
+injectString("sv", "Save", "Spara");
+injectString("th", "Save", "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01");
+injectString("tr", "Save", "Kaydet");
+injectString("zh-Hans", "Save", "\u4FDD\u5B58");
+injectString("zh-TW", "Save", "\u5132\u5B58");
+injectString("ro-RO", "Save", "Salva\u021Bi");
+injectString("ar", "Save", "\u062D\u0641\u0638");
 export const FiltersContainer = ({
   className,
   isPinned = false,
@@ -81,6 +111,11 @@ export const FiltersContainer = ({
     translate
   } = useLanguage();
   const isMobile = useMobile();
+  const {
+    onSave
+  } = useFiltersSavedItems();
+  const [saveModalOpen, setSaveModalOpen] = useState(false);
+  const saveChipRef = useRef(null);
   const filtersChipContainerRef = React.useRef(null);
   const numberOfChangedFilters = useMemo(() => {
     const suppressedFilters = new Set();
@@ -103,6 +138,7 @@ export const FiltersContainer = ({
     title: translate("All Filters"),
     dataRole: "dialog",
     triggerRef: filtersChipRef,
+    className: "zen-filters-container__all-filters-chip",
     children: "+"
   }), [numberOfChangedFilters, chipStatus, filtersClickHandler, translate, filtersChipRef]);
   const childrenSignature = useMemo(() => {
@@ -160,18 +196,39 @@ export const FiltersContainer = ({
     active: false,
     status: isPinned ? "accent" : undefined,
     onChange: handleRemovalClick,
-    icon: IconClose
+    icon: IconCloseCircle
   }) : null, [isPinned, handleRemovalClick, translate, numberOfChangedFilters]);
+  const handleSaveChipClick = useCallback(() => {
+    setSaveModalOpen(true);
+  }, []);
+  const chipSaveComponent = useMemo(() => onSave ? _jsx(Chip, {
+    title: translate("Save"),
+    onClick: handleSaveChipClick,
+    icon: IconDisk,
+    isOpen: saveModalOpen,
+    triggerRef: saveChipRef,
+    className: "zen-filters-container__save-chip"
+  }) : null, [onSave, translate, handleSaveChipClick, saveModalOpen]);
+  // Order:
+  // Default:    [filters] [+]
+  // Selected:   [filters] [+badge] [save] [clear]
+  // w/ Saved:   [filters] [+] [save]
+  const showInlineSave = Boolean(onSave && (numberOfChangedFilters > 0 || hasSavedFilters));
   const memoizedFiltersElements = useMemo(() => _jsxs(_Fragment, {
-    children: [memoizedChildren, hasSavedFilters ? _jsx(FiltersSavedChipComponent, {}) : null, filtersChipComponent, chipRemovalComponent]
-  }), [chipRemovalComponent, filtersChipComponent, hasSavedFilters, memoizedChildren]);
-  return _jsx("div", {
+    children: [memoizedChildren, hasSavedFilters ? _jsx(FiltersSavedChipComponent, {}) : null, filtersChipComponent, showInlineSave ? chipSaveComponent : null, chipRemovalComponent]
+  }), [chipRemovalComponent, chipSaveComponent, filtersChipComponent, hasSavedFilters, memoizedChildren, showInlineSave]);
+  return _jsxs("div", {
     className: classNames(["zen-filters-container", isMobile ? "zen-filters-container--mobile" : "", className || ""]),
     onKeyDown: handleKeyDown,
     ref: filtersChipContainerRef,
-    children: isMobile ? _jsx("div", {
+    children: [isMobile ? _jsx("div", {
       className: "zen-filters-container__mobile-scroll-wrapper",
       children: memoizedFiltersElements
-    }) : memoizedFiltersElements
+    }) : memoizedFiltersElements, onSave ? _jsx(FiltersSaveModal, {
+      prioritize: isMobile,
+      isOpen: saveModalOpen,
+      onClose: setSaveModalOpen,
+      onSave: onSave
+    }) : null]
   });
 };

package/esm/filters/components/filtersSearch.d.ts

@@ -8,19 +8,24 @@ interface IFiltersSearch {
     onChange: (newValue: string) => void;
     onSearchKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onOpenPopup?: () => void;
+    /** Called when the clear (X) button inside the search input is clicked */
+    onClear?: () => void;
     searchSelection?: ISearchItem[];
-    handleRemove?: (id: ISearchItem) => void;
     className?: string;
     ref?: RefObject<HTMLInputElement | null>;
+    /** Ref forwarded to the root wrapper div — used to anchor the search popup */
+    containerRef?: RefObject<HTMLDivElement | null>;
     ariaLabel?: string;
     role?: string | undefined;
     ariaAutocomplete?: "list" | "none" | "inline" | "both";
     ariaControls?: string;
     ariaHaspopup?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
     ariaExpanded?: boolean | "true" | "false";
+    /** When true, renders only the search icon button (input lives in the popup) */
+    isMobile?: boolean;
 }
 export declare const FiltersSearch: {
-    ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, searchSelection, handleRemove, className, ariaLabel, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded, ref }: IFiltersSearch): import("react/jsx-runtime").JSX.Element;
+    ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, onClear, searchSelection, className, containerRef, ariaLabel, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded, isMobile, ref }: IFiltersSearch): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/filters/components/filtersSearch.js

@@ -1,62 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-import { NO_TYPED_SEARCH_ITEM } from "./filtersSearchList";
 import { SearchInputRaw } from "../../searchInputRaw/searchInputRaw";
 import { Pill } from "../../pill/pill";
-import { useMobile } from "../../commonHelpers/hooks/useMobile";
-export const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, searchSelection, handleRemove, className, ariaLabel, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded, ref }) => {
-    const isWithPills = Boolean(searchSelection && handleRemove);
-    const divider = "_divider_";
-    const isMobile = useMobile();
-    const memoizedPillsArray = React.useMemo(() => {
-        if (!isWithPills || !searchSelection || searchSelection.length === 0) {
-            return [];
-        }
-        const pillsArray = [];
-        searchSelection.forEach(item => {
-            pillsArray.push({
-                id: `${item.type || NO_TYPED_SEARCH_ITEM}${divider}${item.id}`,
-                name: item.name
-            });
-        });
-        return pillsArray;
-    }, [isWithPills, searchSelection]);
-    const onRemove = useCallback((removedId) => {
-        const [type, itemId] = removedId.split(divider);
-        const item = searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.find(el => el.id === itemId);
-        if (item) {
-            handleRemove === null || handleRemove === void 0 ? void 0 : handleRemove(Object.assign(Object.assign({}, item), { type: type === NO_TYPED_SEARCH_ITEM ? undefined : type }));
-        }
-    }, [handleRemove, searchSelection]);
-    const handleSearchClick = useCallback(e => {
-        var _a, _b, _c;
-        if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.dataset.name) === "IconClose" ||
-            e.target.classList.contains("zen-pill-non-actionable__close-button") ||
-            ((_b = e.target) === null || _b === void 0 ? void 0 : _b.parentElement.classList.contains("zen-pill-non-actionable__close-button")) ||
-            ((_c = e.target) === null || _c === void 0 ? void 0 : _c.parentElement.dataset.name) === "IconClose") {
+import { IconSearch } from "../../icons/iconSearch";
+export const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, onClear, searchSelection, className, containerRef, ariaLabel, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded, isMobile, ref }) => {
+    var _a;
+    const selectionCount = (_a = searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.length) !== null && _a !== void 0 ? _a : 0;
+    const handleSearchClick = useCallback((e) => {
+        var _a, _b;
+        const target = e.target;
+        if (target.classList.contains("zen-search-input__close-button") ||
+            ((_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-search-input__close-button")) ||
+            target.dataset.name === "IconClose" ||
+            ((_b = target.parentElement) === null || _b === void 0 ? void 0 : _b.dataset.name) === "IconClose") {
             return;
         }
         onOpenPopup === null || onOpenPopup === void 0 ? void 0 : onOpenPopup();
     }, [onOpenPopup]);
+    const selectionLabel = selectionCount > 99 ? "+99" : String(selectionCount);
     const selectedPills = useMemo(() => {
-        if (memoizedPillsArray.length === 0) {
+        if (selectionCount === 0) {
             return [];
         }
-        if (isMobile) {
-            return memoizedPillsArray.length
-                ? [
-                    _jsx(Pill, { type: "info", className: "zen-filters-search__selected-item zen-filters-search__selected-item--more", children: `+${memoizedPillsArray.length}` }, `${memoizedPillsArray.length}_${memoizedPillsArray.map(pill => pill.name).join("_")}`)
-                ]
-                : [];
-        }
-        const pillsForRender = [
-            { id: memoizedPillsArray[0].id, name: memoizedPillsArray[0].name },
-            memoizedPillsArray.length > 1 ? { id: "more_pills", name: `+${memoizedPillsArray.length - 1}` } : undefined
-        ].filter(Boolean);
-        return pillsForRender.map((pill, ind) => (_jsx(Pill, { type: "info", onClose: ind === 0 ? onRemove.bind(null, pill.id) : undefined, className: classNames(["zen-filters-search__selected-item", ind !== 0 ? "zen-filters-search__selected-item--more" : ""]), children: pill.name }, `${pill.id}_${pill.name}`)));
-    }, [memoizedPillsArray, onRemove, isMobile]);
-    const searchComponent = useMemo(() => (_jsx(SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onKeyDown: onSearchKeyDown, value: value, role: role, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true, ariaHaspopup: ariaHaspopup, ariaControls: ariaControls, ariaAutocomplete: ariaAutocomplete, className: classNames(["zen-filters-search__search-input", "zen-filters__search", className || ""]) })), [id, ref, name, onChange, onSearchKeyDown, value, className, role, ariaLabel, ariaExpanded, ariaHaspopup, ariaControls, ariaAutocomplete]);
-    return (_jsxs("div", { className: classNames(["zen-filters-search", className || "", isMobile ? "zen-filters-search--mobile" : ""]), onClick: handleSearchClick, children: [searchComponent, selectedPills.length > 0 && _jsx("div", { className: "zen-filters-search__selected", children: selectedPills })] }));
+        return [
+            _jsx(Pill, { type: "info", className: "zen-filters-search__selected-item zen-filters-search__selected-item--more", children: selectionLabel }, selectionCount)
+        ];
+    }, [selectionCount, selectionLabel]);
+    const searchComponent = useMemo(() => (_jsx(SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onClear: onClear, onKeyDown: onSearchKeyDown, value: value, role: role, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true, ariaHaspopup: ariaHaspopup, ariaControls: ariaControls, ariaAutocomplete: ariaAutocomplete, className: classNames(["zen-filters-search__search-input", "zen-filters__search", className || ""]) })), [
+        id,
+        ref,
+        name,
+        onChange,
+        onClear,
+        onSearchKeyDown,
+        value,
+        className,
+        role,
+        ariaLabel,
+        ariaExpanded,
+        ariaHaspopup,
+        ariaControls,
+        ariaAutocomplete
+    ]);
+    const mobileTrigger = useMemo(() => (_jsx("button", { type: "button", className: "zen-filters-search__mobile-trigger", onClick: handleSearchClick, "aria-haspopup": ariaHaspopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true, "aria-label": ariaLabel || name, children: _jsx(IconSearch, { className: "zen-filters-search__mobile-trigger-icon", size: "large" }) })), [handleSearchClick, ariaHaspopup, ariaControls, ariaExpanded, ariaLabel, name]);
+    return (_jsxs("div", { ref: containerRef, className: classNames(["zen-filters-search", isMobile ? "zen-filters-search--mobile" : "", className || ""]), onClick: isMobile ? undefined : handleSearchClick, children: [isMobile ? mobileTrigger : searchComponent, selectedPills.length > 0 && _jsx("div", { className: "zen-filters-search__selected", children: selectedPills })] }));
 };
 FiltersSearch.displayName = "FiltersSearch";

package/esm/filters/components/filtersSearchList.js

@@ -126,33 +126,6 @@ injectString("zh-Hans", "Currently selected", "Currently selected");
 injectString("zh-TW", "Currently selected", "Currently selected");
 injectString("ro-RO", "Currently selected", "Selec\u021Bie curent\u0103");
 injectString("ar", "Currently selected", "\u0627\u0644\u0645\u062D\u062F\u062F \u062D\u0627\u0644\u064A\u0627\u064B");
-injectString("cs", "View history", "View history");
-injectString("da-DK", "View history", "View history");
-injectString("de", "View history", "View history");
-injectString("en", "View history", "View history");
-injectString("es", "View history", "View history");
-injectString("fi-FI", "View history", "View history");
-injectString("fr", "View history", "View history");
-injectString("fr-FR", "View history", "View history");
-injectString("hu-HU", "View history", "View history");
-injectString("id", "View history", "View history");
-injectString("it", "View history", "View history");
-injectString("ja", "View history", "View history");
-injectString("ko-KR", "View history", "View history");
-injectString("ms", "View history", "View history");
-injectString("nb-NO", "View history", "View history");
-injectString("nl", "View history", "View history");
-injectString("pl", "View history", "View history");
-injectString("pt-BR", "View history", "View history");
-injectString("pt-PT", "View history", "Ver hist\xF3rico");
-injectString("sk-SK", "View history", "View history");
-injectString("sv", "View history", "View history");
-injectString("th", "View history", "View history");
-injectString("tr", "View history", "View history");
-injectString("zh-Hans", "View history", "View history");
-injectString("zh-TW", "View history", "View history");
-injectString("ro-RO", "View history", "Vede\u021Bi istoricul");
-injectString("ar", "View history", "\u0639\u0631\u0636 \u0627\u0644\u0633\u062C\u0644");
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -385,15 +358,25 @@ export const FiltersSearchList = ({
     var _a;
     setRemovedItems(prev => [...prev, itemId]);
     onRemoveRecentSearchItem && onRemoveRecentSearchItem([itemId]);
+    const remaining = recentItems.filter(item => item.id !== itemId && !removedItems.includes(item.id));
+    if (remaining.length === 0) {
+      changeMode("");
+      return;
+    }
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const firstItem = (_a = searchListRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
     firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
-  }, [onRemoveRecentSearchItem, searchListRef]);
+  }, [onRemoveRecentSearchItem, searchListRef, recentItems, removedItems, changeMode]);
   const handleRemoveAll = useCallback(() => {
     setRemovedItems(recentItems.map(item => item.id));
     onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
     changeMode(getCurrentMode());
   }, [recentItems, onRemoveRecentSearchItem, changeMode, getCurrentMode]);
+  const handleViewAll = useCallback(() => {
+    setRemovedItems(recentItems.map(item => item.id));
+    onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
+    changeMode("");
+  }, [recentItems, onRemoveRecentSearchItem, changeMode]);
   const memoizedSearchItemClick = useCallback((itemId, itemType) => () => {
     const currentSearchItem = onlyOneType && !itemType ? searchItems.find(item => item.id === itemId) : searchItems.find(item => item.id === itemId && item.type === itemType);
     currentSearchItem && handleSearchItemClick && handleSearchItemClick(currentSearchItem);
@@ -522,10 +505,10 @@ export const FiltersSearchList = ({
         children: [_jsx("div", {
           className: "zen-filters-search-list__header-title",
           children: currentMode === "recent" ? translate("Recent searches") : translate("Currently selected")
-        }), currentMode === "recent" && recentItems.length > resultsToShow.length && _jsx(Button, {
+        }), currentMode === "recent" && _jsx(Button, {
           type: "tertiary",
-          onClick: changeMode.bind(null, "history"),
-          children: translate("View history")
+          onClick: handleViewAll,
+          children: translate("Clear all")
         }), currentMode === "selected" && resultsToShow.length > 0 && _jsx(Button, {
           type: "tertiary",
           onClick: memoizedClearSelectedItems,
@@ -570,17 +553,17 @@ export const FiltersSearchList = ({
         type: "tertiary",
         onClick: handleRemoveAll,
         children: translate("Clear all")
-      }) : null, currentMode === "recent" && recentItems.length > resultsToShow.length ? _jsx(Button, {
+      }) : null, currentMode === "recent" ? _jsx(Button, {
         type: "tertiary",
-        onClick: changeMode.bind(null, "history"),
-        children: translate("View history")
+        onClick: handleViewAll,
+        children: translate("Clear all")
       }) : null, currentMode === "selected" && resultsToShow.length > 0 && (searchSelection || []).length > 0 ? _jsx(Button, {
         type: "tertiary",
         onClick: memoizedClearSelectedItemsForApplyMode,
         children: translate("Clear")
       }) : null]
     });
-  }, [changeMode, currentMode, handleRemoveAll, applyButtonHandler, memoizedClearSelectedItemsForApplyMode, recentItems.length, resultsToShow.length, translate, isInitialSearchSelectionState, searchSelection]);
+  }, [currentMode, handleRemoveAll, handleViewAll, applyButtonHandler, memoizedClearSelectedItemsForApplyMode, resultsToShow.length, translate, isInitialSearchSelectionState, searchSelection]);
   const searchHeaderContent = applyButtonHandler ? getHeaderTitles() : getSearchHeaderContent();
   return _jsxs(_Fragment, {
     children: [_jsxs("div", {

package/esm/filters/filters.d.ts

@@ -40,6 +40,8 @@ export interface IFiltersSearchTypesItem {
 export interface IFiltersBase extends IZenComponentProps {
     searchTypes?: IFiltersSearchTypesItem[] | IFiltersSearchTypesItem;
     onToggleView?: (isOpen: boolean) => void;
+    /** Placeholder text for the search input. Defaults to "Find in page" when empty or undefined. */
+    searchPlaceholder?: string;
 }
 export interface IFiltersWithKeyword {
     keyword: string;