@geotab/zenith 3.5.0 → 3.6.0-beta.1

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

@@ -1,7 +1,7 @@
 import { IFiltersItem } from "./filtersItem";
 import { IGroupsFilter } from "../../groupsFilter/groupsFilter";
 import { IGroupsFilterTotalState } from "../../groupsFilterRaw/groupsFilterInterfaces";
-export interface IFiltersGroupsProps extends Pick<IGroupsFilter, "dataLoader" | "errorHandler" | "listLimit" | "chipIcon"> {
+export interface IFiltersGroupsProps extends Pick<IGroupsFilter, "dataLoader" | "errorHandler" | "listLimit" | "chipIcon" | "className"> {
 }
 export interface IFiltersGroupsItem extends Omit<IFiltersItem<IGroupsFilterTotalState>, "defaultState"> {
     state: IGroupsFilterTotalState;
@@ -11,6 +11,6 @@ export interface IFiltersGroups extends IFiltersGroupsItem, IFiltersGroupsProps
 }
 export declare const FiltersGroupsDisplayName = "FiltersGroups";
 export declare const FiltersGroups: {
-    ({ className, state, name, onChange: onChangeState, id, chipIcon, ...otherGroupsFilterProps }: IFiltersGroups): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: IFiltersGroups): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/filters/components/filtersGroups.js

@@ -12,16 +12,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersGroups = exports.FiltersGroupsDisplayName = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const groupsFilter_1 = require("../../groupsFilter/groupsFilter");
 const iconFolders_1 = require("../../icons/iconFolders");
+const filtersSidePanelProvider_1 = require("./filtersSidePanelProvider");
+const filtersSidePanelItemWrapper_1 = require("./filtersSidePanelItemWrapper");
+const groupsFilterRaw_1 = require("../../groupsFilterRaw/groupsFilterRaw");
 exports.FiltersGroupsDisplayName = "FiltersGroups";
-const FiltersGroups = (_a) => {
+const FiltersGroupsInner = (_a) => {
     var { className, state, name, onChange: onChangeState, id, chipIcon } = _a, otherGroupsFilterProps = __rest(_a, ["className", "state", "name", "onChange", "id", "chipIcon"]);
     // defaultState here getDefaultFilterState()
-    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(groupsFilter_1.GroupsFilter, Object.assign({}, otherGroupsFilterProps, { initialFilterState: state, onChange: onChangeState, className: (0, classNames_1.classNames)(["zen-filters-groups", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFolders_1.IconFolders })), [otherGroupsFilterProps, state, onChangeState, className, id, name, chipIcon]);
+    const component = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(groupsFilterRaw_1.GroupsFilterRaw, Object.assign({}, otherGroupsFilterProps, { initialFilterState: state, onChange: onChangeState, className: (0, classNames_1.classNames)(["zen-filters-groups", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFolders_1.IconFolders }))), [otherGroupsFilterProps, state, onChangeState, className, id, name, chipIcon]);
+    return component;
+};
+const FiltersGroups = (_a) => {
+    var props = __rest(_a, []);
+    const isSidePanelView = (0, filtersSidePanelProvider_1.useFiltersSidePanel)();
+    const component = (0, react_2.useMemo)(() => (0, react_1.createElement)(FiltersGroupsInner, Object.assign({}, props, { key: `key_${props.id}` })), [props]);
+    if (isSidePanelView) {
+        return ((0, jsx_runtime_1.jsx)(filtersSidePanelItemWrapper_1.FiltersSidePanelItemWrapper, { name: props.name, children: (0, jsx_runtime_1.jsx)(groupsFilterRaw_1.GroupsFilterRaw, Object.assign({ initialFilterState: props.state }, props, { classNamePopup: (0, classNames_1.classNames)(["zen-side-panel-filters__groups-popup--full-width"]), chip: false, fullSize: true }), `key_${props.id}_sidePanel`) }));
+    }
     return component;
 };
 exports.FiltersGroups = FiltersGroups;

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

@@ -15,24 +15,38 @@ export interface IFiltersItem<State = unknown> {
     visible?: ((selection: string[], allFiltersState?: Record<string, TFiltersComponentsItemState>) => boolean) | boolean;
     inhibit?: string[];
     className?: string;
+    metaData?: IFilterMetaData;
+    childType?: TFiltersChild;
 }
-export type TFiltersComponents = typeof FiltersChip | typeof FiltersDateRange | typeof FiltersDateInput | typeof FiltersDropdown | typeof FiltersGroups | typeof FiltersRange;
+export type TFiltersChild = "FiltersChip" | "FiltersDateRange" | "FiltersDateInput" | "FiltersDropdown" | "FiltersGroups" | "FiltersRange";
+export interface IFilterMetaData extends Omit<IFiltersItem, "metaData" | "state" | "onChange" | "name"> {
+    childType: TFiltersChild;
+}
+export interface IFilterComponentWithMetaData {
+    metaData: IFilterMetaData;
+    (props: {
+        state: any;
+        onChange: (state: any) => void;
+        [key: string]: any;
+    }): React.ReactElement;
+}
+export type TFiltersComponents = typeof FiltersChip | typeof FiltersDateRange | typeof FiltersDateInput | typeof FiltersDropdown | typeof FiltersGroups | typeof FiltersRange | IFilterComponentWithMetaData;
 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;
+    <P extends import("./filtersDateRange").IFiltersDateRangeProps = import("./filtersDateRange").IFiltersDateRangeProps>({ ...props }: IFiltersDateRangeItem<P>): React.JSX.Element;
     displayName: string;
 } | {
-    ({ className, state, name, onChange: onChangeState, id, chipIcon, ...otherGroupsFilterProps }: IFiltersGroups): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: IFiltersGroups): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } | {
-    ({ className, state, defaultState, name, onChange: onChangeState, id, chipIcon, ...otherRangeProps }: IFiltersRange): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: IFiltersRange): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } | {
-    ({ className, state, defaultState, name, onChange: onChangeState, id, chipIcon, ...otherRangeProps }: IFiltersDateInput): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: IFiltersDateInput): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } | {
-    ({ className, name, state, onChange: onChangeState, id, ...componentProps }: IFiltersChip): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: IFiltersChip): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } | typeof FiltersDropdown)[];
 export declare const getAllowedFilters: <T extends React.ReactNode>(items: T[]) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

package/dist/filters/components/filtersItem.js

@@ -12,11 +12,18 @@ const filtersGroups_1 = require("./filtersGroups");
 const filtersRange_1 = require("./filtersRange");
 const filtersDateInput_1 = require("./filtersDateInput");
 exports.allowedFiltersComponents = [filtersChip_1.FiltersChip, filtersDateRange_1.FiltersDateRange, filtersDropdown_1.FiltersDropdown, filtersGroups_1.FiltersGroups, filtersRange_1.FiltersRange, filtersDateInput_1.FiltersDateInput];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isAllowedFilterComponent = (componentType) => {
+    if (exports.allowedFiltersComponents.some(component => component === componentType)) {
+        return true;
+    }
+    return componentType && typeof componentType === "function" && componentType.metaData;
+};
 const getAllowedFilters = (items) => items.reduce((acc, item) => {
     if (!item || !react_1.default.isValidElement(item)) {
         return acc;
     }
-    if (exports.allowedFiltersComponents.includes(item.type)) {
+    if (isAllowedFilterComponent(item.type)) {
         acc.push(item);
     }
     return acc;

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

@@ -8,6 +8,6 @@ export interface IFiltersRange extends IFiltersItem<IFiltersRangeState>, IFilter
 }
 export declare const FiltersRangeDisplayName = "FiltersRange";
 export declare const FiltersRange: {
-    ({ className, state, defaultState, name, onChange: onChangeState, id, chipIcon, ...otherRangeProps }: IFiltersRange): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: IFiltersRange): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/filters/components/filtersRange.js

@@ -12,15 +12,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersRange = exports.FiltersRangeDisplayName = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const iconFilter_1 = require("../../icons/iconFilter");
-const range_1 = require("../../range/range");
+const filtersSidePanelProvider_1 = require("./filtersSidePanelProvider");
+const filtersSidePanelItemWrapper_1 = require("./filtersSidePanelItemWrapper");
+const filtersSidePanelRange_1 = require("./filtersSidePanelRange");
+const rangeRaw_1 = require("../../rangeRaw/rangeRaw");
 exports.FiltersRangeDisplayName = "FiltersRange";
-const FiltersRange = (_a) => {
+const FiltersRangeInner = (_a) => {
     var { className, state, defaultState, name, onChange: onChangeState, id, chipIcon } = _a, otherRangeProps = __rest(_a, ["className", "state", "defaultState", "name", "onChange", "id", "chipIcon"]);
-    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(range_1.Range, Object.assign({}, otherRangeProps, { label: name, value: state, onChange: onChangeState, defaultValue: defaultState, className: (0, classNames_1.classNames)(["zen-filters-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFilter_1.IconFilter })), [otherRangeProps, chipIcon, state, onChangeState, defaultState, className, id, name]);
+    const component = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(rangeRaw_1.RangeRaw, Object.assign({}, otherRangeProps, { label: name, value: state, onChange: onChangeState, defaultValue: defaultState, className: (0, classNames_1.classNames)(["zen-filters-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFilter_1.IconFilter }))), [otherRangeProps, chipIcon, state, onChangeState, defaultState, className, id, name]);
+    return component;
+};
+const FiltersRange = (_a) => {
+    var props = __rest(_a, []);
+    const isSidePanelView = (0, filtersSidePanelProvider_1.useFiltersSidePanel)();
+    const component = (0, react_2.useMemo)(() => (0, react_1.createElement)(FiltersRangeInner, Object.assign({}, props, { key: `key_${props.id}` })), [props]);
+    if (isSidePanelView) {
+        return ((0, jsx_runtime_1.jsx)(filtersSidePanelItemWrapper_1.FiltersSidePanelItemWrapper, { name: props.name, children: (0, jsx_runtime_1.jsx)(filtersSidePanelRange_1.FiltersSidePanelRange, Object.assign({}, props), `key_${props.id}_sidePanel`) }));
+    }
     return component;
 };
 exports.FiltersRange = FiltersRange;

package/dist/filters/components/filtersSavedChipComponent.js

@@ -50,6 +50,33 @@ injectString("ro-RO", "Save", "Salva\u021Bi");
 injectString("en", "Save new", "Save new");
 injectString("pt-PT", "Save new", "Salvar novo");
 injectString("ro-RO", "Save new", "Salva\u021Bi nou");
+injectString("cs", "Apply filter", "Pou\u017E\xEDt filtr");
+injectString("da-DK", "Apply filter", "Anvend filter");
+injectString("de", "Apply filter", "Filter anwenden");
+injectString("en", "Apply filter", "Apply filter");
+injectString("es", "Apply filter", "Aplicar filtro");
+injectString("fi-FI", "Apply filter", "K\xE4yt\xE4 suodatinta");
+injectString("fr", "Apply filter", "Appliquer les filtres");
+injectString("fr-FR", "Apply filter", "Appliquer filtre");
+injectString("hu-HU", "Apply filter", "Sz\u0171r\u0151 alkalmaz\xE1sa");
+injectString("id", "Apply filter", "Terapkan filter");
+injectString("it", "Apply filter", "Applicare filtro");
+injectString("ja", "Apply filter", "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u9069\u7528");
+injectString("ko-KR", "Apply filter", "\uD544\uD130 \uC801\uC6A9");
+injectString("ms", "Apply filter", "Gunakan penyaring");
+injectString("nb-NO", "Apply filter", "Bruk filter");
+injectString("nl", "Apply filter", "Filter toepassen");
+injectString("pl", "Apply filter", "Zastosuj filtr");
+injectString("pt-BR", "Apply filter", "Aplicar filtros");
+injectString("pt-PT", "Apply filter", "Aplicar filtro");
+injectString("sk-SK", "Apply filter", "Pou\u017Ei\u0165 filter");
+injectString("sv", "Apply filter", "Till\xE4mpa filter");
+injectString("th", "Apply filter", "\u0E43\u0E0A\u0E49\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07");
+injectString("tr", "Apply filter", "Filtreyi uygula");
+injectString("zh-Hans", "Apply filter", "\u5E94\u7528\u7B5B\u9009\u5668");
+injectString("zh-TW", "Apply filter", "\u5957\u7528\u7BE9\u9078\u5668");
+injectString("ro-RO", "Apply filter", "Aplic\u0103 filtrul");
+injectString("en", "This filter is currently applied.", "This filter is currently applied.");
 injectString("cs", "Remove", "Odebrat");
 injectString("da-DK", "Remove", "Fjerne");
 injectString("de", "Remove", "Entfernen");
@@ -76,6 +103,32 @@ injectString("tr", "Remove", "Kald\u0131r");
 injectString("zh-Hans", "Remove", "\u5220\u9664");
 injectString("zh-TW", "Remove", "\u79FB\u9664");
 injectString("ro-RO", "Remove", "Elimina\u021Bi");
+injectString("cs", "Remove filter", "Odebrat filtr");
+injectString("da-DK", "Remove filter", "Fjern filter");
+injectString("de", "Remove filter", "Filter entfernen");
+injectString("en", "Remove filter", "Remove filter");
+injectString("es", "Remove filter", "Eliminar filtro");
+injectString("fi-FI", "Remove filter", "Poista suodatin");
+injectString("fr", "Remove filter", "Supprimer le filtre");
+injectString("fr-FR", "Remove filter", "Supprimer filtre");
+injectString("hu-HU", "Remove filter", "Sz\u0171r\u0151 elt\xE1vol\xEDt\xE1sa");
+injectString("id", "Remove filter", "Hapus filter");
+injectString("it", "Remove filter", "Rimuovere filtro");
+injectString("ja", "Remove filter", "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u524A\u9664");
+injectString("ko-KR", "Remove filter", "\uD544\uD130 \uC81C\uAC70");
+injectString("ms", "Remove filter", "Keluarkan penyaring");
+injectString("nb-NO", "Remove filter", "Fjern filter");
+injectString("nl", "Remove filter", "Filter verwijderen");
+injectString("pl", "Remove filter", "Usu\u0144 filtr");
+injectString("pt-BR", "Remove filter", "Remover filtro");
+injectString("pt-PT", "Remove filter", "Remover filtro");
+injectString("sk-SK", "Remove filter", "Odstr\xE1ni\u0165 filter");
+injectString("sv", "Remove filter", "Ta bort filter");
+injectString("th", "Remove filter", "\u0E25\u0E1A\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07");
+injectString("tr", "Remove filter", "Filtreyi kald\u0131r");
+injectString("zh-Hans", "Remove filter", "\u5220\u9664\u7B5B\u9009\u5668");
+injectString("zh-TW", "Remove filter", "\u79FB\u9664\u7BE9\u9078\u5668");
+injectString("ro-RO", "Remove filter", "\xCEndep\u0103rta\u021Bi filtrul");
 injectString("en", "Saved filters", "Saved filters");
 injectString("pt-PT", "Saved filters", "Filtros salvos");
 injectString("ro-RO", "Saved filters", "Filtre salvate");
@@ -139,6 +192,7 @@ 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 useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
 const FiltersSavedChipComponent = () => {
   const {
     translate
@@ -146,6 +200,7 @@ const FiltersSavedChipComponent = () => {
   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 contentMobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-filters-saved-popup__content");
   const {
     items,
     active,
@@ -185,12 +240,8 @@ const FiltersSavedChipComponent = () => {
     onRemove && onRemove(removeChipRef.current);
     removeChipRef.current = "";
   }, [onRemove]);
-  const handleFilterSelect = (0, react_1.useCallback)(e => {
+  const handleFilterSelect = (0, react_1.useCallback)(filterName => {
     var _a;
-    const filterName = e.target.dataset.filterName;
-    if (!filterName) {
-      return;
-    }
     onApply && onApply(filterName);
     setSavedChipOpen(prev => !prev);
     (_a = savedChipRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -207,7 +258,8 @@ const FiltersSavedChipComponent = () => {
     if (e.key === "Enter" || e.key === " ") {
       const filterName = e.currentTarget.dataset.filterName;
       const isRemoveButton = e.target.dataset.removeButton;
-      if (isRemoveButton || !filterName) {
+      const isActiveFilter = e.currentTarget.classList.contains("zen-filters-saved-popup__name--selected");
+      if (isRemoveButton || !filterName || isActiveFilter) {
         return;
       }
       onApply && onApply(filterName);
@@ -256,47 +308,63 @@ const FiltersSavedChipComponent = () => {
     children: [(0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, {
       description: translate("Save"),
       className: "svgIcon",
-      size: iconDriveClassName ? "huge" : "large"
+      size: iconDriveClassName || isMobile ? "huge" : "large"
     }), (0, jsx_runtime_1.jsx)("div", {
       className: (0, classNames_1.classNames)(["", "zen-ellipsis"]),
       children: translate("Save new")
     })]
-  }), [iconDriveClassName, toggleSaveModal, translate, handleSaveItemKeyDown]);
+  }), [handleSaveItemKeyDown, toggleSaveModal, translate, iconDriveClassName, isMobile]);
   const memoizedItems = (0, react_1.useMemo)(() => Array.from(items), [items]);
+  const getAriaLabelForItem = (0, react_1.useCallback)((filterName, isActive) => {
+    let ariaLabel = `${translate("Apply filter")} ${filterName}.`;
+    if (isActive) {
+      ariaLabel = `${filterName}. ${translate("This filter is currently applied.")}`;
+    }
+    return ariaLabel;
+  }, [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", {
+    className: (0, classNames_1.classNames)(["zen-filters-saved-popup__content", contentMobileClassName || contentDriveClassName || ""]),
+    children: [onSave ? saveButton : null, (0, jsx_runtime_1.jsx)("ul", {
       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,
+      onKeyDown: handleItemKeyDown,
+      children: memoizedItems.map(filterName => (0, jsx_runtime_1.jsxs)("li", {
         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",
+        children: [active.has(filterName) ? (0, jsx_runtime_1.jsx)("div", {
+          tabIndex: 0,
+          "data-list-item": true,
           "data-filter-name": filterName,
+          className: "zen-filters-saved-popup__name zen-filters-saved-popup__name--selected",
+          "aria-label": `${filterName}. ${translate("This filter is currently applied.")}`,
+          role: "text",
+          children: filterName
+        }) : (0, jsx_runtime_1.jsx)("button", {
+          type: "button",
+          tabIndex: 0,
+          onClick: () => handleFilterSelect(filterName),
+          "data-list-item": true,
+          "data-filter-name": filterName,
+          className: "zen-filters-saved-popup__name",
+          "aria-label": getAriaLabelForItem(filterName, active.has(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",
+          className: "zen-filters-saved-popup__close-button",
           onClick: handleRemove(filterName),
           title: translate("Remove"),
-          "aria-label": translate("Remove"),
+          "aria-label": `${translate("Remove filter")} ${filterName}`,
           children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
-            size: iconDriveClassName ? "huge" : "large",
+            size: iconDriveClassName || isMobile ? "huge" : "large",
             className: "zen-filters-saved-popup__close-icon"
           })
         }) : null]
       }, filterName))
     })]
-  }), [active, contentDriveClassName, handleFilterSelect, handleItemKeyDown, handleRemove, iconDriveClassName, memoizedItems, onRemove, onSave, saveButton, translate]);
+  }), [contentMobileClassName, contentDriveClassName, onSave, saveButton, handleItemKeyDown, memoizedItems, active, translate, getAriaLabelForItem, onRemove, handleRemove, iconDriveClassName, isMobile, handleFilterSelect]);
   const memoizedStatus = (0, react_1.useMemo)(() => active.size > 0 && Array.from(items).some(item => active.has(item)) ? "active" : undefined, [active, items]);
   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"]),
+    className: "zen-filters-saved-popup",
     onOpenChange: toggleSavedChipOpen,
     useTrapFocusWithTrigger: "on",
     shouldHoldScroll: true,
@@ -327,6 +395,7 @@ const FiltersSavedChipComponent = () => {
       onClick: toggleSavedChipOpen,
       title: translate("Saved filters"),
       icon: iconDisk_1.IconDisk,
+      dataRole: "dialog",
       triggerRef: savedChipRef
     }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsxs)(modal_1.Modal, {
       isOpen: removeModalOpen,

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

@@ -12,9 +12,15 @@ interface IFiltersSearch {
     handleRemove?: (id: ISearchItem) => void;
     className?: string;
     ref?: RefObject<HTMLInputElement | 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";
 }
 export declare const FiltersSearch: {
-    ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, searchSelection, handleRemove, className, ref }: IFiltersSearch): import("react/jsx-runtime").JSX.Element;
+    ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, searchSelection, handleRemove, className, ariaLabel, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded, ref }: IFiltersSearch): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/filters/components/filtersSearch.js

@@ -30,9 +30,11 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const filtersSearchList_1 = require("./filtersSearchList");
 const searchInputRaw_1 = require("../../searchInputRaw/searchInputRaw");
 const pill_1 = require("../../pill/pill");
-const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, searchSelection, handleRemove, className, ref }) => {
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup, searchSelection, handleRemove, className, ariaLabel, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded, ref }) => {
     const isWithPills = Boolean(searchSelection && handleRemove);
     const divider = "_divider_";
+    const isMobile = (0, useMobile_1.useMobile)();
     const memoizedPillsArray = react_1.default.useMemo(() => {
         if (!isWithPills || !searchSelection || searchSelection.length === 0) {
             return [];
@@ -53,10 +55,12 @@ const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup
             handleRemove === null || handleRemove === void 0 ? void 0 : handleRemove(Object.assign(Object.assign({}, item), { type: type === filtersSearchList_1.NO_TYPED_SEARCH_ITEM ? undefined : type }));
         }
     }, [handleRemove, searchSelection]);
-    const handleSearchClick = (0, react_1.useCallback)((e) => {
+    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") {
+        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();
@@ -65,12 +69,21 @@ const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, onOpenPopup
         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 })] });
+        if (isMobile) {
+            return memoizedPillsArray.length
+                ? [
+                    (0, jsx_runtime_1.jsx)(pill_1.Pill, { type: "info", className: "zen-filters-search__selected-item zen-filters-search__selected-item--more", children: `+${memoizedPillsArray.length}` }, `${memoizedPillsArray.length}_${memoizedPillsArray.map(pill => pill.name).join("_")}`)
+                ]
+                : [];
+        }
+        const pillsForRender = [
+            { id: memoizedPillsArray[0].id, name: memoizedPillsArray[0].name },
+            memoizedPillsArray.length > 1 ? { id: "more_pills", name: `+${memoizedPillsArray.length - 1}` } : undefined
+        ].filter(Boolean);
+        return pillsForRender.map((pill, ind) => ((0, jsx_runtime_1.jsx)(pill_1.Pill, { type: "info", onClose: ind === 0 ? onRemove.bind(null, pill.id) : undefined, className: (0, classNames_1.classNames)(["zen-filters-search__selected-item", ind !== 0 ? "zen-filters-search__selected-item--more" : ""]), children: pill.name }, `${pill.id}_${pill.name}`)));
+    }, [memoizedPillsArray, onRemove, isMobile]);
+    const searchComponent = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(searchInputRaw_1.SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onKeyDown: onSearchKeyDown, value: value, role: role, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true, ariaHaspopup: ariaHaspopup, ariaControls: ariaControls, ariaAutocomplete: ariaAutocomplete, className: (0, classNames_1.classNames)(["zen-filters-search__search-input", "zen-filters__search", className || ""]) })), [id, ref, name, onChange, onSearchKeyDown, value, className, role, ariaLabel, ariaExpanded, ariaHaspopup, ariaControls, ariaAutocomplete]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-search", className || "", isMobile ? "zen-filters-search--mobile" : ""]), onClick: handleSearchClick, children: [searchComponent, selectedPills.length > 0 && (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search__selected", children: selectedPills })] }));
 };
 exports.FiltersSearch = FiltersSearch;
 exports.FiltersSearch.displayName = "FiltersSearch";