@geotab/zenith 3.6.3 → 3.7.0

package/README.md

@@ -54,6 +54,21 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+## 3.7.0
+
+- Improve `GroupsFilter` keyboard navigation: return focus to currently selected button after back navigation
+- Add loading state to `SummaryTile` component
+- Update `ToggleButton` accessibility role
+- Update React `Nav` component to emit event on Edit mode toggle
+- Improve Storybook documentation for `PillBox`, `FavoriteButton`, and `LineChartMini` components
+- Make `PillExpandable` less restrictive
+- Improve focused state in `Menu`
+- Add `PageHeader` documentation for new `Filters` component
+- Ensure keyboard accessibility for `Tooltip` in `SummaryCard` component
+- Fix drag & drop in the `Nav` component
+- Fix `NavEditSection` component issues
+- Add `onDropdownStateChange` callback to NavItem
+
 ### 3.6.3
 
 Patch for the `Nav` component.

package/dist/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/dist/absolute/absolute.js

@@ -19,7 +19,7 @@ const useScroll_1 = require("../commonHelpers/hooks/useScroll");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
-const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true }) => {
+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 = (0, react_1.useRef)(null);
     const prevScroll = (0, react_1.useRef)(0);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
@@ -38,7 +38,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
     const renderPopup = () => {
         var _a, _b;
         if (isOpen) {
-            const result = ((0, jsx_runtime_1.jsx)("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: (0, classNames_1.classNames)(["zen-absolute", darkClassName, className || ""]), children: children })));
+            const result = ((0, jsx_runtime_1.jsx)("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, tabIndex: -1, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: (0, classNames_1.classNames)(["zen-absolute", darkClassName, className || ""]), children: children })));
             if (inline) {
                 return result;
             }
@@ -94,7 +94,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             if (useTrapFocusWithTrigger === "none") {
                 return undefined;
             }
-            if (useTrapFocusWithTrigger !== "withTrigger") {
+            if (useTrapFocusWithTrigger !== "withTrigger" && focusOnOpen) {
                 if (firstFocusable) {
                     firstFocusable.focus();
                 }
@@ -108,7 +108,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             };
         }
         return () => { };
-    }, [isOpen, onOpenChange, triggerRef, useTrapFocusWithTrigger, stateFullChilds]);
+    }, [isOpen, onOpenChange, triggerRef, useTrapFocusWithTrigger, stateFullChilds, focusOnOpen]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (isOpen) {

package/dist/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/dist/checkbox/checkbox.js

@@ -46,21 +46,18 @@ const checkboxIconCheckmark_1 = require("./checkboxIconCheckmark");
 const checkboxIconMinus_1 = require("./checkboxIconMinus");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 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 = (0, checkboxUtils_1.getCheckboxState)(checked, indeterminate);
     const generatedId = react_1.default.useId();
     const intId = id || generatedId;
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox");
     const isMobile = (0, useMobile_1.useMobile)();
     const checkboxIconClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
-    const checkbox = (0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title }, rest));
-    const iconAndLabel = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? (0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) :
-                    state === checkboxState_1.CheckboxState.On ? (0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) : null }), children
-                ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })
-                : null] });
+    const checkbox = ((0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
+    const iconAndLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === checkboxState_1.CheckboxState.On ? ((0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children }) : null] }));
     if (wrapped) {
-        return (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] });
+        return ((0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));
     }
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] }));
 };
 exports.Checkbox = Checkbox;

package/dist/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/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -87,6 +87,7 @@ 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.");
 const checkbox_1 = require("../checkbox/checkbox");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
@@ -98,7 +99,8 @@ const CheckboxListWithAction = ({
   onChange,
   onClick,
   search = [],
-  className
+  className,
+  handleTab
 }) => {
   const {
     translate
@@ -106,6 +108,11 @@ const CheckboxListWithAction = ({
   const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox-list-with-action");
   const listId = (0, react_1.useId)();
   const checkboxId = `${listId}_check_list-item_`;
+  const navigationInstructionsId = `${listId}_navigation_instructions`;
+  const listRef = (0, react_1.useRef)(null);
+  const [focusedRowIndex, setFocusedRowIndex] = (0, react_1.useState)(0);
+  const [focusedElementType, setFocusedElementType] = (0, react_1.useState)("checkbox");
+  const isInitialized = (0, react_1.useRef)(false);
   const handleChange = e => {
     const evtTarget = e.target;
     const elId = evtTarget.getAttribute("id").replace(checkboxId, "");
@@ -120,7 +127,171 @@ 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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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
+  (0, react_1.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)
+  (0, react_1.useEffect)(() => {
+    if (isInitialized.current) {
+      updateTabIndex(focusedRowIndex, focusedElementType);
+    }
+  }, [focusedRowIndex, focusedElementType, updateTabIndex]);
   const getLabelColorInfo = (color, withRightPadding, isHidden, extraArgs) => {
     if (!color) {
       return null;
@@ -178,7 +349,8 @@ const CheckboxListWithAction = ({
       type: "button",
       onClick: handleClick,
       title: title,
-      className: classN
+      className: classN,
+      tabIndex: -1
     }, otherArgs, {
       children: childEl
     })) : (0, jsx_runtime_1.jsx)("div", {
@@ -208,6 +380,9 @@ const CheckboxListWithAction = ({
     };
     return optionsArr ? (0, jsx_runtime_1.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);
@@ -223,7 +398,9 @@ 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}`);
@@ -235,7 +412,12 @@ const CheckboxListWithAction = ({
     children: [label ? (0, jsx_runtime_1.jsx)("div", {
       className: "zen-checkbox-list-with-action__title",
       children: label
-    }) : null, build(options)]
+    }) : null, build(options), (0, jsx_runtime_1.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.")
+    })]
   });
 };
 exports.CheckboxListWithAction = CheckboxListWithAction;

package/dist/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/dist/controlledPopup/controlledPopup.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
-const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet }) => {
+const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen }) => {
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const isClientReady = (0, useClientReady_1.useClientReady)();
@@ -24,6 +24,6 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.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 ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.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 }));
 };
 exports.ControlledPopup = ControlledPopup;

package/dist/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/dist/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/dist/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/dist/dropdownRaw/dropdownList.js

@@ -349,7 +349,8 @@ const DropdownList = ({
   isMobile,
   handleCheckboxChange,
   checkboxLabel,
-  isChecked
+  isChecked,
+  listElementRef
 }) => {
   const {
     translate
@@ -360,6 +361,13 @@ const DropdownList = ({
   const handleSelectAllClick = () => {
     onSelectAllClick(isAllSelected);
   };
+  const handleBackButtonKeyDown = (0, react_1.useCallback)(event => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      onBackButtonClick();
+    }
+  }, [onBackButtonClick]);
+  const componentRef = (0, react_1.useRef)(null);
   const handleChange = (0, react_1.useCallback)(value => {
     onChange(value);
   }, [onChange]);
@@ -380,10 +388,11 @@ 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) => (0, jsx_runtime_1.jsx)("button", {
+  const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown) => (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
@@ -422,6 +431,7 @@ const DropdownList = ({
     };
     return (0, jsx_runtime_1.jsx)("div", {
       className: "zen-dropdown-list__elements",
+      ref: listElementRef,
       children: isMultiselect ? (0, jsx_runtime_1.jsx)(checkboxListWithAction_1.CheckboxListWithAction, {
         options: listData,
         label: "",
@@ -439,10 +449,11 @@ 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 (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classNames_1.classNames)(["zen-dropdown-list", driveComponentClass || ""])
   }, styleWidth, {
+    ref: componentRef,
     children: [filterName ? (0, jsx_runtime_1.jsx)("div", {
       className: "zen-dropdown-list__label",
       children: filterName
@@ -455,7 +466,7 @@ const DropdownList = ({
       })
     }) : null, backButtonName ? (0, jsx_runtime_1.jsx)("div", {
       className: "zen-dropdown-list__item-wrapper",
-      children: getActionButton(backButtonName, translate("Back"), iconBackArrow_1.IconBackArrow, false, onBackButtonClick, "large")
+      children: getActionButton(backButtonName, translate("Back"), iconBackArrow_1.IconBackArrow, false, onBackButtonClick, "large", handleBackButtonKeyDown)
     }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? (0, jsx_runtime_1.jsxs)("div", {
       className: "zen-dropdown-list__footer",
       children: [(0, jsx_runtime_1.jsx)(button_1.Button, {

package/dist/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/dist/dropdownRaw/dropdownPopup.js

@@ -19,6 +19,7 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const footerButtons_1 = require("../footerButtons/footerButtons");
 const checkbox_1 = require("../checkbox/checkbox");
 const useScrollWithAndroidKeyboard_1 = require("../utils/useScrollWithAndroidKeyboard");
+const keyboardHelpers_1 = require("../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");
@@ -127,12 +128,16 @@ const DropdownPopup = ({
   handleCheckboxChange,
   checkboxLabel,
   isChecked,
-  popupId
+  popupId,
+  handleKeydown,
+  handleFocusOnSentinelItem
 }) => {
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
   const triggerId = (0, react_1.useId)();
+  const footerButtonsRef = (0, react_1.useRef)(null);
+  const mobileContentRef = (0, react_1.useRef)(null);
   const {
     handleFocus,
     handleBlur,
@@ -141,7 +146,22 @@ const DropdownPopup = ({
   const memoizedHandleHide = (0, react_1.useCallback)(() => {
     handleTriggerClick(false);
   }, [handleTriggerClick]);
-  const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+  const handleMobileFocusOnSentinelItem = (0, react_1.useCallback)(() => {
+    if (!isMobile) {
+      return;
+    }
+    let nextFocusableElement = footerButtonsRef.current ? (0, keyboardHelpers_1.getFirstFocusableItem)(footerButtonsRef.current) : null;
+    if (nextFocusableElement) {
+      nextFocusableElement.focus();
+      return;
+    }
+    nextFocusableElement = (0, keyboardHelpers_1.getFirstFocusableItem)(mobileContentRef.current);
+    nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
+    return;
+  }, [isMobile, footerButtonsRef, mobileContentRef]);
+  const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
+    onKeyDown: handleKeydown,
+    ref: mobileContentRef,
     children: [searchField ? (0, jsx_runtime_1.jsx)("div", {
       className: "zen-dropdown-mobile-sheet__search-container",
       children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, {
@@ -165,13 +185,18 @@ const DropdownPopup = ({
     }) : null, (0, jsx_runtime_1.jsx)("div", {
       ref: contentRef,
       children: children
+    }), (0, jsx_runtime_1.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 = (0, react_1.useMemo)(() => {
     if (!isWithFooter) {
       return null;
     }
     return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
+      ref: footerButtonsRef,
       children: [hasApplyButton ? (0, jsx_runtime_1.jsx)(button_1.Button, {
         onClick: handleApplyClick,
         type: buttonType_1.ButtonType.Primary,
@@ -224,6 +249,7 @@ const DropdownPopup = ({
     recalculateOnScroll: true,
     children: (0, jsx_runtime_1.jsxs)("div", {
       ref: contentRef,
+      onKeyDown: handleKeydown,
       children: [searchField && isSearchInPopup ? (0, jsx_runtime_1.jsx)("div", {
         className: "zen-dropdown-popup__search-container",
         children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, {
@@ -235,9 +261,13 @@ const DropdownPopup = ({
           disabled: disabled,
           placeholder: placeholder || translate("Filter by group")
         })
-      }) : null, children]
+      }) : null, children, (0, jsx_runtime_1.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;
 };
 exports.DropdownPopup = DropdownPopup;