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

package/README.md

@@ -49,8 +49,10 @@ Markdown reference for each component (used by AI tooling and IRIS) lives in [`d
 
 ## Change log
 
-### 3.13.0
+### 3.13.1
 
+- Redesign `Filters` bar (Phases 1–3): updated chip colors and mobile sizing, replace "All Filters" text chip with a compact "+" icon chip with active-filter badge, and reorder inline save/clear icon chips by filter state
+- Add `searchPlaceholder` prop to `Filters` for customizing the search input placeholder
 - Add `prefix` prop to `Summary` component for mixed-color value styling
 - Add logical alignment support to `Tooltip` for correct RTL popup direction
 - Remove hardcoded 400px minimum height from `Table` component

package/dist/commonHelpers/hooks/usePillSize.js

@@ -52,7 +52,7 @@ const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTitle })
         }
     }, []);
     (0, useResize_1.useResize)(() => {
-        if (isFixedSize || (hasIcon && !isClosable) || (!hasIcon && isClosable)) {
+        if (isFixedSize || !hasIcon || !isClosable) {
             return;
         }
         hidePillContent();
@@ -61,7 +61,7 @@ const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTitle })
         if (initialTitle) {
             return;
         }
-        if ((hasIcon && !isClosable) || (!hasIcon && isClosable)) {
+        if (!hasIcon || !isClosable) {
             return;
         }
         hidePillContent();

package/dist/commonStyles/popupMixin.less

@@ -7,9 +7,9 @@
 }
 
 .zen-popup-body.zen-popup-body {
-    overflow-block: auto;
+    overflow-y: auto;
 
     &--hidden {
-        overflow-block: hidden;
+        overflow-y: hidden;
     }
 }

package/dist/controlledPopup/controlledPopup.d.ts

@@ -3,6 +3,7 @@ import { TTrapFocus } from "../absolute/absolute";
 import "./controlledPopup.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { TAlignment as TAlignmentAbsolute } from "../absolute/absolute";
+import { IAlignment } from "../utils/positioningUtils/alignments";
 /**
  * @deprecated - please use {@link TAlignmentAbsolute|TAlignment} interface from the absolute component
  */
@@ -28,5 +29,7 @@ export interface IControlledPopup extends IZenComponentProps {
     preventAttributesAutoSet?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
+    /** Override the default alignment calculation functions. */
+    alignmentsFn?: IAlignment;
 }
-export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, alignmentsFn, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;

package/dist/controlledPopup/controlledPopup.js

@@ -7,7 +7,7 @@ const absolute_1 = require("../absolute/absolute");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const useRTLAlignment_1 = require("../utils/localization/useRTLAlignment");
-const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
+const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, alignmentsFn, role = "dialog" }) => {
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const isClientReady = (0, useClientReady_1.useClientReady)();
@@ -26,6 +26,6 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: rtlAlignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
+    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: rtlAlignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, alignmentsFn: alignmentsFn, children: children })));
 };
 exports.ControlledPopup = ControlledPopup;

package/dist/filters/components/filtersContainer.js

@@ -70,15 +70,45 @@ 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");
 const react_2 = __importDefault(require("react"));
 const iconFilter_1 = require("../../icons/iconFilter");
 const filtersHelper_1 = require("../filtersHelper");
 const filtersSavedChipComponent_1 = require("./filtersSavedChipComponent");
-const iconClose_1 = require("../../icons/iconClose");
+const iconCloseCircle_1 = require("../../icons/iconCloseCircle");
+const iconDisk_1 = require("../../icons/iconDisk");
 const chipStatusProvider_1 = require("../../chip/chipStatusProvider");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const keyboardHelpers_1 = require("../../utils/keyboardHelpers");
+const filtersSavedItemsProvider_1 = require("./filtersSavedItemsProvider");
+const filtersSaveModal_1 = require("./filtersSaveModal");
 const FiltersContainer = ({
   className,
   isPinned = false,
@@ -94,6 +124,11 @@ const FiltersContainer = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    onSave
+  } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
+  const [saveModalOpen, setSaveModalOpen] = (0, react_1.useState)(false);
+  const saveChipRef = (0, react_1.useRef)(null);
   const filtersChipContainerRef = react_2.default.useRef(null);
   const numberOfChangedFilters = (0, react_1.useMemo)(() => {
     const suppressedFilters = new Set();
@@ -116,6 +151,7 @@ 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 = (0, react_1.useMemo)(() => {
@@ -173,19 +209,40 @@ const FiltersContainer = ({
     active: false,
     status: isPinned ? "accent" : undefined,
     onChange: handleRemovalClick,
-    icon: iconClose_1.IconClose
+    icon: iconCloseCircle_1.IconCloseCircle
   }) : null, [isPinned, handleRemovalClick, translate, numberOfChangedFilters]);
+  const handleSaveChipClick = (0, react_1.useCallback)(() => {
+    setSaveModalOpen(true);
+  }, []);
+  const chipSaveComponent = (0, react_1.useMemo)(() => onSave ? (0, jsx_runtime_1.jsx)(chip_1.Chip, {
+    title: translate("Save"),
+    onClick: handleSaveChipClick,
+    icon: iconDisk_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-    children: [memoizedChildren, hasSavedFilters ? (0, jsx_runtime_1.jsx)(filtersSavedChipComponent_1.FiltersSavedChipComponent, {}) : null, filtersChipComponent, chipRemovalComponent]
-  }), [chipRemovalComponent, filtersChipComponent, hasSavedFilters, memoizedChildren]);
-  return (0, jsx_runtime_1.jsx)("div", {
+    children: [memoizedChildren, hasSavedFilters ? (0, jsx_runtime_1.jsx)(filtersSavedChipComponent_1.FiltersSavedChipComponent, {}) : null, filtersChipComponent, showInlineSave ? chipSaveComponent : null, chipRemovalComponent]
+  }), [chipRemovalComponent, chipSaveComponent, filtersChipComponent, hasSavedFilters, memoizedChildren, showInlineSave]);
+  return (0, jsx_runtime_1.jsxs)("div", {
     className: (0, classNames_1.classNames)(["zen-filters-container", isMobile ? "zen-filters-container--mobile" : "", className || ""]),
     onKeyDown: handleKeyDown,
     ref: filtersChipContainerRef,
-    children: isMobile ? (0, jsx_runtime_1.jsx)("div", {
+    children: [isMobile ? (0, jsx_runtime_1.jsx)("div", {
       className: "zen-filters-container__mobile-scroll-wrapper",
       children: memoizedFiltersElements
-    }) : memoizedFiltersElements
+    }) : memoizedFiltersElements, onSave ? (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, {
+      prioritize: isMobile,
+      isOpen: saveModalOpen,
+      onClose: setSaveModalOpen,
+      onSave: onSave
+    }) : null]
   });
 };
 exports.FiltersContainer = FiltersContainer;

package/dist/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/dist/filters/components/filtersSearch.js

@@ -1,89 +1,53 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersSearch = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const filtersSearchList_1 = require("./filtersSearchList");
 const searchInputRaw_1 = require("../../searchInputRaw/searchInputRaw");
 const pill_1 = require("../../pill/pill");
-const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
-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 = (0, useMobile_1.useMobile)();
-    const memoizedPillsArray = react_1.default.useMemo(() => {
-        if (!isWithPills || !searchSelection || searchSelection.length === 0) {
-            return [];
-        }
-        const pillsArray = [];
-        searchSelection.forEach(item => {
-            pillsArray.push({
-                id: `${item.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM}${divider}${item.id}`,
-                name: item.name
-            });
-        });
-        return pillsArray;
-    }, [isWithPills, searchSelection]);
-    const onRemove = (0, react_1.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 === filtersSearchList_1.NO_TYPED_SEARCH_ITEM ? undefined : type }));
-        }
-    }, [handleRemove, searchSelection]);
-    const handleSearchClick = (0, react_1.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") {
+const iconSearch_1 = require("../../icons/iconSearch");
+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 = (0, react_1.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 = (0, react_1.useMemo)(() => {
-        if (memoizedPillsArray.length === 0) {
+        if (selectionCount === 0) {
             return [];
         }
-        if (isMobile) {
-            return memoizedPillsArray.length
-                ? [
-                    (0, jsx_runtime_1.jsx)(pill_1.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) => ((0, jsx_runtime_1.jsx)(pill_1.Pill, { type: "info", onClose: ind === 0 ? onRemove.bind(null, pill.id) : undefined, className: (0, classNames_1.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 = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(searchInputRaw_1.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: (0, classNames_1.classNames)(["zen-filters-search__search-input", "zen-filters__search", className || ""]) })), [id, ref, name, onChange, onSearchKeyDown, value, className, role, ariaLabel, ariaExpanded, ariaHaspopup, ariaControls, ariaAutocomplete]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-search", className || "", isMobile ? "zen-filters-search--mobile" : ""]), onClick: handleSearchClick, children: [searchComponent, selectedPills.length > 0 && (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search__selected", children: selectedPills })] }));
+        return [
+            (0, jsx_runtime_1.jsx)(pill_1.Pill, { type: "info", className: "zen-filters-search__selected-item zen-filters-search__selected-item--more", children: selectionLabel }, selectionCount)
+        ];
+    }, [selectionCount, selectionLabel]);
+    const searchComponent = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(searchInputRaw_1.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: (0, classNames_1.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 = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(iconSearch_1.IconSearch, { className: "zen-filters-search__mobile-trigger-icon", size: "large" }) })), [handleSearchClick, ariaHaspopup, ariaControls, ariaExpanded, ariaLabel, name]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classNames_1.classNames)(["zen-filters-search", isMobile ? "zen-filters-search--mobile" : "", className || ""]), onClick: isMobile ? undefined : handleSearchClick, children: [isMobile ? mobileTrigger : searchComponent, selectedPills.length > 0 && (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search__selected", children: selectedPills })] }));
 };
 exports.FiltersSearch = FiltersSearch;
 exports.FiltersSearch.displayName = "FiltersSearch";

package/dist/filters/components/filtersSearchList.js

@@ -118,33 +118,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");
@@ -393,15 +366,25 @@ 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(focusableSelector_1.FOCUSABLE_SELECTOR);
     firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
-  }, [onRemoveRecentSearchItem, searchListRef]);
+  }, [onRemoveRecentSearchItem, searchListRef, recentItems, removedItems, changeMode]);
   const handleRemoveAll = (0, react_1.useCallback)(() => {
     setRemovedItems(recentItems.map(item => item.id));
     onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
     changeMode(getCurrentMode());
   }, [recentItems, onRemoveRecentSearchItem, changeMode, getCurrentMode]);
+  const handleViewAll = (0, react_1.useCallback)(() => {
+    setRemovedItems(recentItems.map(item => item.id));
+    onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
+    changeMode("");
+  }, [recentItems, onRemoveRecentSearchItem, changeMode]);
   const memoizedSearchItemClick = (0, react_1.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);
@@ -530,10 +513,10 @@ const FiltersSearchList = ({
         children: [(0, jsx_runtime_1.jsx)("div", {
           className: "zen-filters-search-list__header-title",
           children: currentMode === "recent" ? translate("Recent searches") : translate("Currently selected")
-        }), currentMode === "recent" && recentItems.length > resultsToShow.length && (0, jsx_runtime_1.jsx)(button_1.Button, {
+        }), currentMode === "recent" && (0, jsx_runtime_1.jsx)(button_1.Button, {
           type: "tertiary",
-          onClick: changeMode.bind(null, "history"),
-          children: translate("View history")
+          onClick: handleViewAll,
+          children: translate("Clear all")
         }), currentMode === "selected" && resultsToShow.length > 0 && (0, jsx_runtime_1.jsx)(button_1.Button, {
           type: "tertiary",
           onClick: memoizedClearSelectedItems,
@@ -578,17 +561,17 @@ const FiltersSearchList = ({
         type: "tertiary",
         onClick: handleRemoveAll,
         children: translate("Clear all")
-      }) : null, currentMode === "recent" && recentItems.length > resultsToShow.length ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+      }) : null, currentMode === "recent" ? (0, jsx_runtime_1.jsx)(button_1.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 ? (0, jsx_runtime_1.jsx)(button_1.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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
     children: [(0, jsx_runtime_1.jsxs)("div", {

package/dist/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;