@geotab/zenith 2.0.0 → 3.0.0-beta.1

package/esm/dropdown/dropdownSearchableTrigger.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useId, useRef } from "react";
+import { useId, useRef } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
@@ -18,8 +18,8 @@ import { IconCrossThin } from "../icons/deprecated/iconCrossThin";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useDrive } from "../utils/theme/useDrive";
-export const DropdownSearchableTrigger = React.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"]);
+export 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 } = useLanguage();
     const triggerId = useId();
     const driveComponentClass = useDriveClassName("zen-dropdown-searchable-trigger");
@@ -47,7 +47,7 @@ export const DropdownSearchableTrigger = React.forwardRef((_a, ref) => {
     };
     return _jsxs("div", Object.assign({ className: 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: [_jsxs("div", { className: classNames(["zen-dropdown-searchable-trigger__search-container", className]), children: [_jsx("div", { className: "zen-dropdown-searchable-trigger__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"), className: 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 ? _jsx("div", { className: "zen-dropdown-searchable-trigger__label-element", children: _jsx("div", { className: "zen-dropdown-searchable-trigger__counter", children: _jsx("span", { children: isLargeNumber ? "99+" : count }) }) }) : null, value && _jsx("button", { type: "button", className: "zen-dropdown-searchable-trigger__close-button", ref: clearRef, title: translate("Clear search"), onClick: handleClearSearch, children: _jsx(IconCrossThin, { size: isDrive ? "big" : "small" }) })] }), _jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", className: classNames(["zen-dropdown-searchable-trigger__popup-trigger", isOpenPopup ? "zen-dropdown-searchable-trigger__popup-trigger--active" : ""]), title: title || translate(isOpenPopup ? "Close filter" : "Open filter"), children: _jsx(IconChevronDownSmall, { className: isOpenPopup ? "zen-dropdown-searchable-trigger__arrow-icon--up" : "zen-dropdown-searchable-trigger__arrow-icon--down", size: isDrive ? "huge" : "large" }) })] }));
-});
+};
 DropdownSearchableTrigger.displayName = "DropdownSearchableTrigger";
 export const TRANSLATIONS = [
     "Filter by group",

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/filterButton/filterButton.js

@@ -10,15 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, forwardRef } from "react";
+import { useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { Button } from "../button/button";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useDrive } from "../utils/theme/useDrive";
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const FilterButton = 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"]);
+export 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 = useDriveClassName("zen-filter-button");
     const isDrive = useDrive();
     const hasQuantity = typeof quantity === "number";
@@ -35,4 +34,4 @@ export const FilterButton = 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 ? _jsx("div", { className: classNames(["zen-filter-button__label", "zen-ellipsis", fullWidth ? "zen-filter-button__label--full-width" : ""]), children: children }) : null, _jsxs("div", { className: "zen-filter-button__tags", children: [hasQuantity ? _jsx("div", { className: "zen-filter-button__quantity", children: isLargeNumber ? "99+" : quantity }) : null, _jsx("div", { className: "zen-filter-button__icon", children: _jsx(IconChevronDownSmall, { size: isDrive ? "huge" : "large" }) })] })] }));
-}));
+};

package/esm/filters/components/filtersContainer.js

@@ -16,7 +16,8 @@ export const FiltersContainer = ({ className, isPinned = false, onPinChange, fil
     const numberOfChangedFilters = 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));
             }
@@ -54,11 +55,14 @@ export const FiltersContainer = ({ className, isPinned = false, onPinChange, fil
     const handleRemovalClick = useCallback(() => {
         const defaultState = 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/esm/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/esm/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/esm/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/esm/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/esm/filters/components/filtersSearch.js

@@ -4,7 +4,7 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { PillBox } from "../../pillBox/pillBox";
 import { NO_TYPED_SEARCH_ITEM } from "./filtersSearchList";
 import { SearchInputRaw } from "../../searchInputRaw/searchInputRaw";
-export const FiltersSearch = React.forwardRef(({ id, name, value, onChange, onSearchKeyDown, handleSearchFocus, searchSelection, handleRemove, className }, ref) => {
+export const FiltersSearch = ({ id, name, value, onChange, onSearchKeyDown, handleSearchFocus, searchSelection, handleRemove, className, ref }) => {
     const isWithPills = Boolean(searchSelection && handleRemove);
     const divider = "_divider_";
     const handleSearchKeyDown = useCallback((event) => {
@@ -34,5 +34,5 @@ export const FiltersSearch = React.forwardRef(({ id, name, value, onChange, onSe
     }, [handleRemove, searchSelection]);
     const searchComponent = useMemo(() => _jsx(SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onKeyDown: handleSearchKeyDown, onFocus: handleSearchFocus, value: value, className: classNames(["zen-filters-search__search-input", "zen-filters__search", className || ""]) }), [id, ref, name, onChange, handleSearchKeyDown, handleSearchFocus, value, className]);
     return _jsxs("div", { className: classNames(["zen-filters-search", className || ""]), children: [searchComponent, isWithPills && _jsx("div", { className: "zen-filters-search__selected", children: _jsx(PillBox, { hideSelectedLabel: true, maxPills: 3, selectedPills: memoizedPillsArray, onRemove: onRemove }) })] });
-});
+};
 FiltersSearch.displayName = "FiltersSearch";

package/esm/filters/filters.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { getArrayOfChildren } from "../header/headerHelpers";
 import React from "react";
@@ -130,9 +131,10 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
     }, []);
     const handleModalApply = 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]);
@@ -167,7 +169,7 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
     const memoizedSelect = useMemo(() => _jsx(FiltersSelect, { id: `filtersSelect_${uniqueKey}`, 
         // name={translate("Search by")}
         value: searchType, onChange: setSearchType, items: searchTypesToSelect }), [searchType, searchTypesToSelect, setSearchType, uniqueKey]);
-    const memoizedSearch = useMemo(() => _jsx(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 = useMemo(() => _jsx(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 = useMemo(() => getAllOption(translate), [translate]);
     const selectTrigger = useMemo(() => {
         var _a;
@@ -176,13 +178,19 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
     }, [handleTriggerClick, selectState, isOpen, allOption.name, translate, searchTypesArray]);
     const combinedData = useCombineData(searchTypesArray);
     const memoizedPopup = useMemo(() => _jsx(ControlledPopup, { paddingY: -28, isOpen: isOpen, className: classNames(["zen-filters-popup"]), onOpenChange: handleOpenChange, useTrapFocusWithTrigger: "withTrigger", alignment: "bottom", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Setting conditions"), recalculateOnScroll: true, children: _jsxs("div", { className: "zen-filters-popup__content", children: [_jsxs("div", { className: "zen-filters-popup__left-panel", children: [selectTrigger, memoizedSelect] }), _jsxs("div", { className: "zen-filters-popup__right-panel", children: [memoizedSearch, _jsx(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 = 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 = 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 = useMemo(() => {
         const stateObj = 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 = useMemo(() => _jsx(FiltersContainer, { filtersClickHandler: handleModalState, filtersForCalculation: filtersForCalculation, isPinned: isPinMode ? isPinned : undefined, onPinChange: isPinMode ? onPinChange : undefined, hasSavedFilters: hasSavedFilters, children: filtersForRender }), [handleModalState, filtersForCalculation, isPinMode, isPinned, onPinChange, hasSavedFilters, filtersForRender]);
@@ -221,9 +229,10 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
         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/esm/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/esm/filters/filtersHelper.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Children, useMemo } from "react";
 import { FiltersGroups } from "./components/filtersGroups";
 import React from "react";
@@ -92,19 +93,20 @@ export const getChildren = (children) => (!children
 export const getFiltersState = (children) => {
     const state = {};
     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) {
-            state[child.props.id].defaultState = groupsFilterTotalStateDefault;
+            state[childProps.id].defaultState = groupsFilterTotalStateDefault;
         }
         else if (child.type === FiltersChip) {
-            state[child.props.id].defaultState = false;
+            state[childProps.id].defaultState = false;
         }
         else if (child.type === FiltersDropdown) {
-            state[child.props.id].defaultState = child.props.defaultState || prepareDefaultDropdownState(getDropdownStateType(child.props.state));
+            state[childProps.id].defaultState = childProps.defaultState || prepareDefaultDropdownState(getDropdownStateType(childProps.state));
         }
         else {
-            state[child.props.id].defaultState = child.props.defaultState;
+            state[childProps.id].defaultState = childProps.defaultState;
         }
     });
     return state;
@@ -112,18 +114,19 @@ export const getFiltersState = (children) => {
 export const createStateObject = (children, field) => {
     const state = {};
     Children.forEach(children, (child) => {
-        state[child.props.id] = {};
+        const childProps = child.props;
+        state[childProps.id] = {};
         if (child.type === FiltersGroups && field === "defaultState") {
-            state[child.props.id] = groupsFilterTotalStateDefault;
+            state[childProps.id] = groupsFilterTotalStateDefault;
         }
         else if (child.type === FiltersChip && field === "defaultState") {
-            state[child.props.id] = false;
+            state[childProps.id] = false;
         }
         else if (child.type === FiltersDropdown && field === "defaultState") {
-            state[child.props.id] = child.props.defaultState || prepareDefaultDropdownState(getDropdownStateType(child.props.state));
+            state[childProps.id] = childProps.defaultState || prepareDefaultDropdownState(getDropdownStateType(childProps.state));
         }
         else {
-            state[child.props.id] = child.props[field];
+            state[childProps.id] = childProps[field];
         }
     });
     return state;
@@ -157,9 +160,12 @@ export function getNumberOfChangedFilters(state) {
 }
 export const getTotalChangedNumber = (selectState, filters, isModalCondition) => {
     const stateObject = 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 = getFiltersState(filteredFilters);
     const numberOfChangedFilters = getNumberOfChangedFilters(filteredChildrenState);
     return numberOfChangedFilters;

package/esm/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/esm/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/esm/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/esm/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/esm/filtersBar/filtersBar.js

@@ -38,8 +38,9 @@ const getAllowedChildren = (items) => items.reduce((acc, item) => {
 const getCurrentFiltersState = (children) => {
     const state = {};
     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/esm/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/esm/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/esm/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/esm/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 import { Children, cloneElement, Fragment, useCallback, useContext, useEffect, useMemo } from "react";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { themeContext } from "../../utils/theme/themeContext";

package/esm/filtersBar/filtersContainer/filtersContainer.d.ts

@@ -3,11 +3,6 @@ import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import { TFiltersBarCommonComponent } from "../filtersBarInterfaces";
 export interface IFiltersContainer extends IZenComponentProps {
     children: TFiltersBarCommonComponent;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
 }
 export declare const FiltersContainer: React.FC<IFiltersContainer>;
 export declare const TRANSLATIONS: string[];

package/esm/filtersBar/filtersContainer/filtersContainer.js

@@ -31,8 +31,8 @@ export const FiltersContainer = ({ className, children }) => {
     const [scrollButtonType, setScrollButtonType] = useState("");
     const scrollableRef = useRef(null);
     const [isHiddenDisplay, setIsHiddenDisplay] = useState({ left: true, right: true });
-    const leftTimeoutRef = useRef();
-    const rightTimeoutRef = useRef();
+    const leftTimeoutRef = useRef(null);
+    const rightTimeoutRef = useRef(null);
     const showLeft = scrollButtonType === "start" || scrollButtonType === "both";
     const showRight = scrollButtonType === "end" || scrollButtonType === "both";
     useEffect(() => {

package/esm/filtersBar/utils/isCustomElementValid.js

@@ -1 +1,7 @@
-export const isCustomElementValid = (el) => !!(el && el.props && el.props.id && el.props.state && el.props.onChange);
+export const isCustomElementValid = (el) => {
+    if (!el || !el.props) {
+        return false;
+    }
+    const props = el.props;
+    return !!(props.id && props.state && props.onChange);
+};

package/esm/formField/formField.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { RefCallback, RefObject } from "react";
 import "./formField.less";
 export interface IFormField {
     className?: string;
     inputClassName?: string;
-    ref?: React.RefObject<HTMLElement>;
+    ref?: RefObject<HTMLElement | null> | RefCallback<HTMLElement | null>;
     error?: string;
     assistive?: string;
     counter?: string;
@@ -12,4 +12,7 @@ export interface IFormFieldComponent {
     isError?: boolean;
 }
 export type TFormFieldComponentProps<T> = Omit<T, "isError"> & IFormField;
-export declare const FormField: <T extends IFormFieldComponent>(WrappedComponent: React.FC<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<TFormFieldComponentProps<T>> & React.RefAttributes<HTMLElement | null>>;
+export declare const FormField: <T extends IFormFieldComponent>(WrappedComponent: React.FC<T>) => {
+    (props: TFormFieldComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};