@geotab/zenith 3.6.3 → 3.7.0

package/dist/utils/localization/translations/sv.json

@@ -252,5 +252,6 @@
     "Year to date": "År till dagens datum",
     "Time": "Tid",
     "Apply filter": "Tillämpa filter",
-    "Remove filter": "Ta bort filter"
+    "Remove filter": "Ta bort filter",
+    "Results": "Resultat"
 }

package/dist/utils/localization/translations/th.json

@@ -252,5 +252,6 @@
     "Year to date": "ต้นปีถึงปัจจุบัน",
     "Time": "เวลา",
     "Apply filter": "ใช้ตัวกรอง",
-    "Remove filter": "ลบตัวกรอง"
+    "Remove filter": "ลบตัวกรอง",
+    "Results": "ผลลัพธ์"
 }

package/dist/utils/localization/translations/tr.json

@@ -252,5 +252,6 @@
     "Year to date": "Yılbaşından bugüne kadar",
     "Time": "Zaman",
     "Apply filter": "Filtreyi uygula",
-    "Remove filter": "Filtreyi kaldır"
+    "Remove filter": "Filtreyi kaldır",
+    "Results": "Sonuçlar"
 }

package/dist/utils/localization/translations/zh-Hans.json

@@ -252,5 +252,6 @@
     "Year to date": "年初至今",
     "Time": "时间",
     "Apply filter": "应用筛选器",
-    "Remove filter": "删除筛选器"
+    "Remove filter": "删除筛选器",
+    "Results": "结果"
 }

package/esm/absolute/absolute.d.ts

@@ -23,5 +23,7 @@ export interface IAbsolute extends IZenComponentProps {
     alignmentsFn?: IAlignment;
     recalculateOnScroll?: boolean;
     recalculateTrigger?: boolean;
+    /** Whether to focus the first focusable element when popup opens. Default: true */
+    focusOnOpen?: boolean;
 }
-export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;
+export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;

package/esm/absolute/absolute.js

@@ -16,7 +16,7 @@ import { useScroll } from "../commonHelpers/hooks/useScroll";
 import { getScrollableParent } from "../utils/getScrollableParent";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
-export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true }) => {
+export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
     const popupRef = useRef(null);
     const prevScroll = useRef(0);
     const { dark } = useContext(themeContext);
@@ -35,7 +35,7 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
     const renderPopup = () => {
         var _a, _b;
         if (isOpen) {
-            const result = (_jsx("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: classNames(["zen-absolute", darkClassName, className || ""]), children: children })));
+            const result = (_jsx("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, tabIndex: -1, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: classNames(["zen-absolute", darkClassName, className || ""]), children: children })));
             if (inline) {
                 return result;
             }
@@ -91,7 +91,7 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
             if (useTrapFocusWithTrigger === "none") {
                 return undefined;
             }
-            if (useTrapFocusWithTrigger !== "withTrigger") {
+            if (useTrapFocusWithTrigger !== "withTrigger" && focusOnOpen) {
                 if (firstFocusable) {
                     firstFocusable.focus();
                 }
@@ -105,7 +105,7 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
             };
         }
         return () => { };
-    }, [isOpen, onOpenChange, triggerRef, useTrapFocusWithTrigger, stateFullChilds]);
+    }, [isOpen, onOpenChange, triggerRef, useTrapFocusWithTrigger, stateFullChilds, focusOnOpen]);
     useEffect(() => {
         var _a;
         if (isOpen) {

package/esm/checkbox/checkbox.d.ts

@@ -13,5 +13,7 @@ export interface ICheckbox extends IZenComponentProps {
     reverse?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     wrapped?: boolean;
+    tabIndex?: number;
+    describedBy?: string;
 }
-export declare const Checkbox: ({ reverse, fullWidth, id, checked, indeterminate, title, className, children, disabled, wrapped, ...rest }: ICheckbox) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ reverse, fullWidth, id, checked, indeterminate, title, className, children, disabled, wrapped, describedBy, ...rest }: ICheckbox) => import("react/jsx-runtime").JSX.Element;

package/esm/checkbox/checkbox.js

@@ -20,20 +20,17 @@ import { CheckboxIconCheckmark } from "./checkboxIconCheckmark";
 import { CheckboxIconMinus } from "./checkboxIconMinus";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 export const Checkbox = (_a) => {
-    var { reverse, fullWidth, id, checked, indeterminate, title, className = "", children, disabled, wrapped } = _a, rest = __rest(_a, ["reverse", "fullWidth", "id", "checked", "indeterminate", "title", "className", "children", "disabled", "wrapped"]);
+    var { reverse, fullWidth, id, checked, indeterminate, title, className = "", children, disabled, wrapped, describedBy } = _a, rest = __rest(_a, ["reverse", "fullWidth", "id", "checked", "indeterminate", "title", "className", "children", "disabled", "wrapped", "describedBy"]);
     const state = getCheckboxState(checked, indeterminate);
     const generatedId = React.useId();
     const intId = id || generatedId;
     const driveClasses = useDriveClassName("zen-checkbox");
     const isMobile = useMobile();
     const checkboxIconClasses = useMemo(() => classNames(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
-    const checkbox = _jsx(TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title }, rest));
-    const iconAndLabel = _jsxs(_Fragment, { children: [_jsx("div", { className: "zen-checkbox__box", children: state === CheckboxState.Indeterminate ? _jsx(CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) :
-                    state === CheckboxState.On ? _jsx(CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) : null }), children
-                ? _jsx("div", { className: classNames(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })
-                : null] });
+    const checkbox = (_jsx(TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
+    const iconAndLabel = (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-checkbox__box", children: state === CheckboxState.Indeterminate ? (_jsx(CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === CheckboxState.On ? (_jsx(CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? _jsx("div", { className: classNames(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children }) : null] }));
     if (wrapped) {
-        return _jsxs("label", { className: classNames(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, _jsx("div", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] });
+        return (_jsxs("label", { className: classNames(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, _jsx("div", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));
     }
-    return _jsxs("div", { className: classNames(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, _jsx("label", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] });
+    return (_jsxs("div", { className: classNames(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, _jsx("label", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] }));
 };

package/esm/checkboxListWithAction/checkboxListWithAction.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./checkboxListWithAction.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IColor } from "../groupsFilterRaw/groupsFilterInterfaces";
@@ -23,6 +24,7 @@ export interface ICheckboxListWithAction extends IZenComponentProps {
     search?: string[];
     onChange: (value: IChangeCheckbox) => void;
     onClick: (id: string) => void;
+    handleTab?: (e: React.KeyboardEvent, shift?: boolean) => void;
 }
-export declare const CheckboxListWithAction: ({ label, options, onChange, onClick, search, className }: ICheckboxListWithAction) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxListWithAction: ({ label, options, onChange, onClick, search, className, handleTab }: ICheckboxListWithAction) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

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/controlledPopup/controlledPopup.d.ts

@@ -27,5 +27,7 @@ export interface IControlledPopup extends IZenComponentProps {
     ariaLabelledby?: string;
     recalculateOnScroll?: boolean;
     preventAttributesAutoSet?: boolean;
+    /** Whether to focus the first focusable element when popup opens. Default: true */
+    focusOnOpen?: boolean;
 }
-export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;

package/esm/controlledPopup/controlledPopup.js

@@ -3,7 +3,7 @@ import { useEffect, useId } from "react";
 import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
-export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet }) => {
+export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen }) => {
     const autoId = useId();
     const popupId = id || autoId;
     const isClientReady = useClientReady();
@@ -21,5 +21,5 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return (_jsx(Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children }));
+    return (_jsx(Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children }));
 };

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;
 };