@geotab/zenith 3.6.3 → 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/groupsFilterCurrentlySelectedState.js

@@ -134,9 +134,15 @@ const GroupsFilterCurrentlySelectedState = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const togglerId = (0, react_1.useId)();
-  const getActionButton = (label, title, icon, handleClick) => (0, jsx_runtime_1.jsx)("button", {
+  const handleBackButtonKeyDown = (0, react_1.useCallback)(event => {
+    if (event.key === "ArrowLeft") {
+      onBackButtonClick();
+    }
+  }, [onBackButtonClick]);
+  const getActionButton = (label, title, icon, handleClick, handleKeyDown) => (0, jsx_runtime_1.jsx)("button", {
     type: "button",
     onClick: handleClick,
+    onKeyDown: handleKeyDown,
     className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--interactive zen-groups-filter-menu__action-button zen-groups-filter-menu__action-button-back",
     title: title,
     children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
@@ -156,7 +162,7 @@ const GroupsFilterCurrentlySelectedState = ({
   };
   return (0, jsx_runtime_1.jsxs)("div", {
     className: "zen-groups-filter-menu__content-selected",
-    children: [getActionButton(translate("Back"), translate("Back"), iconBackArrow_1.IconBackArrow, onBackButtonClick), (0, jsx_runtime_1.jsx)("div", {
+    children: [getActionButton(translate("Back"), translate("Back"), iconBackArrow_1.IconBackArrow, onBackButtonClick, handleBackButtonKeyDown), (0, jsx_runtime_1.jsx)("div", {
       className: "zen-groups-filter-menu__item-wrapper",
       children: (0, jsx_runtime_1.jsx)(toggleButtonRaw_1.ToggleButtonRaw, {
         onChange: handleTogglerChange,

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/groupsFilterRaw.js

@@ -298,6 +298,7 @@ const GroupsFilterRaw = props => {
   const inputRef = (0, react_1.useRef)(null);
   const emptyInputRef = (0, react_1.useRef)(null);
   const triggerRef = (0, react_1.useRef)(null);
+  const nextFocusableItemRef = (0, react_1.useRef)(false);
   const menuRef = (0, react_1.useRef)(null);
   const prevInitialState = (0, react_1.useRef)(initialFilterStateInner);
   const prevSearchField = (0, react_1.useRef)("");
@@ -320,6 +321,7 @@ const GroupsFilterRaw = props => {
       type: uiStateActionType_1.UiStateActionType.SetStep,
       payload: newStep
     });
+    nextFocusableItemRef.current = true;
     if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && newStep !== groupsFilterInterfaces_1.FilterMenuStep.Initial) {
       inputRef.current.value = "";
       dispatchUiState({
@@ -461,6 +463,7 @@ const GroupsFilterRaw = props => {
       payload: id
     });
     handleSetStep(id ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    nextFocusableItemRef.current = true;
   }, [dispatchUiState, handleSetStep]);
   const handleCheckboxItemAdjustmentClick = (0, react_1.useCallback)(value => {
     if (value.id === groupsFilterBox_1.ADVANCED_FILTER_ID) {
@@ -493,6 +496,7 @@ const GroupsFilterRaw = props => {
   }, [dispatchState, dispatchUiState, state.advancedFilterState, state.frozenState.advancedFilterState, uiState.uncheckedAdvancedState, uiState.uncheckedAdjustmentIds]);
   const basicHandleBackButtonClick = (0, react_1.useCallback)(() => {
     handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    nextFocusableItemRef.current = "button.zen-groups-filter-menu__currently-selected-button";
   }, [handleSetStep]);
   const handleBackButtonClick = (0, react_1.useCallback)(() => {
     const currentEl = uiState.currentAdjustmentId ? (0, stateReducerHelper_1.getGroupsTreeItem)(state, uiState.currentAdjustmentId) : undefined;
@@ -506,6 +510,11 @@ const GroupsFilterRaw = props => {
       payload: isNotRoot ? currentEl.parent.id : undefined
     });
     handleSetStep(isNotRoot ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    if (!isNotRoot) {
+      nextFocusableItemRef.current = `button[data-btn=${uiState.currentAdjustmentId}]`;
+      return;
+    }
+    nextFocusableItemRef.current = true;
   }, [basicHandleBackButtonClick, handleSetStep, state, uiState.currentAdjustmentId]);
   const handleHomeButtonClick = (0, react_1.useCallback)(() => {
     handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
@@ -513,6 +522,7 @@ const GroupsFilterRaw = props => {
       type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId,
       payload: undefined
     });
+    nextFocusableItemRef.current = true;
   }, [handleSetStep, uiState.currentAdjustmentId, dispatchUiState]);
   const handleCurrentlySelectedClick = (0, react_1.useCallback)(() => {
     handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected);
@@ -714,6 +724,23 @@ const GroupsFilterRaw = props => {
     }
     (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
   }, [inputRef]);
+  const handleFocusOnPopup = (0, react_1.useCallback)(() => {
+    var _a;
+    const firstFocusable = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+  }, [menuRef]);
+  (0, react_1.useEffect)(() => {
+    var _a, _b, _c;
+    if (nextFocusableItemRef.current) {
+      const firstFocusable = chip || isMobile ? (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+      const nextFocusable = typeof nextFocusableItemRef.current === "string" ? (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(nextFocusableItemRef.current) : firstFocusable;
+      if (nextFocusable) {
+        nextFocusable.focus();
+        nextFocusableItemRef.current = false;
+        return;
+      }
+    }
+  }, [uiState.currentAdjustmentId, chip, menuRef, nextFocusableItemRef, isMobile]);
   (0, react_1.useEffect)(() => {
     var _a, _b, _c, _d;
     if (!uiState.isOpen) {
@@ -723,13 +750,18 @@ const GroupsFilterRaw = props => {
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       prevSearchField.current = uiState.searchValue;
     } else {
-      const firstFocusable = chip ? (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+      const firstFocusable = chip || isMobile ? (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
       prevSearchField.current = "";
-      if (firstFocusable && !((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value)) {
-        firstFocusable.focus();
+      if (nextFocusableItemRef.current) {
+        const nextFocusable = typeof nextFocusableItemRef.current === "string" ? (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.querySelector(nextFocusableItemRef.current) : firstFocusable;
+        if (nextFocusable) {
+          nextFocusable.focus();
+          nextFocusableItemRef.current = false;
+          return;
+        }
       }
     }
-  }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip]);
+  }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip, isMobile]);
   (0, react_1.useEffect)(() => {
     var _a;
     uiState.isOpen && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
@@ -763,6 +795,7 @@ const GroupsFilterRaw = props => {
   const selectedCount = (0, stateReducerHelper_1.getFrozenCount)(state);
   const isStateHasData = Object.keys(state.groupsMap).length > 0;
   const isApplyDisabled = !(0, stateReducerHelper_1.isStateChanged)(state);
+  const isDataEmpty = dataItems.length === 0;
   const memoizedContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
     className: (0, classNames_1.classNames)(["zen-groups-filter-menu", isMobile ? "zen-groups-filter-menu--mobile" : ""]),
     ref: menuRef,
@@ -776,7 +809,7 @@ const GroupsFilterRaw = props => {
         id: groupsFilterId,
         placeholder: translate("Filter by group")
       })
-    }) : null, isStateHasData && !uiState.hasError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, {
+    }) : null, isStateHasData && !uiState.hasError && !(uiState.isLoading && isDataEmpty) && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, {
       onCancelClick: handleCancel,
       onApplyClick: handleApply,
       onResetClick: handleReset,
@@ -806,10 +839,10 @@ const GroupsFilterRaw = props => {
         onRelationChange: onRelationChange,
         children: getGroupsBox()
       })]
-    }), !uiState.hasError && !isStateHasData && !Object.keys(state.groupsMap).length && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, {
+    }), (!uiState.hasError && !isStateHasData && !Object.keys(state.groupsMap).length || uiState.isLoading && isDataEmpty) && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, {
       className: "zen-groups-filter__waiting"
     })]
-  }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.hasError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate, isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult, getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick]);
+  }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.hasError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate, isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult, getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick, uiState.isLoading, isDataEmpty]);
   const memoizedFooterButtons = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
     children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
       onClick: handleApply,
@@ -887,7 +920,7 @@ const GroupsFilterRaw = props => {
     isOpen: uiState.isOpen,
     className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", classNamePopup || ""]),
     onOpenChange: onOptionsToggle,
-    useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger",
+    useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "none",
     shouldHoldScroll: true,
     triggerRef: triggerRef,
     ariaLabel: translate("Organization groups filter"),
@@ -928,7 +961,8 @@ const GroupsFilterRaw = props => {
       ref: triggerRef,
       fullSize: fullSize,
       placeholder: groupPlaceHolder,
-      popupId: popupId
+      popupId: popupId,
+      handleFocusOnPopup: handleFocusOnPopup
     }), isMobile ? memoizedMobileView : memoizedDesktopView, uiState.isOpenAdvancedFilter && getAdvancedDialog]
   });
 };

package/dist/groupsFilterRaw/groupsFilterTrigger.d.ts

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

package/dist/groupsFilterRaw/groupsFilterTrigger.js

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