@geotab/zenith 3.7.0-beta.0 → 3.7.0

package/esm/checkboxListWithAction/checkboxListWithAction.js

@@ -1,6 +1,6 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useId } from "react";
+import { Fragment, useCallback, useEffect, useId, useRef, useState } from "react";
 import { Checkbox } from "../checkbox/checkbox";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../icons/iconChevronRight";
@@ -84,13 +84,15 @@ injectString("tr", "Toggle {groupName} filter", "{groupName} filtresini de\u011F
 injectString("zh-Hans", "Toggle {groupName} filter", "\u5207\u6362 {groupName} \u7B5B\u9009\u5668");
 injectString("zh-TW", "Toggle {groupName} filter", "\u5207\u63DB\u300C{groupName}\u300D\u7BE9\u9078\u689D\u4EF6");
 injectString("ro-RO", "Toggle {groupName} filter", "Activa\u021Bi filtrul {groupName}");
+injectString("en", "Has additional actions. Use right arrow to access button, left arrow to return.", "Has additional actions. Use right arrow to access button, left arrow to return.");
 export const CheckboxListWithAction = ({
   label,
   options,
   onChange,
   onClick,
   search = [],
-  className
+  className,
+  handleTab
 }) => {
   const {
     translate
@@ -98,6 +100,11 @@ export const CheckboxListWithAction = ({
   const driveComponentClass = useDriveClassName("zen-checkbox-list-with-action");
   const listId = useId();
   const checkboxId = `${listId}_check_list-item_`;
+  const navigationInstructionsId = `${listId}_navigation_instructions`;
+  const listRef = useRef(null);
+  const [focusedRowIndex, setFocusedRowIndex] = useState(0);
+  const [focusedElementType, setFocusedElementType] = useState("checkbox");
+  const isInitialized = useRef(false);
   const handleChange = e => {
     const evtTarget = e.target;
     const elId = evtTarget.getAttribute("id").replace(checkboxId, "");
@@ -112,7 +119,171 @@ export const CheckboxListWithAction = ({
     const evtTarget = e.target;
     const elId = evtTarget.getAttribute("data-btn") || ((_a = evtTarget.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("data-btn")) || "";
     onClick(elId);
+    setFocusedElementType("checkbox");
   };
+  const getFocusableElements = useCallback(() => {
+    if (!listRef.current || !options) return [];
+    const elements = [];
+    options.forEach((opt, rowIndex) => {
+      var _a;
+      const listItem = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`li[data-item="${opt.property}"]`);
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (listItem) {
+        const checkbox = listItem.querySelector('input[type="checkbox"]');
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (checkbox) {
+          elements.push({
+            element: checkbox,
+            rowIndex,
+            type: "checkbox",
+            blocked: opt.blocked
+          });
+        }
+        if (opt.isWithAction) {
+          const button = listItem.querySelector("button[data-btn]");
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          if (button) {
+            elements.push({
+              element: button,
+              rowIndex,
+              type: "button",
+              blocked: opt.blocked
+            });
+          }
+        }
+      }
+    });
+    return elements;
+  }, [options]);
+  const updateTabIndex = useCallback((newRowIndex, newElementType) => {
+    const elements = getFocusableElements();
+    elements.forEach(({
+      element,
+      rowIndex,
+      type,
+      blocked
+    }) => {
+      const isActive = rowIndex === newRowIndex && type === newElementType && !blocked;
+      element.setAttribute("tabindex", isActive ? "0" : "-1");
+    });
+  }, [getFocusableElements]);
+  const handleKeyDown = useCallback(
+  // eslint-disable-next-line complexity
+  e => {
+    var _a;
+    const elements = getFocusableElements();
+    if (elements.length === 0 || !options) return;
+    let newRowIndex = focusedRowIndex;
+    let newElementType = focusedElementType;
+    let preventDefault = false;
+    if (e.key === "Enter") {
+      const evtTarget = e.target;
+      const elId = ((_a = evtTarget.getAttribute("id")) === null || _a === void 0 ? void 0 : _a.replace(checkboxId, "")) || "";
+      elId && onChange({
+        id: elId,
+        state: evtTarget.checked,
+        partial: evtTarget.dataset.indeterminate === "true"
+      });
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      // Go to next row
+      do {
+        newRowIndex = (newRowIndex + 1) % options.length;
+      } while (options[newRowIndex].blocked && newRowIndex !== focusedRowIndex);
+      preventDefault = true;
+    } else if (e.key === "ArrowUp") {
+      // Go to previous row
+      do {
+        newRowIndex = (newRowIndex - 1 + options.length) % options.length;
+      } while (options[newRowIndex].blocked && newRowIndex !== focusedRowIndex);
+      preventDefault = true;
+    } else if (e.key === "ArrowRight") {
+      // Go to button if exists in current row and not blocked
+      if (options[focusedRowIndex].isWithAction && focusedElementType === "checkbox" && !options[focusedRowIndex].blocked) {
+        newElementType = "button";
+        preventDefault = true;
+      }
+    } else if (e.key === "ArrowLeft") {
+      // Go to checkbox if currently on button and checkbox not blocked
+      if (focusedElementType === "button" && !options[focusedRowIndex].blocked) {
+        newElementType = "checkbox";
+        preventDefault = true;
+      }
+    } else if (e.key === "Home") {
+      // Go to first non-blocked row
+      newRowIndex = 0;
+      while (newRowIndex < options.length && options[newRowIndex].blocked) {
+        newRowIndex++;
+      }
+      if (newRowIndex < options.length) {
+        newElementType = "checkbox";
+        preventDefault = true;
+      }
+    } else if (e.key === "End") {
+      // Go to last non-blocked row
+      newRowIndex = options.length - 1;
+      while (newRowIndex >= 0 && options[newRowIndex].blocked) {
+        newRowIndex--;
+      }
+      if (newRowIndex >= 0) {
+        newElementType = "checkbox";
+        preventDefault = true;
+      }
+    } else if (e.key === "Tab") {
+      if (handleTab) {
+        handleTab(e, e.shiftKey);
+        return;
+      }
+    }
+    if (preventDefault) {
+      e.preventDefault();
+      setFocusedRowIndex(newRowIndex);
+      setFocusedElementType(newElementType);
+      updateTabIndex(newRowIndex, newElementType);
+      // Find and focus the target element
+      const targetElement = elements.find(({
+        rowIndex,
+        type,
+        blocked
+      }) => rowIndex === newRowIndex && type === newElementType && !blocked);
+      targetElement === null || targetElement === void 0 ? void 0 : targetElement.element.focus();
+    }
+  }, [getFocusableElements, options, focusedRowIndex, focusedElementType, checkboxId, onChange, handleTab, updateTabIndex]);
+  const handleFocus = useCallback(e => {
+    const elements = getFocusableElements();
+    const focusedElement = e.target;
+    const targetElementInfo = elements.find(({
+      element
+    }) => element === focusedElement);
+    if (targetElementInfo && !targetElementInfo.blocked && (targetElementInfo.rowIndex !== focusedRowIndex || targetElementInfo.type !== focusedElementType)) {
+      setFocusedRowIndex(targetElementInfo.rowIndex);
+      setFocusedElementType(targetElementInfo.type);
+      updateTabIndex(targetElementInfo.rowIndex, targetElementInfo.type);
+    }
+  }, [focusedRowIndex, focusedElementType, getFocusableElements, updateTabIndex]);
+  // Initialize tabindex when options first become available
+  useEffect(() => {
+    if (options && options.length > 0 && !isInitialized.current) {
+      // Find first non-blocked row
+      let firstValidRow = 0;
+      while (firstValidRow < options.length && options[firstValidRow].blocked) {
+        firstValidRow++;
+      }
+      if (firstValidRow < options.length) {
+        setFocusedRowIndex(firstValidRow);
+        setFocusedElementType("checkbox");
+        updateTabIndex(firstValidRow, "checkbox");
+        isInitialized.current = true;
+      }
+    }
+  }, [options, updateTabIndex]);
+  // Update tabindex when focused position changes (only after initialization)
+  useEffect(() => {
+    if (isInitialized.current) {
+      updateTabIndex(focusedRowIndex, focusedElementType);
+    }
+  }, [focusedRowIndex, focusedElementType, updateTabIndex]);
   const getLabelColorInfo = (color, withRightPadding, isHidden, extraArgs) => {
     if (!color) {
       return null;
@@ -170,7 +341,8 @@ export const CheckboxListWithAction = ({
       type: "button",
       onClick: handleClick,
       title: title,
-      className: classN
+      className: classN,
+      tabIndex: -1
     }, otherArgs, {
       children: childEl
     })) : _jsx("div", {
@@ -200,6 +372,9 @@ export const CheckboxListWithAction = ({
     };
     return optionsArr ? _jsx("ul", {
       className: "zen-checkbox-list-with-action__list",
+      ref: listRef,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
       children: optionsArr.map((opt, ind) => {
         const titleForRender = opt.title || opt.label;
         const labelForRender = selectSearchTerm(opt.label);
@@ -215,7 +390,9 @@ export const CheckboxListWithAction = ({
             checked: opt.checked,
             disabled: opt.blocked,
             title: translate("Toggle {groupName} filter").replace("{groupName}", titleForRender),
+            describedBy: opt.isWithAction ? navigationInstructionsId : undefined,
             "data-indeterminate": opt.partialChecked,
+            tabIndex: -1,
             children: opt.isWithAction ? null : labelElement
           }), opt.isWithAction && labelElement]
         }, `li_${ind}_${opt.property}`);
@@ -227,7 +404,12 @@ export const CheckboxListWithAction = ({
     children: [label ? _jsx("div", {
       className: "zen-checkbox-list-with-action__title",
       children: label
-    }) : null, build(options)]
+    }) : null, build(options), _jsx("div", {
+      id: navigationInstructionsId,
+      className: "zen-checkbox-list-with-action__sr-only",
+      "aria-hidden": "true",
+      children: translate("Has additional actions. Use right arrow to access button, left arrow to return.")
+    })]
   });
 };
 export const TRANSLATIONS = ["View {groupName} children", "Toggle {groupName} filter", "Number of selected child groups - {count}"];

package/esm/dropdown/dropdownPopup.d.ts

@@ -1,3 +1,3 @@
 import { IDropdownPopup as IDropdownPopupRaw } from "../dropdownRaw/dropdownPopup";
-export declare const DropdownPopup: ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked, popupId }: IDropdownPopupRaw) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownPopup: ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked, popupId, handleKeydown, handleFocusOnSentinelItem }: IDropdownPopupRaw) => import("react/jsx-runtime").JSX.Element;
 export type IDropdownPopup = IDropdownPopupRaw;

package/esm/dropdown/dropdownTrigger.d.ts

@@ -1 +1 @@
-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 }: import("../dropdownRaw/dropdownTrigger").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 }: import("../dropdownRaw/dropdownTrigger").IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;

package/esm/dropdownRaw/dropdownList.d.ts

@@ -32,11 +32,12 @@ export interface IDropdownList extends IZenComponentProps {
     handleCheckboxChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     checkboxLabel?: string;
     isChecked?: boolean;
+    listElementRef?: React.RefObject<HTMLDivElement>;
 }
 interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" | "onClearClick" | "onApplyClick" | "onCancelClick" | "hasApplyButton" | "isApplyDisabled" | "isClearButtonDisabled" | "isWithFooter"> {
     hasError: boolean;
 }
 export declare const EmptyList: ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }: IDropdownEmptyList) => import("react/jsx-runtime").JSX.Element;
-export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/esm/dropdownRaw/dropdownList.js

@@ -1,6 +1,6 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useId, useMemo } from "react";
+import React, { useCallback, useId, useMemo, useRef } from "react";
 import { CheckboxListWithAction } from "../checkboxListWithAction/checkboxListWithAction";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconBackArrow } from "../icons/deprecated/iconBackArrow";
@@ -309,7 +309,8 @@ export const DropdownList = ({
   isMobile,
   handleCheckboxChange,
   checkboxLabel,
-  isChecked
+  isChecked,
+  listElementRef
 }) => {
   const {
     translate
@@ -320,6 +321,13 @@ export const DropdownList = ({
   const handleSelectAllClick = () => {
     onSelectAllClick(isAllSelected);
   };
+  const handleBackButtonKeyDown = useCallback(event => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      onBackButtonClick();
+    }
+  }, [onBackButtonClick]);
+  const componentRef = useRef(null);
   const handleChange = useCallback(value => {
     onChange(value);
   }, [onChange]);
@@ -340,10 +348,11 @@ export const DropdownList = ({
     forceSelection ? onSingleSelect(false, newActiveEl || activeValue) : onSingleSelect(false, newActiveEl);
   }, [activeValue, forceSelection, onSingleSelect]);
   const selectButtonLabel = isAllSelected ? translate("Deselect all") : translate("Select all");
-  const getActionButton = (label, title, icon, isDisabled, clickHandler, size) => _jsx("button", {
+  const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown) => _jsx("button", {
     type: "button",
     disabled: isDisabled,
     onClick: clickHandler,
+    onKeyDown: onKeyDown,
     className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back",
     title: title,
     children: _jsxs(_Fragment, {
@@ -382,6 +391,7 @@ export const DropdownList = ({
     };
     return _jsx("div", {
       className: "zen-dropdown-list__elements",
+      ref: listElementRef,
       children: isMultiselect ? _jsx(CheckboxListWithAction, {
         options: listData,
         label: "",
@@ -399,10 +409,11 @@ export const DropdownList = ({
         value: createValue(listData, activeValue)
       })
     });
-  }, [isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, listId, forceSelection, activeValue]);
+  }, [listElementRef, isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, listId, forceSelection, activeValue]);
   return _jsxs("div", Object.assign({
     className: classNames(["zen-dropdown-list", driveComponentClass || ""])
   }, styleWidth, {
+    ref: componentRef,
     children: [filterName ? _jsx("div", {
       className: "zen-dropdown-list__label",
       children: filterName
@@ -415,7 +426,7 @@ export const DropdownList = ({
       })
     }) : null, backButtonName ? _jsx("div", {
       className: "zen-dropdown-list__item-wrapper",
-      children: getActionButton(backButtonName, translate("Back"), IconBackArrow, false, onBackButtonClick, "large")
+      children: getActionButton(backButtonName, translate("Back"), IconBackArrow, false, onBackButtonClick, "large", handleBackButtonKeyDown)
     }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? _jsxs("div", {
       className: "zen-dropdown-list__footer",
       children: [_jsx(Button, {

package/esm/dropdownRaw/dropdownPopup.d.ts

@@ -31,5 +31,7 @@ export interface IDropdownPopup extends IZenComponentProps {
     checkboxLabel?: string;
     isChecked?: boolean;
     isSearchInPopup?: boolean;
+    handleKeydown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleFocusOnSentinelItem?: () => void;
 }
-export declare const DropdownPopup: ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked, popupId }: IDropdownPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownPopup: ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked, popupId, handleKeydown, handleFocusOnSentinelItem }: IDropdownPopup) => import("react/jsx-runtime").JSX.Element;

package/esm/dropdownRaw/dropdownPopup.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 { useCallback, useId, useMemo } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useRef } from "react";
 import { MobileSheet } from "../mobileSheet/mobileSheet";
 import { Button } from "../button/button";
 import { ButtonType } from "../button/buttonType";
@@ -11,6 +11,7 @@ import { useLanguage } from "../utils/localization/useLanguage";
 import { FooterButtons } from "../footerButtons/footerButtons";
 import { Checkbox } from "../checkbox/checkbox";
 import { useScrollWithAndroidKeyboard } from "../utils/useScrollWithAndroidKeyboard";
+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");
@@ -119,12 +120,16 @@ export const DropdownPopup = ({
   handleCheckboxChange,
   checkboxLabel,
   isChecked,
-  popupId
+  popupId,
+  handleKeydown,
+  handleFocusOnSentinelItem
 }) => {
   const {
     translate
   } = useLanguage();
   const triggerId = useId();
+  const footerButtonsRef = useRef(null);
+  const mobileContentRef = useRef(null);
   const {
     handleFocus,
     handleBlur,
@@ -133,7 +138,22 @@ export const DropdownPopup = ({
   const memoizedHandleHide = useCallback(() => {
     handleTriggerClick(false);
   }, [handleTriggerClick]);
-  const memoizedMobileContent = useMemo(() => _jsxs(_Fragment, {
+  const handleMobileFocusOnSentinelItem = useCallback(() => {
+    if (!isMobile) {
+      return;
+    }
+    let nextFocusableElement = footerButtonsRef.current ? getFirstFocusableItem(footerButtonsRef.current) : null;
+    if (nextFocusableElement) {
+      nextFocusableElement.focus();
+      return;
+    }
+    nextFocusableElement = getFirstFocusableItem(mobileContentRef.current);
+    nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
+    return;
+  }, [isMobile, footerButtonsRef, mobileContentRef]);
+  const memoizedMobileContent = useMemo(() => _jsxs("div", {
+    onKeyDown: handleKeydown,
+    ref: mobileContentRef,
     children: [searchField ? _jsx("div", {
       className: "zen-dropdown-mobile-sheet__search-container",
       children: _jsx(SearchInput, {
@@ -157,13 +177,18 @@ export const DropdownPopup = ({
     }) : null, _jsx("div", {
       ref: contentRef,
       children: children
+    }), _jsx("div", {
+      tabIndex: 0,
+      onFocus: handleMobileFocusOnSentinelItem,
+      className: "zen-dropdown-list__sentinel-item"
     })]
-  }), [searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder, translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children]);
+  }), [handleKeydown, searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder, translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children, handleMobileFocusOnSentinelItem]);
   const memoizedMobileFooter = useMemo(() => {
     if (!isWithFooter) {
       return null;
     }
     return _jsxs(FooterButtons, {
+      ref: footerButtonsRef,
       children: [hasApplyButton ? _jsx(Button, {
         onClick: handleApplyClick,
         type: ButtonType.Primary,
@@ -216,6 +241,7 @@ export const DropdownPopup = ({
     recalculateOnScroll: true,
     children: _jsxs("div", {
       ref: contentRef,
+      onKeyDown: handleKeydown,
       children: [searchField && isSearchInPopup ? _jsx("div", {
         className: "zen-dropdown-popup__search-container",
         children: _jsx(SearchInput, {
@@ -227,8 +253,12 @@ export const DropdownPopup = ({
           disabled: disabled,
           placeholder: placeholder || translate("Filter by group")
         })
-      }) : null, children]
+      }) : null, children, _jsx("div", {
+        tabIndex: 0,
+        onFocus: handleFocusOnSentinelItem,
+        className: "zen-dropdown-list__sentinel-item"
+      })]
     })
-  }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, disabled, handleTriggerClick, inputId, inputRef, inputValue, isOpenCombo, isSearchInPopup, onInputChange, placeholder, popupId, searchField, translate, triggerId, triggerRef]);
+  }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, disabled, handleFocusOnSentinelItem, handleKeydown, handleTriggerClick, inputId, inputRef, inputValue, isOpenCombo, isSearchInPopup, onInputChange, placeholder, popupId, searchField, translate, triggerId, triggerRef]);
   return isMobile ? memoizedMobileView : memoizedDesktopView;
 };

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[];