@geotab/zenith 3.11.0 → 3.11.1-beta.0

package/dist/selectList/selectList.js

@@ -1,16 +1,19 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.PassiveSelectList = exports.SelectList = exports.defaultListItemHeight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -19,6 +22,60 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const keyboard_1 = require("../commonHelpers/keyboard");
 const selectList_actionTypes_1 = require("./selectList.actionTypes");
 const selectList_helpers_1 = require("./selectList.helpers");
+injectString("cs", "Checked", "Za\u0161krtnuto");
+injectString("da-DK", "Checked", "Markeret");
+injectString("de", "Checked", "Aktiviert");
+injectString("en", "Checked", "Checked");
+injectString("es", "Checked", "Marcado");
+injectString("fi-FI", "Checked", "Valittu");
+injectString("fr", "Checked", "Coch\xE9");
+injectString("fr-FR", "Checked", "Coch\xE9");
+injectString("hu-HU", "Checked", "Bejel\xF6lve");
+injectString("id", "Checked", "Dicentang");
+injectString("it", "Checked", "Selezionato");
+injectString("ja", "Checked", "\u30C1\u30A7\u30C3\u30AF\u6E08\u307F");
+injectString("ko-KR", "Checked", "\uC120\uD0DD\uB428");
+injectString("ms", "Checked", "Ditanda");
+injectString("nb-NO", "Checked", "Merket");
+injectString("nl", "Checked", "Aangevinkt");
+injectString("pl", "Checked", "Zaznaczono");
+injectString("pt-BR", "Checked", "Marcado");
+injectString("pt-PT", "Checked", "Marcado");
+injectString("sk-SK", "Checked", "Za\u0161krtnut\xE9");
+injectString("sv", "Checked", "Markerad");
+injectString("th", "Checked", "\u0E17\u0E33\u0E40\u0E04\u0E23\u0E37\u0E48\u0E2D\u0E07\u0E2B\u0E21\u0E32\u0E22\u0E41\u0E25\u0E49\u0E27");
+injectString("tr", "Checked", "\u0130\u015Faretlendi");
+injectString("zh-Hans", "Checked", "\u5DF2\u9009\u4E2D");
+injectString("zh-TW", "Checked", "\u5DF2\u52FE\u9078");
+injectString("ro-RO", "Checked", "Bifat");
+injectString("ar-SA", "Checked", "\u0645\u062D\u062F\u062F");
+injectString("cs", "Unchecked", "Neza\u0161krtnuto");
+injectString("da-DK", "Unchecked", "Ikke markeret");
+injectString("de", "Unchecked", "Deaktiviert");
+injectString("en", "Unchecked", "Unchecked");
+injectString("es", "Unchecked", "Sin marcar");
+injectString("fi-FI", "Unchecked", "Ei valittu");
+injectString("fr", "Unchecked", "Non coch\xE9");
+injectString("fr-FR", "Unchecked", "Non coch\xE9");
+injectString("hu-HU", "Unchecked", "Nincs bejel\xF6lve");
+injectString("id", "Unchecked", "Tidak dicentang");
+injectString("it", "Unchecked", "Non selezionato");
+injectString("ja", "Unchecked", "\u672A\u30C1\u30A7\u30C3\u30AF");
+injectString("ko-KR", "Unchecked", "\uC120\uD0DD \uC548 \uB428");
+injectString("ms", "Unchecked", "Tidak ditanda");
+injectString("nb-NO", "Unchecked", "Ikke merket");
+injectString("nl", "Unchecked", "Niet aangevinkt");
+injectString("pl", "Unchecked", "Odznaczono");
+injectString("pt-BR", "Unchecked", "Desmarcado");
+injectString("pt-PT", "Unchecked", "Desmarcado");
+injectString("sk-SK", "Unchecked", "Neza\u0161krtnut\xE9");
+injectString("sv", "Unchecked", "Avmarkerad");
+injectString("th", "Unchecked", "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E17\u0E33\u0E40\u0E04\u0E23\u0E37\u0E48\u0E2D\u0E07\u0E2B\u0E21\u0E32\u0E22");
+injectString("tr", "Unchecked", "\u0130\u015Faretlenmedi");
+injectString("zh-Hans", "Unchecked", "\u672A\u9009\u4E2D");
+injectString("zh-TW", "Unchecked", "\u672A\u52FE\u9078");
+injectString("ro-RO", "Unchecked", "Nebifat");
+injectString("ar-SA", "Unchecked", "\u063A\u064A\u0631 \u0645\u062D\u062F\u062F");
 const selectList_reducer_1 = require("./selectList.reducer");
 const selectListItem_1 = require("./selectListItem");
 const isChildOf_1 = require("../utils/isChildOf");
@@ -26,129 +83,411 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const react_2 = require("react");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
 const zen_1 = require("../utils/zen");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const reactHelpers_1 = require("../commonHelpers/reactHelpers/reactHelpers");
 exports.defaultListItemHeight = 40;
 const MemoizedSelectListItem = (0, react_2.memo)(selectListItem_1.SelectListItem);
-const SelectListInnerComp = ({ id, items, value, disabled, activeIndex = -1, title, multiselect = false, showCheckbox = false, standalone, className = "", onClickItem, onChangeItem, onKeyDown, onFocus, onBlur, style = {}, ref: listRef }) => {
-    var _a;
-    const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-select-list");
-    const state = (0, selectList_helpers_1.getInitialState)({ items, value, multiselect });
-    state.activeIndex = activeIndex;
-    return ((0, jsx_runtime_1.jsx)("ul", { id: id, ref: listRef, className: (0, classNames_1.classNames)(["zen-select-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? (0, selectList_helpers_1.getItemIdByIndex)(state.itemsState, state.activeIndex) || ((_a = items.find(el => !el.disabled)) === null || _a === void 0 ? void 0 : _a.id) : undefined, "aria-label": title, "aria-disabled": disabled, tabIndex: standalone && !disabled ? 0 : -1, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, style: style, children: items.map((item, index) => ((0, react_1.createElement)(MemoizedSelectListItem, Object.assign({}, item, { className: (0, classNames_1.classNames)(["zen-select-list__item", item.className || ""]), key: item.id, showCheckbox: showCheckbox, state: state.itemsState.get(item.id), focused: state.activeIndex === index, onChange: onChangeItem, onClick: onClickItem }), item.children))) }));
+const SelectListInnerComp = ({
+  id,
+  items,
+  value,
+  disabled,
+  activeIndex = -1,
+  title,
+  multiselect = false,
+  showCheckbox = false,
+  standalone,
+  className = "",
+  onClickItem,
+  onChangeItem,
+  onFocusItem,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  style = {},
+  ref: listRef
+}) => {
+  var _a;
+  const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-select-list");
+  const state = (0, selectList_helpers_1.getInitialState)({
+    items,
+    value,
+    multiselect
+  });
+  state.activeIndex = activeIndex;
+  return (0, jsx_runtime_1.jsx)("ul", {
+    id: id,
+    ref: listRef,
+    className: (0, classNames_1.classNames)(["zen-select-list", driveComponentClass || "", className]),
+    role: showCheckbox ? "menu" : "listbox",
+    "aria-multiselectable": showCheckbox ? undefined : multiselect,
+    "aria-activedescendant": standalone && !showCheckbox ? (0, selectList_helpers_1.getItemIdByIndex)(state.itemsState, state.activeIndex) || ((_a = items.find(el => !el.disabled)) === null || _a === void 0 ? void 0 : _a.id) : undefined,
+    "aria-label": title,
+    "aria-disabled": disabled,
+    tabIndex: standalone && !disabled && !showCheckbox ? 0 : -1,
+    onKeyDown: onKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    style: style,
+    children: items.map((item, index) => (0, react_1.createElement)(MemoizedSelectListItem, Object.assign({}, item, {
+      className: (0, classNames_1.classNames)(["zen-select-list__item", item.className || ""]),
+      key: item.id,
+      showCheckbox: showCheckbox,
+      state: state.itemsState.get(item.id),
+      focused: state.activeIndex === index,
+      onChange: onChangeItem,
+      onClick: onClickItem,
+      onFocusItem: onFocusItem
+    }), item.children))
+  });
 };
 SelectListInnerComp.displayName = "SelectListInnerComp";
 const SelectListInner = (0, react_2.memo)(SelectListInnerComp);
-const SelectList = (_a) => {
-    var { items: outerItems, value = new Map(), multiselect = false, selectItemOnFocus = true, forceSelection = false, disabled, onChange, onClick } = _a, rest = __rest(_a, ["items", "value", "multiselect", "selectItemOnFocus", "forceSelection", "disabled", "onChange", "onClick"]);
-    const items = (0, react_2.useMemo)(() => outerItems, [outerItems]);
-    const listRef = (0, react_2.useRef)(null);
-    const [state, dispatchState] = (0, react_2.useReducer)(selectList_reducer_1.selectListReducer, { items, value, multiselect }, selectList_helpers_1.getInitialState);
-    const innerValue = (0, react_2.useMemo)(() => JSON.stringify(Array.from((0, selectList_helpers_1.getInitialState)({ items, value, multiselect }).itemsState)), [items, value, multiselect]);
-    (0, react_2.useEffect)(() => {
-        const parsedValue = JSON.parse(innerValue);
-        dispatchState({ type: selectList_actionTypes_1.ListAction.Reset, payload: { items, value: new Map(parsedValue), multiselect } });
-    }, [innerValue, multiselect, items]);
-    (0, react_2.useEffect)(() => {
-        if (!multiselect && selectItemOnFocus) {
-            dispatchState({ type: selectList_actionTypes_1.ListAction.FocusFirst, payload: { items } });
-        }
-        dispatchState({ type: selectList_actionTypes_1.ListAction.Focus, payload: { items, multiselect } });
-    }, [multiselect, items, selectItemOnFocus]);
-    (0, react_2.useEffect)(() => {
-        onChange && state.isItemsStateChanged && onChange(new Map(state.itemsState));
-    }, [state.isItemsStateChanged, state.itemsState, onChange]);
-    const onChangeItem = (0, react_2.useCallback)((updatedId, updatedState) => {
-        dispatchState({ type: selectList_actionTypes_1.ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect } });
-    }, [multiselect]);
-    const hasScrolledToInitial = (0, react_2.useRef)(false);
-    (0, react_2.useEffect)(() => {
-        var _a;
-        if (state.activeIndex >= 0 && listRef.current) {
-            const isFocusInList = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && (0, isChildOf_1.isChildOf)(zen_1.zen.document.activeElement, listRef.current);
-            if (isFocusInList || !hasScrolledToInitial.current) {
-                const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
-                itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
-                if (itemEl) {
-                    hasScrolledToInitial.current = true;
-                }
+const SelectList = _a => {
+  var {
+      items: outerItems,
+      value = new Map(),
+      multiselect = false,
+      selectItemOnFocus = true,
+      forceSelection = false,
+      showCheckbox = false,
+      disabled,
+      onChange,
+      onClick
+    } = _a,
+    rest = __rest(_a, ["items", "value", "multiselect", "selectItemOnFocus", "forceSelection", "showCheckbox", "disabled", "onChange", "onClick"]);
+  const items = (0, react_2.useMemo)(() => outerItems, [outerItems]);
+  const listRef = (0, react_2.useRef)(null);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const [announcement, setAnnouncement] = (0, react_2.useState)("");
+  const [state, dispatchState] = (0, react_2.useReducer)(selectList_reducer_1.selectListReducer, showCheckbox, isCheckbox => {
+    const initial = (0, selectList_helpers_1.getInitialState)({
+      items,
+      value,
+      multiselect
+    });
+    if (isCheckbox) {
+      initial.activeIndex = (0, selectList_helpers_1.getFirstIndex)(items);
+    }
+    return initial;
+  });
+  const innerValue = (0, react_2.useMemo)(() => JSON.stringify(Array.from((0, selectList_helpers_1.getInitialState)({
+    items,
+    value,
+    multiselect
+  }).itemsState)), [items, value, multiselect]);
+  (0, react_2.useEffect)(() => {
+    const parsedValue = JSON.parse(innerValue);
+    dispatchState({
+      type: selectList_actionTypes_1.ListAction.Reset,
+      payload: {
+        items,
+        value: new Map(parsedValue),
+        multiselect
+      }
+    });
+  }, [innerValue, multiselect, items]);
+  (0, react_2.useEffect)(() => {
+    if (showCheckbox) {
+      dispatchState({
+        type: selectList_actionTypes_1.ListAction.FocusFirst,
+        payload: {
+          items
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showCheckbox]);
+  (0, react_2.useEffect)(() => {
+    if (!showCheckbox) {
+      if (!multiselect && selectItemOnFocus) {
+        dispatchState({
+          type: selectList_actionTypes_1.ListAction.FocusFirst,
+          payload: {
+            items
+          }
+        });
+      }
+      if (!multiselect) {
+        dispatchState({
+          type: selectList_actionTypes_1.ListAction.Focus,
+          payload: {
+            items,
+            multiselect
+          }
+        });
+      }
+    }
+  }, [multiselect, items, selectItemOnFocus, showCheckbox]);
+  (0, react_2.useEffect)(() => {
+    onChange && state.isItemsStateChanged && onChange(new Map(state.itemsState));
+  }, [state.isItemsStateChanged, state.itemsState, onChange]);
+  // VoiceOver does not announce aria-checked changes on role="menuitemcheckbox" (neither
+  // on toggle nor on navigation). Use a polite live region to announce the focused item's
+  // label + state whenever focus moves or state is toggled. The label is included so
+  // consecutive announcements of the same state still differ and get re-spoken.
+  (0, react_2.useEffect)(() => {
+    if (!showCheckbox || state.activeIndex < 0) {
+      return;
+    }
+    const itemId = (0, selectList_helpers_1.getItemIdByIndex)(state.itemsState, state.activeIndex);
+    if (!itemId) {
+      return;
+    }
+    const isChecked = state.itemsState.get(itemId) === checkboxState_1.CheckboxState.On;
+    const label = (0, reactHelpers_1.getComponentText)(items[state.activeIndex].children);
+    setAnnouncement(`${label} ${isChecked ? translate("Checked") : translate("Unchecked")}`);
+  }, [showCheckbox, state.itemsState, state.activeIndex, items, translate]);
+  const onChangeItem = (0, react_2.useCallback)((updatedId, updatedState) => {
+    dispatchState({
+      type: selectList_actionTypes_1.ListAction.ChangeItemState,
+      payload: {
+        updatedId,
+        updatedState,
+        multiselect
+      }
+    });
+  }, [multiselect]);
+  const onFocusItem = (0, react_2.useCallback)(id => {
+    const index = items.findIndex(item => item.id === id);
+    if (index >= 0) {
+      dispatchState({
+        type: selectList_actionTypes_1.ListAction.FocusItem,
+        payload: {
+          index
+        }
+      });
+    }
+  }, [items]);
+  const hasScrolledToInitial = (0, react_2.useRef)(false);
+  (0, react_2.useEffect)(() => {
+    var _a, _b;
+    if (state.activeIndex >= 0 && listRef.current) {
+      const isFocusInList = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && (0, isChildOf_1.isChildOf)(zen_1.zen.document.activeElement, listRef.current);
+      if (isFocusInList || !hasScrolledToInitial.current) {
+        const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
+        itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({
+          block: "nearest"
+        });
+        if (showCheckbox && isFocusInList && ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.activeElement) !== itemEl) {
+          itemEl === null || itemEl === void 0 ? void 0 : itemEl.focus();
+        }
+        if (itemEl) {
+          hasScrolledToInitial.current = true;
+        }
+      }
+    }
+  }, [state.activeIndex, showCheckbox]);
+  (0, react_2.useEffect)(() => {
+    if (!state.level || !onClick) {
+      return;
+    }
+    onClick(state.level);
+    dispatchState({
+      type: selectList_actionTypes_1.ListAction.SetLevel,
+      payload: undefined
+    });
+  }, [onClick, state.level]);
+  const onKeyDown = e => {
+    const handlers = {
+      ArrowUp: () => multiselect || !selectItemOnFocus ? dispatchState({
+        type: selectList_actionTypes_1.ListAction.FocusPrev,
+        payload: {
+          items
+        }
+      }) : dispatchState({
+        type: selectList_actionTypes_1.ListAction.SelectPrev,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      ArrowDown: () => multiselect || !selectItemOnFocus ? dispatchState({
+        type: selectList_actionTypes_1.ListAction.FocusNext,
+        payload: {
+          items
+        }
+      }) : dispatchState({
+        type: selectList_actionTypes_1.ListAction.SelectNext,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      Enter: () => {
+        const item = items[state.activeIndex];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (!item || item.disabled) {
+          return;
+        }
+        if (item.multiLevel) {
+          dispatchState({
+            type: selectList_actionTypes_1.ListAction.SetLevel,
+            payload: {
+              items
             }
+          });
+        } else {
+          dispatchState({
+            type: selectList_actionTypes_1.ListAction.ChangeItemState,
+            payload: {
+              updatedId: item.id,
+              updatedState: item.state === checkboxState_1.CheckboxState.On ? checkboxState_1.CheckboxState.Off : checkboxState_1.CheckboxState.On,
+              multiselect: multiselect
+            }
+          });
         }
-    }, [state.activeIndex]);
-    (0, react_2.useEffect)(() => {
-        if (!state.level || !onClick) {
-            return;
-        }
-        onClick(state.level);
-        dispatchState({ type: selectList_actionTypes_1.ListAction.SetLevel, payload: undefined });
-    }, [onClick, state.level]);
-    const onKeyDown = (e) => {
-        const handlers = {
-            ArrowUp: () => multiselect || !selectItemOnFocus
-                ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusPrev, payload: { items } })
-                : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectPrev, payload: { items, multiselect } }),
-            ArrowDown: () => multiselect || !selectItemOnFocus
-                ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusNext, payload: { items } })
-                : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectNext, payload: { items, multiselect } }),
-            Enter: () => {
-                const item = items[state.activeIndex];
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (!item || item.disabled) {
-                    return;
-                }
-                if (item.multiLevel) {
-                    dispatchState({ type: selectList_actionTypes_1.ListAction.SetLevel, payload: { items } });
-                }
-                else {
-                    dispatchState({
-                        type: selectList_actionTypes_1.ListAction.ChangeItemState,
-                        payload: {
-                            updatedId: item.id,
-                            updatedState: item.state === checkboxState_1.CheckboxState.On ? checkboxState_1.CheckboxState.Off : checkboxState_1.CheckboxState.On,
-                            multiselect: multiselect
-                        }
-                    });
-                }
-            },
-            Home: () => multiselect || !selectItemOnFocus
-                ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusFirst, payload: { items } })
-                : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectFirst, payload: { items, multiselect } }),
-            End: () => multiselect || !selectItemOnFocus
-                ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusLast, payload: { items } })
-                : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectLast, payload: { items, multiselect } }),
-            Space: () => {
-                const item = items[state.activeIndex];
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (item === null || item === void 0 ? void 0 : item.disabled) {
-                    return;
-                }
-                dispatchState({ type: selectList_actionTypes_1.ListAction.ToggleCurrent, payload: { multiselect } });
-            },
-            "Shift+ArrowUp": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.SelectPrev, payload: { items, multiselect } }),
-            "Shift+ArrowDown": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.SelectNext, payload: { items, multiselect } }),
-            "Ctrl+Shift+Home": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.SelectAllToTheBeginning, payload: { items, multiselect } }),
-            "Ctrl+Shift+End": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.SelectAllToTheEnd, payload: { items, multiselect } }),
-            "Ctrl+KeyA": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.ToggleAll, payload: { items, multiselect } }),
-            default: () => dispatchState({ type: selectList_actionTypes_1.ListAction.SearchItem, payload: { items, key: e.key } })
-        };
-        const handlerName = (0, keyboard_1.getKeysPressed)(e);
-        const handler = handlers[handlerName] || ((0, keyboard_1.isKeyForSearch)(e.code) && handlers["default"]);
-        if (handler) {
-            handler();
-            e.preventDefault();
-            e.stopPropagation();
+      },
+      Home: () => multiselect || !selectItemOnFocus ? dispatchState({
+        type: selectList_actionTypes_1.ListAction.FocusFirst,
+        payload: {
+          items
         }
-    };
-    const onFocus = () => {
-        const scrollableParent = (0, getScrollableParent_1.getScrollableParent)(listRef.current);
-        if (!scrollableParent || scrollableParent.scrollTop === 0) {
-            dispatchState({ type: selectList_actionTypes_1.ListAction.Focus, payload: { items, multiselect } });
+      }) : dispatchState({
+        type: selectList_actionTypes_1.ListAction.SelectFirst,
+        payload: {
+          items,
+          multiselect
         }
+      }),
+      End: () => multiselect || !selectItemOnFocus ? dispatchState({
+        type: selectList_actionTypes_1.ListAction.FocusLast,
+        payload: {
+          items
+        }
+      }) : dispatchState({
+        type: selectList_actionTypes_1.ListAction.SelectLast,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      Space: () => {
+        const item = items[state.activeIndex];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (item === null || item === void 0 ? void 0 : item.disabled) {
+          return;
+        }
+        dispatchState({
+          type: selectList_actionTypes_1.ListAction.ToggleCurrent,
+          payload: {
+            multiselect
+          }
+        });
+      },
+      "Shift+ArrowUp": () => multiselect && dispatchState({
+        type: selectList_actionTypes_1.ListAction.SelectPrev,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      "Shift+ArrowDown": () => multiselect && dispatchState({
+        type: selectList_actionTypes_1.ListAction.SelectNext,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      "Ctrl+Shift+Home": () => multiselect && dispatchState({
+        type: selectList_actionTypes_1.ListAction.SelectAllToTheBeginning,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      "Ctrl+Shift+End": () => multiselect && dispatchState({
+        type: selectList_actionTypes_1.ListAction.SelectAllToTheEnd,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      "Ctrl+KeyA": () => multiselect && dispatchState({
+        type: selectList_actionTypes_1.ListAction.ToggleAll,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      default: () => dispatchState({
+        type: selectList_actionTypes_1.ListAction.SearchItem,
+        payload: {
+          items,
+          key: e.key
+        }
+      })
     };
-    const onBlur = () => {
-        multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.Blur, payload: { multiselect } });
-        !multiselect && forceSelection && dispatchState({ type: selectList_actionTypes_1.ListAction.Blur, payload: { multiselect } });
-    };
-    return ((0, jsx_runtime_1.jsx)(SelectListInner, Object.assign({}, rest, { ref: listRef, value: state.itemsState, items: items, activeIndex: state.activeIndex, multiselect: multiselect, standalone: true, disabled: disabled, onChangeItem: onChangeItem, onClickItem: onClick, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur })));
+    const handlerName = (0, keyboard_1.getKeysPressed)(e);
+    const handler = handlers[handlerName] || (0, keyboard_1.isKeyForSearch)(e.code) && handlers["default"];
+    if (handler) {
+      handler();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  const onFocus = () => {
+    const scrollableParent = (0, getScrollableParent_1.getScrollableParent)(listRef.current);
+    if (!scrollableParent || scrollableParent.scrollTop === 0) {
+      dispatchState({
+        type: selectList_actionTypes_1.ListAction.Focus,
+        payload: {
+          items,
+          multiselect
+        }
+      });
+    }
+  };
+  const onBlur = () => {
+    // In showCheckbox mode, activeIndex must stay stable while focus cycles between
+    // list items and sibling controls (e.g. Reset button) via Tab/Shift+Tab.
+    // Resetting activeIndex to -1 would drop all li tabIndex values to -1, making
+    // Shift+Tab unable to re-enter the list.
+    if (showCheckbox) {
+      return;
+    }
+    multiselect && dispatchState({
+      type: selectList_actionTypes_1.ListAction.Blur,
+      payload: {
+        multiselect
+      }
+    });
+    !multiselect && forceSelection && dispatchState({
+      type: selectList_actionTypes_1.ListAction.Blur,
+      payload: {
+        multiselect
+      }
+    });
+  };
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)(SelectListInner, Object.assign({}, rest, {
+      ref: listRef,
+      value: state.itemsState,
+      items: items,
+      activeIndex: state.activeIndex,
+      multiselect: multiselect,
+      showCheckbox: showCheckbox,
+      standalone: true,
+      disabled: disabled,
+      onChangeItem: onChangeItem,
+      onClickItem: onClick,
+      onFocusItem: onFocusItem,
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+      onBlur: onBlur
+    })), showCheckbox ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-visually-hidden",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      role: "status",
+      children: announcement
+    }) : null]
+  });
 };
 exports.SelectList = SelectList;
-const PassiveSelectList = props => (0, jsx_runtime_1.jsx)(SelectListInnerComp, Object.assign({}, props, { standalone: false }));
-exports.PassiveSelectList = PassiveSelectList;
+const PassiveSelectList = props => (0, jsx_runtime_1.jsx)(SelectListInnerComp, Object.assign({}, props, {
+  standalone: false
+}));
+exports.PassiveSelectList = PassiveSelectList;

package/dist/selectList/selectList.reducer.js

@@ -60,6 +60,8 @@ const selectListReducer = (state, action) => {
             return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getNextIndex)(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
         case selectList_actionTypes_1.ListAction.FocusPrev:
             return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getPrevIndex)(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
+        case selectList_actionTypes_1.ListAction.FocusItem:
+            return Object.assign(Object.assign({}, state), { activeIndex: payload.index, isItemsStateChanged: false, searchStr: "" });
         case selectList_actionTypes_1.ListAction.SelectFirst: {
             const index = (0, selectList_helpers_1.getFirstIndex)(payload.items);
             return selectItem(state, index, payload.multiselect, (_a = payload.items[index]) === null || _a === void 0 ? void 0 : _a.disabled);
@@ -120,8 +122,7 @@ const selectListReducer = (state, action) => {
                 newItemsState = updatedState;
             });
             const prevActiveItemId = (0, selectList_helpers_1.getItemIdByIndex)(state.itemsState, state.activeIndex);
-            const newActiveItemIndex = !!prevActiveItemId && (0, selectList_helpers_1.getItemIndexById)(newItemsState, prevActiveItemId);
-            const activeIndex = newActiveItemIndex ? newActiveItemIndex : -1;
+            const activeIndex = prevActiveItemId !== undefined ? (0, selectList_helpers_1.getItemIndexById)(newItemsState, prevActiveItemId) : -1;
             return Object.assign(Object.assign({}, state), { itemsState: newItemsState, activeIndex, isItemsStateChanged: false });
         }
         case selectList_actionTypes_1.ListAction.SetLevel: {

package/dist/selectList/selectListItem.d.ts

@@ -8,6 +8,7 @@ export interface ISelectListItem extends IZenIdComponentProps {
     focused?: boolean;
     onChange?: (id: string, state: CheckboxState) => void;
     onClick?: (id: string) => void;
+    onFocusItem?: (id: string) => void;
     multiLevel?: boolean;
 }
-export declare const SelectListItem: ({ id, disabled, state, showCheckbox, focused, onChange, onClick, multiLevel, className, children }: ISelectListItem) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectListItem: ({ id, disabled, state, showCheckbox, focused, onChange, onClick, onFocusItem, multiLevel, className, children }: ISelectListItem) => import("react/jsx-runtime").JSX.Element;