@geotab/zenith 2.0.0-beta.2 → 3.0.0-beta.0

package/dist/dropdown/dropdownSearchableTrigger.d.ts

@@ -1,19 +1,14 @@
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, RefObject } from "react";
 import "./dropdownSearchableTrigger.less";
 interface IDropdownSearchableTrigger {
     value: string;
     className?: string;
     onChange: (event?: ChangeEvent<HTMLInputElement>) => void;
     handleClick: (value: boolean) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     placeholder?: string;
     id?: string;
     isOpenPopup: boolean;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     width?: number;
     title?: string;
     disabled?: boolean;
@@ -21,7 +16,11 @@ interface IDropdownSearchableTrigger {
     currentSelection?: string;
     isError?: boolean;
     fullWidth?: boolean;
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const DropdownSearchableTrigger: React.ForwardRefExoticComponent<IDropdownSearchableTrigger & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownSearchableTrigger: {
+    ({ value, className, onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, ...otherProps }: IDropdownSearchableTrigger): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/dropdown/dropdownSearchableTrigger.js

@@ -1,27 +1,4 @@
 "use strict";
-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;
-};
 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)
@@ -36,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.DropdownSearchableTrigger = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const textInputRaw_1 = require("../textInputRaw/textInputRaw");
 const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
@@ -44,8 +21,8 @@ const iconCrossThin_1 = require("../icons/deprecated/iconCrossThin");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useDrive_1 = require("../utils/theme/useDrive");
-exports.DropdownSearchableTrigger = react_1.default.forwardRef((_a, ref) => {
-    var { value, className = "", onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, translate: _translate, isError, fullWidth } = _a, otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "translate", "isError", "fullWidth"]);
+const DropdownSearchableTrigger = (_a) => {
+    var { value, className = "", onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref } = _a, otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref"]);
     const { translate } = (0, useLanguage_1.useLanguage)();
     const triggerId = (0, react_1.useId)();
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-dropdown-searchable-trigger");
@@ -73,7 +50,8 @@ exports.DropdownSearchableTrigger = react_1.default.forwardRef((_a, ref) => {
     };
     return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger", isError ? "zen-dropdown-searchable-trigger--error" : "",
             driveComponentClass || "", disabled ? "zen-dropdown-searchable-trigger--disabled" : ""]) }, inputStyle, { ref: ref }, otherProps, { onClick: disabled ? () => { } : clickHandler, role: "combobox", "aria-label": placeholder, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__search-container", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-searchable-trigger__input-container", onKeyDown: handleKeydown, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { value: value, placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"), className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__input", "zen-ellipsis", currentSelection ? "zen-dropdown-searchable-trigger__input--selected" : ""]), onChange: onChange, disabled: disabled, type: "text", ref: inputRef, id: id || triggerId }) }), count ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-searchable-trigger__label-element", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-searchable-trigger__counter", children: (0, jsx_runtime_1.jsx)("span", { children: isLargeNumber ? "99+" : count }) }) }) : null, value && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-dropdown-searchable-trigger__close-button", ref: clearRef, title: translate("Clear search"), onClick: handleClearSearch, children: (0, jsx_runtime_1.jsx)(iconCrossThin_1.IconCrossThin, { size: isDrive ? "big" : "small" }) })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", tabIndex: -1, "aria-hidden": "true", className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__popup-trigger", isOpenPopup ? "zen-dropdown-searchable-trigger__popup-trigger--active" : ""]), title: title || translate(isOpenPopup ? "Close filter" : "Open filter"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpenPopup ? "zen-dropdown-searchable-trigger__arrow-icon--up" : "zen-dropdown-searchable-trigger__arrow-icon--down", size: isDrive ? "huge" : "large" }) })] }));
-});
+};
+exports.DropdownSearchableTrigger = DropdownSearchableTrigger;
 exports.DropdownSearchableTrigger.displayName = "DropdownSearchableTrigger";
 exports.TRANSLATIONS = [
     "Filter by group",

package/dist/dropdown/dropdownTrigger.d.ts

@@ -8,11 +8,6 @@ export interface IDropdownTrigger extends IZenComponentProps {
     disabled?: boolean;
     count?: number;
     fullWidth?: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     inputValue?: string;
     placeholder: string;
     searchField: boolean;
@@ -21,8 +16,8 @@ export interface IDropdownTrigger extends IZenComponentProps {
     width?: number;
     title?: string;
     triggerAriaLabel?: string;
-    triggerRef: React.RefObject<HTMLElement>;
-    inputRef?: React.RefObject<HTMLInputElement>;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
     buttonType?: TFilterButton;
     error?: string;
 }

package/dist/feedbackContainer/feedbackContext.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import { RefObject } from "react";
 import { IAlertQueueItem } from "./hooks/useFeedbackAlert";
 import { IToastQueueItem } from "./hooks/useFeedbackToast";
 import { IAlertItem, IToastItem } from "./types";
@@ -15,7 +15,7 @@ export interface IFeedbackContext {
     finishAlertAnimation: (alertId: string) => void;
     apiAlertActions: IAlertQueueItem[];
     setApiAlertActions: React.Dispatch<React.SetStateAction<IAlertQueueItem[]>>;
-    removedAlertId: MutableRefObject<number | null>;
+    removedAlertId: RefObject<number | null>;
     alertsQueue: IAlertQueueItem[];
     alertsAnimation: IAnimationItem[];
     addToast: (toast: IToastItem) => void;
@@ -23,7 +23,7 @@ export interface IFeedbackContext {
     toasts: IToastItem[];
     startToastAnimation: (toastId: string) => void;
     finishToastAnimation: (toastId: string) => void;
-    removedToastId: MutableRefObject<number | null>;
+    removedToastId: RefObject<number | null>;
     toastsQueue: IToastQueueItem[];
     toastsAnimation: IAnimationItem[];
     apiToastActions: IToastQueueItem[];

package/dist/feedbackContainer/hooks/useFeedbackAlert.d.ts

@@ -9,7 +9,7 @@ interface IUseFeedbackAlert {
 export declare const useFeedbackAlert: ({ setActiveFeedback, mode }: IUseFeedbackAlert) => {
     alerts: IAlertItem[];
     alertsAnimation: import("../types").IAnimationItem[];
-    removedAlertId: import("react").MutableRefObject<number | null>;
+    removedAlertId: import("react").RefObject<number | null>;
     alertsQueue: IAlertQueueItem[];
     addAlert: (alert: IAlertItem) => void;
     removeAlert: (id: string, important?: boolean) => void;

package/dist/feedbackContainer/hooks/useFeedbackAlertState.d.ts

@@ -8,7 +8,7 @@ export interface IUseFeedbackAlertState {
     setAlertsQueue: React.Dispatch<React.SetStateAction<IAlertQueueItem[]>>;
     alertsAnimation: IAnimationItem[];
     setAlertsAnimation: React.Dispatch<React.SetStateAction<IAnimationItem[]>>;
-    removedAlertId: React.MutableRefObject<number | null>;
+    removedAlertId: React.RefObject<number | null>;
     apiAlertActions: IAlertQueueItem[];
     setApiAlertActions: React.Dispatch<React.SetStateAction<IAlertQueueItem[]>>;
 }

package/dist/feedbackContainer/hooks/useFeedbackToast.d.ts

@@ -18,7 +18,7 @@ export declare const useFeedbackToast: ({ setActiveFeedback, mode }: IUseFeedbac
     addToast: (toast: IToastItem) => void;
     finishToastAnimation: (toastId: string) => void;
     startToastAnimation: (toastId: string) => void;
-    removedToastId: import("react").MutableRefObject<number | null>;
+    removedToastId: import("react").RefObject<number | null>;
     apiToastActions: IToastQueueItem[];
     setApiToastActions: import("react").Dispatch<import("react").SetStateAction<IToastQueueItem[]>>;
 };

package/dist/feedbackContainer/hooks/useFeedbackToastState.d.ts

@@ -8,7 +8,7 @@ export declare const useFeedbackToastState: () => {
     setToastsQueue: React.Dispatch<React.SetStateAction<IToastQueueItem[]>>;
     toastsAnimation: IAnimationItem[];
     setToastsAnimation: React.Dispatch<React.SetStateAction<IAnimationItem[]>>;
-    removedToastId: React.MutableRefObject<number | null>;
+    removedToastId: React.RefObject<number | null>;
     apiToastActions: IToastQueueItem[];
     setApiToastActions: React.Dispatch<React.SetStateAction<IToastQueueItem[]>>;
 };

package/dist/filterButton/filterButton.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { RefObject } from "react";
 import "./filterButton.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { ButtonType } from "../button/buttonType";
@@ -17,5 +17,6 @@ export interface IFilterButton extends IZenComponentProps {
     maxWidth?: number;
     minWidth?: number;
     ariaLabel?: string;
+    ref?: RefObject<HTMLButtonElement | null>;
 }
-export declare const FilterButton: React.ForwardRefExoticComponent<IFilterButton & React.RefAttributes<HTMLButtonElement>>;
+export declare const FilterButton: ({ id, title, disabled, quantity, className, children, onClick, onMouseOver, onMouseOut, fullWidth, maxWidth, minWidth, isActive, type, ariaLabel, ref, ...other }: IFilterButton) => import("react/jsx-runtime").JSX.Element;

package/dist/filterButton/filterButton.js

@@ -19,9 +19,8 @@ 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");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-exports.FilterButton = (0, react_1.forwardRef)((function FilterButton(_a, ref) {
-    var { id, title, disabled, quantity, className, children, onClick, onMouseOver, onMouseOut, fullWidth, maxWidth, minWidth, isActive = false, type = "secondary", ariaLabel } = _a, other = __rest(_a, ["id", "title", "disabled", "quantity", "className", "children", "onClick", "onMouseOver", "onMouseOut", "fullWidth", "maxWidth", "minWidth", "isActive", "type", "ariaLabel"]);
+const FilterButton = (_a) => {
+    var { id, title, disabled, quantity, className, children, onClick, onMouseOver, onMouseOut, fullWidth, maxWidth, minWidth, isActive = false, type = "secondary", ariaLabel, ref } = _a, other = __rest(_a, ["id", "title", "disabled", "quantity", "className", "children", "onClick", "onMouseOver", "onMouseOut", "fullWidth", "maxWidth", "minWidth", "isActive", "type", "ariaLabel", "ref"]);
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-filter-button");
     const isDrive = (0, useDrive_1.useDrive)();
     const hasQuantity = typeof quantity === "number";
@@ -38,4 +37,5 @@ exports.FilterButton = (0, react_1.forwardRef)((function FilterButton(_a, ref) {
             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" }) })] })] }));
-}));
+};
+exports.FilterButton = FilterButton;

package/dist/filters/components/filtersContainer.js

@@ -22,7 +22,8 @@ const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersCli
     const numberOfChangedFilters = (0, react_1.useMemo)(() => {
         const suppressedFilters = new Set();
         filtersForCalculation.forEach(filter => {
-            const inhibited = (filter.props).inhibit;
+            const filterProps = filter.props;
+            const inhibited = filterProps.inhibit;
             if (inhibited) {
                 inhibited.forEach((id) => suppressedFilters.add(id));
             }
@@ -60,11 +61,14 @@ const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersCli
     const handleRemovalClick = (0, react_1.useCallback)(() => {
         const defaultState = (0, filtersHelper_1.createStateObject)(filtersForCalculation, "defaultState");
         filtersForCalculation.forEach((child) => {
-            var _a, _b;
+            var _a;
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             if (child) {
-                const childDefaultState = defaultState[child.props.id];
-                (_b = (_a = child.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, childDefaultState);
+                const childProps = child.props;
+                if (childProps.id) {
+                    const childDefaultState = defaultState[childProps.id];
+                    (_a = childProps.onChange) === null || _a === void 0 ? void 0 : _a.call(childProps, childDefaultState);
+                }
             }
         });
         onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(false);

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFiltersItem } from "./filtersItem";
 import { IDateRangeValue, IDateRangeValueOptionalLabel } from "../../dateRange/dateRangeUtils";
 import { IDateRange } from "../../dateRange/dateRange";
@@ -27,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>): JSX.Element;
+    <P extends IFiltersDateRangeProps = IFiltersDateRangeProps>({ className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>): React.JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -26,7 +26,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, ...restDropdownProps }: IFiltersDropdown<T>): JSX.Element;
+export declare function FiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState>({ className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState, ...restDropdownProps }: IFiltersDropdown<T>): React.JSX.Element;
 export declare namespace FiltersDropdown {
     var displayName: string;
 }

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

@@ -19,7 +19,7 @@ export type TFiltersComponents = typeof FiltersChip | typeof FiltersDateRange |
 export type TFiltersComponentsProps = IFiltersChip | IFiltersDateRangeItem | IFiltersDropdown | IFiltersGroups | IFiltersRange;
 export type TFiltersComponentsItemState = boolean | TFiltersDateRangeState | TFiltersDropdownAllStates | IGroupsFilterTotalState | IFiltersRangeState;
 export declare const allowedFiltersComponents: ({
-    <P extends import("./filtersDateRange").IFiltersDateRangeProps = import("./filtersDateRange").IFiltersDateRangeProps>({ className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>): JSX.Element;
+    <P extends import("./filtersDateRange").IFiltersDateRangeProps = import("./filtersDateRange").IFiltersDateRangeProps>({ className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>): React.JSX.Element;
     displayName: string;
 } | React.FC<IFiltersGroups> | React.FC<IFiltersRange> | React.FC<IFiltersChip> | typeof FiltersDropdown)[];
-export declare const getAllowedFilters: <T extends React.ReactNode>(items: T[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare const getAllowedFilters: <T extends React.ReactNode>(items: T[]) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

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

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

package/dist/filters/components/filtersSearch.js

@@ -30,7 +30,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const pillBox_1 = require("../../pillBox/pillBox");
 const filtersSearchList_1 = require("./filtersSearchList");
 const searchInputRaw_1 = require("../../searchInputRaw/searchInputRaw");
-exports.FiltersSearch = react_1.default.forwardRef(({ id, name, value, onChange, onSearchKeyDown, handleSearchFocus, searchSelection, handleRemove, className }, ref) => {
+const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, handleSearchFocus, searchSelection, handleRemove, className, ref }) => {
     const isWithPills = Boolean(searchSelection && handleRemove);
     const divider = "_divider_";
     const handleSearchKeyDown = (0, react_1.useCallback)((event) => {
@@ -60,5 +60,6 @@ exports.FiltersSearch = react_1.default.forwardRef(({ id, name, value, onChange,
     }, [handleRemove, searchSelection]);
     const searchComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(searchInputRaw_1.SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onKeyDown: handleSearchKeyDown, onFocus: handleSearchFocus, value: value, className: (0, classNames_1.classNames)(["zen-filters-search__search-input", "zen-filters__search", className || ""]) }), [id, ref, name, onChange, handleSearchKeyDown, handleSearchFocus, value, className]);
     return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-search", className || ""]), children: [searchComponent, isWithPills && (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search__selected", children: (0, jsx_runtime_1.jsx)(pillBox_1.PillBox, { hideSelectedLabel: true, maxPills: 3, selectedPills: memoizedPillsArray, onRemove: onRemove }) })] });
-});
+};
+exports.FiltersSearch = FiltersSearch;
 exports.FiltersSearch.displayName = "FiltersSearch";

package/dist/filters/filters.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filters = exports.FiltersDisplayName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const headerHelpers_1 = require("../header/headerHelpers");
 const react_2 = __importDefault(require("react"));
@@ -136,9 +137,10 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
     }, []);
     const handleModalApply = (0, react_1.useCallback)((state) => {
         filters.forEach((filter) => {
-            const newState = state[filter.props.id];
-            if (filter.props.id && state.hasOwnProperty(filter.props.id) && filter.props.onChange) {
-                filter.props.onChange(newState);
+            const filterProps = filter.props;
+            const newState = state[filterProps.id];
+            if (filterProps.id && state.hasOwnProperty(filterProps.id) && filterProps.onChange) {
+                filterProps.onChange(newState);
             }
         });
     }, [filters]);
@@ -173,7 +175,7 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
     const memoizedSelect = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSelect_1.FiltersSelect, { id: `filtersSelect_${uniqueKey}`, 
         // name={translate("Search by")}
         value: searchType, onChange: setSearchType, items: searchTypesToSelect }), [searchType, searchTypesToSelect, setSearchType, uniqueKey]);
-    const memoizedSearch = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, { id: `filtersSearch_${uniqueKey}`, ref: isOpen ? searchTriggerRef : null, name: translate("Search page"), value: keyword, onChange: setKeyword, onSearchKeyDown: isRecentSearchesMode ? handleSaveRecentSearch : undefined, handleSearchFocus: handleSearchFocus, handleRemove: onSearchItemClick, searchSelection: searchSelection, className: "zen-filters-popup__search-with-pills" }), [uniqueKey, isOpen, translate, keyword, setKeyword, isRecentSearchesMode, handleSaveRecentSearch, handleSearchFocus, onSearchItemClick, searchSelection]);
+    const memoizedSearch = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, { id: `filtersSearch_${uniqueKey}`, ref: isOpen ? searchTriggerRef : undefined, name: translate("Search page"), value: keyword, onChange: setKeyword, onSearchKeyDown: isRecentSearchesMode ? handleSaveRecentSearch : undefined, handleSearchFocus: handleSearchFocus, handleRemove: onSearchItemClick, searchSelection: searchSelection, className: "zen-filters-popup__search-with-pills" }), [uniqueKey, isOpen, translate, keyword, setKeyword, isRecentSearchesMode, handleSaveRecentSearch, handleSearchFocus, onSearchItemClick, searchSelection]);
     const allOption = (0, react_1.useMemo)(() => (0, filtersSelect_1.getAllOption)(translate), [translate]);
     const selectTrigger = (0, react_1.useMemo)(() => {
         var _a;
@@ -182,13 +184,19 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
     }, [handleTriggerClick, selectState, isOpen, allOption.name, translate, searchTypesArray]);
     const combinedData = (0, filtersHelper_1.useCombineData)(searchTypesArray);
     const memoizedPopup = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { paddingY: -28, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-filters-popup"]), onOpenChange: handleOpenChange, useTrapFocusWithTrigger: "withTrigger", alignment: "bottom", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Setting conditions"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-popup__content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-popup__left-panel", children: [selectTrigger, memoizedSelect] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-popup__right-panel", children: [memoizedSearch, (0, jsx_runtime_1.jsx)(filtersSearchList_1.FiltersSearchList, { searchValue: keyword, searchData: combinedData, searchSelection: searchSelection, getIconByType: getIconByType, handleSearchItemClick: onSearchItemClick, recentSearches: isRecentSearchesMode ? recentSearches : undefined, onRemoveRecentSearchItem: isRecentSearchesMode ? onRemoveRecentSearchItem : undefined, handleRecentSearchItemClick: isRecentSearchesMode ? handleRecentSearchItemClick : undefined })] })] }) }), [isOpen, handleOpenChange, selectTrigger, memoizedSelect, memoizedSearch, keyword, combinedData, searchSelection, getIconByType, onSearchItemClick, isRecentSearchesMode, recentSearches, translate, onRemoveRecentSearchItem, handleRecentSearchItemClick]);
-    const filtersForRender = (0, react_1.useMemo)(() => filters.filter(el => typeof el.props.visible === "boolean" ? el.props.visible
-        : el.props.visible === undefined ? false : el.props.visible(Array.from(selectState), undefined)), [filters, selectState]);
+    const filtersForRender = (0, react_1.useMemo)(() => filters.filter(el => {
+        const elProps = el.props;
+        return typeof elProps.visible === "boolean" ? elProps.visible
+            : elProps.visible === undefined ? false : elProps.visible(Array.from(selectState), undefined);
+    }), [filters, selectState]);
     // The modal has a full set of filters, so we need to calculate the number of changed filters based on all filters, not just the visible ones
     const filtersForCalculation = (0, react_1.useMemo)(() => {
         const stateObj = (0, filtersHelper_1.createStateObject)(filters, "state");
-        return filters.filter(el => typeof el.props.visible === "boolean" ? el.props.visible
-            : el.props.visible === undefined ? true : (el.props.visible(Array.from(selectState), stateObj) || el.props.visible(Array.from(selectState))));
+        return filters.filter(el => {
+            const elProps = el.props;
+            return typeof elProps.visible === "boolean" ? elProps.visible
+                : elProps.visible === undefined ? true : (elProps.visible(Array.from(selectState), stateObj) || elProps.visible(Array.from(selectState)));
+        });
     }, [filters, selectState]);
     const hasSavedFilters = savedFiltersStates.size > 0;
     const memoizedFiltersContainer = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, { filtersClickHandler: handleModalState, filtersForCalculation: filtersForCalculation, isPinned: isPinMode ? isPinned : undefined, onPinChange: isPinMode ? onPinChange : undefined, hasSavedFilters: hasSavedFilters, children: filtersForRender }), [handleModalState, filtersForCalculation, isPinMode, isPinned, onPinChange, hasSavedFilters, filtersForRender]);
@@ -227,9 +235,10 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
         const newState = (_a = savedFiltersStates.get(item)) === null || _a === void 0 ? void 0 : _a.state;
         if (newState) {
             filters.forEach((filter) => {
-                const stateForFilter = newState[filter.props.id];
-                if (filter.props.id && newState.hasOwnProperty(filter.props.id) && filter.props.onChange) {
-                    filter.props.onChange(stateForFilter);
+                const filterProps = filter.props;
+                const stateForFilter = newState[filterProps.id];
+                if (filterProps.id && newState.hasOwnProperty(filterProps.id) && filterProps.onChange) {
+                    filterProps.onChange(stateForFilter);
                 }
             });
         }

package/dist/filters/filtersHelper.d.ts

@@ -21,7 +21,7 @@ export declare const prepareDefaultDropdownState: (type: TDropdownState) => neve
     isAllSelected: boolean;
     isChecked?: undefined;
 };
-export declare const getChildren: (children?: ReactElement | (null | ReactElement)[]) => (ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
+export declare const getChildren: (children?: ReactElement | (null | ReactElement)[]) => (ReactElement<unknown, string | React.JSXElementConstructor<any>> | null)[];
 export declare const getFiltersState: (children: ReactElement | ReactElement[]) => {};
 export declare const createStateObject: (children: ReactElement | ReactElement[], field: "state" | "defaultState") => {};
 export declare function getNumberOfChangedFilters(state: object): number;

package/dist/filters/filtersHelper.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getArrayOfElements = exports.useCombineData = exports.MAX_TOTAL_RESULTS = exports.serializeEntriesToId = exports.getTotalChangedNumber = exports.getNumberOfChangedFilters = exports.createStateObject = exports.getFiltersState = exports.getChildren = exports.prepareDefaultDropdownState = exports.getDropdownStateType = exports.stabilizeChildrenWithId = exports.createPropsHash = exports.createStateHash = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const filtersGroups_1 = require("./components/filtersGroups");
 const react_2 = __importDefault(require("react"));
@@ -104,19 +105,20 @@ exports.getChildren = getChildren;
 const getFiltersState = (children) => {
     const state = {};
     react_1.Children.forEach(children, (child) => {
-        state[child.props.id] = {};
-        state[child.props.id].state = child.props.state;
+        const childProps = child.props;
+        state[childProps.id] = {};
+        state[childProps.id].state = childProps.state;
         if (child.type === filtersGroups_1.FiltersGroups) {
-            state[child.props.id].defaultState = groupsFilter_1.groupsFilterTotalStateDefault;
+            state[childProps.id].defaultState = groupsFilter_1.groupsFilterTotalStateDefault;
         }
         else if (child.type === filtersChip_1.FiltersChip) {
-            state[child.props.id].defaultState = false;
+            state[childProps.id].defaultState = false;
         }
         else if (child.type === filtersDropdown_1.FiltersDropdown) {
-            state[child.props.id].defaultState = child.props.defaultState || (0, exports.prepareDefaultDropdownState)((0, exports.getDropdownStateType)(child.props.state));
+            state[childProps.id].defaultState = childProps.defaultState || (0, exports.prepareDefaultDropdownState)((0, exports.getDropdownStateType)(childProps.state));
         }
         else {
-            state[child.props.id].defaultState = child.props.defaultState;
+            state[childProps.id].defaultState = childProps.defaultState;
         }
     });
     return state;
@@ -125,18 +127,19 @@ exports.getFiltersState = getFiltersState;
 const createStateObject = (children, field) => {
     const state = {};
     react_1.Children.forEach(children, (child) => {
-        state[child.props.id] = {};
+        const childProps = child.props;
+        state[childProps.id] = {};
         if (child.type === filtersGroups_1.FiltersGroups && field === "defaultState") {
-            state[child.props.id] = groupsFilter_1.groupsFilterTotalStateDefault;
+            state[childProps.id] = groupsFilter_1.groupsFilterTotalStateDefault;
         }
         else if (child.type === filtersChip_1.FiltersChip && field === "defaultState") {
-            state[child.props.id] = false;
+            state[childProps.id] = false;
         }
         else if (child.type === filtersDropdown_1.FiltersDropdown && field === "defaultState") {
-            state[child.props.id] = child.props.defaultState || (0, exports.prepareDefaultDropdownState)((0, exports.getDropdownStateType)(child.props.state));
+            state[childProps.id] = childProps.defaultState || (0, exports.prepareDefaultDropdownState)((0, exports.getDropdownStateType)(childProps.state));
         }
         else {
-            state[child.props.id] = child.props[field];
+            state[childProps.id] = childProps[field];
         }
     });
     return state;
@@ -172,9 +175,12 @@ function getNumberOfChangedFilters(state) {
 exports.getNumberOfChangedFilters = getNumberOfChangedFilters;
 const getTotalChangedNumber = (selectState, filters, isModalCondition) => {
     const stateObject = (0, exports.createStateObject)(filters, "state");
-    const filteredFilters = filters.filter(el => typeof el.props.visible === "boolean" ? el.props.visible
-        : (el.props.visible === undefined ? true
-            : el.props.visible(Array.from(selectState), isModalCondition ? stateObject : undefined)));
+    const filteredFilters = filters.filter(el => {
+        const elProps = el.props;
+        return typeof elProps.visible === "boolean" ? elProps.visible
+            : (elProps.visible === undefined ? true
+                : elProps.visible(Array.from(selectState), isModalCondition ? stateObject : undefined));
+    });
     const filteredChildrenState = (0, exports.getFiltersState)(filteredFilters);
     const numberOfChangedFilters = getNumberOfChangedFilters(filteredChildrenState);
     return numberOfChangedFilters;

package/dist/filtersBar/components/filtersBarGroupsFilter/filtersBarGroupsFilter.d.ts

@@ -6,7 +6,7 @@ import { IGroupsFilterTotalState } from "../../../groupsFilter/groupsFilterInter
 export interface IFiltersBarSearchState {
     value: IGroupsFilterTotalState;
 }
-interface IFiltersBarGroupsFilterProps extends Pick<IGroupsFilter, "translate" | "advancedDialog" | "dataLoader" | "isWithColor" | "errorHandler" | "options" | "listLimit"> {
+interface IFiltersBarGroupsFilterProps extends Pick<IGroupsFilter, "dataLoader" | "isWithColor" | "errorHandler" | "options" | "listLimit"> {
 }
 export interface IFiltersBarGroupsFilter extends IFiltersBarItem<IFiltersBarSearchState, IFiltersBarGroupsFilterProps> {
     props: IFiltersBarGroupsFilterProps;

package/dist/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.d.ts

@@ -8,11 +8,6 @@ interface IFiltersBarDateRangePickerBase extends Pick<IButton, "type" | "disable
     options: TDateRangeOption[];
     dropDownTitle?: string;
     triggerLabel?: string;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     dateFormatter?: TDateFormatter;
     dateDeformatter?: TDateDeformatter;
     dateFormat?: string;

package/dist/filtersBar/components/resetComponentButton.d.ts

@@ -2,11 +2,6 @@
 export interface IResetButton {
     isDefaultState: boolean;
     onClick: () => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
 }
 export declare const ResetButton: React.FC<IResetButton>;
 export declare const TRANSLATIONS: string[];

package/dist/filtersBar/filtersBar.d.ts

@@ -12,11 +12,6 @@ import { IFiltersBarRange } from "./components/filtersBarRange/filtersBarRange";
 import { IFiltersBarChildrenState } from "./filtersBarInterfaces";
 import { IIcon } from "../icons/icon";
 export interface IFiltersBar extends IZenComponentProps {
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
     className?: string;
     isAllFiltersVisible: boolean;
     toggleAllFilters: (isAllFilters: boolean) => void;

package/dist/filtersBar/filtersBar.js

@@ -41,8 +41,9 @@ const getAllowedChildren = (items) => items.reduce((acc, item) => {
 const getCurrentFiltersState = (children) => {
     const state = {};
     react_1.Children.forEach(children, (child) => {
-        state[child.props.id] = {};
-        state[child.props.id].state = child.props.state;
+        const childProps = child.props;
+        state[childProps.id] = {};
+        state[childProps.id].state = childProps.state;
     });
     return state;
 };

package/dist/filtersBar/filtersBarActions/filtersBarActions.d.ts

@@ -3,15 +3,10 @@ import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 export interface IFiltersBarActions extends IZenComponentProps {
     onShowAllFilters: () => void;
     onClearFilters: () => void;
-    allFiltersRef: React.RefObject<HTMLButtonElement>;
+    allFiltersRef: React.RefObject<HTMLButtonElement | null>;
     selectedQuantity?: number;
     selectedQuantityToDisplay?: number;
     hideAllFiltersButton?: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
     onApplyButtonClick?: () => void;
     isApplyButtonShown: boolean;
 }

package/dist/filtersBar/filtersBarProviderTrigger.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, RefObject } from "react";
 interface ITriggerComponentProvider {
-    triggerComponent: React.RefObject<HTMLButtonElement> | undefined | null;
+    triggerComponent: RefObject<HTMLButtonElement | null> | undefined | null;
 }
 export declare const TriggerContext: React.Context<ITriggerComponentProvider>;
 export declare const TriggerContextProvider: React.FC<{
@@ -8,6 +8,6 @@ export declare const TriggerContextProvider: React.FC<{
     children: ReactNode;
 }>;
 export declare const useMobileTrigger: () => {
-    mobileTriggerRef: React.RefObject<HTMLButtonElement> | null | undefined;
+    mobileTriggerRef: React.RefObject<HTMLButtonElement | null> | null | undefined;
 };
 export {};

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.d.ts

@@ -5,15 +5,10 @@ import { TStateAction } from "./sidePanelReducer";
 import "./filtersBarSidePanel.less";
 import { IIcon } from "../../icons/icon";
 interface IFiltersBarSidePanelInternal extends IZenComponentProps {
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef: React.RefObject<HTMLElement | null>;
     onClosePanel: () => void;
     parentElement?: HTMLElement;
     isOpen: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
     children: ReactElement | (ReactElement | null)[];
     getDefaultFiltersState: () => IFiltersBarChildrenState;
     state: IFiltersBarChildrenState;

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.FiltersBarSidePanelContainer = exports.FiltersBarSidePanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 const react_1 = require("react");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const themeContext_1 = require("../../utils/theme/themeContext");