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

package/dist/inputAdornments/inputAdornments.js

@@ -7,7 +7,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const textInputRaw_1 = require("../textInputRaw/textInputRaw");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
-const InputAdornments = ({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded }) => {
+const InputAdornments = ({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded, autocomplete }) => {
     const disabledClassName = disabled ? "zen-input-adornments--disabled" : "";
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-input-adornments");
     const mobileComponentClass = (0, useMobileClassName_1.useMobileClassName)("zen-input-adornments");
@@ -25,7 +25,7 @@ const InputAdornments = ({ id, value, className = "", disabled, isError, maxLeng
         !value ? "zen-input-adornments__wrapper--empty" : "",
         className
     ]), [className, endAdornment, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [!!startAdornment && (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment }), (0, jsx_runtime_1.jsx)("div", { className: wrapperClasses, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { name: name, onBlur: onBlur, ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, disabled: disabled, type: inputType, autoFocus: autoFocus, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, role: role, ariaAutocomplete: ariaAutocomplete, ariaControls: ariaControls, ariaHaspopup: ariaHaspopup, ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [!!startAdornment && (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment }), (0, jsx_runtime_1.jsx)("div", { className: wrapperClasses, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { name: name, onBlur: onBlur, ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, disabled: disabled, type: inputType, autoFocus: autoFocus, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, role: role, ariaAutocomplete: ariaAutocomplete, ariaControls: ariaControls, ariaHaspopup: ariaHaspopup, ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true, autocomplete: autocomplete, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment })] }));
 };
 exports.InputAdornments = InputAdornments;
 exports.InputAdornments.displayName = "InputAdornments";

package/dist/searchInputRaw/searchInputRaw.js

@@ -120,12 +120,14 @@ const SearchInputRaw = props => {
     autoFocus,
     id,
     onFocus,
+    onClear,
     ref,
     role,
     ariaAutocomplete,
     ariaControls,
     ariaHaspopup,
-    ariaExpanded
+    ariaExpanded,
+    autocomplete = "off"
   } = props;
   const {
     name,
@@ -159,6 +161,7 @@ const SearchInputRaw = props => {
     const onClick = () => {
       var _a;
       onChange === null || onChange === void 0 ? void 0 : onChange("");
+      onClear === null || onClear === void 0 ? void 0 : onClear();
       // Return focus to the input after clearing so keyboard users don't lose their place (WCAG 2.1 SC 2.1.1)
       (_a = ref ? ref.current : innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
@@ -217,7 +220,8 @@ const SearchInputRaw = props => {
       ariaAutocomplete: ariaAutocomplete,
       ariaControls: ariaControls,
       ariaHaspopup: ariaHaspopup,
-      ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true
+      ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true,
+      autocomplete: autocomplete
     })
   }));
 };

package/dist/searchInputRaw/types.d.ts

@@ -8,6 +8,8 @@ export interface ISearchInputRawBase {
     placeholder?: string;
     ariaLabel?: string;
     closeButtonTitle?: string;
+    /** Called when the clear (X) button is clicked, in addition to clearing the value via onChange */
+    onClear?: () => void;
     isError?: boolean;
     isReadOnly?: boolean;
     maxLength?: number;
@@ -26,6 +28,8 @@ export interface ISearchInputRawBase {
     ariaControls?: string;
     ariaHaspopup?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
     ariaExpanded?: boolean | "true" | "false";
+    /** HTML autocomplete attribute for the underlying input. Defaults to "off" to suppress browser autofill. */
+    autocomplete?: string;
 }
 export interface ISearchInputRawDefault extends ISearchInputRawBase {
     value: string;

package/dist/utils/localization/translations/en.json

@@ -252,6 +252,7 @@
     "value changes in the range from {MIN} to {MAX}.": "value changes in the range from {MIN} to {MAX}.",
     "Error generating chart narrative for dataset": "Error generating chart narrative for dataset",
     "Chart data table and visualization": "Chart data table and visualization",
+    "Find in page": "Find in page",
     "Search page": "Search page",
     "Search by": "Search by",
     "Save": "Save",

package/dist/utils/positioningUtils/calculatePosition.js

@@ -93,7 +93,9 @@ const calculatePosition = (triggerRef, popupRef, paddingX, paddingY, inline, ali
             }
         }
     }
-    else if (!isTopsideAlignment && triggerRect.y + triggerRect.height + popupRect.height > (zen_1.zen.innerHeight || 0)) {
+    else if (!isTopsideAlignment &&
+        triggerRect.y + triggerRect.height + popupRect.height > (zen_1.zen.innerHeight || 0) &&
+        position.height === undefined) {
         const newTopPosition = (zen_1.zen.innerHeight || 0) + scrollTop - popupRect.height;
         position.top = newTopPosition < 0 ? 0 : newTopPosition;
     }

package/dist/utils/positioningUtils/normalizeVertically.js

@@ -7,7 +7,7 @@ const normalizeVertically = (position, popupRect, parentHeight) => {
         position.bottom = 0;
         return;
     }
-    if (position.top) {
+    if (position.top !== undefined) {
         if (position.top < 0) {
             position.top = 0;
         }

package/esm/commonHelpers/hooks/usePillSize.js

@@ -49,7 +49,7 @@ export const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTi
         }
     }, []);
     useResize(() => {
-        if (isFixedSize || (hasIcon && !isClosable) || (!hasIcon && isClosable)) {
+        if (isFixedSize || !hasIcon || !isClosable) {
             return;
         }
         hidePillContent();
@@ -58,7 +58,7 @@ export const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTi
         if (initialTitle) {
             return;
         }
-        if ((hasIcon && !isClosable) || (!hasIcon && isClosable)) {
+        if (!hasIcon || !isClosable) {
             return;
         }
         hidePillContent();

package/esm/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/esm/controlledPopup/controlledPopup.js

@@ -4,7 +4,7 @@ import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { useRTLAlignment } from "../utils/localization/useRTLAlignment";
-export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
+export 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 = useId();
     const popupId = id || autoId;
     const isClientReady = useClientReady();
@@ -23,5 +23,5 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: rtlAlignment, id: popupId, isOpen: isOpen, className: 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 (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: rtlAlignment, id: popupId, isOpen: isOpen, className: 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 })));
 };

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;