@geotab/zenith 3.6.1 → 3.6.2

package/esm/filtersBar/components/filtersBarPeriodPicker/normalizeDates.d.ts

@@ -0,0 +1,4 @@
+export declare const normalizeDates: (startDate: string | undefined, endDate: string | undefined, disableFutureDates: boolean | undefined, disablePastDates: boolean | undefined, disableDatesBefore?: string, disableDatesAfter?: string) => {
+    from: string;
+    to: string;
+};

package/esm/filtersBar/components/filtersBarPeriodPicker/normalizeDates.js

@@ -0,0 +1,87 @@
+import { addDays, addMinutes, getAvailablePeriod } from "../../../calendar/dateUtils";
+// eslint-disable-next-line complexity
+const getAvailableRange = (availablePeriod, startDate, endDate, disableDatesBefore, disableDatesAfter) => {
+    const now = new Date().toISOString();
+    let fromDate = startDate;
+    let toDate = endDate;
+    if (availablePeriod === "all") {
+        fromDate = startDate ? startDate : endDate ? addDays(new Date(endDate), -1).toISOString() : now;
+        toDate = endDate ? endDate : startDate ? addDays(new Date(startDate), 1).toISOString() : addDays(new Date(now), 1).toISOString();
+        return { from: fromDate, to: toDate };
+    }
+    if (availablePeriod === "before" && disableDatesAfter) {
+        toDate = endDate && new Date(endDate) <= new Date(disableDatesAfter) ? endDate : disableDatesAfter;
+        fromDate = startDate && new Date(startDate) < new Date(disableDatesAfter) && new Date(startDate) < new Date(toDate) ? startDate : addDays(new Date(toDate), -1).toISOString();
+    }
+    if (availablePeriod === "after" && disableDatesBefore) {
+        fromDate = startDate && new Date(startDate) >= new Date(disableDatesBefore) ? startDate : disableDatesBefore;
+        toDate = endDate && new Date(endDate) > new Date(disableDatesBefore) && new Date(endDate) > new Date(fromDate) ? endDate : addDays(new Date(fromDate), 1).toISOString();
+    }
+    if (availablePeriod === "outside" && disableDatesBefore && disableDatesAfter) {
+        let isAvailableRangeReady = false;
+        if (startDate && new Date(startDate) <= new Date(disableDatesAfter)) {
+            fromDate = startDate;
+            toDate = endDate && new Date(endDate) <= new Date(disableDatesAfter) && new Date(endDate) >= new Date(fromDate) ? endDate : disableDatesAfter;
+            isAvailableRangeReady = true;
+        }
+        if (startDate && new Date(startDate) > new Date(disableDatesBefore)) {
+            fromDate = startDate;
+            toDate = endDate && new Date(endDate) > new Date(fromDate) ? endDate : addDays(new Date(fromDate), 1).toISOString();
+            isAvailableRangeReady = true;
+        }
+        if (endDate && !isAvailableRangeReady && new Date(endDate) <= new Date(disableDatesAfter)) {
+            toDate = endDate;
+            fromDate = startDate && new Date(startDate) < new Date(toDate) ? startDate : addDays(new Date(toDate), -1).toISOString();
+            isAvailableRangeReady = true;
+        }
+        if (endDate && !isAvailableRangeReady && new Date(endDate) > new Date(disableDatesBefore)) {
+            toDate = endDate;
+            fromDate = startDate && new Date(startDate) > new Date(disableDatesBefore) && new Date(startDate) < new Date(toDate) ? startDate
+                : (addDays(new Date(toDate), -1) >= new Date(disableDatesBefore) ? addDays(new Date(toDate), -1).toISOString() : disableDatesBefore);
+            isAvailableRangeReady = true;
+        }
+        if (!isAvailableRangeReady) {
+            fromDate = disableDatesBefore;
+            toDate = addDays(new Date(fromDate), 1).toISOString();
+        }
+    }
+    if (availablePeriod === "inside" && disableDatesBefore && disableDatesAfter) {
+        fromDate = startDate && new Date(startDate) >= new Date(disableDatesBefore) && new Date(startDate) < new Date(disableDatesAfter) ? startDate : disableDatesBefore;
+        const fromDatePlusOne = addDays(new Date(fromDate), 1).toISOString();
+        toDate = endDate && new Date(endDate) > new Date(fromDate) && new Date(endDate) < new Date(disableDatesAfter) ? endDate
+            : new Date(fromDatePlusOne) < new Date(disableDatesAfter) ? fromDatePlusOne : disableDatesAfter;
+    }
+    return { from: fromDate || now, to: toDate || now };
+};
+export const normalizeDates = (startDate, endDate, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter
+// eslint-disable-next-line complexity
+) => {
+    const minuteReserve = 2;
+    const now = new Date();
+    const moreNow = addMinutes(new Date(now), minuteReserve);
+    const availablePeriod = getAvailablePeriod(disableDatesBefore, disableDatesAfter);
+    if (disableFutureDates && availablePeriod === "all") {
+        const updatedStartDate = addDays(new Date(now), -1);
+        if (startDate && new Date(startDate) > now) {
+            return { from: updatedStartDate.toISOString(), to: now.toISOString() };
+        }
+        if (endDate && new Date(endDate) > now) {
+            return { from: startDate && new Date(startDate) < now ? startDate : updatedStartDate.toISOString(), to: now.toISOString() };
+        }
+        return { from: startDate && new Date(startDate) < now ? startDate : updatedStartDate.toISOString(), to: endDate || now.toISOString() };
+    }
+    if (disablePastDates && availablePeriod === "all") {
+        const updatedEndDate = addDays(new Date(now), 1);
+        if (endDate && new Date(endDate) < moreNow) {
+            return { from: moreNow.toISOString(), to: updatedEndDate.toISOString() };
+        }
+        if (startDate && new Date(startDate) < moreNow) {
+            return { from: moreNow.toISOString(), to: endDate || updatedEndDate.toISOString() };
+        }
+        if (startDate && new Date(startDate) >= moreNow) {
+            return { from: startDate, to: endDate && new Date(endDate) > new Date(startDate) ? endDate : addDays(new Date(startDate), 1).toISOString() };
+        }
+        return { from: moreNow.toISOString(), to: endDate || updatedEndDate.toISOString() };
+    }
+    return getAvailableRange(availablePeriod, startDate, endDate, disableDatesBefore, disableDatesAfter);
+};

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

@@ -0,0 +1,15 @@
+import { IFiltersBarItem } from "../interfaces";
+import { IRange, IRangeValues } from "../../../range/range";
+export interface IFiltersBarRangeState {
+    value: IRangeValues;
+}
+interface IFiltersBarRangeProps extends Pick<IRange, "id" | "defaultValue" | "unit" | "labelMin" | "labelMax" | "disabled" | "label" | "triggerAriaLabel" | "min" | "max" | "fullWidthTriggerButton" | "fullBounded" | "className" | "allowEqualMinMax"> {
+}
+export interface IFiltersBarRange extends IFiltersBarItem<IFiltersBarRangeState, IFiltersBarRangeProps> {
+    className?: string;
+    props: IFiltersBarRangeProps;
+    checkError?: (isError: boolean) => void;
+}
+export declare const FiltersBarRange: ({ sidePanelTitle, props, state, useSidePanelView, onChange, checkError }: IFiltersBarRange) => import("react/jsx-runtime").JSX.Element;
+export declare const TRANSLATIONS: never[];
+export {};

package/esm/filtersBar/components/filtersBarRange/filtersBarRange.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
+import { Range } from "../../../range/range";
+import { FiltersBarSidePanelRange } from "../../filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
+import { checkErrorType } from "../../../rangeRaw/utils/rangeHelper";
+import { useId } from "react";
+export const FiltersBarRange = ({ sidePanelTitle, props, state, useSidePanelView, onChange, checkError }) => {
+    const component = _jsx(Range, Object.assign({}, props, { value: state.value, onChange: newValue => {
+            onChange({ value: newValue });
+        } }));
+    const rangeLabelledId = useId();
+    if (!useSidePanelView) {
+        return component;
+    }
+    return _jsx(SidePanelCell, { role: "group", labelledBy: rangeLabelledId, titleId: rangeLabelledId, title: sidePanelTitle, children: _jsx(FiltersBarSidePanelRange, Object.assign({}, props, { id: props.id ? `${props.id}-side-panel` : undefined, value: state.value, onChange: newValue => {
+                checkError && checkError(checkErrorType(newValue.min, newValue.max, props.fullBounded, props.allowEqualMinMax, props.min, props.max) !== undefined);
+                onChange({ value: newValue });
+            } })) });
+};
+export const TRANSLATIONS = [];

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

@@ -0,0 +1,16 @@
+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: {
+    ({ className, state, props, sidePanelTitle, useSidePanelView, onChange: onChangeState }: IFiltersBarSearch): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+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 { useId } from "react";
+export const FiltersBarSearchDisplayName = "FiltersBarSearch";
+export const FiltersBarSearch = ({ className, state, props, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
+    const inputId = useId();
+    const filterBarLabelledId = useId();
+    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,6 @@
+export interface IResetButton {
+    isDefaultState: boolean;
+    onClick: () => void;
+}
+export declare const ResetButton: ({ isDefaultState, onClick }: IResetButton) => import("react/jsx-runtime").JSX.Element;
+export declare const TRANSLATIONS: string[];

package/esm/filtersBar/components/resetComponentButton.js

@@ -0,0 +1,46 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../../button/button";
+import { ButtonType } from "../../button/buttonType";
+import { useLanguage } from "../../utils/localization/useLanguage";
+injectString("cs", "Reset", "Obnovit");
+injectString("da-DK", "Reset", "Nulstil");
+injectString("de", "Reset", "Zur\xFCcksetzen");
+injectString("en", "Reset", "Reset");
+injectString("es", "Reset", "Restaurar");
+injectString("fi-FI", "Reset", "Palauta");
+injectString("fr", "Reset", "R\xE9initialiser");
+injectString("fr-FR", "Reset", "R\xE9initialiser");
+injectString("hu-HU", "Reset", "\xC1ll\xEDtsd vissza.");
+injectString("id", "Reset", "Atur Ulang");
+injectString("it", "Reset", "Ripristinare");
+injectString("ja", "Reset", "\u30EA\u30BB\u30C3\u30C8");
+injectString("ko-KR", "Reset", "\uC7AC\uC124\uC815");
+injectString("ms", "Reset", "Tetap Semula");
+injectString("nb-NO", "Reset", "Tilbakestill");
+injectString("nl", "Reset", "Herstellen");
+injectString("pl", "Reset", "Resetuj");
+injectString("pt-BR", "Reset", "Redefinir");
+injectString("pt-PT", "Reset", "Repor");
+injectString("sk-SK", "Reset", "Obnov");
+injectString("sv", "Reset", "\xC5terst\xE4ll");
+injectString("th", "Reset", "\u0E23\u0E35\u0E40\u0E0B\u0E47\u0E15");
+injectString("tr", "Reset", "S\u0131f\u0131rla");
+injectString("zh-Hans", "Reset", "\u91CD\u7F6E");
+injectString("zh-TW", "Reset", "\u91CD\u8A2D");
+injectString("ro-RO", "Reset", "Reseta\u021Bi");
+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,62 @@
+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";
+import { IFiltersBarDateInput } from "./components/filtersBarDateInput/filtersBarDateInput";
+export interface IFiltersBar extends IZenComponentProps {
+    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>;
+    DateInput: React.FC<IFiltersBarDateInput>;
+    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,219 @@
+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";
+import { FiltersBarDateInput } from "./components/filtersBarDateInput/filtersBarDateInput";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+/* 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) => {
+        const childProps = child.props;
+        state[childProps.id] = {};
+        state[childProps.id].state = childProps.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, 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);
+    const isClientReady = useClientReady();
+    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) => {
+                if (typeof child === "object" && "props" in 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 && typeof child === "object" && "type" in child && child.type === FiltersBarSearch);
+    setSearchComponent(searchChild);
+    useEffect(() => {
+        setFiltersBarToggleAllFiltersFn(toggleAllFilters);
+    }, [toggleAllFilters, setFiltersBarToggleAllFiltersFn]);
+    const toggleAllFiltersCallback = useCallback((value) => {
+        if (!isAllFiltersVisible && value) {
+            Children.forEach(filterBarChildren, (child) => {
+                if (typeof child === "object" && "props" in 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 && typeof child === "object" && "type" in 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]);
+    if (!isClientReady) {
+        return null;
+    }
+    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.DateInput = FiltersBarDateInput;
+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,14 @@
+/// <reference types="react" />
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+export interface IFiltersBarActions extends IZenComponentProps {
+    onShowAllFilters: () => void;
+    onClearFilters: () => void;
+    allFiltersRef: React.RefObject<HTMLButtonElement | null>;
+    selectedQuantity?: number;
+    selectedQuantityToDisplay?: number;
+    hideAllFiltersButton?: boolean;
+    onApplyButtonClick?: () => void;
+    isApplyButtonShown: boolean;
+}
+export declare const FiltersBarActions: ({ className, selectedQuantity, selectedQuantityToDisplay, hideAllFiltersButton, onShowAllFilters, allFiltersRef, onClearFilters, onApplyButtonClick, isApplyButtonShown }: IFiltersBarActions) => import("react/jsx-runtime").JSX.Element;
+export declare const TRANSLATIONS: string[];