@geotab/zenith 3.6.3 → 3.7.0

package/esm/dropdownRaw/dropdownRaw.js

@@ -28,6 +28,8 @@ import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/us
 import { FormSectionContext } from "../formSection/utils/formSectionProvider";
 import { LIST_LIMIT } from "../dropdown/dropdown";
 import { zen } from "../utils/zen";
+import { isChildOf } from "../utils/isChildOf";
+import { getFirstFocusableItem } from "../utils/keyboardHelpers";
 injectString("cs", "Filter by group", "Filtrovat podle skupiny");
 injectString("da-DK", "Filter by group", "Filtrer efter gruppe");
 injectString("de", "Filter by group", "Nach Gruppe filtern");
@@ -134,6 +136,8 @@ export const DropdownRaw = props => {
   const popupId = useId();
   const abortToken = useRef(new AbortController());
   const triggerRef = useRef(null);
+  const listElementRef = useRef(null);
+  const nextFocusableItemRef = useRef(false);
   const comboboxRef = useRef(null);
   const inputRef = useRef(null);
   const contentRef = useRef(null);
@@ -301,6 +305,9 @@ export const DropdownRaw = props => {
       type: StateActionType.SetCurrentId,
       payload: newCurrentId === state.rootId || state.inputValue ? undefined : newCurrentId
     });
+    // const focusableElements = contentRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    // focusableElements?.[0]?.focus();
+    nextFocusableItemRef.current = state.currentId ? `button[data-btn='${state.currentId}']` : true;
   }, [state.currentId, state.groupsMap, state.inputValue, state.rootId]);
   const handleSelect = useCallback(val => {
     if (isFullSelectionMode && state.isAllSelected) {
@@ -400,11 +407,14 @@ export const DropdownRaw = props => {
     });
   }, [isFullSelectionMode, state.isAllSelected, state.listData, state.isNestedList, state.selectedIds]);
   const handleClearClick = useCallback(() => {
+    var _a, _b;
     dispatchState({
       type: StateActionType.ResetSelection,
       payload: undefined
     });
-  }, []);
+    const focusableElements = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(FOCUSABLE_SELECTOR);
+    (_b = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0]) === null || _b === void 0 ? void 0 : _b.focus();
+  }, [contentRef]);
   const handleCancelClick = useCallback(() => {
     dispatchState({
       type: StateActionType.ResetStateToGlobal,
@@ -664,6 +674,7 @@ export const DropdownRaw = props => {
       payload: isChecked
     });
     prevIsChecked.current = isChecked;
+    nextFocusableItemRef.current = `.zen-dropdown-list__checkbox-container input`;
     const currentAbort = abortToken.current;
     controlData(currentAbort.signal, state.inputValue, isChecked);
   }, [controlData, state.inputValue]);
@@ -700,18 +711,27 @@ export const DropdownRaw = props => {
     }
   }, [searchField, state.currentId, state.showList, contentRef]);
   useEffect(() => {
-    var _a;
+    var _a, _b;
     if (!state.isOpenCombo || !state.showList) {
       return;
     }
-    const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
-    if (firstFocusable && (state.currentId || !searchField)) {
+    if (nextFocusableItemRef.current && typeof nextFocusableItemRef.current === "string") {
+      const nextFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(nextFocusableItemRef.current);
+      if (nextFocusable) {
+        nextFocusable.focus();
+        nextFocusableItemRef.current = false;
+        return;
+      }
+    }
+    const firstFocusable = (_b = contentRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR);
+    if (firstFocusable && (!searchField || state.currentId || nextFocusableItemRef.current)) {
+      nextFocusableItemRef.current = false;
       firstFocusable.focus();
     } else {
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
     }
-  }, [state.isOpenCombo, state.currentId, state.showList, searchField]);
+  }, [state.isOpenCombo, state.currentId, state.showList, searchField, contentRef]);
   useEffect(() => {
     const shouldExit = !getNamedItems || Object.keys(state.groupsMap).length === 0 && Object.keys(state.groupsMapSelected).length === 0 || getNamedItemsHasBeenCalled.current || state.groupsMapSelected.size === 0;
     if (shouldExit) {
@@ -743,6 +763,57 @@ export const DropdownRaw = props => {
     return currentAllSelected !== undefined ? state.defaultValueIsAllSelected === currentAllSelected && isStringsTheSame && isCheckedEqualDefault : isStringsTheSame && isCheckedEqualDefault;
   }, [currentAllSelected, currentIsChecked, forceSelection, multiselect, state.defaultValue, state.defaultValueIsAllSelected, state.defaultValueIsChecked, state.selectedIds]);
   const memoizedIsApplyButtonDisabled = useMemo(() => compareStringsArrays(state.globalSelectedIds, state.selectedIds) && (isFullSelectionMode ? state.globalIsAllSelected === state.isAllSelected : true) && (isCheckboxMode ? state.globalIsChecked === state.isChecked : true), [isCheckboxMode, isFullSelectionMode, state.globalIsAllSelected, state.globalIsChecked, state.globalSelectedIds, state.isAllSelected, state.isChecked, state.selectedIds]);
+  const handleKeydown = useCallback(e => {
+    const isChildOfListElements = listElementRef.current && e.target instanceof Node ? isChildOf(e.target, listElementRef.current) : false;
+    if (isChildOfListElements) {
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (!contentRef.current) {
+        return;
+      }
+      const focusableElements = contentRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
+      if (focusableElements.length === 0) {
+        return;
+      }
+      const currentIndex = Array.from(focusableElements).indexOf(e.target);
+      let nextIndex;
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (currentIndex === 0 && e.key === "ArrowUp" && inputRef.current) {
+        inputRef.current.focus();
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % focusableElements.length;
+      } else {
+        e.preventDefault();
+        nextIndex = currentIndex === -1 ? focusableElements.length - 1 : (currentIndex - 1 + focusableElements.length) % focusableElements.length;
+      }
+      focusableElements[nextIndex].focus();
+    }
+  }, []);
+  const handleFocusOnSentinelItem = useCallback(() => {
+    var _a;
+    if (isMobile) {
+      return;
+    }
+    const firstFocusable = getFirstFocusableItem(contentRef.current);
+    if (firstFocusable && listElementRef.current && isChildOf(firstFocusable, listElementRef.current)) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    } else {
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    }
+  }, [contentRef, isMobile, listElementRef]);
+  const handleFocusOnPopup = useCallback(() => {
+    var _a;
+    if (!state.showList) {
+      return;
+    }
+    const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+  }, [state.showList, contentRef]);
   const countSelected = useMemo(() => {
     var _a, _b;
     if (hasApplyButton && state.globalIsAllSelected || !hasApplyButton && state.isAllSelected) {
@@ -812,7 +883,8 @@ export const DropdownRaw = props => {
         isMobile: isMobile,
         handleCheckboxChange: isCheckboxMode && !isMobile ? handleCheckboxChange : undefined,
         checkboxLabel: checkboxLabel,
-        isChecked: state.isChecked
+        isChecked: state.isChecked,
+        listElementRef: listElementRef
       });
     }
     return null;
@@ -862,7 +934,8 @@ export const DropdownRaw = props => {
       triggerRef: triggerRef,
       inputRef: inputRef,
       buttonType: buttonType,
-      popupId: popupId
+      popupId: popupId,
+      handleFocusOnPopup: handleFocusOnPopup
     }, accessibilityProps)), _jsx(DropdownPopup, {
       alignment: alignment,
       triggerRef: triggerRef,
@@ -885,6 +958,7 @@ export const DropdownRaw = props => {
       handleClearClick: multiselect ? handleClearClick : handleSingleSelection.bind(this, true),
       handleTriggerClick: handleTriggerClick,
       onInputChange: onInputChange,
+      handleKeydown: handleKeydown,
       inputRef: inputRef,
       contentRef: contentRef,
       onReadyForFocus: handleReadyForFocus,
@@ -893,6 +967,7 @@ export const DropdownRaw = props => {
       isChecked: state.isChecked,
       isSearchInPopup: chip,
       mobileSheetStackingClassName: mobileSheetStackingClassName,
+      handleFocusOnSentinelItem: handleFocusOnSentinelItem,
       children: getPopupContent
     })]
   });

package/esm/dropdownRaw/dropdownSearchableTrigger.d.ts

@@ -20,9 +20,10 @@ interface IDropdownSearchableTrigger {
     name?: string;
     onBlur?: () => void;
     popupId?: string;
+    handleFocusOnPopup?: () => void;
 }
 export declare const DropdownSearchableTrigger: {
-    ({ value, className, onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, name, onBlur, popupId, ...otherProps }: IDropdownSearchableTrigger): import("react/jsx-runtime").JSX.Element;
+    ({ value, className, onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, name, onBlur, popupId, handleFocusOnPopup, ...otherProps }: IDropdownSearchableTrigger): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/esm/dropdownRaw/dropdownSearchableTrigger.js

@@ -141,9 +141,10 @@ export const DropdownSearchableTrigger = _a => {
       ref,
       name,
       onBlur,
-      popupId
+      popupId,
+      handleFocusOnPopup
     } = _a,
-    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref", "name", "onBlur", "popupId"])
+    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref", "name", "onBlur", "popupId", "handleFocusOnPopup"])
     // eslint-disable-next-line complexity
   ;
   const {
@@ -176,6 +177,10 @@ export const DropdownSearchableTrigger = _a => {
     if (e.key === " " && !isOpenPopup) {
       handleClick(true);
     }
+    if (e.key === "ArrowDown" && isOpenPopup) {
+      e.preventDefault();
+      handleFocusOnPopup === null || handleFocusOnPopup === void 0 ? void 0 : handleFocusOnPopup();
+    }
   };
   const clickHandler = e => {
     if (e.target === inputRef.current && isOpenPopup || e.target === clearRef.current && isOpenPopup) {

package/esm/dropdownRaw/dropdownTrigger.d.ts

@@ -23,6 +23,7 @@ export interface IDropdownTrigger extends IZenComponentProps {
     name?: string;
     onBlur?: () => void;
     popupId?: string;
+    handleFocusOnPopup?: () => void;
 }
-export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, ...otherProps }: IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, handleFocusOnPopup, ...otherProps }: IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/esm/dropdownRaw/dropdownTrigger.js

@@ -15,13 +15,11 @@ import { FilterButton } from "../filterButton/filterButton";
 import { useRef } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 export const DropdownTrigger = (_a) => {
-    var { name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange = () => { }, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId } = _a, otherProps = __rest(_a, ["name", "onBlur", "isActive", "id", "triggerRef", "searchField", "placeholder", "disabled", "fullWidth", "currentSelection", "handleClick", "inputValue", "className", "onSearchChange", "width", "title", "triggerAriaLabel", "count", "inputRef", "buttonType", "isError", "popupId"]);
+    var { name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange = () => { }, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, handleFocusOnPopup } = _a, otherProps = __rest(_a, ["name", "onBlur", "isActive", "id", "triggerRef", "searchField", "placeholder", "disabled", "fullWidth", "currentSelection", "handleClick", "inputValue", "className", "onSearchChange", "width", "title", "triggerAriaLabel", "count", "inputRef", "buttonType", "isError", "popupId", "handleFocusOnPopup"]);
     const elInpRef = useRef(null);
     const handleButtonClick = () => {
         handleClick(!isActive);
     };
-    return _jsx(_Fragment, { children: searchField ? _jsx(DropdownSearchableTrigger, Object.assign({ value: inputValue || "", name: name, onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: isError, fullWidth: fullWidth, popupId: popupId }, otherProps)) : _jsx(FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: classNames(["zen-dropdown__trigger-button", isError ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel || placeholder, "aria-expanded": isActive, "aria-haspopup": "dialog", "data-role": "dialog", "aria-controls": popupId }, otherProps, { children: currentSelection ? _jsx("span", { className: classNames(["zen-dropdown__trigger-button-text", buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""]), children: currentSelection }) : placeholder })) });
+    return (_jsx(_Fragment, { children: searchField ? (_jsx(DropdownSearchableTrigger, Object.assign({ value: inputValue || "", name: name, onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, handleFocusOnPopup: handleFocusOnPopup, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: isError, fullWidth: fullWidth, popupId: popupId }, otherProps))) : (_jsx(FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: classNames(["zen-dropdown__trigger-button", isError ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel || placeholder, "aria-expanded": isActive, "aria-haspopup": "dialog", "data-role": "dialog", "aria-controls": popupId }, otherProps, { children: currentSelection ? (_jsx("span", { className: classNames(["zen-dropdown__trigger-button-text", buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""]), children: currentSelection })) : (placeholder) }))) }));
 };
-export const TRANSLATIONS = [
-    ...SearchableTriggerTranslations
-];
+export const TRANSLATIONS = [...SearchableTriggerTranslations];

package/esm/footerButtons/footerButtons.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { IZenComponentProps } from "./../commonHelpers/zenComponent";
 import { ReactElement } from "react";
 import { IButton } from "../button/button";
@@ -5,10 +6,11 @@ import "./footerButtons.less";
 export interface IFooterButtons extends IZenComponentProps {
     children: ReactElement<IButton> | (ReactElement<IButton> | null | undefined)[];
     /**
-    * @deprecated
-    * @param stacked - will be removed in the next major release
-    */
+     * @deprecated
+     * @param stacked - will be removed in the next major release
+     */
     stacked?: boolean;
     isSticky?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const FooterButtons: ({ className, children, isSticky }: IFooterButtons) => import("react/jsx-runtime").JSX.Element;
+export declare const FooterButtons: ({ className, children, isSticky, ref }: IFooterButtons) => import("react/jsx-runtime").JSX.Element;

package/esm/footerButtons/footerButtons.js

@@ -9,7 +9,7 @@ const getChildren = (children) => {
     }
     return (React.Children.count(children) === 1 ? [children] : React.Children.toArray(children).filter((child) => React.isValidElement(child)));
 };
-export const FooterButtons = ({ className, children, isSticky = false }) => {
+export const FooterButtons = ({ className, children, isSticky = false, ref }) => {
     const footerButtonsId = useUniqueId();
     const driveComponentClassName = useDriveClassName("zen-footer-buttons");
     const maxLength = 3;
@@ -28,11 +28,6 @@ export const FooterButtons = ({ className, children, isSticky = false }) => {
         });
         return clonedElements;
     }, [children, footerButtonsId]);
-    const containerClassNames = classNames([
-        "zen-footer-buttons",
-        isSticky && driveComponentClassName ? "zen-footer-buttons--sticky" : "",
-        driveComponentClassName || "",
-        className || ""
-    ]);
-    return _jsx("div", { className: containerClassNames, children: childrenArray });
+    const containerClassNames = classNames(["zen-footer-buttons", isSticky && driveComponentClassName ? "zen-footer-buttons--sticky" : "", driveComponentClassName || "", className || ""]);
+    return (_jsx("div", { className: containerClassNames, ref: ref, children: childrenArray }));
 };

package/esm/groupsFilterRaw/groupsFilterCurrentlySelectedState.js

@@ -1,6 +1,6 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, useId } from "react";
+import { createElement, useCallback, useId } from "react";
 import { GroupsFilterCurrentlySelectedLabel } from "./groupsFilterCommon";
 import { RelationOperator } from "./groupsFilterInterfaces";
 import { TwoOptionsSwitcher } from "../twoOptionsSwitcher/twoOptionsSwitcher";
@@ -126,9 +126,15 @@ export const GroupsFilterCurrentlySelectedState = ({
     translate
   } = useLanguage();
   const togglerId = useId();
-  const getActionButton = (label, title, icon, handleClick) => _jsx("button", {
+  const handleBackButtonKeyDown = useCallback(event => {
+    if (event.key === "ArrowLeft") {
+      onBackButtonClick();
+    }
+  }, [onBackButtonClick]);
+  const getActionButton = (label, title, icon, handleClick, handleKeyDown) => _jsx("button", {
     type: "button",
     onClick: handleClick,
+    onKeyDown: handleKeyDown,
     className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--interactive zen-groups-filter-menu__action-button zen-groups-filter-menu__action-button-back",
     title: title,
     children: _jsxs(_Fragment, {
@@ -148,7 +154,7 @@ export const GroupsFilterCurrentlySelectedState = ({
   };
   return _jsxs("div", {
     className: "zen-groups-filter-menu__content-selected",
-    children: [getActionButton(translate("Back"), translate("Back"), IconBackArrow, onBackButtonClick), _jsx("div", {
+    children: [getActionButton(translate("Back"), translate("Back"), IconBackArrow, onBackButtonClick, handleBackButtonKeyDown), _jsx("div", {
       className: "zen-groups-filter-menu__item-wrapper",
       children: _jsx(ToggleButtonRaw, {
         onChange: handleTogglerChange,

package/esm/groupsFilterRaw/groupsFilterInitialState.js

@@ -190,14 +190,30 @@ injectString("tr", "Select Filters:", "Se\xE7ili Filtreler:");
 injectString("zh-Hans", "Select Filters:", "\u9009\u4E2D\u7684\u7B5B\u9009\u5668\uFF1A");
 injectString("zh-TW", "Select Filters:", "\u9078\u64C7\u7BE9\u9078\u689D\u4EF6\uFF1A");
 injectString("ro-RO", "Select Filters:", "Selecta\u021Bi filtrele:");
+injectString("cs", "Results", "V\xFDsledky");
 injectString("da-DK", "Results", "Resultater");
+injectString("de", "Results", "Ergebnisse");
 injectString("en", "Results", "Results");
+injectString("es", "Results", "Resultados");
 injectString("fi-FI", "Results", "Tulokset");
+injectString("fr", "Results", "R\xE9sultats");
+injectString("fr-FR", "Results", "R\xE9sultats");
 injectString("hu-HU", "Results", "Eredm\xE9nyek");
+injectString("id", "Results", "Hasil");
+injectString("it", "Results", "Risultati");
+injectString("ja", "Results", "\u7D50\u679C");
 injectString("ko-KR", "Results", "\uACB0\uACFC");
+injectString("ms", "Results", "Keputusan");
 injectString("nb-NO", "Results", "Resultater");
+injectString("nl", "Results", "Resultaten");
+injectString("pl", "Results", "Wyniki");
+injectString("pt-BR", "Results", "Resultados");
 injectString("pt-PT", "Results", "Resultados");
 injectString("sk-SK", "Results", "V\xFDsledky");
+injectString("sv", "Results", "Resultat");
+injectString("th", "Results", "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C");
+injectString("tr", "Results", "Sonu\xE7lar");
+injectString("zh-Hans", "Results", "\u7ED3\u679C");
 injectString("zh-TW", "Results", "\u7D50\u679C");
 injectString("ro-RO", "Results", "Rezultate");
 export const GroupsFilterInitialState = ({

package/esm/groupsFilterRaw/groupsFilterRaw.js

@@ -290,6 +290,7 @@ export const GroupsFilterRaw = props => {
   const inputRef = useRef(null);
   const emptyInputRef = useRef(null);
   const triggerRef = useRef(null);
+  const nextFocusableItemRef = useRef(false);
   const menuRef = useRef(null);
   const prevInitialState = useRef(initialFilterStateInner);
   const prevSearchField = useRef("");
@@ -312,6 +313,7 @@ export const GroupsFilterRaw = props => {
       type: UiStateActionType.SetStep,
       payload: newStep
     });
+    nextFocusableItemRef.current = true;
     if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && newStep !== FilterMenuStep.Initial) {
       inputRef.current.value = "";
       dispatchUiState({
@@ -453,6 +455,7 @@ export const GroupsFilterRaw = props => {
       payload: id
     });
     handleSetStep(id ? FilterMenuStep.Adjustment : FilterMenuStep.Initial);
+    nextFocusableItemRef.current = true;
   }, [dispatchUiState, handleSetStep]);
   const handleCheckboxItemAdjustmentClick = useCallback(value => {
     if (value.id === ADVANCED_FILTER_ID) {
@@ -485,6 +488,7 @@ export const GroupsFilterRaw = props => {
   }, [dispatchState, dispatchUiState, state.advancedFilterState, state.frozenState.advancedFilterState, uiState.uncheckedAdvancedState, uiState.uncheckedAdjustmentIds]);
   const basicHandleBackButtonClick = useCallback(() => {
     handleSetStep(FilterMenuStep.Initial);
+    nextFocusableItemRef.current = "button.zen-groups-filter-menu__currently-selected-button";
   }, [handleSetStep]);
   const handleBackButtonClick = useCallback(() => {
     const currentEl = uiState.currentAdjustmentId ? getGroupsTreeItem(state, uiState.currentAdjustmentId) : undefined;
@@ -498,6 +502,11 @@ export const GroupsFilterRaw = props => {
       payload: isNotRoot ? currentEl.parent.id : undefined
     });
     handleSetStep(isNotRoot ? FilterMenuStep.Adjustment : FilterMenuStep.Initial);
+    if (!isNotRoot) {
+      nextFocusableItemRef.current = `button[data-btn=${uiState.currentAdjustmentId}]`;
+      return;
+    }
+    nextFocusableItemRef.current = true;
   }, [basicHandleBackButtonClick, handleSetStep, state, uiState.currentAdjustmentId]);
   const handleHomeButtonClick = useCallback(() => {
     handleSetStep(FilterMenuStep.Initial);
@@ -505,6 +514,7 @@ export const GroupsFilterRaw = props => {
       type: UiStateActionType.SetCurrentAdjustmentId,
       payload: undefined
     });
+    nextFocusableItemRef.current = true;
   }, [handleSetStep, uiState.currentAdjustmentId, dispatchUiState]);
   const handleCurrentlySelectedClick = useCallback(() => {
     handleSetStep(FilterMenuStep.CurrentlySelected);
@@ -706,6 +716,23 @@ export const GroupsFilterRaw = props => {
     }
     (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
   }, [inputRef]);
+  const handleFocusOnPopup = useCallback(() => {
+    var _a;
+    const firstFocusable = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+  }, [menuRef]);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (nextFocusableItemRef.current) {
+      const firstFocusable = chip || isMobile ? (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(FOCUSABLE_SELECTOR)[1] : (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR);
+      const nextFocusable = typeof nextFocusableItemRef.current === "string" ? (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(nextFocusableItemRef.current) : firstFocusable;
+      if (nextFocusable) {
+        nextFocusable.focus();
+        nextFocusableItemRef.current = false;
+        return;
+      }
+    }
+  }, [uiState.currentAdjustmentId, chip, menuRef, nextFocusableItemRef, isMobile]);
   useEffect(() => {
     var _a, _b, _c, _d;
     if (!uiState.isOpen) {
@@ -715,13 +742,18 @@ export const GroupsFilterRaw = props => {
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       prevSearchField.current = uiState.searchValue;
     } else {
-      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);
+      const firstFocusable = chip || isMobile ? (_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 && !((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value)) {
-        firstFocusable.focus();
+      if (nextFocusableItemRef.current) {
+        const nextFocusable = typeof nextFocusableItemRef.current === "string" ? (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.querySelector(nextFocusableItemRef.current) : firstFocusable;
+        if (nextFocusable) {
+          nextFocusable.focus();
+          nextFocusableItemRef.current = false;
+          return;
+        }
       }
     }
-  }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip]);
+  }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip, isMobile]);
   useEffect(() => {
     var _a;
     uiState.isOpen && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
@@ -755,6 +787,7 @@ export const GroupsFilterRaw = props => {
   const selectedCount = getFrozenCount(state);
   const isStateHasData = Object.keys(state.groupsMap).length > 0;
   const isApplyDisabled = !isStateChanged(state);
+  const isDataEmpty = dataItems.length === 0;
   const memoizedContent = useMemo(() => _jsxs("div", {
     className: classNames(["zen-groups-filter-menu", isMobile ? "zen-groups-filter-menu--mobile" : ""]),
     ref: menuRef,
@@ -768,7 +801,7 @@ export const GroupsFilterRaw = props => {
         id: groupsFilterId,
         placeholder: translate("Filter by group")
       })
-    }) : null, isStateHasData && !uiState.hasError && _jsxs(GroupsFilterMenu, {
+    }) : null, isStateHasData && !uiState.hasError && !(uiState.isLoading && isDataEmpty) && _jsxs(GroupsFilterMenu, {
       onCancelClick: handleCancel,
       onApplyClick: handleApply,
       onResetClick: handleReset,
@@ -798,10 +831,10 @@ export const GroupsFilterRaw = props => {
         onRelationChange: onRelationChange,
         children: getGroupsBox()
       })]
-    }), !uiState.hasError && !isStateHasData && !Object.keys(state.groupsMap).length && _jsx(SkeletonList, {
+    }), (!uiState.hasError && !isStateHasData && !Object.keys(state.groupsMap).length || uiState.isLoading && isDataEmpty) && _jsx(SkeletonList, {
       className: "zen-groups-filter__waiting"
     })]
-  }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.hasError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate, isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult, getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick]);
+  }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.hasError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate, isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult, getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick, uiState.isLoading, isDataEmpty]);
   const memoizedFooterButtons = useMemo(() => _jsxs(FooterButtons, {
     children: [_jsx(Button, {
       onClick: handleApply,
@@ -879,7 +912,7 @@ export const GroupsFilterRaw = props => {
     isOpen: uiState.isOpen,
     className: classNames(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", classNamePopup || ""]),
     onOpenChange: onOptionsToggle,
-    useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger",
+    useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "none",
     shouldHoldScroll: true,
     triggerRef: triggerRef,
     ariaLabel: translate("Organization groups filter"),
@@ -920,7 +953,8 @@ export const GroupsFilterRaw = props => {
       ref: triggerRef,
       fullSize: fullSize,
       placeholder: groupPlaceHolder,
-      popupId: popupId
+      popupId: popupId,
+      handleFocusOnPopup: handleFocusOnPopup
     }), isMobile ? memoizedMobileView : memoizedDesktopView, uiState.isOpenAdvancedFilter && getAdvancedDialog]
   });
 };

package/esm/groupsFilterRaw/groupsFilterTrigger.d.ts

@@ -15,9 +15,10 @@ interface IGroupsFilterTrigger {
     ref?: React.RefObject<HTMLDivElement | null>;
     isError?: boolean;
     popupId?: string;
+    handleFocusOnPopup?: () => void;
 }
 export declare const GroupsFilterTrigger: {
-    ({ value, className, onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref, isError, popupId, ...otherProps }: IGroupsFilterTrigger): import("react/jsx-runtime").JSX.Element;
+    ({ value, className, onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref, isError, popupId, handleFocusOnPopup, ...otherProps }: IGroupsFilterTrigger): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/esm/groupsFilterRaw/groupsFilterTrigger.js

@@ -81,9 +81,10 @@ export const GroupsFilterTrigger = _a => {
       fullSize,
       ref,
       isError,
-      popupId
+      popupId,
+      handleFocusOnPopup
     } = _a,
-    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "count", "withGlobeIcon", "inputRef", "handleClick", "fullSize", "ref", "isError", "popupId"]);
+    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "count", "withGlobeIcon", "inputRef", "handleClick", "fullSize", "ref", "isError", "popupId", "handleFocusOnPopup"]);
   const {
     translate
   } = useLanguage();
@@ -93,10 +94,20 @@ export const GroupsFilterTrigger = _a => {
     if (e.key === "Enter" && !isOpenPopup) {
       handleClick();
     }
+    if (e.key === "ArrowDown" && !isOpenPopup) {
+      handleClick();
+    }
+    if (e.key === "ArrowDown" && isOpenPopup) {
+      handleFocusOnPopup === null || handleFocusOnPopup === void 0 ? void 0 : handleFocusOnPopup();
+    }
     if (e.key === "Escape" && isOpenPopup && e.nativeEvent) {
       e.nativeEvent.stopImmediatePropagation();
       handleClick();
     }
+    if (e.key === "Tab" && isOpenPopup) {
+      e.preventDefault();
+      handleFocusOnPopup === null || handleFocusOnPopup === void 0 ? void 0 : handleFocusOnPopup();
+    }
   };
   const clickHandler = e => {
     if (e.target === inputRef.current && isOpenPopup) {

package/esm/index.d.ts

@@ -720,7 +720,7 @@ export { PageLayout } from "./pageLayout/pageLayout";
 export { type IPagination, Pagination } from "./pagination/pagination";
 export { PaginationType } from "./pagination/paginationType";
 export { Pill } from "./pill/pill";
-export { type IPillExpandableAction, type IBaseData, type IPromisedBaseData, type IPillExpandable, PillExpandable } from "./pillExpandable/pillExpandable";
+export { type IPillExpandableAction, type IBaseData, type IPromisedBaseData, type TPopoverSize, type IPillExpandable, PillExpandable } from "./pillExpandable/pillExpandable";
 export { type IPopup, Popup } from "./popup/popup";
 export { type IPrimaryIcon, PrimaryIcon } from "./primaryIcon/primaryIcon";
 export { ProgressBarType, ProgreesBarSize, type TProgressBarSize, ProgressBar } from "./progressBar/progressBar";

package/esm/list/hooks/useDragAndDrop.d.ts

@@ -14,9 +14,11 @@ interface IMarkerClasses {
  *                          If not provided, defaults to 'zen-list-item' based classes
  * @param onBeforeDragOver - Optional callback function called before placing the placeholder at a new position.
  *                       Receives the target position and should return false to prevent the drag operation.
+ * @param itemsGap - Optional gap size in pixels between list items. Used to adjust placeholder positioning
+ *                   calculations during drag operations. Defaults to 0.
  * @returns An object containing the `onDragStart` event handler to be attached to draggable elements
  */
-export declare const useDragAndDrop: (containerRef: RefObject<HTMLElement | null>, onChangeOrder: (startPosition: number, endPosition: number) => void, marksClassNames?: IMarkerClasses, onBeforeDragOver?: (endPosition: number) => boolean) => {
+export declare const useDragAndDrop: (containerRef: RefObject<HTMLElement | null>, onChangeOrder: (startPosition: number, endPosition: number) => void, marksClassNames?: IMarkerClasses, onBeforeDragOver?: (endPosition: number) => boolean, itemsGap?: number) => {
     onDragStart: (e: React.PointerEvent<HTMLElement>) => void;
 };
 export {};

package/esm/list/hooks/useDragAndDrop.js

@@ -14,9 +14,11 @@ import { zen } from "../../utils/zen";
  *                          If not provided, defaults to 'zen-list-item' based classes
  * @param onBeforeDragOver - Optional callback function called before placing the placeholder at a new position.
  *                       Receives the target position and should return false to prevent the drag operation.
+ * @param itemsGap - Optional gap size in pixels between list items. Used to adjust placeholder positioning
+ *                   calculations during drag operations. Defaults to 0.
  * @returns An object containing the `onDragStart` event handler to be attached to draggable elements
  */
-export const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDragOver) => {
+export const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDragOver, itemsGap = 0) => {
     const dragImageRef = useRef(null);
     const dragMoveRef = useRef(undefined);
     const { moveScroll, cancelMoveScroll } = useContainerScroll();
@@ -47,8 +49,12 @@ export const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onB
         if (!containerRef.current) {
             return;
         }
-        const items = containerRef.current.querySelectorAll(`.${cssMarks.general}`);
         const rect = element.getBoundingClientRect();
+        // preventing placeholder alignment when dragged element is not properly positioned yet
+        if (rect.top < 0) {
+            return;
+        }
+        const items = containerRef.current.querySelectorAll(`.${cssMarks.general}`);
         const listRect = containerRef.current.getBoundingClientRect();
         if (rect.top < listRect.top) {
             if (onBeforeDragOver && !onBeforeDragOver(0)) {
@@ -76,13 +82,14 @@ export const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onB
             return;
         }
         const dragItemTopOffset = 4;
+        const halfGap = itemsGap / 2;
         for (let i = 0; i < items.length; i++) {
             const item = items[i];
             if (item.classList.contains(cssMarks.placeholder) || item.classList.contains(cssMarks.dragging)) {
                 continue;
             }
             const itemRect = item.getBoundingClientRect();
-            if (item !== element && rect.top > itemRect.top + dragItemTopOffset && rect.top <= itemRect.bottom) {
+            if (item !== element && rect.top > itemRect.top + dragItemTopOffset - halfGap && rect.top <= itemRect.bottom + halfGap) {
                 if (onBeforeDragOver && !onBeforeDragOver(i + 1)) {
                     return;
                 }
@@ -98,7 +105,7 @@ export const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onB
                 return;
             }
         }
-    }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging]);
+    }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging, itemsGap]);
     const onDragStart = useCallback((e) => {
         var _a, _b, _c, _d, _e;
         e.preventDefault();