@geotab/zenith 3.7.0-beta.0 → 3.7.0

package/dist/dropdownRaw/dropdownRaw.js

@@ -62,6 +62,8 @@ const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/
 const formSectionProvider_1 = require("../formSection/utils/formSectionProvider");
 const dropdown_1 = require("../dropdown/dropdown");
 const zen_1 = require("../utils/zen");
+const isChildOf_1 = require("../utils/isChildOf");
+const keyboardHelpers_1 = require("../utils/keyboardHelpers");
 const DropdownRaw = props => {
   var _a, _b;
   const {
@@ -142,6 +144,8 @@ const DropdownRaw = props => {
   const popupId = (0, react_1.useId)();
   const abortToken = (0, react_1.useRef)(new AbortController());
   const triggerRef = (0, react_1.useRef)(null);
+  const listElementRef = (0, react_1.useRef)(null);
+  const nextFocusableItemRef = (0, react_1.useRef)(false);
   const comboboxRef = (0, react_1.useRef)(null);
   const inputRef = (0, react_1.useRef)(null);
   const contentRef = (0, react_1.useRef)(null);
@@ -309,6 +313,9 @@ const DropdownRaw = props => {
       type: stateActionType_1.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 = (0, react_1.useCallback)(val => {
     if (isFullSelectionMode && state.isAllSelected) {
@@ -408,11 +415,14 @@ const DropdownRaw = props => {
     });
   }, [isFullSelectionMode, state.isAllSelected, state.listData, state.isNestedList, state.selectedIds]);
   const handleClearClick = (0, react_1.useCallback)(() => {
+    var _a, _b;
     dispatchState({
       type: stateActionType_1.StateActionType.ResetSelection,
       payload: undefined
     });
-  }, []);
+    const focusableElements = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
+    (_b = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0]) === null || _b === void 0 ? void 0 : _b.focus();
+  }, [contentRef]);
   const handleCancelClick = (0, react_1.useCallback)(() => {
     dispatchState({
       type: stateActionType_1.StateActionType.ResetStateToGlobal,
@@ -672,6 +682,7 @@ 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]);
@@ -708,18 +719,27 @@ const DropdownRaw = props => {
     }
   }, [searchField, state.currentId, state.showList, contentRef]);
   (0, react_1.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(focusableSelector_1.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(focusableSelector_1.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]);
   (0, react_1.useEffect)(() => {
     const shouldExit = !getNamedItems || Object.keys(state.groupsMap).length === 0 && Object.keys(state.groupsMapSelected).length === 0 || getNamedItemsHasBeenCalled.current || state.groupsMapSelected.size === 0;
     if (shouldExit) {
@@ -751,6 +771,57 @@ 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 = (0, react_1.useMemo)(() => (0, dropdownHelper_1.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 = (0, react_1.useCallback)(e => {
+    const isChildOfListElements = listElementRef.current && e.target instanceof Node ? (0, isChildOf_1.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(focusableSelector_1.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 = (0, react_1.useCallback)(() => {
+    var _a;
+    if (isMobile) {
+      return;
+    }
+    const firstFocusable = (0, keyboardHelpers_1.getFirstFocusableItem)(contentRef.current);
+    if (firstFocusable && listElementRef.current && (0, isChildOf_1.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 = (0, react_1.useCallback)(() => {
+    var _a;
+    if (!state.showList) {
+      return;
+    }
+    const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+  }, [state.showList, contentRef]);
   const countSelected = (0, react_1.useMemo)(() => {
     var _a, _b;
     if (hasApplyButton && state.globalIsAllSelected || !hasApplyButton && state.isAllSelected) {
@@ -820,7 +891,8 @@ const DropdownRaw = props => {
         isMobile: isMobile,
         handleCheckboxChange: isCheckboxMode && !isMobile ? handleCheckboxChange : undefined,
         checkboxLabel: checkboxLabel,
-        isChecked: state.isChecked
+        isChecked: state.isChecked,
+        listElementRef: listElementRef
       });
     }
     return null;
@@ -870,7 +942,8 @@ const DropdownRaw = props => {
       triggerRef: triggerRef,
       inputRef: inputRef,
       buttonType: buttonType,
-      popupId: popupId
+      popupId: popupId,
+      handleFocusOnPopup: handleFocusOnPopup
     }, accessibilityProps)), (0, jsx_runtime_1.jsx)(dropdownPopup_1.DropdownPopup, {
       alignment: alignment,
       triggerRef: triggerRef,
@@ -893,6 +966,7 @@ const DropdownRaw = props => {
       handleClearClick: multiselect ? handleClearClick : handleSingleSelection.bind(this, true),
       handleTriggerClick: handleTriggerClick,
       onInputChange: onInputChange,
+      handleKeydown: handleKeydown,
       inputRef: inputRef,
       contentRef: contentRef,
       onReadyForFocus: handleReadyForFocus,
@@ -901,6 +975,7 @@ const DropdownRaw = props => {
       isChecked: state.isChecked,
       isSearchInPopup: chip,
       mobileSheetStackingClassName: mobileSheetStackingClassName,
+      handleFocusOnSentinelItem: handleFocusOnSentinelItem,
       children: getPopupContent
     })]
   });

package/dist/dropdownRaw/dropdownSearchableTrigger.d.ts

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

package/dist/dropdownRaw/dropdownSearchableTrigger.js

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

package/dist/dropdownRaw/dropdownTrigger.d.ts

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

package/dist/dropdownRaw/dropdownTrigger.js

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

package/dist/footerButtons/footerButtons.d.ts

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

package/dist/footerButtons/footerButtons.js

@@ -35,7 +35,7 @@ const getChildren = (children) => {
     }
     return (react_1.default.Children.count(children) === 1 ? [children] : react_1.default.Children.toArray(children).filter((child) => react_1.default.isValidElement(child)));
 };
-const FooterButtons = ({ className, children, isSticky = false }) => {
+const FooterButtons = ({ className, children, isSticky = false, ref }) => {
     const footerButtonsId = (0, useUniqueId_1.useUniqueId)();
     const driveComponentClassName = (0, useDriveClassName_1.useDriveClassName)("zen-footer-buttons");
     const maxLength = 3;
@@ -54,12 +54,7 @@ const FooterButtons = ({ className, children, isSticky = false }) => {
         });
         return clonedElements;
     }, [children, footerButtonsId]);
-    const containerClassNames = (0, classNames_1.classNames)([
-        "zen-footer-buttons",
-        isSticky && driveComponentClassName ? "zen-footer-buttons--sticky" : "",
-        driveComponentClassName || "",
-        className || ""
-    ]);
-    return (0, jsx_runtime_1.jsx)("div", { className: containerClassNames, children: childrenArray });
+    const containerClassNames = (0, classNames_1.classNames)(["zen-footer-buttons", isSticky && driveComponentClassName ? "zen-footer-buttons--sticky" : "", driveComponentClassName || "", className || ""]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: containerClassNames, ref: ref, children: childrenArray }));
 };
 exports.FooterButtons = FooterButtons;

package/dist/groupsFilterRaw/groupsFilterInitialState.js

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

package/dist/groupsFilterRaw/groupsFilterTrigger.js

@@ -112,6 +112,10 @@ const GroupsFilterTrigger = _a => {
       e.nativeEvent.stopImmediatePropagation();
       handleClick();
     }
+    if (e.key === "Tab" && isOpenPopup) {
+      e.preventDefault();
+      handleFocusOnPopup === null || handleFocusOnPopup === void 0 ? void 0 : handleFocusOnPopup();
+    }
   };
   const clickHandler = e => {
     if (e.target === inputRef.current && isOpenPopup) {

package/dist/index.css

@@ -6721,6 +6721,13 @@
 .zen-checkbox-list-with-action__color-info--hidden {
   display: none;
 }
+.zen-checkbox-list-with-action__sr-only {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
 .zen-checkbox-list-with-action.zen-checkbox-list-with-action--drive .zen-checkbox-list-with-action__action-checkbox,
 .zen-checkbox-list-with-action.zen-checkbox-list-with-action--drive-tablet .zen-checkbox-list-with-action__action-checkbox {
   height: 60px;
@@ -6860,6 +6867,13 @@
 .zen-dropdown-list__item--end {
   justify-content: flex-end;
 }
+.zen-dropdown-list__sentinel-item {
+  position: "absolute";
+  left: "-9999px";
+  width: "1px";
+  height: "1px";
+  opacity: 0;
+}
 .zen-dropdown-list__action-label {
   font-family: var(--main-font);
   font-size: 14px;

package/dist/nav/navItem/navItem.d.ts

@@ -27,6 +27,7 @@ export interface ILinkNavItem extends INavItemCommon {
 export interface IButtonNavItem extends INavItemCommon {
     onClick?: () => void;
     menuAlignment?: TAlignment;
+    onDropdownStateChange?: (isOpen: boolean) => void;
 }
 interface INavItemContext {
     parentLevel?: number;

package/dist/nav/navItem/navItem.js

@@ -73,9 +73,12 @@ const LinkNavItem = (_a) => {
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
-    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick"]);
+    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick, onDropdownStateChange } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick", "onDropdownStateChange"]);
     const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
     const { parentLevel = 0, closeParentMenu } = (0, react_1.useContext)(exports.NavItemContext);
+    (0, react_1.useEffect)(() => {
+        onDropdownStateChange === null || onDropdownStateChange === void 0 ? void 0 : onDropdownStateChange(menuOpen);
+    }, [menuOpen, onDropdownStateChange]);
     const triggerRef = (0, react_1.useRef)(null);
     const currentLevel = parentLevel + 1;
     const validChildren = react_1.Children.toArray(children).filter(child => {

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

@@ -252,5 +252,6 @@
     "Year to date": "Od začátku roku",
     "Time": "Čas",
     "Apply filter": "Použít filtr",
-    "Remove filter": "Odebrat filtr"
+    "Remove filter": "Odebrat filtr",
+    "Results": "Výsledky"
 }

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

@@ -252,5 +252,6 @@
     "Year to date": "Seit Jahresbeginn",
     "Time": "Zeit",
     "Apply filter": "Filter anwenden",
-    "Remove filter": "Filter entfernen"
+    "Remove filter": "Filter entfernen",
+    "Results": "Ergebnisse"
 }

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

@@ -316,5 +316,6 @@
     "This filter is currently applied.": "This filter is currently applied.",
     "Remove filter": "Remove filter",
     "Exit full screen table view": "Exit full screen table view",
-    "Close search": "Close search"
+    "Close search": "Close search",
+    "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."
 }

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

@@ -252,5 +252,6 @@
     "Year to date": "Año a la fecha",
     "Time": "Hora",
     "Apply filter": "Aplicar filtro",
-    "Remove filter": "Eliminar filtro"
+    "Remove filter": "Eliminar filtro",
+    "Results": "Resultados"
 }

package/dist/utils/localization/translations/fr-FR.json

@@ -252,5 +252,6 @@
     "Year to date": "L’année passée",
     "Time": "Heure",
     "Apply filter": "Appliquer filtre",
-    "Remove filter": "Supprimer filtre"
+    "Remove filter": "Supprimer filtre",
+    "Results": "Résultats"
 }

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

@@ -252,5 +252,6 @@
     "Year to date": "Cumul jusqu’à ce jour",
     "Time": "Heure",
     "Apply filter": "Appliquer les filtres",
-    "Remove filter": "Supprimer le filtre"
+    "Remove filter": "Supprimer le filtre",
+    "Results": "Résultats"
 }

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

@@ -252,5 +252,6 @@
     "Year to date": "Tahun hingga saat ini",
     "Time": "Waktu",
     "Apply filter": "Terapkan filter",
-    "Remove filter": "Hapus filter"
+    "Remove filter": "Hapus filter",
+    "Results": "Hasil"
 }

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

@@ -252,5 +252,6 @@
     "Year to date": "Dall'inizio dell'anno",
     "Time": "Tempo",
     "Apply filter": "Applicare filtro",
-    "Remove filter": "Rimuovere filtro"
+    "Remove filter": "Rimuovere filtro",
+    "Results": "Risultati"
 }

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

@@ -252,5 +252,6 @@
     "Year to date": "累計",
     "Time": "時間",
     "Apply filter": "フィルターを適用",
-    "Remove filter": "フィルターを削除"
+    "Remove filter": "フィルターを削除",
+    "Results": "結果"
 }

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

@@ -252,5 +252,6 @@
     "Year to date": "Tahun ini hingga tarikh ini",
     "Time": "Masa",
     "Apply filter": "Gunakan penyaring",
-    "Remove filter": "Keluarkan penyaring"
+    "Remove filter": "Keluarkan penyaring",
+    "Results": "Keputusan"
 }

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

@@ -252,5 +252,6 @@
     "Year to date": "Jaar tot heden",
     "Time": "Tijd",
     "Apply filter": "Filter toepassen",
-    "Remove filter": "Filter verwijderen"
+    "Remove filter": "Filter verwijderen",
+    "Results": "Resultaten"
 }

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

@@ -252,5 +252,6 @@
     "Year to date": "Od początku roku",
     "Time": "Czas",
     "Apply filter": "Zastosuj filtr",
-    "Remove filter": "Usuń filtr"
+    "Remove filter": "Usuń filtr",
+    "Results": "Wyniki"
 }

package/dist/utils/localization/translations/pt-BR.json

@@ -252,5 +252,6 @@
     "Year to date": "Acumulado no ano",
     "Time": "Hora",
     "Apply filter": "Aplicar filtros",
-    "Remove filter": "Remover filtro"
+    "Remove filter": "Remover filtro",
+    "Results": "Resultados"
 }

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