@geotab/zenith 1.26.6-beta.3 → 2.0.0-beta.0

package/esm/filtersBar/components/filtersBarSearch/filtersBarSearch.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IFiltersBarItem } from "../interfaces";
+import { ISearchInputRaw } from "../../../searchInputRaw/searchInputRaw";
+export interface IFiltersBarSearchState {
+    value: string;
+}
+interface IFiltersBarSearchProps extends Pick<ISearchInputRaw, "withDefaultCloseIcon" | "disabled" | "placeholder" | "ariaLabel" | "closeButtonTitle" | "onKeyDown" | "maxLength"> {
+}
+export interface IFiltersBarSearch extends IFiltersBarItem<IFiltersBarSearchState, IFiltersBarSearchProps> {
+    className?: string;
+}
+export declare const FiltersBarSearchDisplayName = "FiltersBarSearch";
+export declare const FiltersBarSearch: React.FC<IFiltersBarSearch>;
+export {};

package/esm/filtersBar/components/filtersBarSearch/filtersBarSearch.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchInputRaw } from "../../../searchInputRaw/searchInputRaw";
+import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
+import { useUniqueId } from "../../../commonHelpers/useUniqueId";
+export const FiltersBarSearchDisplayName = "FiltersBarSearch";
+export const FiltersBarSearch = ({ className, state, props, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
+    const inputId = useUniqueId();
+    const filterBarLabelledId = useUniqueId();
+    const component = _jsx(SearchInputRaw, Object.assign({}, props, { id: inputId, onChange: value => onChangeState({ value }), value: state.value, className: className }));
+    if (!useSidePanelView) {
+        return component;
+    }
+    return _jsx(SidePanelCell, { title: sidePanelTitle, role: "group", labelledBy: filterBarLabelledId, titleId: filterBarLabelledId, children: component });
+};
+FiltersBarSearch.displayName = FiltersBarSearchDisplayName;

package/esm/filtersBar/components/interfaces.d.ts

@@ -0,0 +1,20 @@
+export interface IFiltersBarItemCommonProps {
+    id: string;
+    sidePanelTitle: string;
+    showInSidePanel?: boolean;
+    hideInBar?: boolean;
+    useSidePanelView?: boolean;
+}
+export interface IFiltersBarItem<State = unknown, Props = unknown> extends IFiltersBarItemCommonProps {
+    state: State;
+    props?: Props;
+    onChange: (state: State) => void;
+}
+export interface ICustomFiltersBarItem<T> extends Pick<IFiltersBarItem, "id" | "showInSidePanel" | "useSidePanelView" | "hideInBar"> {
+    state: {
+        value: T;
+    };
+    onChange: (state: {
+        value: T;
+    }) => void;
+}

package/esm/filtersBar/components/interfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+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/components/resetComponentButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../../button/button";
+import { ButtonType } from "../../button/buttonType";
+import { useLanguage } from "../../utils/localization/useLanguage";
+export const ResetButton = ({ isDefaultState, onClick }) => {
+    const { translate } = useLanguage();
+    return _jsx(Button, { type: ButtonType.Tertiary, disabled: isDefaultState, onClick: onClick, children: translate("Reset") });
+};
+export const TRANSLATIONS = ["Reset"];

package/esm/filtersBar/filtersBar.d.ts

@@ -0,0 +1,65 @@
+import "./filtersBar.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import React, { ReactElement } from "react";
+import { IFiltersBarSidePanel } from "./filtersBarSidePanel/filtersBarSidePanel";
+import { IFiltersBarSearch } from "./components/filtersBarSearch/filtersBarSearch";
+import { IFiltersBarGroupButton } from "./components/filtersBarGroupButton/filtersBarGroupButton";
+import { IFiltersBarGroupsFilter } from "./components/filtersBarGroupsFilter/filtersBarGroupsFilter";
+import { IFiltersBarPeriodPicker, IFiltersBarPeriodPickerUnsetValue } from "./components/filtersBarPeriodPicker/filtersBarPeriodPicker";
+import { IFiltersBarDropdown, IFiltersBarDropdownFullSelectionMode } from "./components/filtersBarDropdown/filtersBarDropdown";
+import { IFiltersBarDropdownWithCheckbox, IFiltersBarDropdownWithCheckboxFullSelectionMode } from "./components/filtersBarDropdownWithCheckbox/filtersBarDropdownWithCheckbox";
+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;
+    parentElement?: HTMLElement;
+    getDefaultFiltersState: () => IFiltersBarChildrenState;
+    /**
+     * @deprecated
+     * @param onClearAllFilters - will be removed in the next major release
+    */
+    onClearAllFilters?: () => void;
+    children: ReactElement | (ReactElement | null)[];
+    hideAllFiltersButton?: boolean;
+    onApplyAllFilters?: (newState?: IFiltersBarChildrenState) => void;
+    /**
+     * @deprecated
+     * @param selectedQuantity - will be removed in the next major release
+    */
+    selectedQuantity?: number;
+    /**
+     * @deprecated
+     * @param ignoreNewFunctionality - only for internal usage
+    */
+    ignoreNewFunctionality?: boolean;
+    /**
+     * @deprecated
+     * @param onUpdateNumberOfChangedFilters - will be removed in the next major release
+    */
+    onUpdateNumberOfChangedFilters?: (newValue: number) => void;
+    pillName?: string;
+    pillIcon?: React.FC<IIcon>;
+    pillType?: "default" | "error" | "success" | "warning" | "info";
+}
+interface IFiltersBarComponents {
+    Search: React.FC<IFiltersBarSearch>;
+    Dropdown: React.FC<IFiltersBarDropdown | IFiltersBarDropdownFullSelectionMode>;
+    DropdownWithCheckbox: React.FC<IFiltersBarDropdownWithCheckbox | IFiltersBarDropdownWithCheckboxFullSelectionMode>;
+    GroupButton: React.FC<IFiltersBarGroupButton>;
+    GroupsFilter: React.FC<IFiltersBarGroupsFilter>;
+    PeriodPicker: React.FC<IFiltersBarPeriodPicker | IFiltersBarPeriodPickerUnsetValue>;
+    Range: React.FC<IFiltersBarRange>;
+    SidePanel: React.FC<IFiltersBarSidePanel>;
+}
+export declare const FiltersBarDisplayName = "FiltersBar";
+export declare const FiltersBar: React.FC<IFiltersBar> & IFiltersBarComponents;
+export declare const TRANSLATIONS: string[];
+export {};

package/esm/filtersBar/filtersBar.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { FiltersContainer } from "./filtersContainer/filtersContainer";
+import { FiltersBarActions } from "./filtersBarActions/filtersBarActions";
+import { Children, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { FiltersBarSidePanel, FiltersBarSidePanelContainer, TRANSLATIONS as SidePanelTranslations } from "./filtersBarSidePanel/filtersBarSidePanel";
+import { FiltersBarSearch } from "./components/filtersBarSearch/filtersBarSearch";
+import { FiltersBarGroupButton } from "./components/filtersBarGroupButton/filtersBarGroupButton";
+import { FiltersBarGroupsFilter } from "./components/filtersBarGroupsFilter/filtersBarGroupsFilter";
+import { FiltersBarPeriodPicker, TRANSLATIONS as PeriodPickerTranslations } from "./components/filtersBarPeriodPicker/filtersBarPeriodPicker";
+import { FiltersBarDropdown, TRANSLATIONS as DropdownTranslations } from "./components/filtersBarDropdown/filtersBarDropdown";
+import { FiltersBarDropdownWithCheckbox } from "./components/filtersBarDropdownWithCheckbox/filtersBarDropdownWithCheckbox";
+import { FiltersBarRange, TRANSLATIONS as RangeTranslations } from "./components/filtersBarRange/filtersBarRange";
+import { isCustomElementValid } from "./utils/isCustomElementValid";
+import { sidePanelReducer, StateActionType } from "./filtersBarSidePanel/sidePanelReducer";
+import { filtersBarReducer, FiltersBarStateActionType, getInitialFiltersBarState } from "./filtersBarReducer";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { getNumberOfChangedFilters } from "./utils/getNumberOfChangedFilters";
+import { useFiltersBarComponent } from "./filtersBarProvider";
+import { useSearchComponent } from "./filtersBarProviderSearch";
+import { useMobileTrigger } from "./filtersBarProviderTrigger";
+import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
+/* eslint-enable @typescript-eslint/naming-convention */
+export const FiltersBarDisplayName = "FiltersBar";
+const getChildren = (children) => (!children
+    ? []
+    : (Children.count(children) === 1 ? [children] : children)).filter(c => !!c);
+const allowedComponents = [FiltersBarSearch, FiltersBarDropdown, FiltersBarGroupButton, FiltersBarGroupsFilter, FiltersBarPeriodPicker, FiltersBarRange];
+const getAllowedChildren = (items) => items.reduce((acc, item) => {
+    if (!item) {
+        return acc;
+    }
+    if (allowedComponents.includes(item.type) || isCustomElementValid(item)) {
+        acc.push(item);
+    }
+    return acc;
+}, []);
+const getCurrentFiltersState = (children) => {
+    const state = {};
+    Children.forEach(children, (child) => {
+        state[child.props.id] = {};
+        state[child.props.id].state = child.props.state;
+    });
+    return state;
+};
+const mergeStates = (initialState, newState) => {
+    const state = Object.assign({}, initialState);
+    Object.keys(newState).forEach(key => {
+        if (state[key]) {
+            state[key] = newState[key] ? newState[key] : undefined;
+        }
+    });
+    return state;
+};
+export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersButton, parentElement, selectedQuantity, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ignoreNewFunctionality, pillName, pillIcon, pillType, toggleAllFilters, getDefaultFiltersState, onClearAllFilters, onApplyAllFilters }) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    ignoreNewFunctionality; // TODO: remove after deprecated ignoreNewFunctionality removed
+    const allFiltersRef = useRef(null);
+    const emptyFiltersRef = useRef(null);
+    const isMobile = useMobile();
+    const { setSearchComponent } = useSearchComponent();
+    const { mobileTriggerRef } = useMobileTrigger();
+    const { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn } = useFiltersBarComponent();
+    const isAllFiltersButtonHidden = !isMobile && hideAllFiltersButton;
+    const prevIsShouldSync = useRef(isMobile && isAllFiltersVisible);
+    const prevIsOpen = useRef(isAllFiltersVisible);
+    const toolbarRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (!isAllFiltersVisible) {
+            if (!isMobile && ((_a = allFiltersRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-expanded")) === "true") {
+                allFiltersRef.current.setAttribute("aria-expanded", "false");
+            }
+            if (isMobile && ((_b = mobileTriggerRef === null || mobileTriggerRef === void 0 ? void 0 : mobileTriggerRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("aria-expanded")) === "true") {
+                mobileTriggerRef.current.setAttribute("aria-expanded", "false");
+            }
+        }
+    }, [isAllFiltersVisible, isMobile, mobileTriggerRef]);
+    const childrenArray = useMemo(() => getChildren(children), [children]);
+    const filterBarChildren = useMemo(() => getAllowedChildren(childrenArray), [childrenArray]);
+    const stateFromChildren = useMemo(() => getCurrentFiltersState(filterBarChildren), [filterBarChildren]);
+    const [filtersBarState, dispatchFiltersBarState] = useReducer(filtersBarReducer, getInitialFiltersBarState(stateFromChildren, getDefaultFiltersState, onApplyAllFilters === undefined));
+    const [sidePanelState, dispatchSidePanelState] = useReducer(sidePanelReducer, stateFromChildren);
+    useEffect(() => {
+        // need for dynamic items loading
+        if (Object.keys(stateFromChildren).length > Object.keys(sidePanelState).length) {
+            dispatchSidePanelState({ type: StateActionType.Reinitialize, payload: stateFromChildren });
+        }
+    }, [stateFromChildren, sidePanelState]);
+    useEffect(() => {
+        dispatchFiltersBarState({ type: FiltersBarStateActionType.ChangeChildrenState, payload: { state: stateFromChildren, defaultStateFn: getDefaultFiltersState } });
+    }, [stateFromChildren, getDefaultFiltersState]);
+    useEffect(() => {
+        if (onUpdateNumberOfChangedFiltersFn) {
+            onUpdateNumberOfChangedFiltersFn(filtersBarState.numberOfChangedFilters);
+        }
+    }, [filtersBarState.numberOfChangedFilters, onUpdateNumberOfChangedFiltersFn]);
+    const memoizedShouldUpdate = useMemo(() => {
+        if (isMobile && isAllFiltersVisible) {
+            prevIsShouldSync.current = true;
+            return true;
+        }
+        prevIsShouldSync.current = false;
+        return false;
+    }, [isMobile, isAllFiltersVisible]);
+    useEffect(() => {
+        if (prevIsShouldSync.current && memoizedShouldUpdate) {
+            prevIsShouldSync.current = false;
+            if (prevIsOpen.current) {
+                prevIsOpen.current = false;
+                dispatchSidePanelState({ type: StateActionType.Reinitialize, payload: mergeStates(stateFromChildren, sidePanelState) });
+                return;
+            }
+            Children.forEach(filterBarChildren, (child) => {
+                dispatchSidePanelState({ type: StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+            });
+        }
+    }, [filterBarChildren, memoizedShouldUpdate, sidePanelState, stateFromChildren]);
+    const searchChild = childrenArray.find(child => child && child.type === FiltersBarSearch);
+    setSearchComponent(searchChild);
+    useEffect(() => {
+        setFiltersBarToggleAllFiltersFn(toggleAllFilters);
+    }, [toggleAllFilters, setFiltersBarToggleAllFiltersFn]);
+    const toggleAllFiltersCallback = useCallback((value) => {
+        if (!isAllFiltersVisible && value) {
+            Children.forEach(filterBarChildren, (child) => {
+                dispatchSidePanelState({ type: StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+            });
+        }
+        toggleAllFilters(value);
+        prevIsOpen.current = value;
+    }, [isAllFiltersVisible, toggleAllFilters, filterBarChildren]);
+    const onClosePanel = useCallback(() => toggleAllFiltersCallback(false), [toggleAllFiltersCallback]);
+    const handleApplyAllFilters = useCallback((isSidePanel) => (value) => {
+        var _a;
+        if (onApplyAllFilters) {
+            const newValue = value ? value : sidePanelState;
+            const newState = isSidePanel ? Object.keys(newValue).reduce((res, key) => {
+                var _a;
+                res[key] = { state: (_a = newValue[key]) === null || _a === void 0 ? void 0 : _a.state };
+                return res;
+            }, {}) : filtersBarState.childrenState;
+            isSidePanel && dispatchFiltersBarState({ type: FiltersBarStateActionType.ChangeChildrenState, payload: { state: newState, defaultStateFn: getDefaultFiltersState } });
+            dispatchFiltersBarState({ type: FiltersBarStateActionType.UpdateNumber, payload: newState });
+            onApplyAllFilters(newState);
+            (_a = allFiltersRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [onApplyAllFilters, sidePanelState, filtersBarState.childrenState, getDefaultFiltersState]);
+    const handleClearClick = useCallback(() => {
+        const defaultState = getDefaultFiltersState();
+        dispatchFiltersBarState({ type: FiltersBarStateActionType.ChangeChildrenState, payload: { state: defaultState, defaultStateFn: getDefaultFiltersState } });
+        dispatchFiltersBarState({ type: FiltersBarStateActionType.UpdateNumber, payload: defaultState });
+        filterBarChildren.forEach(child => {
+            const changeHandler = child.props.onChange;
+            const newState = defaultState[child.props.id];
+            const isAllowUnsetValue = child.type === FiltersBarPeriodPicker;
+            // @ts-expect-error: Let's ignore a compile error. if value undefined, and a value is passed to the function undefined, it can be passed because the interface is IDateRangeUnsetValue
+            ((newState === null || newState === void 0 ? void 0 : newState.state) || isAllowUnsetValue) && changeHandler(newState.state);
+        });
+        onClearAllFilters && onClearAllFilters();
+        onApplyAllFilters && onApplyAllFilters(defaultState);
+        if (allFiltersRef.current) {
+            allFiltersRef.current.focus();
+        }
+        else if (toolbarRef.current) {
+            const focusable = toolbarRef.current.querySelector(FOCUSABLE_SELECTOR);
+            focusable === null || focusable === void 0 ? void 0 : focusable.focus();
+        }
+    }, [filterBarChildren, getDefaultFiltersState, onApplyAllFilters, onClearAllFilters]);
+    const isApplyButtonShown = useMemo(() => {
+        if (!onApplyAllFilters) {
+            return false;
+        }
+        const defaultState = getDefaultFiltersState();
+        if (Object.keys(defaultState).length === Object.keys(filtersBarState.prevChildrenState).length) {
+            return getNumberOfChangedFilters(filtersBarState.prevChildrenState, filtersBarState.childrenState) > 0;
+        }
+        return getNumberOfChangedFilters(filtersBarState.childrenState, filtersBarState.prevChildrenState) > 0;
+    }, [filtersBarState.childrenState, filtersBarState.prevChildrenState, getDefaultFiltersState, onApplyAllFilters]);
+    const sidePanel = useMemo(() => {
+        const sidePanelChild = childrenArray.find(child => child && child.type === FiltersBarSidePanelContainer);
+        if (!sidePanelChild) {
+            return _jsx(FiltersBarSidePanel, { parentElement: parentElement, isOpen: isAllFiltersVisible, triggerRef: isMobile ? mobileTriggerRef || emptyFiltersRef : allFiltersRef, getDefaultFiltersState: getDefaultFiltersState, onClosePanel: onClosePanel, state: sidePanelState, onApplyAllFilters: handleApplyAllFilters(true), dispatch: dispatchSidePanelState, pillName: pillName, pillIcon: pillIcon, pillType: pillType, children: filterBarChildren });
+        }
+        const sidePanelChildren = getAllowedChildren(getChildren(sidePanelChild.props.children));
+        return _jsx(FiltersBarSidePanel, { parentElement: parentElement, isOpen: isAllFiltersVisible, triggerRef: isMobile ? mobileTriggerRef || emptyFiltersRef : allFiltersRef, getDefaultFiltersState: getDefaultFiltersState, onClosePanel: onClosePanel, className: sidePanelChild.props.className, state: sidePanelChild.props.state, onApplyAllFilters: handleApplyAllFilters(true), dispatch: sidePanelChild.props.dispatch, pillName: pillName, pillIcon: pillIcon, pillType: pillType, children: sidePanelChildren });
+    }, [childrenArray, parentElement, isAllFiltersVisible, isMobile, mobileTriggerRef, getDefaultFiltersState, onClosePanel, handleApplyAllFilters,
+        pillName, pillIcon, pillType, sidePanelState, filterBarChildren]);
+    const noActions = useMemo(() => isAllFiltersButtonHidden && (selectedQuantity === undefined && filtersBarState.currentNumberOfChangedFilters === 0 || selectedQuantity === 0)
+        && (!isApplyButtonShown || onApplyAllFilters === undefined), [isAllFiltersButtonHidden, selectedQuantity, filtersBarState.currentNumberOfChangedFilters, isApplyButtonShown, onApplyAllFilters]);
+    return _jsxs(_Fragment, { children: [!isMobile && _jsxs("div", { ref: toolbarRef, className: classNames(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx(FiltersContainer, { children: filterBarChildren }), _jsx(FiltersBarActions, { allFiltersRef: allFiltersRef, onShowAllFilters: () => toggleAllFiltersCallback(true), onClearFilters: handleClearClick, selectedQuantity: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.currentNumberOfChangedFilters, selectedQuantityToDisplay: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.numberOfChangedFilters, hideAllFiltersButton: isAllFiltersButtonHidden, onApplyButtonClick: onApplyAllFilters ? handleApplyAllFilters(false) : undefined, isApplyButtonShown: isApplyButtonShown })] }), !isAllFiltersButtonHidden ? sidePanel : null] });
+};
+FiltersBar.Search = FiltersBarSearch;
+FiltersBar.Dropdown = FiltersBarDropdown;
+FiltersBar.DropdownWithCheckbox = FiltersBarDropdownWithCheckbox;
+FiltersBar.GroupButton = FiltersBarGroupButton;
+FiltersBar.GroupsFilter = FiltersBarGroupsFilter;
+FiltersBar.PeriodPicker = FiltersBarPeriodPicker;
+FiltersBar.Range = FiltersBarRange;
+FiltersBar.SidePanel = FiltersBarSidePanelContainer;
+FiltersBar.displayName = FiltersBarDisplayName;
+export const TRANSLATIONS = [...new Set([
+        ...SidePanelTranslations,
+        ...DropdownTranslations,
+        ...PeriodPickerTranslations,
+        ...RangeTranslations
+    ]).values()];

package/esm/filtersBar/filtersBarActions/filtersBarActions.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+export interface IFiltersBarActions extends IZenComponentProps {
+    onShowAllFilters: () => void;
+    onClearFilters: () => void;
+    allFiltersRef: React.RefObject<HTMLButtonElement>;
+    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;
+}
+export declare const FiltersBarActions: React.FC<IFiltersBarActions>;
+export declare const TRANSLATIONS: string[];

package/esm/filtersBar/filtersBarActions/filtersBarActions.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { Button } from "../../button/button";
+import { ButtonType } from "../../button/buttonType";
+import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIconButton";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { IconSettings6 } from "../../icons/iconSettings6";
+export const FiltersBarActions = ({ className, selectedQuantity, selectedQuantityToDisplay, hideAllFiltersButton, onShowAllFilters, allFiltersRef, onClearFilters, onApplyButtonClick, isApplyButtonShown }) => {
+    const { translate } = useLanguage();
+    return _jsxs("div", { className: classNames(["zen-filters-toolbar__actions", className !== null && className !== void 0 ? className : ""]), children: [hideAllFiltersButton
+                ? null
+                : _jsx(TextIconButton, { type: ButtonType.TertiaryBlack, ref: allFiltersRef, className: classNames(["zen-filters-toolbar__all-filters", className !== null && className !== void 0 ? className : ""]), onClick: onShowAllFilters, icon: IconSettings6, iconPosition: ButtonIconPosition.Start, children: _jsxs("span", { className: "zen-filters-toolbar__action-label", children: [translate("Filters"), selectedQuantityToDisplay && selectedQuantityToDisplay > 0 ? _jsx("span", { className: "zen-filters-toolbar__action-quantity", children: selectedQuantityToDisplay }) : null] }) }), selectedQuantity && selectedQuantity > 0
+                ? (_jsx(Button, { type: ButtonType.TertiaryBlack, onClick: onClearFilters, className: classNames(["zen-filters-toolbar__all-filters", "zen-filters-toolbar__clear", className !== null && className !== void 0 ? className : ""]), children: _jsx("span", { className: "zen-filters-toolbar__action-label", children: translate("Clear") }) }))
+                : null, onApplyButtonClick && isApplyButtonShown
+                ? (_jsx(Button, { title: translate("Apply"), className: classNames(["zen-filters-toolbar__apply", className !== null && className !== void 0 ? className : ""]), type: ButtonType.Primary, onClick: onApplyButtonClick, children: translate("Apply") }))
+                : null] });
+};
+export const TRANSLATIONS = [
+    "Filters",
+    "Clear",
+    "Search"
+];

package/esm/filtersBar/filtersBarInterfaces.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { FiltersBarDropdown, IFiltersBarDropdown, IFiltersBarDropdownFullSelectionMode } from "./components/filtersBarDropdown/filtersBarDropdown";
+import { FiltersBarGroupButton, IFiltersBarGroupButton } from "./components/filtersBarGroupButton/filtersBarGroupButton";
+import { FiltersBarGroupsFilter, IFiltersBarGroupsFilter } from "./components/filtersBarGroupsFilter/filtersBarGroupsFilter";
+import { FiltersBarPeriodPicker, IFiltersBarPeriodPicker, IFiltersBarPeriodPickerUnsetValue } from "./components/filtersBarPeriodPicker/filtersBarPeriodPicker";
+import { FiltersBarSearch, IFiltersBarSearch } from "./components/filtersBarSearch/filtersBarSearch";
+import { FiltersBarRange, IFiltersBarRange } from "./components/filtersBarRange/filtersBarRange";
+import { FiltersBarDropdownWithCheckbox, IFiltersBarDropdownWithCheckbox, IFiltersBarDropdownWithCheckboxFullSelectionMode } from "./components/filtersBarDropdownWithCheckbox/filtersBarDropdownWithCheckbox";
+export type TFiltersBarComponents = typeof FiltersBarDropdown | typeof FiltersBarDropdownWithCheckbox | typeof FiltersBarSearch | typeof FiltersBarGroupButton | typeof FiltersBarGroupsFilter | typeof FiltersBarPeriodPicker | typeof FiltersBarRange;
+export type IFiltersBarDropdownState = Pick<IFiltersBarDropdown, "state">["state"];
+export type IFiltersBarDropdownFullSelectionModeState = Pick<IFiltersBarDropdownFullSelectionMode, "state">["state"];
+export type IFiltersBarDropdownWithCheckboxState = Pick<IFiltersBarDropdownWithCheckbox, "state">["state"];
+export type IFiltersBarDropdownWithCheckboxFullSelectionState = Pick<IFiltersBarDropdownWithCheckboxFullSelectionMode, "state">["state"];
+export type IFiltersBarSearchState = Pick<IFiltersBarSearch, "state">["state"];
+export type IFiltersBarGroupButtonState = Pick<IFiltersBarGroupButton, "state">["state"];
+export type IFiltersBarRangeState = Pick<IFiltersBarRange, "state">["state"];
+export type IFiltersBarGroupsFilterState = Pick<IFiltersBarGroupsFilter, "state">["state"];
+export type IFiltersBarPeriodPickerState = Pick<IFiltersBarPeriodPicker, "state">["state"];
+export type IFiltersBarPeriodPickerUnsetValueState = Pick<IFiltersBarPeriodPickerUnsetValue, "state">["state"];
+export type TFiltersBarCommonComponent = React.ReactComponentElement<TFiltersBarComponents>[];
+export type TFiltersBarComponentsState = IFiltersBarDropdownState | IFiltersBarDropdownFullSelectionModeState | IFiltersBarDropdownWithCheckboxState | IFiltersBarDropdownWithCheckboxFullSelectionState | IFiltersBarSearchState | IFiltersBarGroupButtonState | IFiltersBarRangeState | IFiltersBarGroupsFilterState | IFiltersBarPeriodPickerState | IFiltersBarPeriodPickerUnsetValueState | {
+    value: unknown;
+};
+export interface IFiltersBarComponentWithError<T = TFiltersBarComponentsState> {
+    hasError?: boolean;
+    state: T;
+}
+export interface IFiltersBarChildrenState {
+    [key: string]: IFiltersBarComponentWithError | undefined;
+}

package/esm/filtersBar/filtersBarInterfaces.js

@@ -0,0 +1 @@
+export {};

package/esm/filtersBar/filtersBarProvider.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+export interface IFilterBarToggleFilters {
+    fn: (isAllFilters: boolean) => void;
+}
+interface IFiltersBarComponentProvider {
+    setFiltersBarToggleAllFiltersFn: (IFilterBarToggleFilters: any) => void;
+    onUpdateNumberOfChangedFiltersFn?: (newValue: number) => void;
+}
+export declare const FiltersBarContext: React.Context<IFiltersBarComponentProvider>;
+export declare const FiltersBarContextProvider: React.FC<{
+    value: IFiltersBarComponentProvider;
+    children: ReactNode;
+}>;
+export declare const useFiltersBarComponent: () => {
+    setFiltersBarToggleAllFiltersFn: (IFilterBarToggleFilters: any) => void;
+    onUpdateNumberOfChangedFiltersFn: ((newValue: number) => void) | undefined;
+};
+export {};

package/esm/filtersBar/filtersBarProvider.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef } from "react";
+export const FiltersBarContext = createContext({
+    setFiltersBarToggleAllFiltersFn: () => { },
+    onUpdateNumberOfChangedFiltersFn: () => { }
+});
+export const FiltersBarContextProvider = ({ value, children }) => {
+    const filtersBarToggleAllFiltersRef = useRef(null);
+    const setFiltersBarToggleFn = useCallback((fn) => {
+        var _a;
+        if (((_a = filtersBarToggleAllFiltersRef.current) === null || _a === void 0 ? void 0 : _a.fn) !== fn) {
+            filtersBarToggleAllFiltersRef.current = { fn: fn };
+            setTimeout(() => {
+                value.setFiltersBarToggleAllFiltersFn({ fn: fn });
+            }, 0);
+        }
+    }, [value]);
+    return _jsx(FiltersBarContext.Provider, { value: { setFiltersBarToggleAllFiltersFn: setFiltersBarToggleFn, onUpdateNumberOfChangedFiltersFn: value.onUpdateNumberOfChangedFiltersFn }, children: children });
+};
+export const useFiltersBarComponent = () => {
+    const { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn } = useContext(FiltersBarContext);
+    return { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn };
+};

package/esm/filtersBar/filtersBarProviderSearch.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+interface ISearchComponentProvider {
+    setSearchComponent: (searchComponentRef: React.ReactElement | undefined) => void;
+}
+export declare const SearchContext: React.Context<ISearchComponentProvider>;
+export declare const SearchContextProvider: React.FC<{
+    value: ISearchComponentProvider;
+    children: ReactNode;
+}>;
+export declare const useSearchComponent: () => {
+    setSearchComponent: (searchComponentRef: React.ReactElement | undefined) => void;
+};
+export {};

package/esm/filtersBar/filtersBarProviderSearch.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef } from "react";
+import { getNumberOfChangedFilters } from "./utils/getNumberOfChangedFilters";
+export const SearchContext = createContext({
+    setSearchComponent: () => { }
+});
+export const SearchContextProvider = ({ value, children }) => {
+    const searchComponentRef = useRef(null);
+    const setSearchComponentRef = useCallback((searchComponent) => {
+        const prevProps = searchComponentRef.current === null || !searchComponentRef.current ? undefined : searchComponentRef.current.props;
+        const nextProps = !searchComponent ? undefined : searchComponent.props;
+        const changedPropsNumber = prevProps && !nextProps || !prevProps && nextProps ? 1 :
+            getNumberOfChangedFilters(prevProps || {}, nextProps || {});
+        searchComponentRef.current = searchComponent;
+        if (changedPropsNumber > 0) {
+            setTimeout(() => {
+                value.setSearchComponent(searchComponent);
+            }, 0);
+        }
+    }, [value]);
+    return _jsx(SearchContext.Provider, { value: { setSearchComponent: setSearchComponentRef }, children: children });
+};
+export const useSearchComponent = () => {
+    const { setSearchComponent } = useContext(SearchContext);
+    return { setSearchComponent };
+};

package/esm/filtersBar/filtersBarProviderTrigger.d.ts

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

package/esm/filtersBar/filtersBarProviderTrigger.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+export const TriggerContext = createContext({
+    triggerComponent: null
+});
+export const TriggerContextProvider = ({ value, children }) => _jsx(TriggerContext.Provider, { value: Object.assign({}, value), children: children });
+export const useMobileTrigger = () => {
+    const { triggerComponent } = useContext(TriggerContext);
+    return { mobileTriggerRef: triggerComponent };
+};

package/esm/filtersBar/filtersBarReducer.d.ts

@@ -0,0 +1,39 @@
+import { Reducer } from "react";
+import { IFiltersBarChildrenState } from "./filtersBarInterfaces";
+export interface IFiltersBarState {
+    childrenState: IFiltersBarChildrenState;
+    prevChildrenState: IFiltersBarChildrenState;
+    allowCurrentNumberUpdates: boolean;
+    numberOfChangedFilters: number;
+    currentNumberOfChangedFilters: number;
+    getDefaultFiltersState: () => IFiltersBarChildrenState;
+}
+export declare enum FiltersBarStateActionType {
+    ChangeChildrenState = "CHANGE_CHILDREN_STATE",
+    UpdateNumber = "UPDATE_NUMBER"
+}
+interface IChangedStatePayload {
+    state: IFiltersBarChildrenState;
+    defaultStateFn: () => IFiltersBarChildrenState;
+}
+interface IChangeAction {
+    type: FiltersBarStateActionType.ChangeChildrenState;
+    payload: IChangedStatePayload;
+}
+interface IUpdateNumberAction {
+    type: FiltersBarStateActionType.UpdateNumber;
+    payload: IFiltersBarChildrenState;
+}
+export type TFiltersBarStateAction = IChangeAction | IUpdateNumberAction;
+export interface IFiltersBarReducer<T extends IFiltersBarState = IFiltersBarState> extends Reducer<T, TFiltersBarStateAction> {
+}
+export declare const getInitialFiltersBarState: (childrenState: IFiltersBarChildrenState, getDefaultFiltersState: () => IFiltersBarChildrenState, allowCurrentNumberUpdates: boolean) => {
+    childrenState: IFiltersBarChildrenState;
+    prevChildrenState: IFiltersBarChildrenState;
+    allowCurrentNumberUpdates: boolean;
+    numberOfChangedFilters: number;
+    currentNumberOfChangedFilters: number;
+    getDefaultFiltersState: () => IFiltersBarChildrenState;
+};
+export declare function filtersBarReducer<T>(state: IFiltersBarState, action: TFiltersBarStateAction): IFiltersBarState | T;
+export {};

package/esm/filtersBar/filtersBarReducer.js

@@ -0,0 +1,32 @@
+import { getNumberOfChangedFilters } from "./utils/getNumberOfChangedFilters";
+export var FiltersBarStateActionType;
+(function (FiltersBarStateActionType) {
+    FiltersBarStateActionType["ChangeChildrenState"] = "CHANGE_CHILDREN_STATE";
+    FiltersBarStateActionType["UpdateNumber"] = "UPDATE_NUMBER";
+})(FiltersBarStateActionType || (FiltersBarStateActionType = {}));
+export const getInitialFiltersBarState = (childrenState, getDefaultFiltersState, allowCurrentNumberUpdates) => {
+    const numberOfChangedFilters = getNumberOfChangedFilters(getDefaultFiltersState(), childrenState);
+    return {
+        childrenState: childrenState,
+        prevChildrenState: childrenState,
+        allowCurrentNumberUpdates: allowCurrentNumberUpdates,
+        numberOfChangedFilters: numberOfChangedFilters,
+        currentNumberOfChangedFilters: numberOfChangedFilters,
+        getDefaultFiltersState: getDefaultFiltersState
+    };
+};
+export function filtersBarReducer(state, action) {
+    if (action.type === FiltersBarStateActionType.ChangeChildrenState) {
+        const newChildrenState = action.payload.state;
+        const newDefaultFiltersStateFn = action.payload.defaultStateFn;
+        const newNumberOfChangedFilters = getNumberOfChangedFilters(newDefaultFiltersStateFn(), newChildrenState);
+        return Object.assign(Object.assign({}, state), { childrenState: newChildrenState, getDefaultFiltersState: newDefaultFiltersStateFn, currentNumberOfChangedFilters: newNumberOfChangedFilters, numberOfChangedFilters: state.allowCurrentNumberUpdates ? newNumberOfChangedFilters : state.numberOfChangedFilters });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (action.type === FiltersBarStateActionType.UpdateNumber) {
+        const newChildrenState = action.payload;
+        const newNumberOfChangedFilters = getNumberOfChangedFilters(state.getDefaultFiltersState(), newChildrenState);
+        return Object.assign(Object.assign({}, state), { childrenState: newChildrenState, prevChildrenState: newChildrenState, currentNumberOfChangedFilters: newNumberOfChangedFilters, numberOfChangedFilters: newNumberOfChangedFilters });
+    }
+    return state;
+}

package/esm/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelCheckboxGroup/filtersBarSidePanelCheckboxGroup.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import "./filtersBarSidePanelCheckboxGroup.less";
+import { ICheckbox } from "../../../../checkbox/checkbox";
+import { IZenComponentProps } from "../../../../commonHelpers/zenComponent";
+export interface IFiltersBarSidePanelCheckboxItem extends IZenComponentProps {
+    value: string;
+    title?: string;
+    disabled?: boolean;
+}
+export interface IFiltersBarSidePanelCheckboxGroup extends Pick<ICheckbox, "name"> {
+    items: IFiltersBarSidePanelCheckboxItem[];
+    selectedItems: string[];
+    onChange: (selectedItems: string[]) => void;
+}
+export declare const FiltersBarSidePanelCheckboxGroup: React.FC<IFiltersBarSidePanelCheckboxGroup>;