@geotab/zenith 3.0.1 → 3.1.0-beta.0

package/dist/filters/components/filtersSavedChipComponent.js

@@ -14,8 +14,12 @@ const modal_1 = require("../../modal/modal");
 const filtersSavedItemsProvider_1 = require("./filtersSavedItemsProvider");
 const filtersSaveModal_1 = require("./filtersSaveModal");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const mobileSheet_1 = require("../../mobileSheet/mobileSheet");
+const keyboardHelpers_1 = require("../../utils/keyboardHelpers");
 const FiltersSavedChipComponent = () => {
     const { translate } = (0, useLanguage_1.useLanguage)();
+    const isMobile = (0, useMobile_1.useMobile)();
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
     const contentDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-filters-saved-popup__content");
     const { items, active, onRemove, onApply, onSave } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
@@ -24,13 +28,17 @@ const FiltersSavedChipComponent = () => {
     const [saveModalOpen, setSaveModalOpen] = (0, react_1.useState)(false);
     const savedChipRef = (0, react_1.useRef)(null);
     const removeChipRef = (0, react_1.useRef)("");
+    const savedFiltersRef = (0, react_1.useRef)(null);
     const handleRemove = (0, react_1.useCallback)((itemKey) => () => {
         removeChipRef.current = itemKey;
         setRemoveModalOpen(true);
     }, []);
     const toggleSavedChipOpen = (0, react_1.useCallback)(() => {
+        if (removeModalOpen || saveModalOpen) {
+            return;
+        }
         setSavedChipOpen((prev) => !prev);
-    }, []);
+    }, [removeModalOpen, saveModalOpen]);
     const toggleRemoveModal = (0, react_1.useCallback)(() => {
         setRemoveModalOpen((prev) => !prev);
     }, []);
@@ -48,19 +56,73 @@ const FiltersSavedChipComponent = () => {
         removeChipRef.current = "";
     }, [onRemove]);
     const handleFilterSelect = (0, react_1.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 = (0, react_1.useCallback)((e) => {
+        if (e.key === "ArrowDown") {
+            const nextItem = (0, keyboardHelpers_1.getFirstFocusableItem)(savedFiltersRef.current);
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            return;
+        }
+    }, [savedFiltersRef]);
     const handleItemKeyDown = (0, react_1.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 = (0, keyboardHelpers_1.getNewFocusableItem)(1, savedFiltersRef.current, getSelector());
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, savedFiltersRef.current, getSelector());
+            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+            return;
+        }
+        if (e.key === "ArrowRight" && isListItem) {
+            const nextItem = (0, keyboardHelpers_1.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 = (0, keyboardHelpers_1.getNewFocusableItem)(-1, savedFiltersRef.current, `[data-list-item="true"]`);
+            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+            return;
         }
     }, [onApply]);
-    const saveButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: toggleSaveModal, className: "zen-filters-saved-popup__action-button", title: translate("Save new filters"), children: [(0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["", "zen-ellipsis"]), children: translate("Save new") })] }), [iconDriveClassName, toggleSaveModal, translate]);
+    const saveButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("button", { type: "button", onKeyDown: handleSaveItemKeyDown, onClick: toggleSaveModal, className: "zen-filters-saved-popup__action-button", title: translate("Save new filters"), children: [(0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["", "zen-ellipsis"]), children: translate("Save new") })] }), [iconDriveClassName, toggleSaveModal, translate, handleSaveItemKeyDown]);
     const memoizedItems = (0, react_1.useMemo)(() => Array.from(items), [items]);
-    const popupContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-saved-popup__content", contentDriveClassName || ""]), children: [onSave ? saveButton : null, (0, jsx_runtime_1.jsx)("div", { onClick: handleFilterSelect, children: memoizedItems.map((filterName) => ((0, jsx_runtime_1.jsxs)("div", { tabIndex: 0, onKeyDown: handleItemKeyDown, "data-filter-name": filterName, className: (0, classNames_1.classNames)(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-saved-popup__name", "data-filter-name": filterName, children: filterName }), onRemove ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-filters-saved-popup__action", onClick: handleRemove(filterName), title: translate("Remove"), "aria-label": translate("Remove"), children: (0, jsx_runtime_1.jsx)(iconClose_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-saved-popup__content", contentDriveClassName || ""]), children: [onSave ? saveButton : null, (0, jsx_runtime_1.jsx)("div", { ref: savedFiltersRef, onClick: handleFilterSelect, children: memoizedItems.map((filterName) => ((0, jsx_runtime_1.jsxs)("div", { tabIndex: 0, onKeyDown: handleItemKeyDown, "data-list-item": true, "data-filter-name": filterName, className: (0, classNames_1.classNames)(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-saved-popup__name", "data-filter-name": filterName, children: filterName }), onRemove ? (0, jsx_runtime_1.jsx)(button_1.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: (0, jsx_runtime_1.jsx)(iconClose_1.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 = (0, react_1.useMemo)(() => (active.size > 0 && Array.from(items).some(item => active.has(item)) ? "active" : undefined), [active, items]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(chip_1.Chip, { className: "zen-filters-saved-chip", isOpen: savedChipOpen, status: memoizedStatus, onClick: toggleSavedChipOpen, title: translate("Saved filters"), icon: iconDisk_1.IconDisk, triggerRef: savedChipRef }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: savedChipOpen, className: (0, classNames_1.classNames)(["zen-filters-saved-popup"]), onOpenChange: toggleSavedChipOpen, useTrapFocusWithTrigger: "on", shouldHoldScroll: true, triggerRef: savedChipRef, ariaLabel: translate("Saved filters"), recalculateOnScroll: true, children: popupContent }), (0, jsx_runtime_1.jsxs)(modal_1.Modal, { isOpen: removeModalOpen, onClose: toggleRemoveModal, title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current), children: [(0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: handleCancelRemoveModal, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleRemoveItem, type: "destructive", children: translate("Confirm") })] }), onSave ? (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, { isOpen: saveModalOpen, onClose: setSaveModalOpen, onSave: onSave }) : null] }));
+    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: savedChipOpen, className: (0, classNames_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: translate("Saved filters"), triggerRef: savedChipRef, isOpen: savedChipOpen, onHidePanel: toggleSavedChipOpen, onCloseClick: toggleSavedChipOpen, useTrapFocusWithTrigger: false, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: translate("Saved filters") }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { className: "zen-filters-saved-chip__mobile-sheet", children: popupContent })] }), [popupContent, savedChipOpen, toggleSavedChipOpen, translate]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(chip_1.Chip, { className: "zen-filters-saved-chip", isOpen: savedChipOpen, status: memoizedStatus, onClick: toggleSavedChipOpen, title: translate("Saved filters"), icon: iconDisk_1.IconDisk, triggerRef: savedChipRef }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsxs)(modal_1.Modal, { isOpen: removeModalOpen, onClose: toggleRemoveModal, modalContainerClassName: (0, classNames_1.classNames)([isMobile ? "zen-filters-prioritized-modal" : ""]), title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current), children: [(0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { title: translate("Cancel"), onClick: handleCancelRemoveModal, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { title: translate("Confirm"), onClick: handleRemoveItem, type: "destructive", children: translate("Confirm") })] }), onSave ? (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, { prioritize: isMobile, isOpen: saveModalOpen, onClose: setSaveModalOpen, onSave: onSave }) : null] }));
 };
 exports.FiltersSavedChipComponent = FiltersSavedChipComponent;

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

@@ -27,17 +27,12 @@ exports.FiltersSearch = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const pillBox_1 = require("../../pillBox/pillBox");
 const filtersSearchList_1 = require("./filtersSearchList");
 const searchInputRaw_1 = require("../../searchInputRaw/searchInputRaw");
-const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, handleSearchFocus, searchSelection, handleRemove, className, ref }) => {
+const pill_1 = require("../../pill/pill");
+const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, searchSelection, handleRemove, className, ref }) => {
     const isWithPills = Boolean(searchSelection && handleRemove);
     const divider = "_divider_";
-    const handleSearchKeyDown = (0, react_1.useCallback)((event) => {
-        if (event.code === "Enter") {
-            onSearchKeyDown === null || onSearchKeyDown === void 0 ? void 0 : onSearchKeyDown(event.currentTarget.value || undefined);
-        }
-    }, [onSearchKeyDown]);
     const memoizedPillsArray = react_1.default.useMemo(() => {
         if (!isWithPills || !searchSelection || searchSelection.length === 0) {
             return [];
@@ -58,8 +53,24 @@ const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, handleSearc
             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 searchComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(searchInputRaw_1.SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onKeyDown: handleSearchKeyDown, onFocus: handleSearchFocus, value: value, className: (0, classNames_1.classNames)(["zen-filters-search__search-input", "zen-filters__search", className || ""]) }), [id, ref, name, onChange, handleSearchKeyDown, handleSearchFocus, value, className]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-search", className || ""]), children: [searchComponent, isWithPills && (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search__selected", children: (0, jsx_runtime_1.jsx)(pillBox_1.PillBox, { hideSelectedLabel: true, maxPills: 3, selectedPills: memoizedPillsArray, onRemove: onRemove }) })] });
+    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") {
+            return;
+        }
+        onOpenPopup === null || onOpenPopup === void 0 ? void 0 : onOpenPopup();
+    }, [onOpenPopup]);
+    const selectedPills = (0, react_1.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) => (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]);
+    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, className: (0, classNames_1.classNames)(["zen-filters-search__search-input", "zen-filters__search", className || ""]) }), [id, ref, name, onChange, onSearchKeyDown, value, className]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-search", className || ""]), onClick: handleSearchClick, children: [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/filtersSearchItemData.js

@@ -28,15 +28,32 @@ const FiltersSearchItemData = ({ id, icon, isActive, iconClassName, name, second
         }
         onClick();
     }, [onClick]);
+    const handleKeyDown = (0, react_1.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 = (0, react_1.useCallback)((e) => {
         if (!onClose) {
             return;
         }
+        console.log("handleClose");
         e.preventDefault();
         e.stopPropagation();
         onClose();
     }, [onClose]);
     return (0, jsx_runtime_1.jsx)("li", { tabIndex: 0, className: (0, classNames_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__main", children: [icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-search-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__main-data", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__identifier", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-search-item-data__name", children: name }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-search-item-data__secondary", children: secondary }) : null] }), onClose ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-search-item-data__close", onClick: handleClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__main", children: [icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-search-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__main-data", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__identifier", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-search-item-data__name", children: name }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-search-item-data__secondary", children: secondary }) : null] }), onClose ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-search-item-data__close", "data-close-button": true, title: translate("Close"), "aria-label": translate("Close"), onClick: handleClose, children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: "large", className: "zen-search-item-data__close-icon" }) }) : null] })] }) }, id);
 };
 exports.FiltersSearchItemData = FiltersSearchItemData;

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

package/dist/filters/components/filtersSearchList.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FiltersSearchList = exports.KEYWORD_TYPE = exports.KEYWORD_ID = exports.NO_TYPED_SEARCH_ITEM = void 0;
+exports.FiltersSearchList = exports.NOT_POPULATED_NAME = exports.KEYWORD_TYPE = exports.KEYWORD_ID = exports.NO_TYPED_SEARCH_ITEM = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const list_1 = require("../../list/list");
@@ -14,62 +14,190 @@ const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const useDrive_1 = require("../../utils/theme/useDrive");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const filtersHelper_1 = require("../filtersHelper");
+const emptySearchList_1 = require("../../dataGrid/emptySearchList/emptySearchList");
+const keyboardHelpers_1 = require("../../utils/keyboardHelpers");
+const focusableSelector_1 = require("../../utils/focusableSelector");
 exports.NO_TYPED_SEARCH_ITEM = "noTypedSearchItem";
 exports.KEYWORD_ID = "keywordId";
 exports.KEYWORD_TYPE = "keyword";
-const FiltersSearchList = ({ searchValue, searchData, recentSearches, searchSelection, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType }) => {
+exports.NOT_POPULATED_NAME = "...";
+const FiltersSearchList = ({ searchValue, searchData, recentSearches, searchSelection, onlyOneType, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType, handleClearSearchSelection, searchListRef }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
-    const isSearchMode = Boolean(handleSearchItemClick && searchSelection);
+    const isSearchModeAvailable = Boolean(handleSearchItemClick && searchSelection);
+    const isRecentSearchesModeAvailable = Boolean(recentSearches && handleRecentSearchItemClick && onRemoveRecentSearchItem);
     const isMobile = (0, useMobile_1.useMobile)();
     const isDrive = (0, useDrive_1.useDrive)();
     const [removedItems, setRemovedItems] = (0, react_1.useState)([]);
-    const [historyMode, setHistoryMode] = (0, react_1.useState)(false);
+    const initialSearchSelectionRef = (0, react_1.useRef)(searchSelection || []);
+    const hasNotPopulatedName = initialSearchSelectionRef.current.length === 0 ? false : initialSearchSelectionRef.current.some(el => el.name === exports.NOT_POPULATED_NAME);
+    const getCurrentMode = (0, react_1.useCallback)(() => {
+        if (searchValue) {
+            return "search";
+        }
+        if (isSearchModeAvailable && initialSearchSelectionRef.current.length > 0) {
+            return "selected";
+        }
+        if (isRecentSearchesModeAvailable && (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) && recentSearches.data.length > 0) {
+            return "recent";
+        }
+        return "";
+    }, [searchValue, isSearchModeAvailable, isRecentSearchesModeAvailable, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
+    const [currentMode, setCurrentMode] = (0, react_1.useState)(getCurrentMode());
     const waitingItemsLimit = 5;
-    const isRecentSearchesMode = Boolean(recentSearches && handleRecentSearchItemClick && onRemoveRecentSearchItem);
     // Handle React Query errors
     (0, react_1.useEffect)(() => {
-        if (isSearchMode && (searchData === null || searchData === void 0 ? void 0 : searchData.error)) {
+        if (currentMode === "search" && (searchData === null || searchData === void 0 ? void 0 : searchData.error)) {
             console.error("Failed to fetch search results. Error:", searchData.error);
         }
-    }, [isSearchMode, searchData === null || searchData === void 0 ? void 0 : searchData.error]);
+    }, [currentMode, searchData === null || searchData === void 0 ? void 0 : searchData.error]);
+    (0, react_1.useEffect)(() => {
+        if (currentMode !== "search" && searchValue) {
+            setCurrentMode("search");
+        }
+    }, [searchValue, currentMode]);
+    (0, react_1.useEffect)(() => {
+        if (currentMode === "recent" && searchSelection && searchSelection.length === 0) {
+            initialSearchSelectionRef.current = [];
+        }
+    }, [isSearchModeAvailable, isRecentSearchesModeAvailable, currentMode, searchSelection]);
     // Reset history mode when search value changes
     (0, react_1.useEffect)(() => {
-        if (historyMode && searchValue) {
-            setHistoryMode(false);
-        }
-    }, [historyMode, searchValue]);
-    const searchItems = (0, react_1.useMemo)(() => isSearchMode ? (searchData === null || searchData === void 0 ? void 0 : searchData.data) || [] : [], [isSearchMode, searchData === null || searchData === void 0 ? void 0 : searchData.data]);
-    const recentItems = (0, react_1.useMemo)(() => isRecentSearchesMode ? (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) || [] : [], [isRecentSearchesMode, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
-    const isLoading = searchValue && isSearchMode && (searchData === null || searchData === void 0 ? void 0 : searchData.isLoading) || (isRecentSearchesMode ? recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.isLoading : false) || false;
-    const changeMode = (0, react_1.useCallback)(() => {
-        setHistoryMode(prev => !prev);
+        if (currentMode === "history" && searchValue) {
+            setCurrentMode(isSearchModeAvailable ? "search" : "");
+        }
+        else if (currentMode === "search" && !searchValue) {
+            setCurrentMode(getCurrentMode());
+        }
+    }, [currentMode, getCurrentMode, isRecentSearchesModeAvailable, isSearchModeAvailable, searchValue]);
+    (0, react_1.useEffect)(() => {
+        if (searchSelection && searchSelection.length === 0) {
+            return;
+        }
+        searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.forEach(item => {
+            const existingItem = initialSearchSelectionRef.current.find(el => (onlyOneType ? el.id === item.id : el.id === item.id && el.type === item.type));
+            if (!existingItem) {
+                initialSearchSelectionRef.current = [...initialSearchSelectionRef.current, item];
+            }
+            else if (hasNotPopulatedName) {
+                existingItem.name = item.name;
+                existingItem.description = item.description;
+                existingItem.type = item.type;
+            }
+        });
+    }, [hasNotPopulatedName, onlyOneType, searchSelection]);
+    const searchItems = (0, react_1.useMemo)(() => currentMode === "search" || currentMode === "" ? (searchData === null || searchData === void 0 ? void 0 : searchData.data) || [] : [], [currentMode, searchData === null || searchData === void 0 ? void 0 : searchData.data]);
+    const recentItems = (0, react_1.useMemo)(() => currentMode === "recent" || currentMode === "history" ? (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) || [] : [], [currentMode, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
+    const isLoading = currentMode === "search" && (searchData === null || searchData === void 0 ? void 0 : searchData.isLoading) || (currentMode === "recent" || currentMode === "history" ? recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.isLoading : false) || false;
+    const changeMode = (0, react_1.useCallback)((newVal) => {
+        setCurrentMode(newVal);
         setRemovedItems([]);
         // Note: In React Query implementation, the parent component should handle
         // refetching data when switching between modes
     }, []);
     const handleRemove = (0, react_1.useCallback)((itemId) => () => {
+        var _a;
         setRemovedItems(prev => [...prev, itemId]);
         onRemoveRecentSearchItem && onRemoveRecentSearchItem([itemId]);
-    }, [onRemoveRecentSearchItem]);
+        // 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]);
     const handleRemoveAll = (0, react_1.useCallback)(() => {
         setRemovedItems(recentItems.map(item => item.id));
         onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
-        changeMode();
-    }, [onRemoveRecentSearchItem, recentItems, changeMode]);
+        changeMode(getCurrentMode());
+    }, [recentItems, onRemoveRecentSearchItem, changeMode, getCurrentMode]);
     const memoizedSearchItemClick = (0, react_1.useCallback)((itemId, itemType) => () => {
-        const currentSearchItem = searchItems.find(item => item.id === itemId && item.type === itemType);
+        const currentSearchItem = onlyOneType && !itemType ? searchItems.find(item => item.id === itemId)
+            : searchItems.find(item => item.id === itemId && item.type === itemType);
         currentSearchItem && handleSearchItemClick && handleSearchItemClick(currentSearchItem);
-    }, [handleSearchItemClick, searchItems]);
+    }, [handleSearchItemClick, onlyOneType, searchItems]);
+    const memoizedSelectedItemClick = (0, react_1.useCallback)((itemId, itemType) => () => {
+        const currentSelectedItem = onlyOneType && !itemType ? initialSearchSelectionRef.current.find(item => item.id === itemId)
+            : initialSearchSelectionRef.current.find(item => item.id === itemId && item.type === itemType);
+        currentSelectedItem && handleSearchItemClick && handleSearchItemClick(currentSelectedItem);
+    }, [handleSearchItemClick, onlyOneType]);
     const memoizedRecentSearchItemClick = (0, react_1.useCallback)((itemId, itemType) => () => {
         const currentSearchItem = recentItems.find(item => item.id === itemId && item.type === itemType);
         currentSearchItem && handleRecentSearchItemClick && handleRecentSearchItemClick(currentSearchItem);
     }, [handleRecentSearchItemClick, recentItems]);
+    const memoizedClearSelectedItems = (0, react_1.useCallback)(() => {
+        var _a;
+        handleClearSearchSelection === null || handleClearSearchSelection === void 0 ? void 0 : handleClearSearchSelection();
+        initialSearchSelectionRef.current = [];
+        setCurrentMode(isRecentSearchesModeAvailable && ((_a = recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) === null || _a === void 0 ? void 0 : _a.length) ? "recent" : "");
+    }, [handleClearSearchSelection, isRecentSearchesModeAvailable, recentSearches]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        const isListItem = event.target instanceof HTMLElement && event.target.dataset.listItem === "true";
+        const isButtonItem = event.target instanceof HTMLElement && event.target.dataset.closeButton === "true";
+        const getSelector = () => {
+            if (isListItem) {
+                return `[data-list-item="true"]`;
+            }
+            if (isButtonItem) {
+                return `[data-close-button="true"]`;
+            }
+            return undefined;
+        };
+        if (event.key === "ArrowDown") {
+            const nextItem = (0, keyboardHelpers_1.getNewFocusableItem)(1, searchListRef.current, getSelector());
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, searchListRef.current, getSelector());
+            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+            return;
+        }
+        if (event.key === "ArrowRight" && isListItem) {
+            const nextItem = (0, keyboardHelpers_1.getNewFocusableItem)(1, searchListRef.current, `[data-close-button="true"]`);
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            return;
+        }
+        if (event.key === "ArrowLeft" && isButtonItem) {
+            const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, searchListRef.current, `[data-list-item="true"]`);
+            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+            return;
+        }
+    }, [searchListRef]);
     const memoizedRecentDataArr = (0, react_1.useMemo)(() => recentItems.filter(item => !removedItems.includes(item.id)).reverse(), [recentItems, removedItems]);
-    const memoizedRecentData = (0, react_1.useMemo)(() => (historyMode ? memoizedRecentDataArr : (searchValue && isSearchMode ? [] : memoizedRecentDataArr.slice(0, waitingItemsLimit))).map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.FiltersSearchItemData, { id: item.id, name: item.name, isActive: false, secondary: item.description, onClose: handleRemove(item.id), onClick: memoizedRecentSearchItemClick(item.id, item.type || exports.NO_TYPED_SEARCH_ITEM), icon: getIconByType(item.type), isMobile: isMobile, isDrive: isDrive }, `recent-${item.id}`))), [historyMode, memoizedRecentDataArr, searchValue, isSearchMode, handleRemove, memoizedRecentSearchItemClick, getIconByType, isMobile, isDrive]);
-    const memoizedSearchData = (0, react_1.useMemo)(() => historyMode || !searchValue && isRecentSearchesMode ? [] : searchItems.slice(0, filtersHelper_1.MAX_TOTAL_RESULTS).map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.FiltersSearchItemData, { id: item.id, name: item.name, isActive: isSearchMode ? searchSelection.filter(el => el.id === item.id).some(el => el.type === (item.type || exports.NO_TYPED_SEARCH_ITEM)) || false : false, secondary: item.description, onClose: undefined, onClick: isSearchMode ? memoizedSearchItemClick(item.id, item.type || exports.NO_TYPED_SEARCH_ITEM) : undefined, icon: getIconByType(item.type), isMobile: isMobile, isDrive: isDrive }, `search-${item.id}-${item.type || exports.NO_TYPED_SEARCH_ITEM}`))), [historyMode, searchValue, isRecentSearchesMode, searchItems, isSearchMode, searchSelection, memoizedSearchItemClick, getIconByType, isMobile, isDrive]);
-    const resultsToShow = (0, react_1.useMemo)(() => isRecentSearchesMode ? [...memoizedRecentData, ...memoizedSearchData]
-        : memoizedSearchData, [isRecentSearchesMode, memoizedRecentData, memoizedSearchData]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-search-list", children: [searchValue ? null : (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-search-list__header", isDrive ? (isMobile ? "zen-filters-search-list__header--drive" : "zen-filters-search-list__header--drive-tablet") : ""]), children: [historyMode ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-filters-search-list__header-back-button", title: translate("Back"), type: "tertiary", onClick: changeMode, icon: iconChevronLeft_1.IconChevronLeft, iconPosition: textIconButton_2.ButtonIconPosition.Start })
-                        : null, isRecentSearchesMode ? (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search-list__header-title", children: translate("Recent searches") }) : null, historyMode || !isRecentSearchesMode ? null : (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: changeMode, children: translate("View history") }), historyMode && isRecentSearchesMode ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: handleRemoveAll, children: translate("Clear all") }) : null] }), (0, jsx_runtime_1.jsx)(list_1.List, { className: "zen-filters-search-list__data", isLoading: isLoading, type: "data", waitingItems: waitingItemsLimit, children: resultsToShow })] });
+    const memoizedRecentData = (0, react_1.useMemo)(() => {
+        if (currentMode !== "recent" && currentMode !== "history") {
+            return [];
+        }
+        const recentDataArr = currentMode === "history" ? memoizedRecentDataArr : memoizedRecentDataArr.slice(0, waitingItemsLimit);
+        return recentDataArr.map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.FiltersSearchItemData, { id: item.id, name: item.name, isActive: false, secondary: item.description, onClose: handleRemove(item.id), onClick: memoizedRecentSearchItemClick(item.id, item.type), icon: getIconByType(item.type || onlyOneType), isMobile: isMobile, isDrive: isDrive }, `${currentMode}-${item.id}`)));
+    }, [currentMode, memoizedRecentDataArr, handleRemove, memoizedRecentSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
+    const memoizedSearchData = (0, react_1.useMemo)(() => currentMode !== "search" && currentMode !== "" ? [] : searchItems.slice(0, filtersHelper_1.MAX_TOTAL_RESULTS).map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.FiltersSearchItemData, { id: item.id, name: item.name, isActive: isSearchModeAvailable ? (onlyOneType ? searchSelection.some(el => el.id === item.id) : searchSelection.filter(el => el.id === item.id)
+            .some(el => el.type === (item.type || exports.NO_TYPED_SEARCH_ITEM)) || false) : false, secondary: item.description, onClose: undefined, onClick: isSearchModeAvailable ? memoizedSearchItemClick(item.id, item.type) : undefined, icon: getIconByType(item.type || onlyOneType), isMobile: isMobile, isDrive: isDrive }, `search-${item.id}-${item.type || exports.NO_TYPED_SEARCH_ITEM}`))), [currentMode, searchItems, isSearchModeAvailable, searchSelection, memoizedSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
+    const memoizedSelectedData = (0, react_1.useMemo)(() => currentMode !== "selected" || initialSearchSelectionRef.current.length === 0 ? [] : initialSearchSelectionRef.current.slice(0, filtersHelper_1.MAX_TOTAL_RESULTS)
+        .map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.FiltersSearchItemData, { id: item.id, name: item.name, isActive: onlyOneType ? (searchSelection || []).some(el => el.id === item.id)
+            : (searchSelection || []).filter(el => el.id === item.id).some(el => el.type === (item.type || exports.NO_TYPED_SEARCH_ITEM)) || false, secondary: item.description, onClose: undefined, onClick: memoizedSelectedItemClick(item.id, item.type), icon: getIconByType(item.type || onlyOneType), isMobile: isMobile, isDrive: isDrive }, `selected-${item.id}-${item.type || onlyOneType || exports.NO_TYPED_SEARCH_ITEM}-${item.name}-${hasNotPopulatedName ? "notPopulated" : ""}`))), [currentMode, onlyOneType, searchSelection, memoizedSelectedItemClick, getIconByType, isMobile, isDrive, hasNotPopulatedName]);
+    const resultsToShow = (0, react_1.useMemo)(() => {
+        if (currentMode === "search") {
+            return memoizedSearchData;
+        }
+        if (currentMode === "recent" || currentMode === "history") {
+            return memoizedRecentData;
+        }
+        if (currentMode === "selected") {
+            return memoizedSelectedData;
+        }
+        return memoizedSearchData;
+    }, [currentMode, memoizedSearchData, memoizedRecentData, memoizedSelectedData]);
+    const getSearchHeaderContent = () => {
+        if (currentMode === "history") {
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-filters-search-list__header-back-button", title: translate("Back"), type: "tertiary", onClick: changeMode.bind(null, "recent"), icon: iconChevronLeft_1.IconChevronLeft, iconPosition: textIconButton_2.ButtonIconPosition.Start }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: handleRemoveAll, children: translate("Clear all") })] });
+        }
+        if (currentMode === "recent" || currentMode === "selected") {
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-search-list__header-title", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: currentMode === "recent" ? "tertiary" : "tertiary-black", className: currentMode === "recent" ? "zen-filters-search-list__header-button--active" : "", title: translate("Recent searches"), onClick: changeMode.bind(null, "recent"), children: translate("Recent searches") }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: currentMode === "selected" ? "tertiary" : "tertiary-black", className: currentMode === "selected" ? "zen-filters-search-list__header-button--active" : "", title: translate("Currently selected"), onClick: changeMode.bind(null, "selected"), children: translate("Currently selected") })] }), currentMode === "recent" && recentItems.length > resultsToShow.length && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: changeMode.bind(null, "history"), children: translate("View history") }), currentMode === "selected" && resultsToShow.length > 0 && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: memoizedClearSelectedItems, children: translate("Clear") })] });
+        }
+        if (currentMode === "search" && resultsToShow.length > 0) {
+            return (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search-list__header-title", children: translate("Top results") });
+        }
+        return undefined;
+    };
+    const searchHeaderContent = getSearchHeaderContent();
+    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-search-list", children: [searchHeaderContent ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-search-list__header", isDrive ? (isMobile ? "zen-filters-search-list__header--drive" : "zen-filters-search-list__header--drive-tablet") : ""]), children: searchHeaderContent }) : null, (0, jsx_runtime_1.jsx)("div", { ref: searchListRef, children: (0, jsx_runtime_1.jsx)(list_1.List, { className: "zen-filters-search-list__data", onKeyDown: handleKeyDown, isLoading: currentMode === "selected" ? false : isLoading, type: "data", waitingItems: waitingItemsLimit, children: resultsToShow }) }), !isLoading && resultsToShow.length === 0 ? (0, jsx_runtime_1.jsx)(emptySearchList_1.EmptySearchList, { children: translate("No data available") }) : null] });
 };
 exports.FiltersSearchList = FiltersSearchList;

package/dist/filters/components/filtersSelect.d.ts

@@ -15,6 +15,7 @@ export interface IFiltersSelect extends IFiltersSelectProps {
     value: IFiltersSearchType;
     onChange: (newValue: IFiltersSearchType) => void;
     className?: string;
+    selectListRef: React.RefObject<HTMLDivElement>;
 }
 export declare const ALL_SELECT_OPTION_ID: string;
 export interface IFiltersSearchType {

package/dist/filters/components/filtersSelect.js

@@ -7,6 +7,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
 const filtersSelectListItem_1 = require("./filtersSelectListItem");
+const keyboardHelpers_1 = require("../../utils/keyboardHelpers");
 exports.ALL_SELECT_OPTION_ID = "All";
 exports.FiltersSelectDisplayName = "FiltersSelect";
 const getFiltersSearchTypeAllOption = () => ({
@@ -18,7 +19,7 @@ const getAllOption = (translate) => ({
     name: translate("All")
 });
 exports.getAllOption = getAllOption;
-const FiltersSelect = ({ value, name, onChange, id, items, className }) => {
+const FiltersSelect = ({ value, onChange, items, className, selectListRef }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const [activeId, setActiveId] = (0, react_1.useState)("");
     const filtersSelectListId = (0, useUniqueId_1.useUniqueId)();
@@ -33,19 +34,46 @@ const FiltersSelect = ({ value, name, onChange, id, items, className }) => {
             return;
         }
         setActiveId(clickedId);
-        onChange({ [clickedId]: undefined });
-    }, [activeId, onChange]);
+    }, [activeId]);
     const handleItemClick = (0, react_1.useCallback)((clickedId, parentId) => () => {
+        if (!clickedId) {
+            parentId && onChange({ [parentId]: undefined });
+            return;
+        }
         if (parentId) {
             onChange({ [parentId]: clickedId });
             return;
         }
-        setActiveId("");
         onChange(Object.keys(value).includes(clickedId) ? (0, exports.getFiltersSearchTypeAllOption)() : { [clickedId]: undefined });
     }, [onChange, value]);
-    const selectListComponent = (0, react_1.useMemo)(() => preparedItems.map(el => el.subItems ?
-        (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListExpandableItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isActive: el.id === activeId, className: (0, classNames_1.classNames)([value.hasOwnProperty(el.id) ? "zen-filters-select__list-item--active" : ""]), onClick: handleExpandableItemClick(el.id), content: el.id === activeId ? el.subItems.map(subEl => (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListItem, { className: (0, classNames_1.classNames)(["zen-filters-select__sub-item"]), id: `${filtersSelectListId}-${el.id}-${subEl.id}`, name: subEl.name, isActive: value[el.id] === subEl.id, onClick: handleItemClick(subEl.id, el.id) }, `${el.id}-${subEl.id}`)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }, el.id) : (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isActive: Object.keys(value).includes(el.id), onClick: handleItemClick(el.id) }, el.id)), [activeId, filtersSelectListId, handleExpandableItemClick, handleItemClick, preparedItems, value]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-select", children: [id && name ? (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-select__label", id: id, children: name }) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-select__list", className || ""]), children: selectListComponent })] });
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        var _a, _b, _c, _d;
+        if (event.key === "ArrowDown") {
+            const nextElement = ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling) ? (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling
+                : (0, keyboardHelpers_1.getNewFocusableItem)(1, selectListRef.current);
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            const nextElement = ((_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.previousElementSibling) ? (_d = document.activeElement) === null || _d === void 0 ? void 0 : _d.previousElementSibling
+                : (0, keyboardHelpers_1.getNewFocusableItem)(-1, selectListRef.current);
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            const nextElement = (0, keyboardHelpers_1.getNewFocusableItem)(-1, selectListRef.current);
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            const nextElement = (0, keyboardHelpers_1.getNewFocusableItem)(1, selectListRef.current);
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+    }, [selectListRef]);
+    const selectListComponent = (0, react_1.useMemo)(() => preparedItems.map(el => el.subItems && el.subItems.length > 0 ?
+        (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListExpandableItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isExpanded: el.id === activeId, isActive: Object.keys(value).includes(el.id) && Boolean(value[el.id]), className: (0, classNames_1.classNames)([value.hasOwnProperty(el.id) ? "zen-filters-select__list-item-wrapper--active" : ""]), onExpandItem: handleExpandableItemClick(el.id), onClick: handleItemClick(undefined, el.id), content: el.id === activeId ? el.subItems.map(subEl => (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListItem, { className: (0, classNames_1.classNames)(["zen-filters-select__sub-item"]), id: `${filtersSelectListId}-${el.id}-${subEl.id}`, name: subEl.name, isActive: value[el.id] === subEl.id, onClick: handleItemClick(subEl.id, el.id) }, `${el.id}-${subEl.id}`)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }, `${filtersSelectListId}-${el.id}`) : (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, className: "zen-filters-select__list-item--not-expandable", isActive: Object.keys(value).includes(el.id), onClick: handleItemClick(el.id) }, `${filtersSelectListId}-${el.id}`)), [activeId, filtersSelectListId, handleExpandableItemClick, handleItemClick, preparedItems, value]);
+    return (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-select", ref: selectListRef, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-select__list", className || ""]), children: selectListComponent }) });
 };
 exports.FiltersSelect = FiltersSelect;
 exports.FiltersSelect.displayName = exports.FiltersSelectDisplayName;