@geotab/zenith 3.0.1-beta.4 → 3.1.0-beta.0

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { IDropdown, IDropdownFullSelection, IDropdownFullSelectionWithCheckbox, IDropdownWithCheckbox, IFetchDropdownState } from "../../dropdown/dropdown";
+import { IDropdown, IDropdownFullSelection, IDropdownFullSelectionWithCheckbox, IDropdownWithCheckbox, IFetchDropdownState, IDropdownItem } from "../../dropdown/dropdown";
 import { IFiltersItem } from "./filtersItem";
-export interface IFiltersDropdownProps extends Omit<IDropdown | IDropdownFullSelection | IDropdownWithCheckbox | IDropdownFullSelectionWithCheckbox, "value" | "onChange" | "defaultValue" | "className" | "getData" | "dataItems" | "isLoading" | "errorHandler"> {
+export interface IFiltersDropdownProps extends Omit<IDropdown | IDropdownFullSelection | IDropdownWithCheckbox | IDropdownFullSelectionWithCheckbox, "value" | "onChange" | "defaultValue" | "className" | "getData" | "errorHandler"> {
 }
 export type TFiltersDropdownState = string[];
 export interface IFiltersDropdownFullSelectionState {
@@ -22,11 +22,12 @@ export type TFiltersDropdownAllStates = TFiltersDropdownState | TFiltersDropdown
 export type TInferOnChangeType<T> = T extends string[] ? (state: string[]) => void : T extends IFiltersDropdownWithCheckboxState ? (state: IFiltersDropdownWithCheckboxState) => void : T extends IFiltersDropdownFullSelectionState ? (state: IFiltersDropdownFullSelectionState) => void : T extends IFiltersDropdownFullSelectionWithCheckboxState ? (state: IFiltersDropdownFullSelectionWithCheckboxState) => void : (state: T) => void;
 export interface IFiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState> extends Omit<IFiltersItem<T>, "onChange" | "defaultState">, IFiltersDropdownProps {
     onChange: TInferOnChangeType<T>;
-    fetchState: IFetchDropdownState;
+    fetchState?: IFetchDropdownState;
+    dataItems?: IDropdownItem[];
     defaultState?: T;
 }
 export declare const FiltersDropdownDisplayName = "FiltersDropdown";
-export declare function FiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState>({ className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState, ...restDropdownProps }: IFiltersDropdown<T>): React.JSX.Element;
+export declare function FiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState>({ className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState, dataItems, isLoading, ...restDropdownProps }: IFiltersDropdown<T>): React.JSX.Element;
 export declare namespace FiltersDropdown {
     var displayName: string;
 }

package/esm/filters/components/filtersDropdown.js

@@ -17,7 +17,7 @@ import { IconFilter } from "../../icons/iconFilter";
 import { getDropdownStateType, prepareDefaultDropdownState } from "../filtersHelper";
 export const FiltersDropdownDisplayName = "FiltersDropdown";
 export function FiltersDropdown(_a) {
-    var { className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState } = _a, restDropdownProps = __rest(_a, ["className", "state", "name", "defaultState", "onChange", "id", "chipIcon", "classNamePopup", "fetchState"]);
+    var { className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState, dataItems, isLoading } = _a, restDropdownProps = __rest(_a, ["className", "state", "name", "defaultState", "onChange", "id", "chipIcon", "classNamePopup", "fetchState", "dataItems", "isLoading"]);
     const prepareValue = (value) => {
         if (Array.isArray(value)) {
             return value.map((item) => item.id);
@@ -30,9 +30,9 @@ export function FiltersDropdown(_a) {
         const dropdownPropsForComponent = Object.assign(Object.assign({}, restDropdownProps), { value: state, onChange: (newValue) => {
                 const preparedValue = prepareValue(newValue);
                 onChangeState(preparedValue);
-            }, multiselect: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.multiselect, selectAllButton: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.selectAllButton, fetchState: fetchState, isLoading: undefined, errorHandler: (() => { }), placeholder: restDropdownProps.placeholder || name, defaultValue: memoizedDefaultState, className: classNames(["zen-filters-dropdown", className || ""]), classNamePopup: classNames(["zen-filters-dropdown-popup", classNamePopup || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || IconFilter });
+            }, multiselect: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.multiselect, selectAllButton: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.selectAllButton, fetchState: fetchState, dataItems: dataItems, isLoading: dataItems !== undefined ? isLoading : undefined, errorHandler: (() => { }), placeholder: restDropdownProps.placeholder || name, defaultValue: memoizedDefaultState, className: classNames(["zen-filters-dropdown", className || ""]), classNamePopup: classNames(["zen-filters-dropdown-popup", classNamePopup || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || IconFilter });
         return _jsx(Dropdown, Object.assign({}, dropdownPropsForComponent));
-    }, [restDropdownProps, state, dropdownStateType, memoizedDefaultState, fetchState, className, classNamePopup, id, name, chipIcon, onChangeState]);
+    }, [restDropdownProps, state, dropdownStateType, fetchState, dataItems, isLoading, name, memoizedDefaultState, className, classNamePopup, id, chipIcon, onChangeState]);
     return component;
 }
 FiltersDropdown.displayName = FiltersDropdownDisplayName;

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

@@ -0,0 +1,2 @@
+import "./filtersEmptySelectedList.less";
+export declare const FiltersEmptySelectedList: () => import("react/jsx-runtime").JSX.Element;

package/esm/filters/components/filtersEmptySelectedList.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { ImageLooking } from "../../images/imageLooking";
+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.") })] })] });
+};

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

@@ -5,6 +5,7 @@ import { FiltersDateRange, IFiltersDateRangeItem, TFiltersDateRangeState } from
 import { FiltersDropdown, IFiltersDropdown, TFiltersDropdownAllStates } from "./filtersDropdown";
 import { FiltersGroups, IFiltersGroups } from "./filtersGroups";
 import { FiltersRange, IFiltersRange, IFiltersRangeState } from "./filtersRange";
+import { FiltersDateInput, IFiltersDateInput, TFiltersDateInputState } from "./filtersDateInput";
 export interface IFiltersItem<State = unknown> {
     id: string;
     name: string;
@@ -15,11 +16,11 @@ export interface IFiltersItem<State = unknown> {
     inhibit?: string[];
     className?: string;
 }
-export type TFiltersComponents = typeof FiltersChip | typeof FiltersDateRange | typeof FiltersDropdown | typeof FiltersGroups | typeof FiltersRange;
-export type TFiltersComponentsProps = IFiltersChip | IFiltersDateRangeItem | IFiltersDropdown | IFiltersGroups | IFiltersRange;
-export type TFiltersComponentsItemState = boolean | TFiltersDateRangeState | TFiltersDropdownAllStates | IGroupsFilterTotalState | IFiltersRangeState;
+export type TFiltersComponents = typeof FiltersChip | typeof FiltersDateRange | typeof FiltersDateInput | typeof FiltersDropdown | typeof FiltersGroups | typeof FiltersRange;
+export type TFiltersComponentsProps = IFiltersChip | IFiltersDateRangeItem | IFiltersDropdown | IFiltersGroups | IFiltersRange | IFiltersDateInput;
+export type TFiltersComponentsItemState = boolean | TFiltersDateRangeState | TFiltersDropdownAllStates | IGroupsFilterTotalState | IFiltersRangeState | TFiltersDateInputState;
 export declare const allowedFiltersComponents: ({
     <P extends import("./filtersDateRange").IFiltersDateRangeProps = import("./filtersDateRange").IFiltersDateRangeProps>({ className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>): React.JSX.Element;
     displayName: string;
-} | React.FC<IFiltersGroups> | React.FC<IFiltersRange> | React.FC<IFiltersChip> | typeof FiltersDropdown)[];
+} | React.FC<IFiltersGroups> | React.FC<IFiltersRange> | React.FC<IFiltersDateInput> | React.FC<IFiltersChip> | typeof FiltersDropdown)[];
 export declare const getAllowedFilters: <T extends React.ReactNode>(items: T[]) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

package/esm/filters/components/filtersItem.js

@@ -4,7 +4,8 @@ import { FiltersDateRange } from "./filtersDateRange";
 import { FiltersDropdown } from "./filtersDropdown";
 import { FiltersGroups } from "./filtersGroups";
 import { FiltersRange } from "./filtersRange";
-export const allowedFiltersComponents = [FiltersChip, FiltersDateRange, FiltersDropdown, FiltersGroups, FiltersRange];
+import { FiltersDateInput } from "./filtersDateInput";
+export const allowedFiltersComponents = [FiltersChip, FiltersDateRange, FiltersDropdown, FiltersGroups, FiltersRange, FiltersDateInput];
 export const getAllowedFilters = (items) => items.reduce((acc, item) => {
     if (!item || !React.isValidElement(item)) {
         return acc;

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

@@ -3,5 +3,7 @@ export interface IFiltersModal {
     isOpen: boolean;
     onClose: (isOpen: boolean) => void;
     onSave: (filterName: string) => void;
+    className?: string;
+    prioritize?: boolean;
 }
-export declare const FiltersSaveModal: ({ isOpen, onClose, onSave }: IFiltersModal) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSaveModal: ({ isOpen, onClose, onSave, className, prioritize }: IFiltersModal) => import("react/jsx-runtime").JSX.Element;

package/esm/filters/components/filtersSaveModal.js

@@ -6,7 +6,7 @@ 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 }) => {
+export const FiltersSaveModal = ({ isOpen, onClose, onSave, className, prioritize }) => {
     const { translate } = useLanguage();
     const { items } = useFiltersSavedItems();
     const iconDriveClassName = useDriveClassName("icon");
@@ -45,5 +45,5 @@ export const FiltersSaveModal = ({ isOpen, onClose, onSave }) => {
         return "";
     }, [filterName, isValidFilterName, items, translate]);
     const saveIcon = useCallback(() => _jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), [iconDriveClassName, translate]);
-    return _jsxs(Modal, { isOpen: isOpen, onClose: toggleSaveModal, title: translate("Save filters"), 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") })] });
+    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") })] });
 };

package/esm/filters/components/filtersSavedChipComponent.js

@@ -11,8 +11,12 @@ import { Modal } from "../../modal/modal";
 import { useFiltersSavedItems } from "./filtersSavedItemsProvider";
 import { FiltersSaveModal } from "./filtersSaveModal";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { MobileSheet } from "../../mobileSheet/mobileSheet";
+import { getFirstFocusableItem, getNewFocusableItem } from "../../utils/keyboardHelpers";
 export const FiltersSavedChipComponent = () => {
     const { translate } = useLanguage();
+    const isMobile = useMobile();
     const iconDriveClassName = useDriveClassName("icon");
     const contentDriveClassName = useDriveClassName("zen-filters-saved-popup__content");
     const { items, active, onRemove, onApply, onSave } = useFiltersSavedItems();
@@ -21,13 +25,17 @@ export const FiltersSavedChipComponent = () => {
     const [saveModalOpen, setSaveModalOpen] = useState(false);
     const savedChipRef = useRef(null);
     const removeChipRef = useRef("");
+    const savedFiltersRef = useRef(null);
     const handleRemove = useCallback((itemKey) => () => {
         removeChipRef.current = itemKey;
         setRemoveModalOpen(true);
     }, []);
     const toggleSavedChipOpen = useCallback(() => {
+        if (removeModalOpen || saveModalOpen) {
+            return;
+        }
         setSavedChipOpen((prev) => !prev);
-    }, []);
+    }, [removeModalOpen, saveModalOpen]);
     const toggleRemoveModal = useCallback(() => {
         setRemoveModalOpen((prev) => !prev);
     }, []);
@@ -45,18 +53,72 @@ export const FiltersSavedChipComponent = () => {
         removeChipRef.current = "";
     }, [onRemove]);
     const handleFilterSelect = useCallback((e) => {
+        var _a;
         const filterName = e.target.dataset.filterName;
-        filterName && onApply && onApply(filterName);
+        if (!filterName) {
+            return;
+        }
+        onApply && onApply(filterName);
+        setSavedChipOpen((prev) => !prev);
+        (_a = savedChipRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [onApply]);
+    const handleSaveItemKeyDown = useCallback((e) => {
+        if (e.key === "ArrowDown") {
+            const nextItem = getFirstFocusableItem(savedFiltersRef.current);
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            return;
+        }
+    }, [savedFiltersRef]);
     const handleItemKeyDown = useCallback((e) => {
+        var _a;
         if (e.key === "Enter" || e.key === " ") {
             const filterName = e.currentTarget.dataset.filterName;
-            filterName && onApply && onApply(filterName);
+            const isRemoveButton = e.target.dataset.removeButton;
+            if (isRemoveButton || !filterName) {
+                return;
+            }
+            onApply && onApply(filterName);
+            setSavedChipOpen((prev) => !prev);
+            (_a = savedChipRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        const isListItem = e.target instanceof HTMLElement && e.target.dataset.listItem === "true";
+        const isButtonItem = e.target instanceof HTMLElement && e.target.dataset.removeButton === "true";
+        const getSelector = () => {
+            if (isListItem) {
+                return `[data-list-item="true"]`;
+            }
+            if (isButtonItem) {
+                return `[data-remove-button="true"]`;
+            }
+            return undefined;
+        };
+        if (e.key === "ArrowDown") {
+            const nextItem = getNewFocusableItem(1, savedFiltersRef.current, getSelector());
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            const prevItem = getNewFocusableItem(-1, savedFiltersRef.current, getSelector());
+            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+            return;
+        }
+        if (e.key === "ArrowRight" && isListItem) {
+            const nextItem = getNewFocusableItem(1, savedFiltersRef.current, `[data-remove-button="true"]`);
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            return;
+        }
+        if (e.key === "ArrowLeft" && isButtonItem) {
+            const prevItem = getNewFocusableItem(-1, savedFiltersRef.current, `[data-list-item="true"]`);
+            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+            return;
         }
     }, [onApply]);
-    const saveButton = useMemo(() => _jsxs("button", { type: "button", onClick: toggleSaveModal, className: "zen-filters-saved-popup__action-button", title: translate("Save new filters"), children: [_jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), _jsx("div", { className: classNames(["", "zen-ellipsis"]), children: translate("Save new") })] }), [iconDriveClassName, toggleSaveModal, translate]);
+    const saveButton = useMemo(() => _jsxs("button", { type: "button", onKeyDown: handleSaveItemKeyDown, onClick: toggleSaveModal, className: "zen-filters-saved-popup__action-button", title: translate("Save new filters"), children: [_jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), _jsx("div", { className: classNames(["", "zen-ellipsis"]), children: translate("Save new") })] }), [iconDriveClassName, toggleSaveModal, translate, handleSaveItemKeyDown]);
     const memoizedItems = useMemo(() => Array.from(items), [items]);
-    const popupContent = useMemo(() => _jsxs("div", { className: classNames(["zen-filters-saved-popup__content", contentDriveClassName || ""]), children: [onSave ? saveButton : null, _jsx("div", { onClick: handleFilterSelect, children: memoizedItems.map((filterName) => (_jsxs("div", { tabIndex: 0, onKeyDown: handleItemKeyDown, "data-filter-name": filterName, className: classNames(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]), children: [_jsx("div", { className: "zen-filters-saved-popup__name", "data-filter-name": filterName, children: filterName }), onRemove ? _jsx(Button, { type: "tertiary-black", className: "zen-filters-saved-popup__action", onClick: handleRemove(filterName), title: translate("Remove"), "aria-label": translate("Remove"), children: _jsx(IconClose, { size: iconDriveClassName ? "huge" : "large", className: "zen-filters-saved-popup__close-icon" }) }) : null] }, filterName))) })] }), [active, contentDriveClassName, handleFilterSelect, handleItemKeyDown, handleRemove, iconDriveClassName, memoizedItems, onRemove, onSave, saveButton, translate]);
+    const popupContent = useMemo(() => _jsxs("div", { className: classNames(["zen-filters-saved-popup__content", contentDriveClassName || ""]), children: [onSave ? saveButton : null, _jsx("div", { ref: savedFiltersRef, onClick: handleFilterSelect, children: memoizedItems.map((filterName) => (_jsxs("div", { tabIndex: 0, onKeyDown: handleItemKeyDown, "data-list-item": true, "data-filter-name": filterName, className: classNames(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]), children: [_jsx("div", { className: "zen-filters-saved-popup__name", "data-filter-name": filterName, children: filterName }), onRemove ? _jsx(Button, { "data-remove-button": true, type: "tertiary-black", className: "zen-filters-saved-popup__action", onClick: handleRemove(filterName), title: translate("Remove"), "aria-label": translate("Remove"), children: _jsx(IconClose, { size: iconDriveClassName ? "huge" : "large", className: "zen-filters-saved-popup__close-icon" }) }) : null] }, filterName))) })] }), [active, contentDriveClassName, handleFilterSelect, handleItemKeyDown, handleRemove, iconDriveClassName, memoizedItems, onRemove, onSave, saveButton, translate]);
     const memoizedStatus = useMemo(() => (active.size > 0 && Array.from(items).some(item => active.has(item)) ? "active" : undefined), [active, items]);
-    return (_jsxs(_Fragment, { children: [_jsx(Chip, { className: "zen-filters-saved-chip", isOpen: savedChipOpen, status: memoizedStatus, onClick: toggleSavedChipOpen, title: translate("Saved filters"), icon: IconDisk, triggerRef: savedChipRef }), _jsx(ControlledPopup, { isOpen: savedChipOpen, className: classNames(["zen-filters-saved-popup"]), onOpenChange: toggleSavedChipOpen, useTrapFocusWithTrigger: "on", shouldHoldScroll: true, triggerRef: savedChipRef, ariaLabel: translate("Saved filters"), recalculateOnScroll: true, children: popupContent }), _jsxs(Modal, { isOpen: removeModalOpen, onClose: toggleRemoveModal, title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current), children: [_jsx(Modal.SecondaryButton, { onClick: handleCancelRemoveModal, children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { onClick: handleRemoveItem, type: "destructive", children: translate("Confirm") })] }), onSave ? _jsx(FiltersSaveModal, { isOpen: saveModalOpen, onClose: setSaveModalOpen, onSave: onSave }) : null] }));
+    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: savedChipOpen, className: classNames(["zen-filters-saved-popup"]), onOpenChange: toggleSavedChipOpen, useTrapFocusWithTrigger: "on", shouldHoldScroll: true, triggerRef: savedChipRef, ariaLabel: translate("Saved filters"), recalculateOnScroll: true, children: popupContent }), [popupContent, savedChipOpen, toggleSavedChipOpen, savedChipRef, translate]);
+    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { label: translate("Saved filters"), triggerRef: savedChipRef, isOpen: savedChipOpen, onHidePanel: toggleSavedChipOpen, onCloseClick: toggleSavedChipOpen, useTrapFocusWithTrigger: false, children: [_jsx(MobileSheet.Title, { children: translate("Saved filters") }), _jsx(MobileSheet.Content, { className: "zen-filters-saved-chip__mobile-sheet", children: popupContent })] }), [popupContent, savedChipOpen, toggleSavedChipOpen, translate]);
+    return (_jsxs(_Fragment, { children: [_jsx(Chip, { className: "zen-filters-saved-chip", isOpen: savedChipOpen, status: memoizedStatus, onClick: toggleSavedChipOpen, title: translate("Saved filters"), icon: IconDisk, triggerRef: savedChipRef }), isMobile ? memoizedMobileView : memoizedDesktopView, _jsxs(Modal, { isOpen: removeModalOpen, onClose: toggleRemoveModal, modalContainerClassName: classNames([isMobile ? "zen-filters-prioritized-modal" : ""]), title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current), children: [_jsx(Modal.SecondaryButton, { title: translate("Cancel"), onClick: handleCancelRemoveModal, children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { title: translate("Confirm"), onClick: handleRemoveItem, type: "destructive", children: translate("Confirm") })] }), onSave ? _jsx(FiltersSaveModal, { prioritize: isMobile, isOpen: saveModalOpen, onClose: setSaveModalOpen, onSave: onSave }) : null] }));
 };

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

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import React, { RefObject } from "react";
 import "./filtersSearch.less";
 import { ISearchItem } from "./filtersSearchList";
 interface IFiltersSearch {
@@ -6,15 +6,15 @@ interface IFiltersSearch {
     name: string;
     value: string;
     onChange: (newValue: string) => void;
-    onSearchKeyDown?: (searchValue?: string) => void;
-    handleSearchFocus: () => void;
+    onSearchKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onOpenPopup?: () => void;
     searchSelection?: ISearchItem[];
     handleRemove?: (id: ISearchItem) => void;
     className?: string;
     ref?: RefObject<HTMLInputElement | null>;
 }
 export declare const FiltersSearch: {
-    ({ id, name, value, onChange, onSearchKeyDown, handleSearchFocus, searchSelection, handleRemove, className, ref }: IFiltersSearch): import("react/jsx-runtime").JSX.Element;
+    ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, searchSelection, handleRemove, className, ref }: IFiltersSearch): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/filters/components/filtersSearch.js

@@ -1,17 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-import { PillBox } from "../../pillBox/pillBox";
 import { NO_TYPED_SEARCH_ITEM } from "./filtersSearchList";
 import { SearchInputRaw } from "../../searchInputRaw/searchInputRaw";
-export const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, handleSearchFocus, searchSelection, handleRemove, className, ref }) => {
+import { Pill } from "../../pill/pill";
+export const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, searchSelection, handleRemove, className, ref }) => {
     const isWithPills = Boolean(searchSelection && handleRemove);
     const divider = "_divider_";
-    const handleSearchKeyDown = useCallback((event) => {
-        if (event.code === "Enter") {
-            onSearchKeyDown === null || onSearchKeyDown === void 0 ? void 0 : onSearchKeyDown(event.currentTarget.value || undefined);
-        }
-    }, [onSearchKeyDown]);
     const memoizedPillsArray = React.useMemo(() => {
         if (!isWithPills || !searchSelection || searchSelection.length === 0) {
             return [];
@@ -32,7 +27,23 @@ export const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, hand
             handleRemove === null || handleRemove === void 0 ? void 0 : handleRemove(Object.assign(Object.assign({}, item), { type: type === NO_TYPED_SEARCH_ITEM ? undefined : type }));
         }
     }, [handleRemove, searchSelection]);
-    const searchComponent = useMemo(() => _jsx(SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onKeyDown: handleSearchKeyDown, onFocus: handleSearchFocus, value: value, className: classNames(["zen-filters-search__search-input", "zen-filters__search", className || ""]) }), [id, ref, name, onChange, handleSearchKeyDown, handleSearchFocus, value, className]);
-    return _jsxs("div", { className: classNames(["zen-filters-search", className || ""]), children: [searchComponent, isWithPills && _jsx("div", { className: "zen-filters-search__selected", children: _jsx(PillBox, { hideSelectedLabel: true, maxPills: 3, selectedPills: memoizedPillsArray, onRemove: onRemove }) })] });
+    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") {
+            return;
+        }
+        onOpenPopup === null || onOpenPopup === void 0 ? void 0 : onOpenPopup();
+    }, [onOpenPopup]);
+    const selectedPills = useMemo(() => {
+        if (memoizedPillsArray.length === 0) {
+            return [];
+        }
+        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]);
+    const searchComponent = useMemo(() => _jsx(SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onKeyDown: onSearchKeyDown, value: value, className: classNames(["zen-filters-search__search-input", "zen-filters__search", className || ""]) }), [id, ref, name, onChange, onSearchKeyDown, value, className]);
+    return _jsxs("div", { className: classNames(["zen-filters-search", className || ""]), onClick: handleSearchClick, children: [searchComponent, selectedPills.length > 0 && _jsx("div", { className: "zen-filters-search__selected", children: selectedPills })] });
 };
 FiltersSearch.displayName = "FiltersSearch";

package/esm/filters/components/filtersSearchItemData.js

@@ -25,14 +25,31 @@ export const FiltersSearchItemData = ({ id, icon, isActive, iconClassName, name,
         }
         onClick();
     }, [onClick]);
+    const handleKeyDown = useCallback((e) => {
+        if (!onClick) {
+            return;
+        }
+        if (e.key === "Enter" || e.key === " ") {
+            const isCloseButton = e.target instanceof HTMLElement && (e.target.dataset.closeButton === "true");
+            if (isCloseButton) {
+                e.preventDefault();
+                e.stopPropagation();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                return;
+            }
+            e.preventDefault();
+            onClick();
+        }
+    }, [onClick, onClose]);
     const handleClose = useCallback((e) => {
         if (!onClose) {
             return;
         }
+        console.log("handleClose");
         e.preventDefault();
         e.stopPropagation();
         onClose();
     }, [onClose]);
     return _jsx("li", { tabIndex: 0, className: classNames(["zen-search-item-data", isActive ? "zen-search-item-data--active" : "",
-            onClick ? "zen-search-item-data--clickable" : "", driveClassName || ""]), "data-list-item-id": id, onClick: handleClick, children: _jsxs("div", { className: "zen-search-item-data__main", children: [icon ? _jsx("div", { className: classNames(["zen-search-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, _jsxs("div", { className: "zen-search-item-data__main-data", children: [_jsxs("div", { className: "zen-search-item-data__identifier", children: [_jsx("div", { className: "zen-search-item-data__name", children: name }), secondary ? _jsx("div", { className: "zen-search-item-data__secondary", children: secondary }) : null] }), onClose ? _jsx(Button, { type: "tertiary-black", className: "zen-search-item-data__close", onClick: handleClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: "large", className: "zen-search-item-data__close-icon" }) }) : null] })] }) }, id);
+            onClick ? "zen-search-item-data--clickable" : "", driveClassName || ""]), "data-list-item-id": id, onClick: handleClick, onKeyDown: handleKeyDown, "data-list-item": true, children: _jsxs("div", { className: "zen-search-item-data__main", children: [icon ? _jsx("div", { className: classNames(["zen-search-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, _jsxs("div", { className: "zen-search-item-data__main-data", children: [_jsxs("div", { className: "zen-search-item-data__identifier", children: [_jsx("div", { className: "zen-search-item-data__name", children: name }), secondary ? _jsx("div", { className: "zen-search-item-data__secondary", children: secondary }) : null] }), onClose ? _jsx(Button, { type: "tertiary-black", className: "zen-search-item-data__close", "data-close-button": true, title: translate("Close"), "aria-label": translate("Close"), onClick: handleClose, children: _jsx(IconClose, { size: "large", className: "zen-search-item-data__close-icon" }) }) : null] })] }) }, id);
 };

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

@@ -17,14 +17,18 @@ export interface IRecentSearchItem extends Omit<ISearchItem, "type"> {
 }
 export interface IRecentSearchItemWithoutId extends Omit<IRecentSearchItem, "id"> {
 }
+export declare const NOT_POPULATED_NAME = "...";
 export interface ISearchList {
     searchData?: IFetchState<ISearchItem[]>;
     recentSearches?: IFetchState<IRecentSearchItem[]>;
     searchSelection?: ISearchItem[];
     handleSearchItemClick?: (searchItem: ISearchItem) => void;
+    handleClearSearchSelection?: () => void;
     handleRecentSearchItemClick?: (recentSearchItem: IRecentSearchItem) => void;
     onRemoveRecentSearchItem?: (itemIds: string[]) => void;
     searchValue: string;
     getIconByType: (type?: string) => React.FC<IIcon>;
+    onlyOneType?: string;
+    searchListRef: React.RefObject<HTMLDivElement>;
 }
-export declare const FiltersSearchList: ({ searchValue, searchData, recentSearches, searchSelection, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType }: ISearchList) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSearchList: ({ searchValue, searchData, recentSearches, searchSelection, onlyOneType, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType, handleClearSearchSelection, searchListRef }: ISearchList) => import("react/jsx-runtime").JSX.Element;