@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/dist/filters/components/filtersSelectCompact.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSelectCompact = exports.FiltersSelectCompactDisplayName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
+const filtersSelectUnfoldingPill_1 = require("./filtersSelectUnfoldingPill");
+const filtersSelect_1 = require("./filtersSelect");
+const keyboardHelpers_1 = require("../../utils/keyboardHelpers");
+exports.FiltersSelectCompactDisplayName = "FiltersSelectCompact";
+const FiltersSelectCompact = ({ value, onChange, items, selectListRef, className }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const [activeId, setActiveId] = (0, react_1.useState)(Object.keys(value)[0] || "");
+    const filtersSelectListId = (0, useUniqueId_1.useUniqueId)();
+    const filteredItems = (0, react_1.useMemo)(() => (items === null || items === void 0 ? void 0 : items.filter(el => el.id !== filtersSelect_1.ALL_SELECT_OPTION_ID)) || [], [items]);
+    const preparedItems = (0, react_1.useMemo)(() => [
+        (0, filtersSelect_1.getAllOption)(translate),
+        ...filteredItems
+    ], [translate, filteredItems]);
+    const handleExpandableItemClick = (0, react_1.useCallback)((clickedId) => () => {
+        if (activeId === clickedId) {
+            setActiveId("");
+            return;
+        }
+        setActiveId(clickedId);
+    }, [activeId]);
+    const handleItemClick = (0, react_1.useCallback)((clickedId, parentId) => () => {
+        if (onChange === undefined) {
+            return;
+        }
+        if (!clickedId) {
+            parentId && onChange({ [parentId]: undefined });
+            return;
+        }
+        if (parentId) {
+            onChange({ [parentId]: clickedId });
+            return;
+        }
+        setActiveId("");
+        onChange(Object.keys(value).includes(clickedId) ? (0, filtersSelect_1.getFiltersSearchTypeAllOption)() : { [clickedId]: undefined });
+    }, [onChange, value]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === "ArrowLeft") {
+            const nextElement = (0, keyboardHelpers_1.getNewFocusableItem)(-1, selectListRef.current, "label.zen-pill-actionable");
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            const nextElement = (0, keyboardHelpers_1.getNewFocusableItem)(1, selectListRef.current, "label.zen-pill-actionable");
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+    }, [selectListRef]);
+    const selectPillsComponent = (0, react_1.useMemo)(() => preparedItems.map(el => el.subItems && el.subItems.length > 0 ?
+        (0, jsx_runtime_1.jsx)(filtersSelectUnfoldingPill_1.FiltersSelectUnfoldingPill, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isExpanded: el.id === activeId, isActive: Object.keys(value).includes(el.id) && value[el.id] === undefined, grouped: el.id === activeId, onExpandItem: handleExpandableItemClick(el.id), onClick: handleItemClick(undefined, el.id), content: el.subItems.map(subEl => (0, jsx_runtime_1.jsx)(filtersSelectUnfoldingPill_1.FiltersSelectPillItem, { className: (0, classNames_1.classNames)(["zen-filters-select-compact__sub-item"]), id: `${filtersSelectListId}-${el.id}-${subEl.id}`, name: subEl.name, isActive: value[el.id] === subEl.id, grouped: true, onClick: handleItemClick(subEl.id, el.id) }, `${el.id}-${subEl.id}`)) }, `${filtersSelectListId}-${el.id}`) : (0, jsx_runtime_1.jsx)(filtersSelectUnfoldingPill_1.FiltersSelectPillItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, className: "zen-filters-select-compact__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-compact", ref: selectListRef, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-select-compact__list", className || ""]), children: selectPillsComponent }) });
+};
+exports.FiltersSelectCompact = FiltersSelectCompact;
+exports.FiltersSelectCompact.displayName = exports.FiltersSelectCompactDisplayName;

package/dist/filters/components/filtersSelectListItem.js

@@ -14,6 +14,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
 const iconChevronDownSmall_1 = require("../../icons/iconChevronDownSmall");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
+const zen_1 = require("../../utils/zen");
 injectString("cs", "Collapse", "Sbalit");
 injectString("da-DK", "Collapse", "Fold sammen");
 injectString("de", "Collapse", "Ausblenden");
@@ -74,6 +75,7 @@ const FiltersSelectListItem = ({
   className = ""
 }) => (0, jsx_runtime_1.jsx)("div", {
   children: (0, jsx_runtime_1.jsx)("button", {
+    "data-list-item": true,
     type: "button",
     className: (0, classNames_1.classNames)(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]),
     id: id,
@@ -96,16 +98,46 @@ const FiltersSelectListExpandableItem = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const [shouldRender, setShouldRender] = (0, react_1.useState)(isExpanded);
+  const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+  const expandableButtonRef = (0, react_1.useRef)(null);
+  const frameRef = (0, react_1.useRef)(null);
+  (0, react_1.useEffect)(() => {
+    var _a;
+    if (isExpanded) {
+      setShouldRender(true);
+      frameRef.current = (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
+        var _a;
+        frameRef.current = (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
+          setIsAnimating(true);
+        });
+      });
+    } else {
+      setIsAnimating(false);
+    }
+    return () => {
+      var _a;
+      return (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, frameRef.current);
+    };
+  }, [isExpanded]);
+  const handleTransitionEnd = e => {
+    if (e.propertyName === "grid-template-rows" && !isExpanded) {
+      setShouldRender(false);
+    }
+  };
   const handleExpandItem = (0, react_1.useCallback)(e => {
+    var _a;
     e.stopPropagation();
     if (onExpandItem) {
       onExpandItem();
+      (_a = expandableButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }, [onExpandItem]);
   return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
     children: [(0, jsx_runtime_1.jsxs)("div", {
       className: (0, classNames_1.classNames)(["zen-filters-select__list-item-wrapper", isExpanded ? "zen-filters-select__list-item-wrapper--expanded" : "", className]),
       children: [(0, jsx_runtime_1.jsx)("button", {
+        "data-list-item": true,
         type: "button",
         className: (0, classNames_1.classNames)(["zen-filters-select__list-item"]),
         id: id,
@@ -118,22 +150,28 @@ const FiltersSelectListExpandableItem = ({
         })
       }), (0, jsx_runtime_1.jsx)(button_1.Button, {
         type: "tertiary-black",
+        "data-expand-button": true,
+        ref: expandableButtonRef,
         onClick: handleExpandItem,
         className: "zen-filters-select__item-button",
-        "aria-expanded": isExpanded,
+        "aria-expanded": shouldRender,
         "aria-controls": ariaControlsId,
-        "aria-label": isExpanded ? `${translate("Collapse")} ${name}` : `${translate("Expand")} ${name}`,
+        "aria-label": shouldRender ? `${translate("Collapse")} ${name}` : `${translate("Expand")} ${name}`,
         children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, {
           size: "large",
-          className: (0, classNames_1.classNames)(["zen-filters-select__item-icon", isExpanded ? "zen-filters-select__item-icon--rotated" : ""])
+          className: (0, classNames_1.classNames)(["zen-filters-select__item-icon", isAnimating ? "zen-filters-select__item-icon--rotated" : ""])
         })
       })]
-    }), (0, jsx_runtime_1.jsx)("div", {
+    }), shouldRender && (0, jsx_runtime_1.jsx)("div", {
       id: ariaControlsId,
       "aria-labelledby": id,
       role: "region",
-      className: (0, classNames_1.classNames)(["zen-filters-select__item-content", content ? "" : "zen-filters-select__item-content--hidden"]),
-      children: content
+      className: (0, classNames_1.classNames)(["zen-filters-select__item-content", isAnimating ? "zen-filters-select__item-content--expanded" : ""]),
+      onTransitionEnd: handleTransitionEnd,
+      children: (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-filters-select__item-content-inner",
+        children: content
+      })
     })]
   });
 };

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+interface IFiltersSelectPillItem {
+    id: string;
+    name: string;
+    isActive: boolean;
+    onClick: () => void;
+    grouped?: boolean;
+    className?: string;
+}
+export declare const FiltersSelectPillItem: ({ id, name, isActive, onClick, grouped, className }: IFiltersSelectPillItem) => import("react/jsx-runtime").JSX.Element;
+interface IFiltersSelectUnfoldingPillItem {
+    id: string;
+    name: string;
+    content: React.ReactNode;
+    isActive: boolean;
+    isExpanded: boolean;
+    onClick: () => void;
+    grouped?: boolean;
+    className?: string;
+    onExpandItem?: () => void;
+}
+export declare const FiltersSelectUnfoldingPill: ({ id, name, content, isActive, isExpanded, onClick, grouped, className, onExpandItem }: IFiltersSelectUnfoldingPillItem) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/filters/components/filtersSelectUnfoldingPill.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSelectUnfoldingPill = exports.FiltersSelectPillItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
+const pill_1 = require("../../pill/pill");
+const zen_1 = require("../../utils/zen");
+const FiltersSelectPillItem = ({ id, name, isActive, onClick, grouped, className = "" }) => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-select-compact__pill-item", className]), "data-pill-id": id, children: (0, jsx_runtime_1.jsx)(pill_1.Pill, { active: isActive, onChange: onClick, className: (0, classNames_1.classNames)([grouped && !isActive ? "zen-filters-select-compact__list-item-grouped" : ""]), children: name }) });
+exports.FiltersSelectPillItem = FiltersSelectPillItem;
+const FiltersSelectUnfoldingPill = ({ id, name, content, isActive, isExpanded, onClick, grouped, className = "", onExpandItem }) => {
+    const ariaControlsId = (0, useUniqueId_1.useUniqueId)();
+    const [shouldRender, setShouldRender] = (0, react_1.useState)(isExpanded);
+    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+    const frameRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isExpanded) {
+            setShouldRender(true);
+            frameRef.current = (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
+                var _a;
+                frameRef.current = (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
+                    setIsAnimating(true);
+                });
+            });
+        }
+        else {
+            setIsAnimating(false);
+        }
+        return () => { var _a; return (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, frameRef.current); };
+    }, [isExpanded]);
+    const handleTransitionEnd = () => {
+        if (!isExpanded) {
+            setShouldRender(false);
+        }
+    };
+    const handleExpandItem = (0, react_1.useCallback)(() => {
+        if (onExpandItem) {
+            onExpandItem();
+            onClick();
+        }
+    }, [onExpandItem, onClick]);
+    return ((0, jsx_runtime_1.jsxs)("div", { onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)(["zen-filters-select-compact__unfolding-pill-item", isAnimating ? "zen-filters-select-compact__unfolding-pill-item--expanded" : ""]), "data-pill-id": id, children: [(0, jsx_runtime_1.jsx)("div", { id: id, className: (0, classNames_1.classNames)(["zen-filters-select-compact__list-item-wrapper", className]), children: (0, jsx_runtime_1.jsx)(pill_1.Pill, { active: isActive, onChange: handleExpandItem, className: (0, classNames_1.classNames)([grouped && !isActive ? "zen-filters-select-compact__list-item-grouped" : ""]), children: name }) }), shouldRender && (0, jsx_runtime_1.jsx)("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: (0, classNames_1.classNames)(["zen-filters-select-compact__item-content", isExpanded ? "zen-filters-select-compact__item-content--expanded" : ""]), children: (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-select-compact__item-content-inner", children: content }) })] }));
+};
+exports.FiltersSelectUnfoldingPill = FiltersSelectUnfoldingPill;

package/dist/filters/components/filtersSidePanel.js

@@ -31,6 +31,9 @@ const filtersHelper_1 = require("../filtersHelper");
 const tabs_1 = require("../../tabs/tabs");
 const filtersSidePanelItem_1 = require("./filtersSidePanelItem");
 const filtersSaveModal_1 = require("./filtersSaveModal");
+const isElementsEqual_1 = require("../../utils/compareElementsUtils/isElementsEqual");
+const filtersEmptyState_1 = require("./filtersEmptyState");
+const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
 injectString("cs", "Selected", "Vybr\xE1no");
 injectString("da-DK", "Selected", "Valgt");
 injectString("de", "Selected", "Ausgew\xE4hlt");
@@ -216,8 +219,7 @@ injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
 injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
-const isElementsEqual_1 = require("../../utils/compareElementsUtils/isElementsEqual");
-const filtersEmptySelectedList_1 = require("./filtersEmptySelectedList");
+const zen_1 = require("../../utils/zen");
 const SELECTED_TAB_ID = "Selected";
 const getSelectedOption = translate => ({
   id: SELECTED_TAB_ID,
@@ -233,14 +235,18 @@ const FiltersSidePanel = ({
   externalState,
   setExternalState,
   triggerRef
+  // eslint-disable-next-line complexity
 }) => {
-  var _a;
+  var _a, _b, _c;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
   const isLongTextLanguages = (0, react_1.useMemo)(() => `${translate("Reset")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
   const dataShieldId = (0, useUniqueId_1.useUniqueId)();
   const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
+  const iconMobileClassName = (0, useMobileClassName_1.useMobileClassName)("icon");
+  const headerButtonsMobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-side-panel-filters__header-buttons");
+  const titleMobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-side-panel-filters__title");
   const {
     dark
   } = (0, react_1.useContext)(themeContext_1.themeContext);
@@ -392,7 +398,7 @@ const FiltersSidePanel = ({
     itemState: currentState[item.props.id],
     changeHandler: sidePanelItemChangeHandler(item.props.id),
     errorCheck: handleErrorCheck(item.props.id)
-  }, item.props.id)) : (0, jsx_runtime_1.jsx)(filtersEmptySelectedList_1.FiltersEmptySelectedList, {}), [selectedIds, filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
+  }, item.props.id)) : (0, jsx_runtime_1.jsx)(filtersEmptyState_1.FiltersEmptyState, {}), [selectedIds, filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
   (0, react_1.useEffect)(() => {
     if (!isOpen) {
       return;
@@ -425,6 +431,7 @@ const FiltersSidePanel = ({
       return;
     }
   }, [isSaveModalOpen, dataShieldId, onClose]);
+  const memoizedBigSizeIcon = (0, react_1.useMemo)(() => (iconMobileClassName || iconDriveClassName) !== undefined, [iconMobileClassName, iconDriveClassName]);
   return (0, jsx_runtime_1.jsxs)(react_1.Fragment, {
     children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, {
       className: "zen-high-level-shield",
@@ -444,11 +451,11 @@ const FiltersSidePanel = ({
           children: [(0, jsx_runtime_1.jsx)("div", {
             className: "zen-side-panel-filters__title-wrapper",
             children: (0, jsx_runtime_1.jsx)("div", {
-              className: "zen-side-panel-filters__title zen-ellipsis",
+              className: (0, classNames_1.classNames)(["zen-side-panel-filters__title", "zen-ellipsis", titleMobileClassName || ""]),
               children: translate("All Filters")
             })
           }), (0, jsx_runtime_1.jsxs)("div", {
-            className: "zen-side-panel-filters__header-buttons",
+            className: (0, classNames_1.classNames)(["zen-side-panel-filters__header-buttons", headerButtonsMobileClassName || ""]),
             children: [onSave && (0, jsx_runtime_1.jsx)(button_1.Button, {
               type: "tertiary",
               ref: saveButtonRef,
@@ -459,7 +466,7 @@ const FiltersSidePanel = ({
               children: (0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, {
                 description: translate("Save"),
                 className: "svgIcon",
-                size: iconDriveClassName ? "huge" : "large"
+                size: memoizedBigSizeIcon ? "huge" : "large"
               })
             }), onPin && (0, jsx_runtime_1.jsx)(button_1.Button, {
               type: "tertiary",
@@ -470,13 +477,13 @@ const FiltersSidePanel = ({
               children: (0, jsx_runtime_1.jsx)(iconPin2_1.IconPin2, {
                 description: translate("Pin"),
                 className: "svgIcon",
-                size: iconDriveClassName ? "huge" : "large"
+                size: memoizedBigSizeIcon ? "huge" : "large"
               })
             }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
               type: "tertiary-black",
               className: "zen-side-panel-filters__close-button",
               icon: iconClose_1.IconClose,
-              iconSize: "large",
+              iconSize: memoizedBigSizeIcon ? "huge" : "large",
               onClick: externalMode ? handleExternalModeClose : onClose,
               iconPosition: textIconButton_1.ButtonIconPosition.Start,
               title: translate("Close")
@@ -549,7 +556,7 @@ const FiltersSidePanel = ({
           })
         })]
       })
-    }), (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body), (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, {
+    }), (_b = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body), (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, {
       className: sidePanel_1.CUSTOM_POPUP_COMPONENT_CLASSNAME,
       isOpen: isSaveModalOpen,
       onClose: toggleSaveModal,

package/dist/filters/components/filtersSidePanelChip.js

@@ -8,6 +8,6 @@ const FiltersSidePanelChip = ({ currentState, handleStateChange, id, children })
     const handleChange = (0, react_1.useCallback)((e) => {
         handleStateChange(e.target.checked);
     }, [handleStateChange]);
-    return (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { fullWidth: true, id: id, onChange: handleChange, checked: currentState, children: children });
+    return (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { fullWidth: true, id: `${id}-side-panel`, onChange: handleChange, checked: currentState, children: children });
 };
 exports.FiltersSidePanelChip = FiltersSidePanelChip;

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

@@ -0,0 +1,2 @@
+import { IFiltersDateRangeItem, IFiltersDateRangeProps } from "./filtersDateRange";
+export declare const FiltersSidePanelDateRange: <P extends IFiltersDateRangeProps = IFiltersDateRangeProps>({ className, classNamePopup, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>) => React.JSX.Element;

package/dist/filters/components/filtersSidePanelDateRange.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSidePanelDateRange = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dateRangeRaw_1 = require("../../dateRangeRaw/dateRangeRaw");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const FiltersSidePanelDateRange = (_a) => {
+    var { className, classNamePopup, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon } = _a, dateRangeProps = __rest(_a, ["className", "classNamePopup", "state", "defaultState", "name", "onChange", "id", "allowUnsetValue", "chipIcon"]);
+    const component = (0, react_1.useMemo)(() => allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, dateRangeProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([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", className || ""]), value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: true, chip: false })) : (0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, dateRangeProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([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", className || ""]), value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: false, chip: false })), [allowUnsetValue, dateRangeProps, id, classNamePopup, className, state, onChangeState, defaultState]);
+    return component;
+};
+exports.FiltersSidePanelDateRange = FiltersSidePanelDateRange;

package/dist/filters/components/filtersSidePanelDropdown.js

@@ -24,8 +24,15 @@ const skeletonList_1 = require("../../skeletonList/skeletonList");
 const groupsHelper_1 = require("../../groupsFilterRaw/groupsHelper");
 const dropdownHelper_1 = require("../../dropdownRaw/dropdownHelper");
 const radioGroupRaw_1 = require("../../radioGroupRaw/radioGroupRaw");
+const keyboardHelpers_1 = require("../../utils/keyboardHelpers");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const useDrive_1 = require("../../utils/theme/useDrive");
 const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateChange }) => {
+    const isMobile = (0, useMobile_1.useMobile)();
+    const isDrive = (0, useDrive_1.useDrive)();
+    const isSpecialSize = (0, react_1.useMemo)(() => isMobile || isDrive, [isMobile, isDrive]);
     const simpleViewLimit = 7;
+    const dropdownChipsContainerRef = (0, react_1.useRef)(null);
     const _a = elemProps, { id, name, state: _globalState, onChange: _globalOnChange, defaultState, fetchState, dataItems, isLoading, classNamePopup } = _a, otherProps = __rest(_a, ["id", "name", "state", "onChange", "defaultState", "fetchState", "dataItems", "isLoading", "classNamePopup"]);
     const dropdownDataRef = (0, react_1.useRef)(null);
     const { translate } = (0, useLanguage_1.useLanguage)();
@@ -44,6 +51,16 @@ const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateChange }
             setComponentType("popup");
         }
     }, [componentType, fetchState, dataItems, isMultiselect, sortFn]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === "ArrowRight") {
+            const nextFocusable = (0, keyboardHelpers_1.getNewFocusableItem)(1, dropdownChipsContainerRef.current);
+            nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
+        }
+        if (event.key === "ArrowLeft") {
+            const nextFocusable = (0, keyboardHelpers_1.getNewFocusableItem)(-1, dropdownChipsContainerRef.current);
+            nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
+        }
+    }, []);
     const prepareValue = (value) => {
         if (Array.isArray(value)) {
             return value.map((el) => el.id);
@@ -66,11 +83,12 @@ const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateChange }
         handleStateChange(newValue());
     }, [currentState, handleStateChange]);
     if (!componentType && (dataItems !== undefined && isLoading || fetchState && fetchState.isLoading)) {
-        return isMultiselect ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: 328, height: 32 }) : (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-side-panel-filters__dropdown-skeleton", size: "small" });
+        return isMultiselect ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: 328, height: isSpecialSize ? 40 : 32 })
+            : (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-side-panel-filters__dropdown-skeleton", size: "small", height: isSpecialSize ? 20 : undefined });
     }
     if (componentType === "chip" && dropdownDataRef.current) {
-        const dropdownChips = dropdownDataRef.current.map((item) => ((0, jsx_runtime_1.jsx)(filtersChip_1.FiltersChip, { id: `${id}-side-panel-chip-${item.id}`, name: item.name || item.id, state: currentState.includes(item.id), onChange: handleChipChange(item.id), icon: elemProps.chipIcon }, `${id}-side-panel-chip-${item.id}-${item.name || ""}`)));
-        return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-side-panel-filters__dropdown-item-chips-container"]), children: dropdownChips });
+        const dropdownChips = dropdownDataRef.current.map((item) => ((0, jsx_runtime_1.jsx)(filtersChip_1.FiltersChipInner, { id: `${id}-side-panel-chip-${item.id}`, name: item.name || item.id, state: currentState.includes(item.id), onChange: handleChipChange(item.id), icon: elemProps.chipIcon }, `${id}-side-panel-chip-${item.id}-${item.name || ""}`)));
+        return (0, jsx_runtime_1.jsx)("div", { ref: dropdownChipsContainerRef, onKeyDown: handleKeyDown, className: (0, classNames_1.classNames)(["zen-side-panel-filters__dropdown-item-chips-container"]), children: dropdownChips });
     }
     if (componentType === "radio" && dropdownDataRef.current) {
         const dropdownRadioGroup = (0, jsx_runtime_1.jsx)(radioGroupRaw_1.RadioGroupRaw, { direction: "vertical", size: "small", id: `${id}-side-panel-dropdown-radio-group`, className: "zen-side-panel-radio-group__filter-item", items: dropdownDataRef.current.map((item) => ({

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

@@ -1,6 +1,5 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { TFiltersComponentsItemState, TFiltersComponentsProps } from "./filtersItem";
-import "./filtersSidePanelItem.less";
 interface IFiltersSidePanelItem {
     item: ReactElement<TFiltersComponentsProps>;
     itemState: TFiltersComponentsItemState;
@@ -12,5 +11,5 @@ export interface IFiltersSidePanelComponentProps<T> {
     currentState: T;
     handleStateChange: (newState: T) => void;
 }
-export declare const FiltersSidePanelItem: ({ item, itemState, changeHandler, errorCheck }: IFiltersSidePanelItem) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSidePanelItem: ({ item, itemState, changeHandler, errorCheck }: IFiltersSidePanelItem) => React.ReactElement<TFiltersComponentsProps, string | React.JSXElementConstructor<any>>;
 export {};

package/dist/filters/components/filtersSidePanelItem.js

@@ -1,66 +1,38 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersSidePanelItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const filtersChip_1 = require("./filtersChip");
+const react_1 = __importStar(require("react"));
 const filtersRange_1 = require("./filtersRange");
-const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const filtersDropdown_1 = require("./filtersDropdown");
-const filtersGroups_1 = require("./filtersGroups");
-const groupsFilter_1 = require("../../groupsFilter/groupsFilter");
-const filtersDateRange_1 = require("./filtersDateRange");
-const dateRange_1 = require("../../dateRange/dateRange");
-const filtersDateInput_1 = require("./filtersDateInput");
-const dateInput_1 = require("../../dateInput/dateInput");
-const filtersSidePanelDropdown_1 = require("./filtersSidePanelDropdown");
-const filtersSidePanelChip_1 = require("./filtersSidePanelChip");
-const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
-const filtersSidePanelRange_1 = require("./filtersSidePanelRange");
 const FiltersSidePanelItem = ({ item, itemState, changeHandler, errorCheck }) => {
-    const labelledId = (0, useUniqueId_1.useUniqueId)();
     const getComponent = (0, react_1.useCallback)((elem, currentState, handleStateChange) => {
         const { type, props } = elem;
-        switch (type) {
-            case filtersChip_1.FiltersChip: {
-                const { id, state: _globalState, name, onChange: _globalOnChange } = props;
-                return (0, jsx_runtime_1.jsx)(filtersSidePanelChip_1.FiltersSidePanelChip, { id: `${id}-side-panel`, currentState: currentState, handleStateChange: handleStateChange, children: name });
-            }
-            case filtersRange_1.FiltersRange: {
-                const _a = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className } = _a, otherProps = __rest(_a, ["id", "state", "name", "onChange", "defaultState", "className"]);
-                return (0, jsx_runtime_1.jsx)(filtersSidePanelRange_1.FiltersSidePanelRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, onChange: handleStateChange, value: currentState, errorCheck: errorCheck, className: (0, classNames_1.classNames)(["zen-side-panel-filters__item-element", className || ""]) }));
-            }
-            case filtersDropdown_1.FiltersDropdown: {
-                return (0, jsx_runtime_1.jsx)(filtersSidePanelDropdown_1.FiltersSidePanelDropdown, { elemProps: props, currentState: currentState, handleStateChange: handleStateChange });
-            }
-            case filtersGroups_1.FiltersGroups: {
-                const _b = props, { id, state: _globalState, onChange: _globalOnChange } = _b, otherProps = __rest(_b, ["id", "state", "onChange"]);
-                return (0, jsx_runtime_1.jsx)(groupsFilter_1.GroupsFilter, Object.assign({ initialFilterState: currentState, onChange: handleStateChange }, otherProps, { chip: false, fullSize: true }));
-            }
-            case filtersDateRange_1.FiltersDateRange: {
-                const _c = props, { id, state: _globalState, onChange: _globalOnChange, defaultState, allowUnsetValue, className, classNamePopup } = _c, otherProps = __rest(_c, ["id", "state", "onChange", "defaultState", "allowUnsetValue", "className", "classNamePopup"]);
-                return allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([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", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: true, chip: false })) : (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([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", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: false, chip: false }));
-            }
-            case filtersDateInput_1.FiltersDateInput: {
-                const _d = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className, classNamePopup } = _d, otherProps = __rest(_d, ["id", "state", "name", "onChange", "defaultState", "className", "classNamePopup"]);
-                return (0, jsx_runtime_1.jsx)(dateInput_1.DateInput, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([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", className || ""]), buttonLabel: name, value: currentState, onChange: handleStateChange, defaultValue: defaultState, chip: false }));
-            }
-            default:
-                return null;
-        }
+        const extraProps = (type === filtersRange_1.FiltersRange || props.childType === "FiltersRange") ? { errorCheck } : {};
+        return react_1.default.cloneElement(elem, Object.assign(Object.assign(Object.assign({}, props), { id: `${props.id}`, key: `${props.id}-side-panel`, state: currentState, onChange: handleStateChange }), extraProps));
     }, [errorCheck]);
-    const memoizedItem = (0, react_1.useMemo)(() => getComponent(item, itemState, changeHandler), [getComponent, item, itemState, changeHandler]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters__item", role: "group", "aria-labelledby": labelledId, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters__item-label", id: labelledId, children: item.props.name }), (0, jsx_runtime_1.jsx)("div", { children: memoizedItem })] }));
+    const memoizedItem = (0, react_1.useMemo)(() => getComponent(item, itemState, changeHandler), [item, getComponent, itemState, changeHandler]);
+    return memoizedItem;
 };
 exports.FiltersSidePanelItem = FiltersSidePanelItem;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import "./filtersSidePanelItemWrapper.less";
+interface IFiltersSidePanelItemWrapperProps {
+    name: string;
+    children: React.ReactNode;
+}
+export declare const FiltersSidePanelItemWrapper: ({ name, children }: IFiltersSidePanelItemWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/filters/components/filtersSidePanelItemWrapper.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSidePanelItemWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
+const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const FiltersSidePanelItemWrapper = ({ name, children }) => {
+    const labelledId = (0, useUniqueId_1.useUniqueId)();
+    const labelDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-side-panel-filters__item-label");
+    const labelMobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-side-panel-filters__item-label");
+    const labelClassName = (0, react_1.useMemo)(() => labelMobileClassName || labelDriveClassName || "", [labelMobileClassName, labelDriveClassName]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters__item", role: "group", "aria-labelledby": labelledId, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-side-panel-filters__item-label", labelClassName]), id: labelledId, children: name }), (0, jsx_runtime_1.jsx)("div", { children: children })] });
+};
+exports.FiltersSidePanelItemWrapper = FiltersSidePanelItemWrapper;

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

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from "react";
+export declare const filtersSidePanelContext: import("react").Context<IFiltersSidePanelProviderProps>;
+interface IFiltersSidePanelProviderProps extends PropsWithChildren {
+    isSidePanelView: boolean;
+}
+export declare const FiltersSidePanelProvider: FC<IFiltersSidePanelProviderProps>;
+export declare const useFiltersSidePanel: () => boolean;
+export {};

package/dist/filters/components/filtersSidePanelProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFiltersSidePanel = exports.FiltersSidePanelProvider = exports.filtersSidePanelContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.filtersSidePanelContext = (0, react_1.createContext)({ isSidePanelView: false });
+const FiltersSidePanelProvider = ({ isSidePanelView, children }) => ((0, jsx_runtime_1.jsx)(exports.filtersSidePanelContext.Provider, { value: { isSidePanelView }, children: children }));
+exports.FiltersSidePanelProvider = FiltersSidePanelProvider;
+const useFiltersSidePanel = () => {
+    const { isSidePanelView } = (0, react_1.useContext)(exports.filtersSidePanelContext);
+    return isSidePanelView;
+};
+exports.useFiltersSidePanel = useFiltersSidePanel;

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

@@ -1,6 +1,8 @@
 import { IFiltersBarSidePanelRange } from "../../filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
-interface IFiltersSidePanelRangeProps extends IFiltersBarSidePanelRange {
-    errorCheck: (isError: boolean) => void;
+interface IFiltersSidePanelRangeProps extends Omit<IFiltersBarSidePanelRange, "value"> {
+    errorCheck?: (isError: boolean) => void;
+    id: string;
+    state: IFiltersBarSidePanelRange["value"];
 }
-export declare const FiltersSidePanelRange: ({ errorCheck, ...otherProps }: IFiltersSidePanelRangeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSidePanelRange: ({ id, state, ...otherProps }: IFiltersSidePanelRangeProps) => import("react/jsx-runtime").JSX.Element;
 export {};