@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/dist/dropdownRaw/dropdownRaw.js

@@ -61,6 +61,7 @@ const getAriaAttributes_1 = require("../commonHelpers/getAriaAttributes");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
 const formSectionProvider_1 = require("../formSection/utils/formSectionProvider");
 const dropdown_1 = require("../dropdown/dropdown");
+const zen_1 = require("../utils/zen");
 const DropdownRaw = props => {
   var _a, _b;
   const {
@@ -165,7 +166,8 @@ const DropdownRaw = props => {
   const currentAllSelected = (0, react_1.useMemo)(() => state.isNestedList || !multiselect || !isFullSelectionMode ? undefined : state.isAllSelected, [state.isNestedList, state.isAllSelected, multiselect, isFullSelectionMode]);
   const currentIsChecked = (0, react_1.useMemo)(() => isCheckboxMode ? value.isChecked : undefined, [isCheckboxMode, value]);
   (0, react_1.useEffect)(() => {
-    const timeoutId = setTimeout(() => {
+    var _a;
+    const timeoutId = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
       if (Object.keys(state.groupsMap).length === 0 && getData) {
         const currentAbort = abortToken.current;
         (initialInChecked !== undefined ? getData(currentAbort.signal, undefined, initialInChecked) : getData(currentAbort.signal, undefined)).then(dta => {
@@ -177,10 +179,14 @@ const DropdownRaw = props => {
         }).catch(errorHandler);
       }
     });
-    return () => clearTimeout(timeoutId);
+    return () => {
+      var _a;
+      return (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutId);
+    };
   }, [getData, errorHandler, state.groupsMap, initialInChecked]);
   (0, react_1.useEffect)(() => {
-    const timeoutId = setTimeout(() => {
+    var _a;
+    const timeoutId = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
       if (!getData && dataItems && dataItems.length && !(0, dropdownHelper_1.compareObjectsArrays)(dataItems, previousMapDataItems.current)) {
         dispatchState({
           type: stateActionType_1.StateActionType.CreateMap,
@@ -189,7 +195,10 @@ const DropdownRaw = props => {
         previousMapDataItems.current = [...dataItems];
       }
     });
-    return () => clearTimeout(timeoutId);
+    return () => {
+      var _a;
+      return (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutId);
+    };
   }, [dataItems, getData, state.groupsMap]);
   (0, react_1.useEffect)(() => {
     if (prevIsLoading.current !== isLoading && Object.keys(state.groupsMap).length !== 0) {
@@ -537,13 +546,17 @@ const DropdownRaw = props => {
     isQueryMode ? handleQueryMode(searchValue, isChecked) : debouncedGetData(signal, searchValue, isChecked);
   }, [debouncedGetData, handleQueryMode, isQueryMode]);
   (0, react_1.useEffect)(() => {
-    const timeoutId = setTimeout(() => {
+    var _a;
+    const timeoutId = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
       if (!isQueryMode || (fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading)) {
         return;
       }
       handleDataQuery((fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [], state.inputValue);
     });
-    return () => clearTimeout(timeoutId);
+    return () => {
+      var _a;
+      return (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutId);
+    };
   }, [fetchState === null || fetchState === void 0 ? void 0 : fetchState.data, handleDataQuery, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, isQueryMode, state.inputValue]);
   (0, react_1.useEffect)(() => {
     // when change inside
@@ -777,9 +790,9 @@ const DropdownRaw = props => {
     }
     if (state.showList) {
       const isSearchMode = state.inputValue && !state.currentId;
-      const currentListData = (0, dropdownHelper_1.createListDataOptions)(state, translate, isSearchMode ? (0, dropdownHelper_1.sortDropdownItemArray)(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId)
+      const currentListData = (0, dropdownHelper_1.createListDataOptions)(state, translate, isSearchMode ? (0, dropdownHelper_1.sortDropdownItemArray)(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId) :
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      : (0, dropdownHelper_1.sortDropdownItemArray)(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
+      (0, dropdownHelper_1.sortDropdownItemArray)(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
       return (0, jsx_runtime_1.jsx)(dropdownList_1.DropdownList, {
         onBackButtonClick: handleBackButtonClick,
         onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,
@@ -833,6 +846,7 @@ const DropdownRaw = props => {
       triggerRef: triggerRef,
       icon: chipIcon,
       id: chipId,
+      dataRole: "dialog",
       children: currentStringFromSelected || chipName
     }) : (0, jsx_runtime_1.jsx)(dropdownTrigger_1.DropdownTrigger, Object.assign({
       name: name,

package/dist/favoriteButton/favoriteButton.js

@@ -41,6 +41,8 @@ injectString("zh-TW", "Favorite", "\u6211\u7684\u6700\u611B");
 injectString("ro-RO", "Favorite", "Preferat");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useDrive_1 = require("../utils/theme/useDrive");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 const FavoriteButton = ({
   isFavorite,
   onChange,
@@ -50,13 +52,15 @@ const FavoriteButton = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-favorite-button");
+  const mobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-favorite-button");
   const isDrive = (0, useDrive_1.useDrive)();
-  const iconSize = (0, react_1.useMemo)(() => isDrive ? "huge" : "large", [isDrive]);
+  const isMobile = (0, useMobile_1.useMobile)();
+  const iconSize = (0, react_1.useMemo)(() => isDrive || isMobile ? "huge" : "large", [isDrive, isMobile]);
   const filledClassName = isFavorite ? "zen-favorite-button--filled" : "";
   const onClick = (0, react_1.useCallback)(() => onChange(!isFavorite), [isFavorite, onChange]);
   return (0, jsx_runtime_1.jsxs)("button", {
     onClick: onClick,
-    className: (0, classNames_1.classNames)(["zen-favorite-button", driveClassName || "", filledClassName, className || ""]),
+    className: (0, classNames_1.classNames)(["zen-favorite-button", mobileClassName || driveClassName || "", filledClassName, className || ""]),
     title: translate("Favorite"),
     "aria-label": translate("Favorite"),
     "aria-pressed": isFavorite,

package/dist/feedbackContainer/feedbackContainer.js

@@ -28,17 +28,21 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const feedbackContext_1 = require("./feedbackContext");
 const alertRaw_1 = require("../alertRaw/alertRaw");
-const react_dom_1 = require("react-dom");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const toastRaw_1 = require("../toastRaw/toastRaw");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const getAlertAnimation_1 = require("./utils/getAlertAnimation");
 const getToastAnimation_1 = require("./utils/getToastAnimation");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
+const zen_1 = require("../utils/zen");
 const FeedbackContainer = () => {
+    var _a, _b;
     const { alerts, removeAlert, toasts, removeToast, activeFeedback, removedAlertId, removedToastId, mode } = react_1.default.useContext(feedbackContext_1.FeedbackContext);
     const prevAlertsLength = react_1.default.useRef(alerts.length);
     const prevToastsLength = react_1.default.useRef(toasts.length);
     const isAPIMode = mode === "api";
+    const isClientReady = (0, useClientReady_1.useClientReady)();
     const isMobile = (0, useMobile_1.useMobile)();
     const isAlertAdded = alerts.length > prevAlertsLength.current;
     const isToastAdded = toasts.length > prevToastsLength.current;
@@ -56,16 +60,19 @@ const FeedbackContainer = () => {
             removeAlert(alert.id);
             removedAlertId.current = indx;
             alert.onClose();
-        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : (0, getAlertAnimation_1.getAlertAnimation)(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons }, alert.id)), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
+        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : (0, getAlertAnimation_1.getAlertAnimation)(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id)), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
     const alertClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-alerts", isMobile ? "zen-alerts--mobile" : ""]), [isMobile]);
     const toastClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-toasts", isMobile ? "zen-toasts--mobile" : ""]), [isMobile]);
-    const alertsPortal = (0, react_1.useMemo)(() => (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: alertClasses, children: alertsToRender }), document.body), [alertsToRender, alertClasses]);
-    const toastsToRender = (0, react_1.useMemo)(() => toasts.map((toast, indx, arr) => (0, jsx_runtime_1.jsx)(toastRaw_1.ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : (0, getToastAnimation_1.getToastAnimation)(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, isOpen: true, onClose: () => {
+    const toastsToRender = (0, react_1.useMemo)(() => toasts.map((toast, indx, arr) => (0, jsx_runtime_1.jsx)(toastRaw_1.ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : (0, getToastAnimation_1.getToastAnimation)(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
             removeToast(toast.id);
             removedToastId.current = indx;
             toast.onClose();
         }, type: toast.type, hasIcon: toast.hasIcon, action: toast.action }, toast.id)), [toasts, sameToastsLength, isToastAdded, removedToastId, isMobile, activeFeedback, removeToast]);
-    const toastsPortal = (0, react_1.useMemo)(() => (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: toastClasses, children: toastsToRender }), document.body), [toastsToRender, toastClasses]);
+    const alertsPortal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)("div", { className: alertClasses, children: alertsToRender }), (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body);
+    const toastsPortal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)("div", { className: toastClasses, children: toastsToRender }), (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    if (!isClientReady) {
+        return null;
+    }
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isAPIMode && alertsPortal, !isAPIMode && toastsPortal] });
 };
 exports.FeedbackContainer = FeedbackContainer;

package/dist/feedbackContainer/hooks/useFeedbackAlert.js

@@ -8,13 +8,14 @@ const useFeedbackAlertState_1 = require("./useFeedbackAlertState");
 const addZenithAlert_1 = require("../utils/addZenithAlert");
 const removeZenithAlert_1 = require("../utils/removeZenithAlert");
 const getParentWindow_1 = require("../../utils/getParentWindow");
+const zen_1 = require("../../utils/zen");
 const ALERTS_MAX_NUMBER_DESKTOP = 3;
 const ALERTS_MAX_NUMBER_MOBILE = 4;
 const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const { alerts, setAlerts, alertsQueue, setAlertsQueue, alertsAnimation, setAlertsAnimation, removedAlertId, apiAlertActions, setApiAlertActions } = (0, useFeedbackAlertState_1.useFeedbackAlertState)();
     const isAPIMode = mode === "api";
-    const topView = (0, getParentWindow_1.getParentWindow)(window) || window;
+    const topView = (0, getParentWindow_1.getParentWindow)(zen_1.zen) || zen_1.zen;
     const alertsMaxNumber = isMobile ? ALERTS_MAX_NUMBER_MOBILE : ALERTS_MAX_NUMBER_DESKTOP;
     const removeAlert = (0, react_2.useCallback)((id, important) => {
         if (isAPIMode) {

package/dist/feedbackContainer/hooks/useFeedbackToast.js

@@ -6,6 +6,7 @@ const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const useFeedbackToastState_1 = require("./useFeedbackToastState");
 const isToastValid_1 = require("../utils/isToastValid");
 const getParentWindow_1 = require("../../utils/getParentWindow");
+const zen_1 = require("../../utils/zen");
 const TOAST_MAX_NUMBER_DESKTOP = 5;
 const TOASTS_MAX_NUMBER_MOBILE = 3;
 const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
@@ -13,7 +14,7 @@ const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
     const { toasts, setToasts, toastsQueue, setToastsQueue, toastsAnimation, setToastsAnimation, removedToastId, apiToastActions, setApiToastActions } = (0, useFeedbackToastState_1.useFeedbackToastState)();
     const isMobile = (0, useMobile_1.useMobile)();
     const toastMaxNumber = isMobile ? TOASTS_MAX_NUMBER_MOBILE : TOAST_MAX_NUMBER_DESKTOP;
-    const topView = (0, getParentWindow_1.getParentWindow)(window) || window;
+    const topView = (0, getParentWindow_1.getParentWindow)(zen_1.zen) || zen_1.zen;
     const removeToast = (0, react_1.useCallback)((id, important) => {
         if (isAPIMode) {
             if (!apiToastActions.find(el => el.id === id)) {

package/dist/feedbackProvider/utils/getDefaultProviderMode.js

@@ -2,18 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultProviderMode = void 0;
 const getParentWindow_1 = require("../../utils/getParentWindow");
+const zen_1 = require("../../utils/zen");
 const getDefaultProviderMode = (mode) => {
+    var _a, _b;
     if (mode) {
         return mode;
     }
-    const parent = (0, getParentWindow_1.getParentWindow)(window);
-    const isTopWindow = window === parent;
+    const parent = (0, getParentWindow_1.getParentWindow)(zen_1.zen);
+    const isTopWindow = zen_1.zen === parent;
     // if initialized in iframe
     if (!isTopWindow) {
         return "api";
     }
     // if "default" Provided already initialized on the same page
-    if (parent.document.querySelector(".zen-alerts") || parent.document.querySelector(".zen-toasts")) {
+    if (((_a = parent.document) === null || _a === void 0 ? void 0 : _a.querySelector(".zen-alerts")) || ((_b = parent.document) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-toasts"))) {
         return "api";
     }
     return "default";

package/dist/filterButton/filterButton.js

@@ -19,10 +19,14 @@ const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
 const button_1 = require("../button/button");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useDrive_1 = require("../utils/theme/useDrive");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const FilterButton = (_a) => {
     var { id, title, disabled, quantity, className, children, onClick, onMouseOver, onMouseOut, fullWidth, maxWidth, minWidth, isActive = false, type = "secondary", ariaLabel, ref, onBlur, name } = _a, other = __rest(_a, ["id", "title", "disabled", "quantity", "className", "children", "onClick", "onMouseOver", "onMouseOut", "fullWidth", "maxWidth", "minWidth", "isActive", "type", "ariaLabel", "ref", "onBlur", "name"]);
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-filter-button");
+    const mobileComponentClass = (0, useMobileClassName_1.useMobileClassName)("zen-filter-button");
     const isDrive = (0, useDrive_1.useDrive)();
+    const isMobile = (0, useMobile_1.useMobile)();
     const hasQuantity = typeof quantity === "number";
     const isLargeNumber = hasQuantity && quantity > 99;
     const onClickEvent = (0, react_1.useMemo)(() => onClick
@@ -31,11 +35,11 @@ const FilterButton = (_a) => {
     const inlineStyle = (0, react_1.useMemo)(() => maxWidth || minWidth ? { style: Object.assign(Object.assign({}, (maxWidth ? { maxWidth: `${maxWidth}px` } : {})), (minWidth ? { minWidth: `${minWidth}px` } : {})) } : {}, [maxWidth, minWidth]);
     return (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ id: id, name: name, onBlur: onBlur, title: title, disabled: disabled, type: type, className: (0, classNames_1.classNames)([
             "zen-filter-button",
-            driveComponentClass || "",
+            mobileComponentClass || driveComponentClass || "",
             `zen-filter-button--${type}`,
             className || "",
             isActive ? "zen-filter-button--active" : "",
             fullWidth ? "zen-filter-button--full-width" : ""
-        ]), onClick: onClickEvent, onMouseOver: onMouseOver, onMouseOut: onMouseOut, ref: ref, htmlType: "button", "aria-label": ariaLabel }, inlineStyle, other, { children: [children ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filter-button__label", "zen-ellipsis", fullWidth ? "zen-filter-button__label--full-width" : ""]), children: children }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-filter-button__tags", children: [hasQuantity ? (0, jsx_runtime_1.jsx)("div", { className: "zen-filter-button__quantity", children: isLargeNumber ? "99+" : quantity }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-filter-button__icon", children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { size: isDrive ? "huge" : "large" }) })] })] }));
+        ]), onClick: onClickEvent, onMouseOver: onMouseOver, onMouseOut: onMouseOut, ref: ref, htmlType: "button", "aria-label": ariaLabel }, inlineStyle, other, { children: [children ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filter-button__label", "zen-ellipsis", fullWidth ? "zen-filter-button__label--full-width" : ""]), children: children }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-filter-button__tags", children: [hasQuantity ? (0, jsx_runtime_1.jsx)("div", { className: "zen-filter-button__quantity", children: isLargeNumber ? "99+" : quantity }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-filter-button__icon", children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { size: isDrive || isMobile ? "huge" : "large" }) })] })] }));
 };
 exports.FilterButton = FilterButton;

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

@@ -5,7 +5,8 @@ export interface IFiltersChipProps extends Pick<IChip, "disabled" | "icon" | "st
 export interface IFiltersChip extends Omit<IFiltersItem<boolean>, "defaultState">, IFiltersChipProps {
 }
 export declare const FiltersChipDisplayName = "FiltersChip";
+export declare const FiltersChipInner: ({ className, name, state, onChange: onChangeState, id, ...componentProps }: IFiltersChip) => import("react/jsx-runtime").JSX.Element;
 export declare const FiltersChip: {
-    ({ className, name, state, onChange: onChangeState, id, ...componentProps }: IFiltersChip): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: IFiltersChip): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/filters/components/filtersChip.js

@@ -11,17 +11,31 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FiltersChip = exports.FiltersChipDisplayName = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+exports.FiltersChip = exports.FiltersChipInner = exports.FiltersChipDisplayName = void 0;
 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 chip_1 = require("../../chip/chip");
 const chipStatusProvider_1 = require("../../chip/chipStatusProvider");
+const filtersSidePanelProvider_1 = require("./filtersSidePanelProvider");
+const filtersSidePanelItemWrapper_1 = require("./filtersSidePanelItemWrapper");
+const filtersSidePanelChip_1 = require("./filtersSidePanelChip");
 exports.FiltersChipDisplayName = "FiltersChip";
-const FiltersChip = (_a) => {
+const FiltersChipInner = (_a) => {
     var { className, name, state, onChange: onChangeState, id } = _a, componentProps = __rest(_a, ["className", "name", "state", "onChange", "id"]);
     const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
-    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, Object.assign({ id: id }, componentProps, { className: (0, classNames_1.classNames)(["zen-filters-chip", className || ""]), active: state, status: state ? chipStatus || undefined : undefined, onChange: () => onChangeState(!state), children: name })), [id, componentProps, className, state, chipStatus, name, onChangeState]);
+    const component = (0, react_2.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, Object.assign({ id: id }, componentProps, { className: (0, classNames_1.classNames)(["zen-filters-chip", className || ""]), active: state, status: state ? chipStatus || undefined : undefined, onChange: () => onChangeState(!state), children: name })), [id, componentProps, className, state, chipStatus, name, onChangeState]);
+    return component;
+};
+exports.FiltersChipInner = FiltersChipInner;
+const FiltersChip = (_a) => {
+    var props = __rest(_a, []);
+    const isSidePanelView = (0, filtersSidePanelProvider_1.useFiltersSidePanel)();
+    const component = (0, react_2.useMemo)(() => (0, react_1.createElement)(exports.FiltersChipInner, 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)(filtersSidePanelChip_1.FiltersSidePanelChip, { id: props.id, currentState: props.state, handleStateChange: props.onChange, children: props.name }, `key_${props.id}-side-panel`) });
+    }
     return component;
 };
 exports.FiltersChip = FiltersChip;

package/dist/filters/components/filtersContainer.js

@@ -76,6 +76,7 @@ const iconClose_1 = require("../../icons/iconClose");
 const chipStatusProvider_1 = require("../../chip/chipStatusProvider");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const keyboardHelpers_1 = require("../../utils/keyboardHelpers");
 const FiltersContainer = ({
   className,
   isPinned = false,
@@ -91,6 +92,7 @@ const FiltersContainer = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const isMobile = (0, useMobile_1.useMobile)();
+  const filtersChipContainerRef = react_2.default.useRef(null);
   const numberOfChangedFilters = (0, react_1.useMemo)(() => {
     const suppressedFilters = new Set();
     filtersForCalculation.forEach(filter => {
@@ -110,6 +112,7 @@ const FiltersContainer = ({
     onClick: filtersClickHandler,
     icon: iconFilter_1.IconFilter,
     title: translate("All Filters"),
+    dataRole: "dialog",
     triggerRef: filtersChipRef,
     children: "+"
   }), [numberOfChangedFilters, chipStatus, filtersClickHandler, translate, filtersChipRef]);
@@ -133,6 +136,19 @@ const FiltersContainer = ({
   const memoizedChildren = (0, react_1.useMemo)(() => (0, filtersHelper_1.stabilizeChildrenWithId)(children).filter(Boolean),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [childrenSignature]);
+  const handleKeyDown = (0, react_1.useCallback)(event => {
+    if (isMobile) {
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      const nextFocusable = (0, keyboardHelpers_1.getNewFocusableItem)(1, filtersChipContainerRef.current, ".zen-chip__trigger,.zen-chip__input");
+      nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
+    }
+    if (event.key === "ArrowLeft") {
+      const nextFocusable = (0, keyboardHelpers_1.getNewFocusableItem)(-1, filtersChipContainerRef.current, ".zen-chip__trigger,.zen-chip__input");
+      nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
+    }
+  }, [isMobile]);
   const handleRemovalClick = (0, react_1.useCallback)(() => {
     const defaultState = (0, filtersHelper_1.createStateObject)(filtersForCalculation, "defaultState");
     filtersForCalculation.forEach(child => {
@@ -162,6 +178,8 @@ const FiltersContainer = ({
   }), [chipRemovalComponent, filtersChipComponent, hasSavedFilters, memoizedChildren]);
   return (0, jsx_runtime_1.jsx)("div", {
     className: (0, classNames_1.classNames)(["zen-filters-container", isMobile ? "zen-filters-container--mobile" : "", className || ""]),
+    onKeyDown: handleKeyDown,
+    ref: filtersChipContainerRef,
     children: isMobile ? (0, jsx_runtime_1.jsx)("div", {
       className: "zen-filters-container__mobile-scroll-wrapper",
       children: memoizedFiltersElements

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

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+interface IFiltersCustomProvider<T = unknown> {
+    state: T;
+    onChange: (state: T) => void;
+}
+interface IFiltersCustomContext {
+    state: unknown;
+    onChange: (state: unknown) => void;
+}
+export declare const FiltersCustomContext: import("react").Context<IFiltersCustomContext | undefined>;
+export declare const FiltersCustomProvider: <T = unknown>({ state, onChange, children }: {
+    state: T;
+    onChange: (state: T) => void;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useFiltersCustom: <T = unknown>() => IFiltersCustomProvider<T>;
+export {};

package/dist/filters/components/filtersCustomProvider.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFiltersCustom = exports.FiltersCustomProvider = exports.FiltersCustomContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.FiltersCustomContext = (0, react_1.createContext)(undefined);
+const FiltersCustomProvider = ({ state, onChange, children }) => ((0, jsx_runtime_1.jsx)(exports.FiltersCustomContext.Provider, { value: { state, onChange: onChange }, children: children }));
+exports.FiltersCustomProvider = FiltersCustomProvider;
+const useFiltersCustom = () => {
+    const context = (0, react_1.useContext)(exports.FiltersCustomContext);
+    if (!context) {
+        throw new Error("useFiltersCustom must be used within FiltersCustomProvider");
+    }
+    return context;
+};
+exports.useFiltersCustom = useFiltersCustom;

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

@@ -7,6 +7,6 @@ export interface IFiltersDateInput extends IFiltersItem<TFiltersDateInputState>,
 }
 export declare const FiltersDateInputDisplayName = "FiltersDateInput";
 export declare const FiltersDateInput: {
-    ({ 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;
 };

package/dist/filters/components/filtersDateInput.js

@@ -12,15 +12,27 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersDateInput = exports.FiltersDateInputDisplayName = 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 dateInput_1 = require("../../dateInput/dateInput");
 const iconCalendar_1 = require("../../icons/iconCalendar");
+const filtersSidePanelItemWrapper_1 = require("./filtersSidePanelItemWrapper");
+const filtersSidePanelProvider_1 = require("./filtersSidePanelProvider");
+const dateInputRaw_1 = require("../../dateInputRaw/dateInputRaw");
 exports.FiltersDateInputDisplayName = "FiltersDateInput";
-const FiltersDateInput = (_a) => {
+const FiltersDateInputInner = (_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)(dateInput_1.DateInput, Object.assign({}, otherRangeProps, { buttonLabel: name, value: state, onChange: onChangeState, defaultValue: defaultState, className: (0, classNames_1.classNames)(["zen-filters-date-input", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconCalendar_1.IconCalendar })), [otherRangeProps, chipIcon, state, onChangeState, defaultState, className, id, name]);
+    const component = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(dateInputRaw_1.DateInputRaw, Object.assign({}, otherRangeProps, { buttonLabel: name, value: state, onChange: onChangeState, defaultValue: defaultState, className: (0, classNames_1.classNames)(["zen-filters-date-input", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconCalendar_1.IconCalendar }))), [otherRangeProps, chipIcon, state, onChangeState, defaultState, className, id, name]);
+    return component;
+};
+const FiltersDateInput = (_a) => {
+    var props = __rest(_a, []);
+    const isSidePanelView = (0, filtersSidePanelProvider_1.useFiltersSidePanel)();
+    const component = (0, react_2.useMemo)(() => (0, react_1.createElement)(FiltersDateInputInner, Object.assign({}, props, { className: (0, classNames_1.classNames)(["zen-filters-date-input", props.className || ""]), key: `key_${props.id}` })), [props]);
+    if (isSidePanelView) {
+        return ((0, jsx_runtime_1.jsx)(filtersSidePanelItemWrapper_1.FiltersSidePanelItemWrapper, { name: props.name, children: (0, react_1.createElement)(dateInputRaw_1.DateInputRaw, Object.assign({}, props, { id: `${props.id}-side-panel`, key: `key_${props.id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([props.classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: (0, classNames_1.classNames)(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", props.className || ""]), buttonLabel: props.name, value: props.state, onChange: props.onChange, defaultValue: props.defaultState, chip: false })) }));
+    }
     return component;
 };
 exports.FiltersDateInput = FiltersDateInput;

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

@@ -26,7 +26,7 @@ export type IFiltersDateRangeItem<P extends IFiltersDateRangeProps = IFiltersDat
 export type IFiltersDateRange = IFiltersDateRangeItem;
 export declare const FiltersDateRangeDisplayName = "FiltersDateRange";
 export declare const FiltersDateRange: {
-    <P extends IFiltersDateRangeProps = IFiltersDateRangeProps>({ className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>): React.JSX.Element;
+    <P extends IFiltersDateRangeProps = IFiltersDateRangeProps>({ ...props }: IFiltersDateRangeItem<P>): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/filters/components/filtersDateRange.js

@@ -12,15 +12,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersDateRange = exports.FiltersDateRangeDisplayName = 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 dateRange_1 = require("../../dateRange/dateRange");
 const iconCalendar_1 = require("../../icons/iconCalendar");
+const filtersSidePanelProvider_1 = require("./filtersSidePanelProvider");
+const filtersSidePanelItemWrapper_1 = require("./filtersSidePanelItemWrapper");
+const filtersSidePanelDateRange_1 = require("./filtersSidePanelDateRange");
+const dateRangeRaw_1 = require("../../dateRangeRaw/dateRangeRaw");
 exports.FiltersDateRangeDisplayName = "FiltersDateRange";
-const FiltersDateRange = (_a) => {
+const FiltersDateRangeInner = (_a) => {
     var { className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon } = _a, dateRangeProps = __rest(_a, ["className", "state", "defaultState", "name", "onChange", "id", "allowUnsetValue", "chipIcon"]);
-    const component = (0, react_1.useMemo)(() => allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, dateRangeProps, { value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: true, className: (0, classNames_1.classNames)(["zen-filters-date-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconCalendar_1.IconCalendar })) : (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, dateRangeProps, { value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: false, className: (0, classNames_1.classNames)(["zen-filters-date-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconCalendar_1.IconCalendar })), [dateRangeProps, id, state, defaultState, className, name, onChangeState, allowUnsetValue, chipIcon]);
+    const component = (0, react_2.useMemo)(() => allowUnsetValue ? ((0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, dateRangeProps, { value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: true, className: (0, classNames_1.classNames)(["zen-filters-date-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconCalendar_1.IconCalendar }))) : ((0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, dateRangeProps, { value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: false, className: (0, classNames_1.classNames)(["zen-filters-date-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconCalendar_1.IconCalendar }))), [dateRangeProps, id, state, defaultState, className, name, onChangeState, allowUnsetValue, chipIcon]);
+    return component;
+};
+const FiltersDateRange = (_a) => {
+    var props = __rest(_a, []);
+    const isSidePanelView = (0, filtersSidePanelProvider_1.useFiltersSidePanel)();
+    const component = (0, react_2.useMemo)(() => (0, react_1.createElement)(FiltersDateRangeInner, Object.assign({}, props, { key: `key_${props.id}` })), [props]);
+    if (isSidePanelView) {
+        return ((0, jsx_runtime_1.jsx)(filtersSidePanelItemWrapper_1.FiltersSidePanelItemWrapper, { name: props.name, children: (0, react_1.createElement)(filtersSidePanelDateRange_1.FiltersSidePanelDateRange, Object.assign({}, props, { key: `key_${props.id}-side-panel` })) }));
+    }
     return component;
 };
 exports.FiltersDateRange = FiltersDateRange;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { IDropdown, IDropdownFullSelection, IDropdownFullSelectionWithCheckbox, IDropdownItem, IDropdownWithCheckbox } from "../../dropdown/dropdown";
 import { IFiltersItem } from "./filtersItem";
 import { IFetchDropdownState } from "../../dropdownRaw/types";
+import React from "react";
 export interface IFiltersDropdownProps extends Omit<IDropdown | IDropdownFullSelection | IDropdownWithCheckbox | IDropdownFullSelectionWithCheckbox, "value" | "onChange" | "defaultValue" | "className" | "getData" | "errorHandler"> {
 }
 export type TFiltersDropdownState = string[];
@@ -29,7 +29,7 @@ export interface IFiltersDropdown<T extends TFiltersDropdownAllStates = TFilters
     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, dataItems, isLoading, ...restDropdownProps }: IFiltersDropdown<T>): React.JSX.Element;
+export declare function FiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState>({ ...props }: IFiltersDropdown<T>): React.JSX.Element;
 export declare namespace FiltersDropdown {
     var displayName: string;
 }

package/dist/filters/components/filtersDropdown.js

@@ -15,28 +15,40 @@ exports.FiltersDropdown = exports.FiltersDropdownDisplayName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const dropdown_1 = require("../../dropdown/dropdown");
 const iconFilter_1 = require("../../icons/iconFilter");
 const filtersHelper_1 = require("../filtersHelper");
+const filtersSidePanelDropdown_1 = require("./filtersSidePanelDropdown");
+const filtersSidePanelProvider_1 = require("./filtersSidePanelProvider");
+const filtersSidePanelItemWrapper_1 = require("./filtersSidePanelItemWrapper");
+const dropdownRaw_1 = require("../../dropdownRaw/dropdownRaw");
 exports.FiltersDropdownDisplayName = "FiltersDropdown";
-function FiltersDropdown(_a) {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function FiltersDropdownInner(_a) {
     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);
+            return value.map(item => item.id);
         }
-        return Object.assign(Object.assign({}, value), { selected: value.selected.map((item) => item.id) });
+        return Object.assign(Object.assign({}, value), { selected: value.selected.map(item => item.id) });
     };
     const dropdownStateType = (0, filtersHelper_1.getDropdownStateType)(state);
-    const memoizedDefaultState = (0, react_1.useMemo)(() => defaultState ? defaultState : (0, filtersHelper_1.prepareDefaultDropdownState)(dropdownStateType), [dropdownStateType, defaultState]);
+    const memoizedDefaultState = (0, react_1.useMemo)(() => (defaultState ? defaultState : (0, filtersHelper_1.prepareDefaultDropdownState)(dropdownStateType)), [dropdownStateType, defaultState]);
     const component = (0, react_1.useMemo)(() => {
         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, dataItems: dataItems, isLoading: dataItems !== undefined ? isLoading : undefined, errorHandler: (() => { }), placeholder: restDropdownProps.placeholder || name, defaultValue: memoizedDefaultState, className: (0, classNames_1.classNames)(["zen-filters-dropdown", className || ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-dropdown-popup", classNamePopup || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFilter_1.IconFilter });
-        return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, dropdownPropsForComponent));
+            }, 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: (0, classNames_1.classNames)(["zen-filters-dropdown", className || ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-dropdown-popup", classNamePopup || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFilter_1.IconFilter });
+        return (0, jsx_runtime_1.jsx)(dropdownRaw_1.DropdownRaw, Object.assign({}, dropdownPropsForComponent));
     }, [restDropdownProps, state, dropdownStateType, fetchState, dataItems, isLoading, name, memoizedDefaultState, className, classNamePopup, id, chipIcon, onChangeState]);
     return component;
 }
+function FiltersDropdown(_a) {
+    var props = __rest(_a, []);
+    const isSidePanelView = (0, filtersSidePanelProvider_1.useFiltersSidePanel)();
+    if (isSidePanelView) {
+        return ((0, jsx_runtime_1.jsx)(filtersSidePanelItemWrapper_1.FiltersSidePanelItemWrapper, { name: props.name || "", children: (0, jsx_runtime_1.jsx)(filtersSidePanelDropdown_1.FiltersSidePanelDropdown, { elemProps: Object.assign({}, props), currentState: props.state, handleStateChange: props.onChange }, `key_${props.id}_sidePanel`) }));
+    }
+    return (0, jsx_runtime_1.jsx)(FiltersDropdownInner, Object.assign({}, props), `key_${props.id}`);
+}
 exports.FiltersDropdown = FiltersDropdown;
 FiltersDropdown.displayName = exports.FiltersDropdownDisplayName;

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

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

package/dist/filters/components/{filtersEmptySelectedList.js → filtersEmptyState.js}

@@ -6,36 +6,25 @@ const {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FiltersEmptySelectedList = void 0;
+exports.FiltersEmptyState = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-injectString("en", "No Filters Selected", "No Filters Selected");
-injectString("pt-PT", "No Filters Selected", "Nenhum filtro selecionado");
-injectString("ro-RO", "No Filters Selected", "Nu exist\u0103 filtre selectate");
+const imageLooking_1 = require("../../images/imageLooking");
+const emptyState_1 = require("../../emptyState/emptyState");
 injectString("en", "Selected filters will appear here.", "Selected filters will appear here.");
 injectString("pt-PT", "Selected filters will appear here.", "Os filtros selecionados aparecer\xE3o aqui.");
 injectString("ro-RO", "Selected filters will appear here.", "Filtrele selectate vor ap\u0103rea aici.");
-const imageLooking_1 = require("../../images/imageLooking");
-const FiltersEmptySelectedList = () => {
+injectString("en", "No Filters Selected", "No Filters Selected");
+injectString("pt-PT", "No Filters Selected", "Nenhum filtro selecionado");
+injectString("ro-RO", "No Filters Selected", "Nu exist\u0103 filtre selectate");
+const FiltersEmptyState = () => {
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
-  return (0, jsx_runtime_1.jsxs)("div", {
-    className: "zen-filters-empty-selected-list",
-    children: [(0, jsx_runtime_1.jsx)(imageLooking_1.ImageLooking, {
-      className: "zen-filters-empty-selected-list__image",
-      title: translate("No Filters Selected"),
-      description: translate("Selected filters will appear here.")
-    }), (0, jsx_runtime_1.jsxs)("div", {
-      className: "zen-filters-empty-selected-list__text",
-      children: [(0, jsx_runtime_1.jsx)("div", {
-        className: "zen-filters-empty-selected-list__header",
-        children: translate("No Filters Selected")
-      }), (0, jsx_runtime_1.jsx)("div", {
-        className: "zen-filters-empty-selected-list__description",
-        children: translate("Selected filters will appear here.")
-      })]
-    })]
+  return (0, jsx_runtime_1.jsx)(emptyState_1.EmptyState, {
+    image: imageLooking_1.ImageLooking,
+    description: translate("Selected filters will appear here."),
+    children: translate("No Filters Selected")
   });
 };
-exports.FiltersEmptySelectedList = FiltersEmptySelectedList;
+exports.FiltersEmptyState = FiltersEmptyState;