@geotab/zenith 3.11.0-beta.1 → 3.11.1-beta.0

package/esm/selectList/selectList.js

@@ -1,149 +1,483 @@
-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;
+import { injectString } from "../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;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { CheckboxState } from "../checkbox/checkboxState";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getKeysPressed, isKeyForSearch } from "../commonHelpers/keyboard";
 import { ListAction } from "./selectList.actionTypes";
-import { getInitialState, getItemIdByIndex } from "./selectList.helpers";
+import { getFirstIndex, getInitialState, getItemIdByIndex } from "./selectList.helpers";
 import { selectListReducer } from "./selectList.reducer";
 import { SelectListItem } from "./selectListItem";
 import { isChildOf } from "../utils/isChildOf";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { memo, useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { getScrollableParent } from "../utils/getScrollableParent";
 import { zen } from "../utils/zen";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { getComponentText } from "../commonHelpers/reactHelpers/reactHelpers";
+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");
 export const defaultListItemHeight = 40;
 const MemoizedSelectListItem = memo(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 = useDriveClassName("zen-select-list");
-    const state = getInitialState({ items, value, multiselect });
-    state.activeIndex = activeIndex;
-    return (_jsx("ul", { id: id, ref: listRef, className: classNames(["zen-select-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? 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) => (_createElement(MemoizedSelectListItem, Object.assign({}, item, { className: 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 = useDriveClassName("zen-select-list");
+  const state = getInitialState({
+    items,
+    value,
+    multiselect
+  });
+  state.activeIndex = activeIndex;
+  return _jsx("ul", {
+    id: id,
+    ref: listRef,
+    className: classNames(["zen-select-list", driveComponentClass || "", className]),
+    role: showCheckbox ? "menu" : "listbox",
+    "aria-multiselectable": showCheckbox ? undefined : multiselect,
+    "aria-activedescendant": standalone && !showCheckbox ? 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) => _createElement(MemoizedSelectListItem, Object.assign({}, item, {
+      className: 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 = memo(SelectListInnerComp);
-export 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 = useMemo(() => outerItems, [outerItems]);
-    const listRef = useRef(null);
-    const [state, dispatchState] = useReducer(selectListReducer, { items, value, multiselect }, getInitialState);
-    const innerValue = useMemo(() => JSON.stringify(Array.from(getInitialState({ items, value, multiselect }).itemsState)), [items, value, multiselect]);
-    useEffect(() => {
-        const parsedValue = JSON.parse(innerValue);
-        dispatchState({ type: ListAction.Reset, payload: { items, value: new Map(parsedValue), multiselect } });
-    }, [innerValue, multiselect, items]);
-    useEffect(() => {
-        if (!multiselect && selectItemOnFocus) {
-            dispatchState({ type: ListAction.FocusFirst, payload: { items } });
-        }
-        dispatchState({ type: ListAction.Focus, payload: { items, multiselect } });
-    }, [multiselect, items, selectItemOnFocus]);
-    useEffect(() => {
-        onChange && state.isItemsStateChanged && onChange(new Map(state.itemsState));
-    }, [state.isItemsStateChanged, state.itemsState, onChange]);
-    const onChangeItem = useCallback((updatedId, updatedState) => {
-        dispatchState({ type: ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect } });
-    }, [multiselect]);
-    const hasScrolledToInitial = useRef(false);
-    useEffect(() => {
-        var _a;
-        if (state.activeIndex >= 0 && listRef.current) {
-            const isFocusInList = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && isChildOf(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;
-                }
+export 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 = useMemo(() => outerItems, [outerItems]);
+  const listRef = useRef(null);
+  const {
+    translate
+  } = useLanguage();
+  const [announcement, setAnnouncement] = useState("");
+  const [state, dispatchState] = useReducer(selectListReducer, showCheckbox, isCheckbox => {
+    const initial = getInitialState({
+      items,
+      value,
+      multiselect
+    });
+    if (isCheckbox) {
+      initial.activeIndex = getFirstIndex(items);
+    }
+    return initial;
+  });
+  const innerValue = useMemo(() => JSON.stringify(Array.from(getInitialState({
+    items,
+    value,
+    multiselect
+  }).itemsState)), [items, value, multiselect]);
+  useEffect(() => {
+    const parsedValue = JSON.parse(innerValue);
+    dispatchState({
+      type: ListAction.Reset,
+      payload: {
+        items,
+        value: new Map(parsedValue),
+        multiselect
+      }
+    });
+  }, [innerValue, multiselect, items]);
+  useEffect(() => {
+    if (showCheckbox) {
+      dispatchState({
+        type: ListAction.FocusFirst,
+        payload: {
+          items
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showCheckbox]);
+  useEffect(() => {
+    if (!showCheckbox) {
+      if (!multiselect && selectItemOnFocus) {
+        dispatchState({
+          type: ListAction.FocusFirst,
+          payload: {
+            items
+          }
+        });
+      }
+      if (!multiselect) {
+        dispatchState({
+          type: ListAction.Focus,
+          payload: {
+            items,
+            multiselect
+          }
+        });
+      }
+    }
+  }, [multiselect, items, selectItemOnFocus, showCheckbox]);
+  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.
+  useEffect(() => {
+    if (!showCheckbox || state.activeIndex < 0) {
+      return;
+    }
+    const itemId = getItemIdByIndex(state.itemsState, state.activeIndex);
+    if (!itemId) {
+      return;
+    }
+    const isChecked = state.itemsState.get(itemId) === CheckboxState.On;
+    const label = getComponentText(items[state.activeIndex].children);
+    setAnnouncement(`${label} ${isChecked ? translate("Checked") : translate("Unchecked")}`);
+  }, [showCheckbox, state.itemsState, state.activeIndex, items, translate]);
+  const onChangeItem = useCallback((updatedId, updatedState) => {
+    dispatchState({
+      type: ListAction.ChangeItemState,
+      payload: {
+        updatedId,
+        updatedState,
+        multiselect
+      }
+    });
+  }, [multiselect]);
+  const onFocusItem = useCallback(id => {
+    const index = items.findIndex(item => item.id === id);
+    if (index >= 0) {
+      dispatchState({
+        type: ListAction.FocusItem,
+        payload: {
+          index
+        }
+      });
+    }
+  }, [items]);
+  const hasScrolledToInitial = useRef(false);
+  useEffect(() => {
+    var _a, _b;
+    if (state.activeIndex >= 0 && listRef.current) {
+      const isFocusInList = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && isChildOf(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.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]);
+  useEffect(() => {
+    if (!state.level || !onClick) {
+      return;
+    }
+    onClick(state.level);
+    dispatchState({
+      type: ListAction.SetLevel,
+      payload: undefined
+    });
+  }, [onClick, state.level]);
+  const onKeyDown = e => {
+    const handlers = {
+      ArrowUp: () => multiselect || !selectItemOnFocus ? dispatchState({
+        type: ListAction.FocusPrev,
+        payload: {
+          items
+        }
+      }) : dispatchState({
+        type: ListAction.SelectPrev,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      ArrowDown: () => multiselect || !selectItemOnFocus ? dispatchState({
+        type: ListAction.FocusNext,
+        payload: {
+          items
+        }
+      }) : dispatchState({
+        type: 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: ListAction.SetLevel,
+            payload: {
+              items
             }
+          });
+        } else {
+          dispatchState({
+            type: ListAction.ChangeItemState,
+            payload: {
+              updatedId: item.id,
+              updatedState: item.state === CheckboxState.On ? CheckboxState.Off : CheckboxState.On,
+              multiselect: multiselect
+            }
+          });
         }
-    }, [state.activeIndex]);
-    useEffect(() => {
-        if (!state.level || !onClick) {
-            return;
-        }
-        onClick(state.level);
-        dispatchState({ type: ListAction.SetLevel, payload: undefined });
-    }, [onClick, state.level]);
-    const onKeyDown = (e) => {
-        const handlers = {
-            ArrowUp: () => multiselect || !selectItemOnFocus
-                ? dispatchState({ type: ListAction.FocusPrev, payload: { items } })
-                : dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
-            ArrowDown: () => multiselect || !selectItemOnFocus
-                ? dispatchState({ type: ListAction.FocusNext, payload: { items } })
-                : dispatchState({ type: 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: ListAction.SetLevel, payload: { items } });
-                }
-                else {
-                    dispatchState({
-                        type: ListAction.ChangeItemState,
-                        payload: {
-                            updatedId: item.id,
-                            updatedState: item.state === CheckboxState.On ? CheckboxState.Off : CheckboxState.On,
-                            multiselect: multiselect
-                        }
-                    });
-                }
-            },
-            Home: () => multiselect || !selectItemOnFocus
-                ? dispatchState({ type: ListAction.FocusFirst, payload: { items } })
-                : dispatchState({ type: ListAction.SelectFirst, payload: { items, multiselect } }),
-            End: () => multiselect || !selectItemOnFocus
-                ? dispatchState({ type: ListAction.FocusLast, payload: { items } })
-                : dispatchState({ type: 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: ListAction.ToggleCurrent, payload: { multiselect } });
-            },
-            "Shift+ArrowUp": () => multiselect && dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
-            "Shift+ArrowDown": () => multiselect && dispatchState({ type: ListAction.SelectNext, payload: { items, multiselect } }),
-            "Ctrl+Shift+Home": () => multiselect && dispatchState({ type: ListAction.SelectAllToTheBeginning, payload: { items, multiselect } }),
-            "Ctrl+Shift+End": () => multiselect && dispatchState({ type: ListAction.SelectAllToTheEnd, payload: { items, multiselect } }),
-            "Ctrl+KeyA": () => multiselect && dispatchState({ type: ListAction.ToggleAll, payload: { items, multiselect } }),
-            default: () => dispatchState({ type: ListAction.SearchItem, payload: { items, key: e.key } })
-        };
-        const handlerName = getKeysPressed(e);
-        const handler = handlers[handlerName] || (isKeyForSearch(e.code) && handlers["default"]);
-        if (handler) {
-            handler();
-            e.preventDefault();
-            e.stopPropagation();
+      },
+      Home: () => multiselect || !selectItemOnFocus ? dispatchState({
+        type: ListAction.FocusFirst,
+        payload: {
+          items
         }
-    };
-    const onFocus = () => {
-        const scrollableParent = getScrollableParent(listRef.current);
-        if (!scrollableParent || scrollableParent.scrollTop === 0) {
-            dispatchState({ type: ListAction.Focus, payload: { items, multiselect } });
+      }) : dispatchState({
+        type: ListAction.SelectFirst,
+        payload: {
+          items,
+          multiselect
         }
+      }),
+      End: () => multiselect || !selectItemOnFocus ? dispatchState({
+        type: ListAction.FocusLast,
+        payload: {
+          items
+        }
+      }) : dispatchState({
+        type: 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: ListAction.ToggleCurrent,
+          payload: {
+            multiselect
+          }
+        });
+      },
+      "Shift+ArrowUp": () => multiselect && dispatchState({
+        type: ListAction.SelectPrev,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      "Shift+ArrowDown": () => multiselect && dispatchState({
+        type: ListAction.SelectNext,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      "Ctrl+Shift+Home": () => multiselect && dispatchState({
+        type: ListAction.SelectAllToTheBeginning,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      "Ctrl+Shift+End": () => multiselect && dispatchState({
+        type: ListAction.SelectAllToTheEnd,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      "Ctrl+KeyA": () => multiselect && dispatchState({
+        type: ListAction.ToggleAll,
+        payload: {
+          items,
+          multiselect
+        }
+      }),
+      default: () => dispatchState({
+        type: ListAction.SearchItem,
+        payload: {
+          items,
+          key: e.key
+        }
+      })
     };
-    const onBlur = () => {
-        multiselect && dispatchState({ type: ListAction.Blur, payload: { multiselect } });
-        !multiselect && forceSelection && dispatchState({ type: ListAction.Blur, payload: { multiselect } });
-    };
-    return (_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 = getKeysPressed(e);
+    const handler = handlers[handlerName] || isKeyForSearch(e.code) && handlers["default"];
+    if (handler) {
+      handler();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  const onFocus = () => {
+    const scrollableParent = getScrollableParent(listRef.current);
+    if (!scrollableParent || scrollableParent.scrollTop === 0) {
+      dispatchState({
+        type: 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: ListAction.Blur,
+      payload: {
+        multiselect
+      }
+    });
+    !multiselect && forceSelection && dispatchState({
+      type: ListAction.Blur,
+      payload: {
+        multiselect
+      }
+    });
+  };
+  return _jsxs(_Fragment, {
+    children: [_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 ? _jsx("div", {
+      className: "zen-visually-hidden",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      role: "status",
+      children: announcement
+    }) : null]
+  });
 };
-export const PassiveSelectList = props => _jsx(SelectListInnerComp, Object.assign({}, props, { standalone: false }));
+export const PassiveSelectList = props => _jsx(SelectListInnerComp, Object.assign({}, props, {
+  standalone: false
+}));

package/esm/selectList/selectList.reducer.js

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

package/esm/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;