@geotab/zenith 3.0.1 → 3.1.0-beta.0

package/esm/formStepper/formStepper.d.ts

@@ -8,7 +8,7 @@ export interface IFormStepper {
     current: string;
     setCurrent: React.Dispatch<React.SetStateAction<string>>;
     errors?: string[];
-    onStepClicked?: ((id: string) => void) | false;
+    onStepClicked?: ((id: string) => void | boolean) | false;
     className?: string;
     mode?: TFormStepperMode;
 }

package/esm/formStepper/formStepper.js

@@ -23,10 +23,13 @@ export const FormStepper = ({ steps, onStepClicked, className = "", current, err
         return steps;
     }, [steps]);
     const onStepClickedHandler = useCallback((id) => {
-        setCurrent(id);
         if (!isStepperNonClickable) {
-            onStepClicked === null || onStepClicked === void 0 ? void 0 : onStepClicked(id);
+            const res = onStepClicked === null || onStepClicked === void 0 ? void 0 : onStepClicked(id);
+            if (res === false) {
+                return;
+            }
         }
+        setCurrent(id);
     }, [setCurrent, isStepperNonClickable, onStepClicked]);
     const isCompactMode = mode === "compact" || isMobile;
     const isOptionalStep = isCompactMode && ((_a = adjustedSteps[activeStepIndex]) === null || _a === void 0 ? void 0 : _a.optional);

package/esm/groupsFilter/groupsFilter.js

@@ -26,23 +26,30 @@ import { SkeletonList } from "../skeletonList/skeletonList";
 import { Chip } from "../chip/chip";
 import { SearchInput } from "../searchInput/searchInput";
 import { useChipStatus } from "../chip/chipStatusProvider";
+import { MobileSheet } from "../mobileSheet/mobileSheet";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { Button } from "../button/button";
+import { FooterButtons } from "../footerButtons/footerButtons";
+import { ButtonType } from "../button/buttonType";
 export const groupsFilterTotalStateDefault = { groups: getDefaultFilterState(), sideWide: false };
 // eslint-disable-next-line complexity
 export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, listLimit = 500, chip, chipIcon, chipId, chipName }) => {
     const { translate } = useLanguage();
+    const isMobile = useMobile();
     const chipStatus = useChipStatus();
     const [groupPlaceHolder, setGroupPlaceHolder] = useState(translate("Groups"));
     const [state, dispatchState] = useReducer(stateReducer, getInitialState(translate, initialFilterState));
     const [uiState, dispatchUiState] = useReducer(uiStateReducer, uiInitialGroupsFilterState);
     const [dataItems, setDataItems] = useState([]);
     const inputRef = useRef(null);
+    const emptyInputRef = useRef(null);
     const triggerRef = useRef(null);
     const menuRef = useRef(null);
     const prevInitialState = useRef(initialFilterState);
     const prevSearchField = useRef("");
     const groupsFilterId = useId();
     const blocksMap = useMemo(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
-    const onOptionsToggle = () => { dispatchUiState({ type: UiStateActionType.ToggleOpen, payload: undefined }); };
+    const onOptionsToggle = useCallback(() => { dispatchUiState({ type: UiStateActionType.ToggleOpen, payload: undefined }); }, []);
     const handleSetStep = useCallback((newStep) => {
         var _a;
         uiState.step !== FilterMenuStep.CurrentlySelected && dispatchUiState({ type: UiStateActionType.ClearUncheckedState, payload: undefined });
@@ -63,16 +70,24 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
         dispatchUiState({ type: UiStateActionType.SetIsOpen, payload: true });
         uiState.step !== FilterMenuStep.Initial && handleSetStep(FilterMenuStep.Initial);
     }, [handleSetStep, uiState.step]);
-    const handleCancel = () => {
-        var _a;
+    const handleFocusOnClose = useCallback(() => {
+        var _a, _b, _c;
+        if (chip) {
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            !isMobile && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
+            isMobile && ((_c = emptyInputRef.current) === null || _c === void 0 ? void 0 : _c.focus());
+        }
+    }, [chip, isMobile]);
+    const handleCancel = useCallback(() => {
         dispatchUiState({ type: UiStateActionType.SetIsOpen, payload: false });
         dispatchState({ type: StateActionType.SetState, payload: state.frozenState });
         dispatchState({ type: StateActionType.SideWide, payload: state.frozenSideWideState });
         handleSetStep(FilterMenuStep.Initial);
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const handleApply = () => {
-        var _a;
+        handleFocusOnClose();
+    }, [state.frozenState, state.frozenSideWideState, handleSetStep, handleFocusOnClose]);
+    const handleApply = useCallback(() => {
         dispatchUiState({ type: UiStateActionType.SetIsOpen, payload: false });
         dispatchUiState({ type: UiStateActionType.SetSearchValue, payload: "" });
         dispatchUiState({ type: UiStateActionType.ClearUncheckedState, payload: undefined });
@@ -82,12 +97,12 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
         handleSetStep(FilterMenuStep.Initial);
         dispatchState({ type: StateActionType.FreezeState, payload: getCurrentState(state) });
         dispatchState({ type: StateActionType.FreezeSideWide, payload: state.sideWideState });
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const handleReset = () => {
+        handleFocusOnClose();
+    }, [handleSetStep, state, handleFocusOnClose]);
+    const handleReset = useCallback(() => {
         dispatchState({ type: StateActionType.ResetSelection, payload: undefined });
-    };
-    const handleChipClose = () => {
+    }, []);
+    const handleChipClose = useCallback(() => {
         dispatchState({ type: StateActionType.ResetSelection, payload: undefined });
         dispatchUiState({ type: UiStateActionType.SetIsOpen, payload: false });
         dispatchUiState({ type: UiStateActionType.SetSearchValue, payload: "" });
@@ -98,20 +113,20 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
         handleSetStep(FilterMenuStep.Initial);
         dispatchState({ type: StateActionType.FreezeState, payload: defaultPreparedFilterState });
         dispatchState({ type: StateActionType.FreezeSideWide, payload: false });
-    };
-    const handleCheckboxChange = (value) => {
+    }, [handleSetStep]);
+    const handleCheckboxChange = useCallback((value) => {
         if (value.partial) {
             dispatchState({ type: StateActionType.DeselectAllChildren, payload: value.id });
         }
         else {
             dispatchState({ type: StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
         }
-    };
-    const handleCheckboxItemClick = (id) => {
+    }, [dispatchState]);
+    const handleCheckboxItemClick = useCallback((id) => {
         dispatchUiState({ type: UiStateActionType.SetCurrentAdjustmentId, payload: id });
         handleSetStep(id ? FilterMenuStep.Adjustment : FilterMenuStep.Initial);
-    };
-    const handleCheckboxItemAdjustmentClick = (value) => {
+    }, [dispatchUiState, handleSetStep]);
+    const handleCheckboxItemAdjustmentClick = useCallback((value) => {
         if (value.id === ADVANCED_FILTER_ID) {
             const currentVal = value.state ? uiState.uncheckedAdvancedState : state.advancedFilterState;
             !value.state && dispatchUiState({ type: UiStateActionType.SetUncheckedAdvancedState, payload: currentVal });
@@ -122,11 +137,11 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
         dispatchUiState({ type: UiStateActionType.SetUncheckedAdjustmentIds, payload: !value.state ?
                 [...uiState.uncheckedAdjustmentIds, value.id] : uiState.uncheckedAdjustmentIds.filter(id => id !== value.id) });
         dispatchState({ type: StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
-    };
-    const basicHandleBackButtonClick = () => {
+    }, [dispatchState, dispatchUiState, state.advancedFilterState, state.frozenState.advancedFilterState, uiState.uncheckedAdvancedState, uiState.uncheckedAdjustmentIds]);
+    const basicHandleBackButtonClick = useCallback(() => {
         handleSetStep(FilterMenuStep.Initial);
-    };
-    const handleBackButtonClick = () => {
+    }, [handleSetStep]);
+    const handleBackButtonClick = useCallback(() => {
         const currentEl = uiState.currentAdjustmentId ? getGroupsTreeItem(state, uiState.currentAdjustmentId) : undefined;
         if (!uiState.currentAdjustmentId || !(currentEl === null || currentEl === void 0 ? void 0 : currentEl.parent)) {
             basicHandleBackButtonClick();
@@ -135,20 +150,20 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
         const isNotRoot = currentEl.parent.id && currentEl.parent.id !== ENTIRE_ORGANIZATION_GROUP_ID;
         dispatchUiState({ type: UiStateActionType.SetCurrentAdjustmentId, payload: isNotRoot ? currentEl.parent.id : undefined });
         handleSetStep(isNotRoot ? FilterMenuStep.Adjustment : FilterMenuStep.Initial);
-    };
-    const handleHomeButtonClick = () => {
+    }, [basicHandleBackButtonClick, handleSetStep, state, uiState.currentAdjustmentId]);
+    const handleHomeButtonClick = useCallback(() => {
         handleSetStep(FilterMenuStep.Initial);
         uiState.currentAdjustmentId && dispatchUiState({ type: UiStateActionType.SetCurrentAdjustmentId, payload: undefined });
-    };
-    const handleCurrentlySelectedClick = () => {
+    }, [handleSetStep, uiState.currentAdjustmentId, dispatchUiState]);
+    const handleCurrentlySelectedClick = useCallback(() => {
         handleSetStep(FilterMenuStep.CurrentlySelected);
-    };
-    const selectAllHandler = (isAllSelected) => {
+    }, [handleSetStep]);
+    const selectAllHandler = useCallback((isAllSelected) => {
         if (!uiState.currentAdjustmentId) {
             return;
         }
         dispatchState({ type: isAllSelected ? StateActionType.DeselectAllChildren : StateActionType.SelectAllChildren, payload: uiState.currentAdjustmentId });
-    };
+    }, [uiState.currentAdjustmentId, dispatchState]);
     const handleTriggerClick = () => {
         dispatchUiState({ type: UiStateActionType.ToggleOpen, payload: undefined });
     };
@@ -200,14 +215,15 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
         setGroupPlaceHolder(`${label}${separator}${selectedValuesLabel}`);
     }, [uiState.searchValue, uiState.step, blocksMap, state, isWithColor, listLimit, uiState.currentAdjustmentId,
         uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState, dataItems, translate]);
-    const getGroupsBox = () => _jsx(GroupsFilterBox, { step: uiState.step, currentId: uiState.currentAdjustmentId, isWithColor: isWithColor || false, state: state, search: uiState.searchValue, blocks: uiState.searchValue && uiState.step === FilterMenuStep.Initial ? [] : blocksMap[uiState.step], onChange: uiState.step === FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange, onClick: handleCheckboxItemClick, uncheckedItems: uiState.step === FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [], uncheckedAdvancedState: uiState.step === FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined, listLimit: listLimit });
+    const getGroupsBox = useCallback(() => _jsx(GroupsFilterBox, { step: uiState.step, currentId: uiState.currentAdjustmentId, isWithColor: isWithColor || false, state: state, search: uiState.searchValue, blocks: uiState.searchValue && uiState.step === FilterMenuStep.Initial ? [] : blocksMap[uiState.step], onChange: uiState.step === FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange, onClick: handleCheckboxItemClick, uncheckedItems: uiState.step === FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [], uncheckedAdvancedState: uiState.step === FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined, listLimit: listLimit }), [blocksMap, handleCheckboxChange, handleCheckboxItemAdjustmentClick, handleCheckboxItemClick, isWithColor, listLimit, state, uiState.currentAdjustmentId, uiState.searchValue, uiState.step,
+        uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState]);
     const onSideWideChange = (newState) => { dispatchState({ type: StateActionType.SideWide, payload: newState }); };
     const onRelationChange = (newRelation) => { dispatchState({ type: StateActionType.Relation, payload: newRelation }); };
-    const getSearchResult = () => {
+    const getSearchResult = useCallback(() => {
         const result = getSearchResultFromObject(state, uiState.searchValue);
         return result ? (result.builtInGroups.length + result.userGroups.length).toString() : "0";
-    };
-    const getAdvancedDialog = useMemo(() => _jsx(AdvancedGroupsFilter, { isOpen: uiState.isOpenAdvancedFilter, onClose: handleAdvancedDialogClose, onApply: handleAdvancedDialogApply, state: state.advancedFilterState, getData: getAdvancedData, errorHandler: errorHandler, dataItems: dataItems }), [uiState.isOpenAdvancedFilter, handleAdvancedDialogClose, handleAdvancedDialogApply, dataItems, state.advancedFilterState, getAdvancedData, errorHandler]);
+    }, [state, uiState.searchValue]);
+    const getAdvancedDialog = useMemo(() => _jsx(AdvancedGroupsFilter, { isOpen: uiState.isOpenAdvancedFilter, onClose: handleAdvancedDialogClose, onApply: handleAdvancedDialogApply, state: state.advancedFilterState, getData: getAdvancedData, errorHandler: errorHandler, dataItems: dataItems, isMobile: isMobile }), [uiState.isOpenAdvancedFilter, handleAdvancedDialogClose, handleAdvancedDialogApply, dataItems, state.advancedFilterState, getAdvancedData, errorHandler, isMobile]);
     useEffect(() => {
         if (!state.globalChanges) {
             return;
@@ -238,8 +254,19 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
             !(initialFilterState === null || initialFilterState === void 0 ? void 0 : initialFilterState.groups) && dispatchUiState({ type: UiStateActionType.SetStep, payload: FilterMenuStep.Initial });
         }
     }, [initialFilterState, state.groupsMap]);
-    useEffect(() => {
+    const handleReadyForFocus = useCallback((isCurrentOpen) => {
         var _a, _b, _c;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+            return;
+        }
+        if (!isCurrentOpen) {
+            (_b = emptyInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
+        (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+    }, [inputRef]);
+    useEffect(() => {
+        var _a, _b, _c, _d;
         if (!uiState.isOpen) {
             return;
         }
@@ -249,9 +276,9 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
             prevSearchField.current = uiState.searchValue;
         }
         else {
-            const firstFocusable = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR);
+            const firstFocusable = chip ? (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(FOCUSABLE_SELECTOR);
             prevSearchField.current = "";
-            if (firstFocusable && !((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value)) {
+            if (firstFocusable && !((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value)) {
                 firstFocusable.focus();
             }
         }
@@ -282,8 +309,16 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
     useEscape(triggerRef, handleEscape, uiState.isOpen);
     const selectedCount = getFrozenCount(state);
     const isStateHasData = Object.keys(state.groupsMap).length > 0;
+    const isApplyDisabled = !isStateChanged(state);
+    const memoizedContent = useMemo(() => _jsxs("div", { className: classNames(["zen-groups-filter-menu", isMobile ? "zen-groups-filter-menu--mobile" : ""]), ref: menuRef, children: [(chip || isMobile) ? _jsx("div", { className: "zen-groups-filter__input-container", children: _jsx(SearchInput, { className: "zen-groups-filter__chip-input", onChange: onSearchChipChange, value: uiState.searchValue, ref: inputRef, id: groupsFilterId, placeholder: translate("Filter by group") }) }) : null, isStateHasData && !uiState.isLoadWithError && _jsxs(GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: isApplyDisabled, hasFooter: !isMobile, children: [uiState.step === FilterMenuStep.Initial && _jsx(GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: getCurrentlySelectedCount(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === FilterMenuStep.Adjustment && _jsx(GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: getBackButtonName(state, uiState.currentAdjustmentId), isAllSelected: isAllChildrenSelected(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === FilterMenuStep.CurrentlySelected && _jsx(GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: getCurrentlySelectedCount(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && _jsx(SkeletonList, { className: "zen-groups-filter__waiting" })] }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.isLoadWithError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate,
+        isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult,
+        getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick]);
+    const memoizedFooterButtons = useMemo(() => _jsxs(FooterButtons, { children: [_jsx(Button, { onClick: handleApply, type: ButtonType.Primary, disabled: isApplyDisabled, className: "zen-groups-filter-menu__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") }), _jsx(Button, { onClick: handleCancel, className: "zen-groups-filter-menu__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), _jsx(Button, { type: ButtonType.Tertiary, className: "zen-groups-filter-menu__reset-button zen-ellipsis", onClick: handleReset, children: translate("Clear") })] }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { label: translate("Organization groups filter"), triggerRef: triggerRef, isOpen: uiState.isOpen, onHidePanel: onOptionsToggle, onCloseClick: onOptionsToggle, preventFirstFocus: true, onReadyForFocus: handleReadyForFocus, children: [_jsx(MobileSheet.Title, { children: translate("Filter by group") }), _jsx(MobileSheet.Content, { children: memoizedContent }), _jsx(MobileSheet.Footer, { children: memoizedFooterButtons })] }), [translate, uiState.isOpen, onOptionsToggle, handleReadyForFocus, memoizedContent, memoizedFooterButtons]);
+    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: uiState.isOpen, className: classNames(["zen-groups-filter__popup",
+            uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: memoizedContent }), [className, memoizedContent, onOptionsToggle, translate, uiState.isOpen, uiState.isOpenAdvancedFilter]);
     return _jsxs(_Fragment, { children: [chip ? _jsx(Chip, { status: selectedCount ? chipStatus || "active" : undefined, isOpen: uiState.isOpen, disabled: false, onClick: handleTriggerClick, onClose: selectedCount ? handleChipClose : undefined, triggerRef: triggerRef, icon: chipIcon, id: chipId, children: groupPlaceHolder !== translate("Groups") ? groupPlaceHolder : chipName })
-                : _jsx(GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), _jsx(ControlledPopup, { isOpen: uiState.isOpen, className: classNames(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: _jsxs("div", { className: "zen-groups-filter-menu", ref: menuRef, children: [chip && _jsx("div", { className: "zen-groups-filter__input-container", children: _jsx(SearchInput, { className: "zen-groups-filter__chip-input", onChange: onSearchChipChange, value: uiState.searchValue, ref: inputRef, id: groupsFilterId, placeholder: translate("Filter by group") }) }), isStateHasData && !uiState.isLoadWithError && _jsxs(GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: !isStateChanged(state), children: [uiState.step === FilterMenuStep.Initial && _jsx(GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: getCurrentlySelectedCount(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === FilterMenuStep.Adjustment && _jsx(GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: getBackButtonName(state, uiState.currentAdjustmentId), isAllSelected: isAllChildrenSelected(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === FilterMenuStep.CurrentlySelected && _jsx(GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: getCurrentlySelectedCount(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && _jsx(SkeletonList, { className: "zen-groups-filter__waiting" })] }) }), uiState.isOpenAdvancedFilter && getAdvancedDialog] });
+                : _jsx(GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: isMobile ? emptyInputRef : inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), isMobile ? memoizedMobileView : memoizedDesktopView, uiState.isOpenAdvancedFilter && getAdvancedDialog] });
 };
 export const TRANSLATIONS = [
     "Organization groups filter",

package/esm/groupsFilter/groupsFilterMenu.d.ts

@@ -6,6 +6,7 @@ export interface IGroupsFilterMenu extends IZenComponentProps {
     onApplyClick: () => void;
     onResetClick: () => void;
     isApplyDisabled: boolean;
+    hasFooter?: boolean;
 }
 export declare const GroupsFilterMenu: React.FC<IGroupsFilterMenu>;
 export declare const TRANSLATIONS: string[];

package/esm/groupsFilter/groupsFilterMenu.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../button/button";
 import { ButtonType } from "../button/buttonType";
 import { useLanguage } from "../utils/localization/useLanguage";
-export const GroupsFilterMenu = ({ children, onCancelClick, onApplyClick, onResetClick, isApplyDisabled }) => {
+export const GroupsFilterMenu = ({ children, onCancelClick, onApplyClick, onResetClick, isApplyDisabled, hasFooter }) => {
     const { translate } = useLanguage();
-    return _jsxs("div", { className: "zen-groups-filter-menu__main-container body-04", children: [_jsx("div", { className: "zen-groups-filter-menu__content", children: children }), _jsx("div", { className: "zen-groups-filter-menu__separator zen-groups-filter-menu__separator--footer" }), _jsxs("div", { className: "zen-groups-filter-menu__footer", children: [_jsx(Button, { onClick: onResetClick, type: ButtonType.Tertiary, className: "zen-groups-filter-menu__reset-button zen-ellipsis", title: translate("Clear"), children: translate("Clear") }), _jsxs("div", { className: "zen-groups-filter-menu__button-group", children: [_jsx(Button, { onClick: onCancelClick, className: "zen-groups-filter-menu__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), _jsx(Button, { onClick: onApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled, className: "zen-groups-filter-menu__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] })] });
+    return _jsxs("div", { className: "zen-groups-filter-menu__main-container body-04", children: [_jsx("div", { className: "zen-groups-filter-menu__content", children: children }), hasFooter ? _jsx("div", { className: "zen-groups-filter-menu__separator zen-groups-filter-menu__separator--footer" }) : null, hasFooter ? _jsxs("div", { className: "zen-groups-filter-menu__footer", children: [_jsx(Button, { onClick: onResetClick, type: ButtonType.Tertiary, className: "zen-groups-filter-menu__reset-button zen-ellipsis", title: translate("Clear"), children: translate("Clear") }), _jsxs("div", { className: "zen-groups-filter-menu__button-group", children: [_jsx(Button, { onClick: onCancelClick, className: "zen-groups-filter-menu__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), _jsx(Button, { onClick: onApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled, className: "zen-groups-filter-menu__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] }) : null] });
 };
 export const TRANSLATIONS = [
     "Clear",

package/esm/groupsFilter/groupsFilterTrigger.js

@@ -35,7 +35,7 @@ export const GroupsFilterTrigger = (_a) => {
         }
         handleClick();
     };
-    return _jsxs("div", Object.assign({ className: classNames(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [_jsxs("div", { className: classNames(["zen-groups-filter__search-container", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [_jsx("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: classNames(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), _jsx("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: _jsx(GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), _jsx("button", { tabIndex: -1, "aria-hidden": "true", type: "button", className: "zen-groups-filter__popup-trigger", title: translate("Open filter"), children: _jsx(IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
+    return _jsxs("div", Object.assign({ className: classNames(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [_jsxs("div", { className: classNames(["zen-groups-filter__search-container", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [_jsx("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: classNames(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), _jsx("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: _jsx(GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), _jsx("button", { tabIndex: -1, onMouseDown: e => e.preventDefault(), "aria-hidden": "true", type: "button", className: "zen-groups-filter__popup-trigger", title: translate("Open filter"), children: _jsx(IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
 };
 GroupsFilterTrigger.displayName = "GroupsFilterTrigger";
 export const TRANSLATIONS = [

package/esm/images/imageLooking.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./svgImage.less";
+import { ISvgImage } from "./svgImage";
+export declare const ImageLooking: React.FC<ISvgImage>;

package/esm/images/imageLooking.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useUniqueId } from "../commonHelpers/useUniqueId";
+export const ImageLooking = ({ className, title, description, focusable = false }) => {
+    const uniqueId = useUniqueId();
+    const classes = useMemo(() => classNames([
+        "zen-svg-image",
+        className !== null && className !== void 0 ? className : ""
+    ]), [className]);
+    return _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 629 350", fill: "none", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "ImageLooking", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsxs("defs", { children: [_jsx("path", { id: "b", fill: "#FAFBFB", d: "M505.06 295.04c-67.58-27.57-85.23-53.95-135.16-54.22-19.17-.1-33.6 3.7-47.98 9.92 26.88-5.26 54.8-6.02 54.8 11.76.01 15.8-45.78 25.14-49.34 43.91-1.07 5.64 1.75 12.67 11.24 21.56a79.37 79.37 0 0 0 55.8 21.2 1381.31 1381.31 0 0 0 228.73-23.44c-51.28-6.64-90.47-19.42-118.1-30.7Z" }), _jsx("path", { id: "c", fill: "#EBEDF0", d: "M86.84 308.45h2.4v5.71a1.2 1.2 0 0 1-2.4 0v-5.7Z" }), _jsx("path", { id: "d", fill: "#EBEDF0", d: "M110.16 291.86c-.23-.2-.44-.42-.61-.67h.06c.06 0 .11-.02.16-.06a.28.28 0 0 0 0-.45 7.6 7.6 0 0 1-1.3-1.26h.59c.04 0 .09-.02.12-.04a.22.22 0 0 0 .08-.11.22.22 0 0 0-.08-.24 5.9 5.9 0 0 1-.97-.95l.25.01h.19c.03 0 .07-.02.1-.04a.18.18 0 0 0 .06-.2.18.18 0 0 0-.06-.08 4.72 4.72 0 0 1-1.54-2.07.2.2 0 0 0-.2-.14.2.2 0 0 0-.2.14 4.72 4.72 0 0 1-1.53 2.07.18.18 0 0 0-.06.2.18.18 0 0 0 .16.12 3 3 0 0 0 .43 0c-.28.34-.6.66-.97.93a.22.22 0 0 0 .13.4 4.63 4.63 0 0 0 .57 0c-.38.47-.81.9-1.3 1.26a.28.28 0 0 0 .17.51h.06c-.17.25-.38.48-.61.67a.27.27 0 0 0-.1.18.25.25 0 0 0 .06.2l.12.1a1 1 0 0 0 .84.23.28.28 0 0 1 .3.16 1.17 1.17 0 0 0 .68.6 1.02 1.02 0 0 0 1.06-.3.26.26 0 0 1 .2-.09.26.26 0 0 1 .19.09 1.03 1.03 0 0 0 1.46.06c.12-.1.22-.22.29-.36a.28.28 0 0 1 .3-.17 1.02 1.02 0 0 0 .95-.32.26.26 0 0 0-.04-.38Z" }), _jsx("path", { id: "o", fill: "#EBEDF0", d: "M340.32 31.3h-.42a.41.41 0 0 0-.41.42v2.75c0 .23.18.41.41.41h.42c.23 0 .42-.18.42-.41v-2.75a.41.41 0 0 0-.42-.41Zm33.8-3.5h-.86a.47.47 0 0 0-.47.47v9.65c0 .26.2.47.47.47h.86c.26 0 .47-.21.47-.47v-9.65a.47.47 0 0 0-.47-.47Z" })] }), _jsxs("g", { clipPath: "url(#a)", children: [_jsx("path", { fill: "#EBEDF0", d: "M409.65 170.36c-34.48-40.83-45.98-67.01-71.45-68.22-31.2-1.47-48.26 36.2-99.65 88.26a565.12 565.12 0 0 1-91.53 75 832.64 832.64 0 0 0 212.52 27.41 835 835 0 0 0 169.01-17.2c-57.04-38.15-94.74-76.63-118.9-105.25Z" }), _jsx("path", { fill: "#FAFBFB", d: "M315.36 137.06c12.32 2.67 13.68 21.46 23.49 21.38 9.07-.07 11.51-16.18 22.27-16.74 8.57-.45 12.05 9.52 20.47 9.02 3.3-.2 6.23-1.94 8.77-4.39-20.73-26.83-32.13-43.24-52.16-44.19-22-1.04-36.97 17.4-61.91 46.6a9.9 9.9 0 0 0 3.3 1.98c11.18 3.9 22.06-16.62 35.77-13.66Z" }), _jsx("path", { fill: "#EBEDF0", d: "M528.55 275.62c-57.04-38.16-94.74-76.63-118.9-105.26-34.48-40.83-45.98-67.01-71.45-68.22a34.9 34.9 0 0 0-13.94 2.15c6.93.52 12.36 2.42 16.67 4.94 32.27 18.85 33.57 90.12 8.05 183.5a835 835 0 0 0 179.58-17.12Z", opacity: ".5", style: { mixBlendMode: "multiply" } }), _jsx("path", { fill: "#EBEDF0", d: "M81.8 294.63c-.78-.07-1.56-.08-2.34-.04a10.64 10.64 0 0 0-11-14.32c-2.4.23-4.66 1.27-6.4 2.94a13.68 13.68 0 0 0-26.16 2.91 11.35 11.35 0 0 0-14.89 6.78 5.61 5.61 0 0 0-8.93 5.1h-.04A11.19 11.19 0 0 0 .87 309.59c.07 2.01.69 3.96 1.78 5.65 30.26 3.41 60.82 5.84 91.66 7.27a17.42 17.42 0 0 0-12.52-27.88Zm94.77 4a288 288 0 0 0 161.38-49.15c-12.9-.57-25.72-3.39-37.78-9.52-41.73-21.2-47.16-68.04-76.59-68.6-17.44-.34-26.14 15.9-63.72 54.52a844.44 844.44 0 0 1-65.74 60.83 289.43 289.43 0 0 0 82.45 11.92Z" }), _jsx("path", { fill: "#EBEDF0", d: "M300.17 239.96c-41.72-21.2-47.16-68.04-76.59-68.6-2.3-.07-4.62.21-6.85.83 4.19.97 8.14 2.78 11.6 5.31 21.6 16.02 22.01 62.1-.57 116.6a287.62 287.62 0 0 0 110.19-44.62c-12.9-.57-25.72-3.39-37.78-9.52Z", opacity: ".5", style: { mixBlendMode: "multiply" } }), _jsx("path", { fill: "#F4F6F7", d: "M439.35 201.27c-68.64-18.32-127.29 25.04-192.52 57.9a654.98 654.98 0 0 1-74.68 31.95A1380.57 1380.57 0 0 0 472.47 324c51.52 0 103-2.85 154.2-8.55-32.9-11.5-58.9-25.59-79.33-39.15-52.85-35.08-63.12-63.06-108-75.03Z" }), _jsx("path", { fill: "#EBEDF0", d: "M626.68 315.45c-32.9-11.5-58.9-25.59-79.34-39.15-52.85-35.08-63.12-63.06-108-75.03a127.84 127.84 0 0 0-23.24-3.97c24.4 8.63 29.27 15.46 29.27 20.16 0 16.92-53.09 26.39-107.42 37.57-53.28 10.97-57.8 43.6-114.51 46.48A1383.7 1383.7 0 0 0 472.47 324c51.52 0 103-2.85 154.2-8.55Z", style: { mixBlendMode: "multiply" } }), _jsx("path", { fill: "#F4F6F7", d: "M292.3 302.65c-53.86-18.83-66.8-58.85-114.46-57.56-33.2.9-41.99 23.35-107.61 47.73a953.58 953.58 0 0 1-67.91 22.37 1390.75 1390.75 0 0 0 156.52 8.8c63.71.02 127.34-4.35 190.45-13.07-23.15.78-41.92-3-57-8.27Z" }), _jsx("path", { fill: "#EBEDF0", d: "M349.3 310.92c-23.16.78-41.93-3-57-8.27-53.86-18.83-66.8-58.85-114.47-57.56a60.91 60.91 0 0 0-16.96 2.75c15.42 6.22 19.36 11.58 19.4 15.7.13 14.73-49.61 17.61-63.17 50.53a43.52 43.52 0 0 0-2.64 9.22 1388.06 1388.06 0 0 0 234.83-12.37Z", style: { mixBlendMode: "multiply" } }), _jsx("path", { fill: "#EBEDF0", d: "M621 307.5a14.32 14.32 0 0 0-10.55-13.3c-1.96-.53-4-.65-6-.34a9.45 9.45 0 0 0-14.61-4.51 11.28 11.28 0 0 0-18.7-1.06 11.27 11.27 0 0 0-2.27 7.67 10.2 10.2 0 0 0-11.68 8.02 12.3 12.3 0 0 0-16.06 11.1c-.12 2.51.55 5 1.9 7.14 28.61-1.45 56.98-3.76 85.11-6.94a8.95 8.95 0 0 0-7.15-7.78Z" }), _jsx("path", { fill: "#EBEDF0", d: "M560.99 303.6c-.63 0-1.25.05-1.87.14v-.14a10.29 10.29 0 0 0-9.27-10.26c-1.68-.17-3.38.08-4.95.72a7.86 7.86 0 0 0-12.55-5.22 10.31 10.31 0 0 0-18.5 6.28v.03c-.2-.01-.4-.03-.62-.03a7.48 7.48 0 0 0-7.47 7.47l.01.22a12.65 12.65 0 0 0-14.91 13.95 12.62 12.62 0 0 0 3.3 7.06c26.44-.4 52.7-1.55 78.76-3.44A12.61 12.61 0 0 0 561 303.6Z" }), _jsx("path", { fill: "#fff", d: "M369.9 240.83c-49.05-.26-67.02 25.02-132.94 50.89-33.37 13.1-80.08 26.75-141.03 30.88a1382.25 1382.25 0 0 0 271.7 26.83c85.72.03 171.26-7.9 255.51-23.7-51.27-6.64-90.46-19.42-118.08-30.7-67.58-27.56-85.23-53.94-135.16-54.2Z" }), _jsx("use", { xlinkHref: "#b" }), _jsx("use", { xlinkHref: "#b", opacity: ".33", style: { mixBlendMode: "multiply" } }), _jsxs("g", { fill: "#EBEDF0", style: { mixBlendMode: "multiply" }, children: [_jsx("path", { d: "M417.26 327.42a26.4 26.4 0 0 1-3.81-5.23h.38c.46 0 .9 0 1.35-.03a1.28 1.28 0 0 0 1.15-.9 1.29 1.29 0 0 0-.43-1.38c-1.62-1.25-3.12-3.12-4.49-4.73h.2c.36 0 .71 0 1.06-.02a1 1 0 0 0 .57-1.79 26.46 26.46 0 0 1-4.32-4.2 15.28 15.28 0 0 0 1.91.03.8.8 0 0 0 .45-1.43 21.07 21.07 0 0 1-6.86-9.24.94.94 0 0 0-1.74 0 21.06 21.06 0 0 1-6.86 9.24.8.8 0 0 0 .44 1.43 15.73 15.73 0 0 0 1.92-.02 26.43 26.43 0 0 1-4.32 4.2 1 1 0 0 0 .56 1.78c.35.02.7.03 1.06.03h.2c-1.36 1.6-2.86 3.47-4.48 4.72a1.28 1.28 0 0 0 .72 2.28c.44.02.9.04 1.34.04l.39-.01a26.36 26.36 0 0 1-3.82 5.23 1.1 1.1 0 0 0 .02 1.58c.32.28.69.5 1.08.65.7.25 1.45.27 2.15.08a.97.97 0 0 1 1.16.61 3.54 3.54 0 0 0 3.2 2.44c.73 0 1.45-.21 2.06-.63a.95.95 0 0 1 1.28.2 3.4 3.4 0 0 0 5.54 0 .95.95 0 0 1 1.28-.2c.6.42 1.33.63 2.06.63a3.55 3.55 0 0 0 3.2-2.44.97.97 0 0 1 1.15-.61 3.51 3.51 0 0 0 3.23-.73 1.13 1.13 0 0 0 .34-.78 1.1 1.1 0 0 0-.32-.8Z", style: { mixBlendMode: "multiply" } }), _jsx("path", { d: "M400.79 324.54h5.52v13.12a2.75 2.75 0 0 1-2.76 2.76 2.77 2.77 0 0 1-2.76-2.76v-13.12Z", style: { mixBlendMode: "multiply" } })] }), _jsxs("g", { fill: "#EBEDF0", style: { mixBlendMode: "multiply" }, children: [_jsx("path", { d: "M382.67 294.3h2.4v5.72a1.2 1.2 0 0 1-2.4 0v-5.71Z", style: { mixBlendMode: "multiply" } }), _jsx("path", { d: "M390.92 295.04a7.54 7.54 0 0 1-1.37-1.49h.13a.64.64 0 0 0 .36-1.14 16.92 16.92 0 0 1-2.88-2.83 10.24 10.24 0 0 0 1.27.01.5.5 0 0 0 .45-.34.5.5 0 0 0-.17-.55c-.8-.62-1.52-1.32-2.16-2.1a8 8 0 0 0 .96.01.4.4 0 0 0 .22-.71 10.53 10.53 0 0 1-3.43-4.63.47.47 0 0 0-.87 0 10.52 10.52 0 0 1-3.43 4.63.4.4 0 0 0-.13.43.4.4 0 0 0 .36.28 7.35 7.35 0 0 0 .96 0c-.64.77-1.37 1.47-2.16 2.09a.5.5 0 0 0-.17.54.5.5 0 0 0 .45.35 10.29 10.29 0 0 0 1.27-.01c-.84 1.05-1.81 2-2.88 2.83a.63.63 0 0 0 0 1c.1.08.22.13.35.14h.14a7.59 7.59 0 0 1-1.37 1.49.57.57 0 0 0-.22.4.58.58 0 0 0 .14.45 2.64 2.64 0 0 0 1.14.69c.32.08.66.1 1 .03a.62.62 0 0 1 .66.36 2.62 2.62 0 0 0 1.53 1.34 2.3 2.3 0 0 0 2.37-.66.59.59 0 0 1 .43-.2.6.6 0 0 1 .43.2 2.3 2.3 0 0 0 3.27.15c.26-.23.48-.51.63-.83a.62.62 0 0 1 .67-.36 2.28 2.28 0 0 0 2.13-.72.57.57 0 0 0 .14-.44.6.6 0 0 0-.22-.4Z", style: { mixBlendMode: "multiply" } })] }), _jsx("use", { xlinkHref: "#c" }), _jsx("path", { fill: "#EBEDF0", d: "M95.09 309.19a7.58 7.58 0 0 1-1.37-1.5h.13a.64.64 0 0 0 .58-.44.64.64 0 0 0-.22-.7 16.87 16.87 0 0 1-2.88-2.83 9.67 9.67 0 0 0 1.27.02.5.5 0 0 0 .45-.35.5.5 0 0 0-.17-.55c-.8-.61-1.52-1.31-2.16-2.1a7.95 7.95 0 0 0 .96.01.4.4 0 0 0 .22-.7 10.54 10.54 0 0 1-3.43-4.63.47.47 0 0 0-.7-.22.47.47 0 0 0-.17.22 10.53 10.53 0 0 1-3.43 4.62.4.4 0 0 0-.13.44.4.4 0 0 0 .36.27 7.34 7.34 0 0 0 .96 0 14.3 14.3 0 0 1-2.16 2.1.5.5 0 0 0 0 .78c.08.07.17.1.28.1a9.16 9.16 0 0 0 1.27 0c-.84 1.05-1.81 2-2.88 2.82a.64.64 0 0 0 .35 1.14h.14a7.58 7.58 0 0 1-1.37 1.5.59.59 0 0 0-.23.4.58.58 0 0 0 .15.45 2.6 2.6 0 0 0 1.14.68c.32.09.66.1 1 .04a.62.62 0 0 1 .66.36 2.61 2.61 0 0 0 1.53 1.34 2.32 2.32 0 0 0 2.37-.66.57.57 0 0 1 .43-.2.57.57 0 0 1 .43.2 2.3 2.3 0 0 0 3.27.14c.26-.23.48-.5.63-.82a.62.62 0 0 1 .67-.36 2.28 2.28 0 0 0 2.12-.72.58.58 0 0 0 .08-.67.58.58 0 0 0-.15-.18Zm11.38-17.66h1.07v2.56a.54.54 0 0 1-1.08 0v-2.56Z" }), _jsx("use", { xlinkHref: "#d" }), _jsxs("g", { fill: "#EBEDF0", style: { mixBlendMode: "multiply" }, children: [_jsx("path", { d: "M435.98 314.65h3.03v7.2a1.51 1.51 0 0 1-1.51 1.52 1.51 1.51 0 0 1-1.52-1.51v-7.2Z", style: { mixBlendMode: "multiply" } }), _jsx("path", { d: "M446.4 315.58a9.48 9.48 0 0 1-1.74-1.88h.18a.81.81 0 0 0 .72-.56.8.8 0 0 0-.27-.88 21.32 21.32 0 0 1-3.64-3.57 12.23 12.23 0 0 0 1.6.02.63.63 0 0 0 .36-1.13 16.7 16.7 0 0 1-2.73-2.65 10.14 10.14 0 0 0 1.21.01.5.5 0 0 0 .46-.35.5.5 0 0 0-.18-.55 13.27 13.27 0 0 1-4.32-5.83.59.59 0 0 0-1.1 0 13.27 13.27 0 0 1-4.33 5.83.5.5 0 0 0-.18.55.5.5 0 0 0 .46.35 9.37 9.37 0 0 0 1.2 0 16.7 16.7 0 0 1-2.72 2.64.64.64 0 0 0-.21.69.63.63 0 0 0 .57.44 12.3 12.3 0 0 0 1.6-.02 21.32 21.32 0 0 1-3.64 3.57.8.8 0 0 0 0 1.27c.13.1.3.16.45.17h.18a9.48 9.48 0 0 1-1.73 1.88.74.74 0 0 0-.29.52.72.72 0 0 0 .2.55 3.29 3.29 0 0 0 1.43.87c.4.1.83.12 1.25.05a.78.78 0 0 1 .84.45 3.3 3.3 0 0 0 1.93 1.69 2.91 2.91 0 0 0 2.99-.83.73.73 0 0 1 1.09 0 2.91 2.91 0 0 0 4.12.18c.34-.3.6-.64.8-1.04a.78.78 0 0 1 .84-.45 2.88 2.88 0 0 0 2.68-.92.73.73 0 0 0-.09-1.07Z", style: { mixBlendMode: "multiply" } })] }), _jsxs("g", { style: { mixBlendMode: "multiply" }, children: [_jsx("use", { xlinkHref: "#c", style: { mixBlendMode: "multiply" } }), _jsx("path", { fill: "#EBEDF0", d: "M95.09 309.19a7.58 7.58 0 0 1-1.37-1.5h.13a.64.64 0 0 0 .58-.44.64.64 0 0 0-.22-.7 16.87 16.87 0 0 1-2.88-2.83 9.67 9.67 0 0 0 1.27.02.5.5 0 0 0 .45-.35.5.5 0 0 0-.17-.55c-.8-.61-1.52-1.31-2.16-2.1a7.95 7.95 0 0 0 .96.01.4.4 0 0 0 .22-.7 10.54 10.54 0 0 1-3.43-4.63.47.47 0 0 0-.7-.22.47.47 0 0 0-.17.22 10.53 10.53 0 0 1-3.43 4.62.4.4 0 0 0-.13.44.4.4 0 0 0 .36.27 7.34 7.34 0 0 0 .96 0 14.3 14.3 0 0 1-2.16 2.1.5.5 0 0 0 0 .78c.08.07.17.1.28.1a9.16 9.16 0 0 0 1.27 0c-.84 1.05-1.81 2-2.88 2.82a.64.64 0 0 0 .35 1.14h.14a7.58 7.58 0 0 1-1.37 1.5.59.59 0 0 0-.23.4.58.58 0 0 0 .15.45 2.6 2.6 0 0 0 1.14.68c.32.09.66.1 1 .04a.62.62 0 0 1 .66.36 2.61 2.61 0 0 0 1.53 1.34 2.32 2.32 0 0 0 2.37-.66.57.57 0 0 1 .43-.2.57.57 0 0 1 .43.2 2.3 2.3 0 0 0 3.27.14c.26-.23.48-.5.63-.82a.62.62 0 0 1 .67-.36 2.28 2.28 0 0 0 2.12-.72.58.58 0 0 0 .08-.67.58.58 0 0 0-.15-.18Z", style: { mixBlendMode: "multiply" } })] }), _jsxs("g", { style: { mixBlendMode: "multiply" }, children: [_jsx("path", { fill: "#EBEDF0", d: "M106.47 291.53h1.07v2.56a.54.54 0 0 1-1.08 0v-2.56Z", style: { mixBlendMode: "multiply" } }), _jsx("use", { xlinkHref: "#d", style: { mixBlendMode: "multiply" } })] }), _jsx("path", { stroke: "#F4F6F7", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.11", d: "M81.69 217.76v12.28m-6.07-6.07H87.9m473.34-30.59v14.4m-7.2-7.2h14.4M118.7 228.13a4.23 4.23 0 1 0 0-8.47 4.23 4.23 0 0 0 0 8.47Zm335.28-52.1a4.23 4.23 0 1 0 0-8.47 4.23 4.23 0 0 0 0 8.47Z" }), _jsx("path", { fill: "#F4F6F7", d: "M12.36 266.61a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Zm506.79-44.54a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Zm-383.51-62.73a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z" }), _jsx("path", { fill: "#FAFBFB", d: "M166.14 52.35a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8ZM437.3 76.48a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8ZM51.75 86.85a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z" }), _jsx("path", { fill: "#F4F6F7", d: "M617.96 266.61a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z" }), _jsx("path", { stroke: "#FAFBFB", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.78", d: "M503.68 122.84a7.73 7.73 0 1 0 .01-15.47 7.73 7.73 0 0 0-.01 15.47ZM276.29 17.2a7.73 7.73 0 1 0 0-15.47 7.73 7.73 0 0 0 0 15.46ZM75.62 104.52a5.47 5.47 0 1 0 0-10.93 5.47 5.47 0 0 0 0 10.93Zm157.75 1.79v15.76m-7.89-7.87h15.78m327.19-45.1v25.92m-12.99-12.96h25.97M426.4 108.98v10.42m-5.2-5.2h10.42M133.24 79.25v10.41m-5.21-5.2h10.43" }), _jsx("path", { fill: "#FAFBFB", d: "M276.29 99.88a3.01 3.01 0 1 0 0-6.03 3.01 3.01 0 0 0 0 6.03Z" }), _jsx("path", { fill: "#00AEEF", d: "m357.06 39.4-2.07-.93s-.94 9.57-12.2 8.07c-9.4-5.26-24.06-5.26-24.06-5.26s-17.1 6.57-16.72 16.7c.5 13.5 12.16 11.82 12.16 11.82l-.32-1.87c-12.92-7.61.44-15.22 3.79-16.91l-2.29 20.28a27.85 27.85 0 0 0 11.74 2.78 3.91 3.91 0 0 0 3.53-2.22l7.85-16.35c1.58.38 20.39 4.39 18.59-16.1Z" }), _jsx("path", { fill: "#0097E8", d: "m357.06 39.4-2.07-.93s-.94 9.57-12.2 8.07l-4.32 8.97c1.58.38 20.39 4.39 18.59-16.1Z" }), _jsx("path", { fill: "url(#e)", d: "M313.4 119.75c-.75-4.15-7.08-4.64-7.08-4.64l-1.13.09a.91.91 0 0 0-.8.66 9.9 9.9 0 0 0-.46 3.7 1.5 1.5 0 0 0 1.4 1.4c2.37.15 4.74.16 7.1.03a1.08 1.08 0 0 0 .75-.4 1.08 1.08 0 0 0 .22-.84Z" }), _jsx("path", { fill: "url(#f)", d: "m307.3 115.75 1.1-3.74h-2.88l-.63 3.14a1.25 1.25 0 0 0 1.11 1.49 1.24 1.24 0 0 0 1.3-.9Z" }), _jsx("path", { fill: "url(#g)", d: "M343.26 101.59c-1.09-1.84-3.74-3.13-7.33-3.99l-1.56-.05a.68.68 0 0 0-.65.42c-.42 1.28-.65 2.6-.7 3.95a.77.77 0 0 0 .6.79c.8.16 1.63.24 2.45.25 1.9.05 4.99-.1 6.6-.2a.77.77 0 0 0 .6-1.17Z" }), _jsx("path", { fill: "url(#h)", d: "m336.57 98.2.86-3.28-2.64-.23-.5 3.02a1.16 1.16 0 0 0 .96 1.33 1.16 1.16 0 0 0 1.32-.85Z" }), _jsx("path", { fill: "url(#i)", d: "M315.35 71.3a22.4 22.4 0 0 0-3 8.26c-.7 4.49-6.58 29.68-7.52 33.68a.56.56 0 0 0 .43.68c.74.18 1.5.27 2.26.27a1.05 1.05 0 0 0 .92-.64l14.05-32.5s9.34-1.79 12.78 2.26c2.05 2.43.7 6.7-1.13 12.76 0 0 2.25 1.12 3.75.37 0 0 7.01-10.93 4.14-17.63-1.33-3.1-7.07-6.17-12.78-6.76l-13.9-.75Z" }), _jsx("path", { fill: "url(#j)", d: "M313.85 67.93s1.5-2.63 3.76-2.26c2.25.38 3.38 2.63 3.38 2.63l-3.76 1.88c-1.5.75-4.13 0-3.38-2.25Z" }), _jsx("path", { fill: "url(#k)", d: "m330.68 36.78-2.76 5.9s3.07 2.25 6.2 1.37l.8-8.37-4.24 1.1Z" }), _jsx("path", { fill: "url(#l)", d: "M337.48 30.36c.06.11 1.22 7.99 1.22 7.99l-4.52.57-2.21-7.3s4.56-3.03 5.5-1.26Z" }), _jsx("path", { fill: "url(#m)", d: "M333.63 32.35a.66.66 0 0 0-.13.56l.85 3.88c0 .06.03.12.06.17.16.3.73 1.18 1.63.54.61-.52 1.32-.9 2.1-1.14a.65.65 0 0 1 .74.56c.17 1.19.26 2.39.26 3.59a.65.65 0 0 1-.61.63c-1.37.1-2.74.05-4.1-.16a.65.65 0 0 1-.5-.45 57.5 57.5 0 0 0-1.6-4.6c-.35-.71-1.4-.84-1.88-.86a.66.66 0 0 1-.48-.24 1.43 1.43 0 0 1 .19-2.25.65.65 0 0 0 .09-.9 1.44 1.44 0 0 1 .13-2.13 2.04 2.04 0 0 1 2.44-.32.68.68 0 0 0 .8-.14.43.43 0 0 1 .4-.15.63.63 0 0 0 .73-.54 1.67 1.67 0 0 1 1.5-1.52c1.99-.36 2.95 1.64 2.9 3.03-.06 1.4-2.23 1.66-3.46 1.41-.9-.18-1.7.6-2.06 1.03Z" }), _jsx("path", { fill: "url(#n)", d: "M332.84 37.23s-.2-2.31-1.18-2.55c-.98-.24-2.05.45-1.23 1.92 1.03 1.82 2.41.63 2.41.63Z" }), _jsx("path", { fill: "#EBEDF0", d: "M372.79 28.3v9.59l-32.05-3.36v-2.87l32.05-3.36Z" }), _jsx("use", { xlinkHref: "#o" }), _jsx("path", { fill: "url(#p)", d: "M355 38.47s.16-2.17.45-2.4c.3-.23 2.55-2.48 2.92-2.48.38 0 .76.76 0 1.13-.75.37-.9 1.56-.9 1.56l2.3.24s-1.77 2.7-2.52 3.07c-.75.38-2.26-1.12-2.26-1.12Z" }), _jsx("use", { xlinkHref: "#o", style: { mixBlendMode: "multiply" } })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "e", x1: "303.9", x2: "313.41", y1: "118.1", y2: "118.1", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#0078D3" }), _jsx("stop", { offset: "1", stopColor: "#25477B" })] }), _jsxs("linearGradient", { id: "f", x1: "307.29", x2: "305.53", y1: "107.92", y2: "123.33", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F8B676" }), _jsx("stop", { offset: "1", stopColor: "#F37960" })] }), _jsxs("linearGradient", { id: "g", x1: "6278.42", x2: "6463.32", y1: "1035.38", y2: "1035.38", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#0078D3" }), _jsx("stop", { offset: "1", stopColor: "#25477B" })] }), _jsxs("linearGradient", { id: "h", x1: "21195.2", x2: "21155.8", y1: "5052.18", y2: "5137.86", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F8B676" }), _jsx("stop", { offset: "1", stopColor: "#F37960" })] }), _jsxs("linearGradient", { id: "i", x1: "20216.7", x2: "22693.1", y1: "6935.19", y2: "6935.19", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#0078D3" }), _jsx("stop", { offset: "1", stopColor: "#25477B" })] }), _jsxs("linearGradient", { id: "j", x1: "4333.49", x2: "4218.15", y1: "602.68", y2: "780.96", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F8B676" }), _jsx("stop", { offset: "1", stopColor: "#F37960" })] }), _jsxs("linearGradient", { id: "k", x1: "4319.87", x2: "4374.59", y1: "692.77", y2: "588.76", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F8B676" }), _jsx("stop", { offset: "1", stopColor: "#F37960" })] }), _jsxs("linearGradient", { id: "l", x1: "4247.57", x2: "4181.79", y1: "564.47", y2: "578.04", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F8B676" }), _jsx("stop", { offset: "1", stopColor: "#F37960" })] }), _jsxs("linearGradient", { id: "m", x1: "5799.54", x2: "5959.55", y1: "869.21", y2: "869.21", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#0078D3" }), _jsx("stop", { offset: "1", stopColor: "#25477B" })] }), _jsxs("linearGradient", { id: "n", x1: "1884.5", x2: "1866.37", y1: "231.72", y2: "215.86", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F8B676" }), _jsx("stop", { offset: "1", stopColor: "#F37960" })] }), _jsxs("linearGradient", { id: "p", x1: "3274.11", x2: "3313.35", y1: "416.62", y2: "416.62", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F8B676" }), _jsx("stop", { offset: "1", stopColor: "#F37960" })] }), _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h629v350H0z" }) })] })] });
+};

package/esm/index.d.ts

@@ -66,21 +66,22 @@ export { type IDateRange, type IDateRangeUnsetValue, DateRange } from "./dateRan
 export { type IDateRangeValue, type IDateRangeValueOptionalLabel, type IDateRangeOption, type TDateRangeOption, GET_TODAY_OPTION, GET_YESTERDAY_OPTION, GET_THIS_WEEK_OPTION, GET_NEXT_WEEK_OPTION, GET_LAST_WEEK_OPTION, GET_THIS_MONTH_OPTION, GET_NEXT_MONTH_OPTION, GET_LAST_MONTH_OPTION, GET_LAST_SEVEN_DAYS_OPTION, GET_LAST_THIRTY_DAYS_OPTION, GET_LAST_TWELVE_MONTHS_OPTION, GET_LAST_THREE_MONTH_OPTION, GET_LAST_QUARTER_OPTION, GET_THIS_QUARTER_OPTION, GET_LAST_YEAR_OPTION, GET_THIS_YEAR_OPTION, GET_DEFAULT_DATE_OPTIONS } from "./dateRange/dateRangeUtils";
 export { type IDialog, Dialog } from "./dialog/dialog";
 export { isElementInsideContainer, isFocusable, getFocusableStartInd } from "./dialog/dialogHelpers";
-export { type ISelectionItem, type IDropdownItem, type IFetchDropdownState, type IDropdownValueFullSelection, type IDropdownWithCheckboxValue, type IDropdownWithCheckboxSelected, type IDropdownValueFullSelectionWithCheckbox, type IDropdownFullSelectedValue, type IDropdownFullSelectedValueWithCheckbox, type IDropdownFullSelection, type IDropdown, type IDropdownWithCheckbox, type IDropdownFullSelectionWithCheckbox, Dropdown } from "./dropdown/dropdown";
+export { LIST_LIMIT, type ISelectionItem, type IDropdownItem, type IFetchDropdownState, type IDropdownValueFullSelection, type IDropdownWithCheckboxValue, type IDropdownWithCheckboxSelected, type IDropdownValueFullSelectionWithCheckbox, type IDropdownFullSelectedValue, type IDropdownFullSelectedValueWithCheckbox, type IDropdownFullSelection, type IDropdown, type IDropdownWithCheckbox, type IDropdownFullSelectionWithCheckbox, Dropdown } from "./dropdown/dropdown";
 export { useDropdownState } from "./dropdown/useDropdownState";
 export { type IFavoriteButton, FavoriteButton } from "./favoriteButton/favoriteButton";
 export { FeedbackProvider } from "./feedbackProvider/feedbackProvider";
 export { type TFilterButton, type IFilterButton, FilterButton } from "./filterButton/filterButton";
 export { type IFiltersChip, FiltersChip } from "./filters/components/filtersChip";
+export { type IFiltersDateInputProps, type TFiltersDateInputState, type IFiltersDateInput, FiltersDateInputDisplayName, FiltersDateInput } from "./filters/components/filtersDateInput";
 export { type IFiltersDateRangeState, type IFiltersDateRangeCompleteState, type IFiltersDateRangeDefaultState, type TFiltersDateRangeState, type TFiltersDateRangeCompleteState, type TFiltersDateRangeStateOptional, type TFiltersDateRangeStateRequired, type IFiltersDateRangeItem, type IFiltersDateRange, FiltersDateRange } from "./filters/components/filtersDateRange";
 export { type TFiltersDropdownState, type IFiltersDropdownFullSelectionState, type IFiltersDropdownWithCheckboxState, type IFiltersDropdownFullSelectionWithCheckboxState, type TFiltersDropdownComplexState, type TInferOnChangeType, type IFiltersDropdown, FiltersDropdown } from "./filters/components/filtersDropdown";
 export { type IFiltersGroupsItem, type IFiltersGroups, FiltersGroups } from "./filters/components/filtersGroups";
-export { type IFiltersItem } from "./filters/components/filtersItem";
+export { type IFiltersItem, type TFiltersComponentsItemState } from "./filters/components/filtersItem";
 export { type IFiltersRangeState, type IFiltersRange, FiltersRange } from "./filters/components/filtersRange";
-export { NO_TYPED_SEARCH_ITEM, KEYWORD_ID, KEYWORD_TYPE, type ISearchItem, type IRecentSearchItem, type IRecentSearchItemWithoutId } from "./filters/components/filtersSearchList";
+export { NO_TYPED_SEARCH_ITEM, KEYWORD_ID, KEYWORD_TYPE, type ISearchItem, type IRecentSearchItem, type IRecentSearchItemWithoutId, NOT_POPULATED_NAME } from "./filters/components/filtersSearchList";
 export { ALL_SELECT_OPTION_ID, type IFiltersSearchType, getFiltersSearchTypeAllOption, getAllOption } from "./filters/components/filtersSelect";
 export { type ISavedFilters, type ISaveFilter, type IFetchState, type IFiltersSearchTypesSubItem, type IFiltersSearchTypesItem, type IFiltersBase, type IFiltersWithRecentSearches, type IFiltersWithSearchSelection, type IFiltersWithPin, type IFiltersWithSavedFilters, type IFiltersWithExternalState, type IFilters, type IFiltersBasic, type IFiltersWithModal, type IFiltersWithPinning, type IFiltersWithRecent, type IFiltersWithSaved, type TFiltersWithSearchSelection, type IFiltersWithModalAndPin, type IFiltersWithRecentAndSaved, type IFiltersComplete, FiltersDisplayName, Filters } from "./filters/filters";
-export { useFiltersSearch, usePinnedFilters, useFiltersSelection } from "./filters/filtersHooks";
+export { useFiltersSearch, usePinnedFilters, useFiltersSelection, useSearchData } from "./filters/filtersHooks";
 export { type IFiltersBarDropdownFullSelectionState } from "./filtersBar/components/filtersBarDropdown/filtersBarDropdown";
 export { type IFiltersBarDropdownWithCheckboxProps, type IFiltersBarDropdownFullSelectionWithCheckboxProps, type IFiltersBarDropdownWithCheckbox, type IFiltersBarDropdownWithCheckboxFullSelectionMode, type IFiltersBarDropdownWithCheckboxOnChange, type IFiltersBarDropdownWithCheckboxFullSelectionOnChange, FiltersBarDropdownWithCheckbox } from "./filtersBar/components/filtersBarDropdownWithCheckbox/filtersBarDropdownWithCheckbox";
 export { type IDateRangeOptionId, type TDateRangeName, getRangeOption } from "./filtersBar/components/filtersBarPeriodPicker/getRangeOption";
@@ -617,6 +618,7 @@ export { IconYen } from "./icons/iconYen";
 export { IconZone } from "./icons/iconZone";
 export { IconZoom } from "./icons/iconZoom";
 export { IconZoom2 } from "./icons/iconZoom2";
+export { ImageLooking } from "./images/imageLooking";
 export { ImageNothingFound } from "./images/imageNothingFound";
 export { type ISvgImage } from "./images/svgImage";
 export { type ILayout, Layout } from "./layout/layout";
@@ -695,6 +697,7 @@ export { removeArrowClasses } from "./tooltip/helpers/removeArrowClasses";
 export { type TooltipSize, type TMobileView, Tooltip } from "./tooltip/tooltip";
 export { type IAbortablePromiseOptions, type IAbortablePromiseConstructor, AbortablePromise } from "./utils/abortablePromise";
 export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvider";
+export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";

package/esm/index.js

@@ -65,20 +65,21 @@ export { DateRange } from "./dateRange/dateRange";
 export { GET_TODAY_OPTION, GET_YESTERDAY_OPTION, GET_THIS_WEEK_OPTION, GET_NEXT_WEEK_OPTION, GET_LAST_WEEK_OPTION, GET_THIS_MONTH_OPTION, GET_NEXT_MONTH_OPTION, GET_LAST_MONTH_OPTION, GET_LAST_SEVEN_DAYS_OPTION, GET_LAST_THIRTY_DAYS_OPTION, GET_LAST_TWELVE_MONTHS_OPTION, GET_LAST_THREE_MONTH_OPTION, GET_LAST_QUARTER_OPTION, GET_THIS_QUARTER_OPTION, GET_LAST_YEAR_OPTION, GET_THIS_YEAR_OPTION, GET_DEFAULT_DATE_OPTIONS } from "./dateRange/dateRangeUtils";
 export { Dialog } from "./dialog/dialog";
 export { isElementInsideContainer, isFocusable, getFocusableStartInd } from "./dialog/dialogHelpers";
-export { Dropdown } from "./dropdown/dropdown";
+export { LIST_LIMIT, Dropdown } from "./dropdown/dropdown";
 export { useDropdownState } from "./dropdown/useDropdownState";
 export { FavoriteButton } from "./favoriteButton/favoriteButton";
 export { FeedbackProvider } from "./feedbackProvider/feedbackProvider";
 export { FilterButton } from "./filterButton/filterButton";
 export { FiltersChip } from "./filters/components/filtersChip";
+export { FiltersDateInputDisplayName, FiltersDateInput } from "./filters/components/filtersDateInput";
 export { FiltersDateRange } from "./filters/components/filtersDateRange";
 export { FiltersDropdown } from "./filters/components/filtersDropdown";
 export { FiltersGroups } from "./filters/components/filtersGroups";
 export { FiltersRange } from "./filters/components/filtersRange";
-export { NO_TYPED_SEARCH_ITEM, KEYWORD_ID, KEYWORD_TYPE } from "./filters/components/filtersSearchList";
+export { NO_TYPED_SEARCH_ITEM, KEYWORD_ID, KEYWORD_TYPE, NOT_POPULATED_NAME } from "./filters/components/filtersSearchList";
 export { ALL_SELECT_OPTION_ID, getFiltersSearchTypeAllOption, getAllOption } from "./filters/components/filtersSelect";
 export { FiltersDisplayName, Filters } from "./filters/filters";
-export { useFiltersSearch, usePinnedFilters, useFiltersSelection } from "./filters/filtersHooks";
+export { useFiltersSearch, usePinnedFilters, useFiltersSelection, useSearchData } from "./filters/filtersHooks";
 export { FiltersBarDropdownWithCheckbox } from "./filtersBar/components/filtersBarDropdownWithCheckbox/filtersBarDropdownWithCheckbox";
 export { getRangeOption } from "./filtersBar/components/filtersBarPeriodPicker/getRangeOption";
 export { ResetButton } from "./filtersBar/components/resetComponentButton";
@@ -609,6 +610,7 @@ export { IconYen } from "./icons/iconYen";
 export { IconZone } from "./icons/iconZone";
 export { IconZoom } from "./icons/iconZoom";
 export { IconZoom2 } from "./icons/iconZoom2";
+export { ImageLooking } from "./images/imageLooking";
 export { ImageNothingFound } from "./images/imageNothingFound";
 export { Layout } from "./layout/layout";
 export { useLayoutFullScreenElement, LayoutFullScreenElementProvider } from "./layout/layoutFullScreenElementProvider";
@@ -685,6 +687,7 @@ export { removeArrowClasses } from "./tooltip/helpers/removeArrowClasses";
 export { Tooltip } from "./tooltip/tooltip";
 export { AbortablePromise } from "./utils/abortablePromise";
 export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvider";
+export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";

package/esm/list/list.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./list.less";
 import { TListType } from "./interfaces";
@@ -9,5 +10,6 @@ export interface IList extends IZenComponentProps {
     onListEnd?: () => void;
     isLoading?: boolean;
     waitingItems?: number;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>) => void;
 }
-export declare const List: ({ type, children, onChangeOrder, checked, onCheck, onListEnd, isLoading, waitingItems, className }: IList) => import("react/jsx-runtime").JSX.Element;
+export declare const List: ({ type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, className }: IList) => import("react/jsx-runtime").JSX.Element;

package/esm/list/list.js

@@ -10,7 +10,7 @@ import { useVirtualScroll } from "./hooks/useVirtualScroll";
 import { useLazyLoading } from "./hooks/useLazyLoading";
 import { getLoadingItems } from "./utils/getLoadingItems";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const List = ({ type, children, onChangeOrder, checked, onCheck, onListEnd, isLoading, waitingItems, className }) => {
+export const List = ({ type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, className }) => {
     const listId = useId();
     const listRef = useRef(null);
     const onChangeOrderCallback = useCallback((startPosition, endPosition) => {
@@ -48,5 +48,5 @@ export const List = ({ type, children, onChangeOrder, checked, onCheck, onListEn
         const defaultWaitingItems = type === "data" ? 50 : 10;
         return getLoadingItems(type || "standard", waitingItems || defaultWaitingItems, listId, isDrive, isMobile);
     }, [isDrive, isLoading, isMobile, listId, type, waitingItems]);
-    return _jsx(ViewportProvider, { isInViewport: isInViewport, children: _jsxs("ul", { className: classNames(["zen-list", className || ""]), ref: listRef, children: [childrenArray, loadingChildren] }) });
+    return _jsx(ViewportProvider, { isInViewport: isInViewport, children: _jsxs("ul", { className: classNames(["zen-list", className || ""]), onKeyDown: onKeyDown, ref: listRef, children: [childrenArray, loadingChildren] }) });
 };

package/esm/mobileSheet/mobileSheet.d.ts

@@ -10,10 +10,12 @@ export interface IMobileSheet extends IZenComponentProps, Pick<ISidePanel, "trig
     isBackVisible?: boolean;
     backButtonAriaLabel?: string;
     useTrapFocusWithTrigger?: boolean;
+    preventFirstFocus?: boolean;
     onCloseClick?: () => void;
     onBackClick?: () => void;
     onReadyForFocus?: (currentIsOpen: boolean) => void;
     wrapperClassName?: string;
+    stackingClassName?: string;
 }
 export declare const MobileSheet: FC<IMobileSheet> & {
     Footer: FC<IMobileSheetFooter>;

package/esm/mobileSheet/mobileSheet.js

@@ -19,7 +19,7 @@ import { useFadeComponent } from "../utils/useFadeComponent";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const MobileSheet = 
 // eslint-disable-next-line react/prop-types
-({ triggerRef, label, isOpen, onHidePanel, className = "", panelPosition = "bottom", onBackClick, onCloseClick, isBackVisible, backButtonAriaLabel, children, useTrapFocusWithTrigger, onReadyForFocus, wrapperClassName }) => {
+({ triggerRef, label, isOpen, onHidePanel, className = "", panelPosition = "bottom", onBackClick, onCloseClick, isBackVisible, backButtonAriaLabel, children, useTrapFocusWithTrigger, onReadyForFocus, wrapperClassName, stackingClassName, preventFirstFocus }) => {
     var _a, _b;
     const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = useFadeComponent(isOpen, onReadyForFocus);
     const dataShieldId = useUniqueId();
@@ -66,8 +66,8 @@ export const MobileSheet =
         if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(".zen-mobile-sheet")) {
             return;
         }
-        showContent && ((_c = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR)) === null || _c === void 0 ? void 0 : _c.focus());
-    }, [content, showContent, readyForFocus, useTrapFocusWithTrigger]);
+        showContent && !preventFirstFocus && ((_c = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR)) === null || _c === void 0 ? void 0 : _c.focus());
+    }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus]);
     useEffect(() => {
         var _a;
         if (!renderComponent && !readyForFocus && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-expanded")) === "true") {
@@ -78,7 +78,7 @@ export const MobileSheet =
     if (!renderComponent && !isOpen) {
         return null;
     }
-    return _jsxs(_Fragment, { children: [_jsx(Shield, { className: "zen-mobile-sheet-shield", dataShieldId: dataShieldId, isVisible: showContent }), _jsx(SidePanel, { className: classNames(["zen-mobile-sheet-wrapper", wrapperClassName || "", driveWrapperMobileSheetClassName || ""]), panelPosition: panelPosition, triggerRef: triggerRef, label: label, isOpen: showContent, useTrapFocusWithTrigger: useTrapFocusWithTrigger, onHidePanel: onHidePanelAction, onTransitionEnd: handleTransitionEnd, children: _jsxs("div", { className: classNames(["zen-mobile-sheet", className]), ref: ref, children: [_jsxs("div", { className: classNames(["zen-mobile-sheet__title", driveTitleClassName || ""]), children: [isBackVisible ?
+    return _jsxs(_Fragment, { children: [_jsx(Shield, { className: classNames(["zen-mobile-sheet-shield", stackingClassName ? stackingClassName : ""]), dataShieldId: dataShieldId, isVisible: showContent }), _jsx(SidePanel, { className: classNames(["zen-mobile-sheet-wrapper", wrapperClassName || "", stackingClassName ? stackingClassName : "", driveWrapperMobileSheetClassName || ""]), panelPosition: panelPosition, triggerRef: triggerRef, label: label, isOpen: showContent, useTrapFocusWithTrigger: useTrapFocusWithTrigger, preventFirstFocus: preventFirstFocus, onHidePanel: onHidePanelAction, onTransitionEnd: handleTransitionEnd, children: _jsxs("div", { className: classNames(["zen-mobile-sheet", className]), ref: ref, children: [_jsxs("div", { className: classNames(["zen-mobile-sheet__title", driveTitleClassName || ""]), children: [isBackVisible ?
                                     _jsx(TextIconButton, { onClick: (e) => {
                                             e.stopPropagation();
                                             onBackClick === null || onBackClick === void 0 ? void 0 : onBackClick();

package/esm/modal/modal.d.ts

@@ -36,6 +36,7 @@ export interface IModal {
     title: ReactNode;
     type?: "error" | "success" | "warning" | "info";
     className?: string;
+    modalContainerClassName?: string;
     focus?: TFocusElement;
 }
 export declare const Modal: FC<IModal> & {

package/esm/modal/modal.js

@@ -19,7 +19,7 @@ import { isFocusable } from "../dialog/dialogHelpers";
 import { themeContext } from "../utils/theme/themeContext";
 import { getPredefinedFocusableItem } from "./modalHelpers";
 import { TextIconButton } from "../textIconButton/textIconButton";
-export const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth, title, type, className, focus }) => {
+export const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth, title, type, className, focus, modalContainerClassName }) => {
     const lastActiveOutsideElement = useRef(document.activeElement);
     const modalRoot = document.fullscreenElement || document.body;
     const [top, setTop] = useState(`${window.pageYOffset}px`);
@@ -68,7 +68,7 @@ export const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth
         });
         return someContent;
     }, [children]);
-    const dialogHTML = useCallback((id) => _jsxs("div", { className: classNames(["zen-modal", darkClass]), "aria-labelledby": labeledId, "aria-modal": "true", role: "dialog", style: { top: top }, children: [_jsx(Modal.Content, { onClose: onClose, maxWidth: maxWidth, title: title, className: className, type: type, labeledId: id, focus: focus, children: modalContent.length > 0 && modalContent.map((el) => el) }), _jsx("div", { className: "zen-modal__shield", onClick: onOutSideClick })] }), [darkClass, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
+    const dialogHTML = useCallback((id) => _jsxs("div", { className: classNames(["zen-modal", darkClass, modalContainerClassName || ""]), "aria-labelledby": labeledId, "aria-modal": "true", role: "dialog", style: { top: top }, children: [_jsx(Modal.Content, { onClose: onClose, maxWidth: maxWidth, title: title, className: className, type: type, labeledId: id, focus: focus, children: modalContent.length > 0 && modalContent.map((el) => el) }), _jsx("div", { className: "zen-modal__shield", onClick: onOutSideClick })] }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
     if (!isOpen) {
         return null;
     }

package/esm/radioGroup/radioGroup.d.ts

@@ -15,5 +15,6 @@ export interface IRadioGroup extends IZenComponentProps {
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     selectItemOnFocus?: boolean;
     wrappedInLabel?: boolean;
+    size?: "small";
 }
 export declare const RadioGroup: React.FC<IRadioGroup>;

package/esm/radioGroup/radioGroup.js

@@ -4,7 +4,7 @@ import React, { useCallback, useRef, useState } from "react";
 import { Radio } from "../radio/radio";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useEffect } from "react";
-export const RadioGroup = ({ fullWidth, reverse, id, items, className, name, value, disabled, type = "static", direction = "horizontal", onChange, selectItemOnFocus = true, wrappedInLabel }) => {
+export const RadioGroup = ({ fullWidth, reverse, id, items, className, name, value, disabled, type = "static", direction = "horizontal", onChange, selectItemOnFocus = true, wrappedInLabel, size }) => {
     const generatedId = React.useId();
     const intId = id || generatedId;
     const [focusedIndex, setFocusedIndex] = useState(items.findIndex(el => el.value === value));
@@ -48,5 +48,6 @@ export const RadioGroup = ({ fullWidth, reverse, id, items, className, name, val
         (_a = focusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [focusedIndex]);
     const extraProps = selectItemOnFocus ? {} : ({ role: "radiogroup", tabIndex: 0 });
-    return _jsx("div", { id: intId, className: classNames([classes, className || ""]), children: _jsx("div", Object.assign({ className: "zen-radio-group__wrapper", onKeyDown: selectItemOnFocus ? undefined : handleKeyDown }, extraProps, { children: items.map((item, ind) => _createElement(Radio, Object.assign({}, item, { className: classNames(["zen-radio-group__item", wrappedInLabel ? "zen-radio-group__item--no-paddings" : "", type === "interactive" ? "zen-radio--interactive" : ""]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChange, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : (ind === focusedIndex ? 0 : -1), ref: selectItemOnFocus ? undefined : (ind === focusedIndex ? focusElementRef : undefined) }), item.children)) })) });
+    return _jsx("div", { id: intId, className: classNames([classes, className || ""]), children: _jsx("div", Object.assign({ className: "zen-radio-group__wrapper", onKeyDown: selectItemOnFocus ? undefined : handleKeyDown }, extraProps, { children: items.map((item, ind) => _createElement(Radio, Object.assign({}, item, { className: classNames(["zen-radio-group__item", wrappedInLabel ? "zen-radio-group__item--no-paddings" : "", type === "interactive" ? "zen-radio--interactive" : "",
+                    size === "small" ? "zen-radio-group__item--small" : ""]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChange, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : (ind === focusedIndex ? 0 : -1), ref: selectItemOnFocus ? undefined : (ind === focusedIndex ? focusElementRef : undefined) }), item.children)) })) });
 };