@geotab/zenith 3.11.0 → 3.11.1-beta.0

package/README.md

@@ -47,6 +47,14 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.11.1
+
+- Fix `SummaryTile` accessibility: add `tooltipAriaLabel` prop for accessible tooltip name
+- Fix aria-label on generic div in zen-status-pill expand button
+- Fix `SortControl` accessibility: remove redundant aria-label, add visually-hidden sort direction text
+- Fix `SelectList` keyboard navigation: skip disabled items
+- Fix column selection accessibility
+
 ### 3.11.0
 
 - Add `ControlledMenuList` component and `createMenuItem`/`createControlledMenuList` factories for typed, path-based menu navigation with keyboard support

package/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -192,18 +192,10 @@ const CheckboxListWithAction = ({
     });
     return elements;
   }, [options]);
-  const updateTabIndex = (0, react_1.useCallback)((newRowIndex, newElementType) => {
-    const elements = getFocusableElements();
-    elements.forEach(({
-      element,
-      rowIndex,
-      type,
-      blocked
-    }) => {
-      const isActive = rowIndex === newRowIndex && type === newElementType && !blocked;
-      element.setAttribute("tabindex", isActive ? "0" : "-1");
-    });
-  }, [getFocusableElements]);
+  const getTabIndex = (0, react_1.useCallback)((rowIndex, elementType, blocked) => {
+    if (blocked) return -1;
+    return rowIndex === focusedRowIndex && elementType === focusedElementType ? 0 : -1;
+  }, [focusedRowIndex, focusedElementType]);
   const handleKeyDown = (0, react_1.useCallback)(
   // eslint-disable-next-line complexity
   e => {
@@ -277,7 +269,6 @@ const CheckboxListWithAction = ({
       e.preventDefault();
       setFocusedRowIndex(newRowIndex);
       setFocusedElementType(newElementType);
-      updateTabIndex(newRowIndex, newElementType);
       // Find and focus the target element
       const targetElement = elements.find(({
         rowIndex,
@@ -286,7 +277,7 @@ const CheckboxListWithAction = ({
       }) => rowIndex === newRowIndex && type === newElementType && !blocked);
       targetElement === null || targetElement === void 0 ? void 0 : targetElement.element.focus();
     }
-  }, [getFocusableElements, options, focusedRowIndex, focusedElementType, checkboxId, onChange, handleTab, updateTabIndex]);
+  }, [getFocusableElements, options, focusedRowIndex, focusedElementType, checkboxId, onChange, handleTab]);
   const handleFocus = (0, react_1.useCallback)(e => {
     const elements = getFocusableElements();
     const focusedElement = e.target;
@@ -296,10 +287,9 @@ const CheckboxListWithAction = ({
     if (targetElementInfo && !targetElementInfo.blocked && (targetElementInfo.rowIndex !== focusedRowIndex || targetElementInfo.type !== focusedElementType)) {
       setFocusedRowIndex(targetElementInfo.rowIndex);
       setFocusedElementType(targetElementInfo.type);
-      updateTabIndex(targetElementInfo.rowIndex, targetElementInfo.type);
     }
-  }, [focusedRowIndex, focusedElementType, getFocusableElements, updateTabIndex]);
-  // Initialize tabindex when options first become available
+  }, [focusedRowIndex, focusedElementType, getFocusableElements]);
+  // Initialize focusedRowIndex when options first become available
   (0, react_1.useEffect)(() => {
     if (options && options.length > 0 && !isInitialized.current) {
       // Find first non-blocked row
@@ -310,17 +300,25 @@ const CheckboxListWithAction = ({
       if (firstValidRow < options.length) {
         setFocusedRowIndex(firstValidRow);
         setFocusedElementType("checkbox");
-        updateTabIndex(firstValidRow, "checkbox");
         isInitialized.current = true;
       }
     }
-  }, [options, updateTabIndex]);
-  // Update tabindex when focused position changes (only after initialization)
+  }, [options]);
+  // Correct focusedRowIndex if options shrinks or the focused row becomes blocked after init
   (0, react_1.useEffect)(() => {
-    if (isInitialized.current) {
-      updateTabIndex(focusedRowIndex, focusedElementType);
+    if (!isInitialized.current || !options || options.length === 0) {
+      return;
+    }
+    const isInBounds = focusedRowIndex < options.length;
+    if (isInBounds && !options[focusedRowIndex].blocked) {
+      return;
+    }
+    const firstValid = options.findIndex(opt => !opt.blocked);
+    if (firstValid >= 0) {
+      setFocusedRowIndex(firstValid);
+      setFocusedElementType("checkbox");
     }
-  }, [focusedRowIndex, focusedElementType, updateTabIndex]);
+  }, [options, focusedRowIndex]);
   const getLabelColorInfo = (color, withRightPadding, isHidden, extraArgs) => {
     if (!color) {
       return null;
@@ -350,7 +348,7 @@ const CheckboxListWithAction = ({
       })
     }));
   };
-  const renderLabel = (option, lbl, ttl) => {
+  const renderLabel = (option, lbl, ttl, rowIndex) => {
     const additionalTitle = option.countSelectedChild && option.isWithAction ? translate("Number of selected child groups - {count}").replace("{count}", option.countSelectedChild.toString()) : "";
     const title = option.isWithAction ? translate("View {groupName} children").replace("{groupName}", ttl).concat(additionalTitle ? `${". "}${additionalTitle}` : "") : translate("Toggle {groupName} filter").replace("{groupName}", ttl);
     const classN = (0, classNames_1.classNames)(["zen-checkbox-list-with-action__label", "zen-ellipsis", option.isWithAction ? "zen-checkbox-list-with-action__label--action" : ""]);
@@ -379,7 +377,8 @@ const CheckboxListWithAction = ({
       onClick: handleClick,
       title: title,
       className: classN,
-      tabIndex: -1
+      tabIndex: getTabIndex(rowIndex, "button", option.blocked),
+      disabled: option.blocked
     }, otherArgs, {
       children: childEl
     })) : (0, jsx_runtime_1.jsx)("div", {
@@ -415,7 +414,7 @@ const CheckboxListWithAction = ({
       children: optionsArr.map((opt, ind) => {
         const titleForRender = opt.title || opt.label;
         const labelForRender = selectSearchTerm(opt.label);
-        const labelElement = renderLabel(opt, labelForRender, titleForRender);
+        const labelElement = renderLabel(opt, labelForRender, titleForRender, ind);
         return (0, jsx_runtime_1.jsxs)("li", {
           className: (0, classNames_1.classNames)(["zen-checkbox-list-with-action__action-item", opt.isWithAction ? "zen-checkbox-list-with-action__action-item--action" : ""]),
           "data-item": opt.property,
@@ -429,7 +428,7 @@ const CheckboxListWithAction = ({
             title: translate("Toggle {groupName} filter").replace("{groupName}", titleForRender),
             describedBy: opt.isWithAction ? navigationInstructionsId : undefined,
             "data-indeterminate": opt.partialChecked,
-            tabIndex: -1,
+            tabIndex: getTabIndex(ind, "checkbox", opt.blocked),
             children: opt.isWithAction ? null : labelElement
           }), opt.isWithAction && labelElement]
         }, `li_${ind}_${opt.property}`);

package/dist/dataGrid/withFlexibleColumns/components/columnSettingsList.js

@@ -1,54 +1,126 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ColumnSettingsList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const groupColumns_1 = require("../../extensions/groupColumns");
 const selectList_1 = require("../../../selectList/selectList");
 const checkboxState_1 = require("../../../checkbox/checkboxState");
-const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, sortColumns }) => {
-    const id = (0, react_1.useId)();
-    const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
-        if (sortColumns) {
-            return sortColumns(a.title, b.title);
-        }
-        return 0;
-    }, [sortColumns]);
-    const items = (0, react_1.useMemo)(() => columns.sort(sortColumnsInt).map(c => ({
-        id: c.id,
-        title: c.title,
-        disabled: (disabledColumns === null || disabledColumns === void 0 ? void 0 : disabledColumns.includes(c.name)) || false,
-        showCheckbox: true,
-        children: c.title
-    })), [columns, disabledColumns, sortColumnsInt]);
-    const state = columns.reduce((res, c) => {
-        res.set(c.id, settings.get(c.name) !== false ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
-        return res;
-    }, new Map());
-    const onChangeItem = (0, react_1.useCallback)((newState) => {
-        const newSettings = new Map(settings);
-        newState.forEach((stateVal, itemId) => {
-            var _a;
-            newSettings.set((_a = columns.find(c => c.id === itemId)) === null || _a === void 0 ? void 0 : _a.name, stateVal === checkboxState_1.CheckboxState.On);
-        });
-        onChange && onChange(newSettings);
-    }, [columns, settings, onChange]);
-    const list = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { id: id, items: items, value: state, title: title || "", multiselect: true, showCheckbox: true, onChange: onChangeItem }), [id, items, state, title, onChangeItem]);
-    if (!title) {
-        return list;
+injectString("cs", "Select visible columns", "Vyberte viditeln\xE9 sloupce");
+injectString("da-DK", "Select visible columns", "V\xE6lg synlige kolonner");
+injectString("de", "Select visible columns", "Sichtbare Spalten ausw\xE4hlen");
+injectString("en", "Select visible columns", "Select visible columns");
+injectString("es", "Select visible columns", "Seleccionar columnas visibles");
+injectString("fi-FI", "Select visible columns", "Valitse n\xE4kyv\xE4t sarakkeet");
+injectString("fr", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("fr-FR", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("hu-HU", "Select visible columns", "L\xE1that\xF3 oszlopok kiv\xE1laszt\xE1sa");
+injectString("id", "Select visible columns", "Pilih kolom yang terlihat");
+injectString("it", "Select visible columns", "Selezionare colonne visibili");
+injectString("ja", "Select visible columns", "\u8868\u793A\u5217\u3092\u9078\u629E");
+injectString("ko-KR", "Select visible columns", "\uD45C\uC2DC\uB418\uB294 \uC5F4 \uC120\uD0DD");
+injectString("ms", "Select visible columns", "Pilih lajur yang boleh dilihat");
+injectString("nb-NO", "Select visible columns", "Velg synlige kolonner");
+injectString("nl", "Select visible columns", "Zichtbare kolommen selecteren");
+injectString("pl", "Select visible columns", "Wybierz widoczne kolumny");
+injectString("pt-BR", "Select visible columns", "Selecionar colunas vis\xEDveis");
+injectString("pt-PT", "Select visible columns", "Selecionar colunas vis\xEDveis");
+injectString("sk-SK", "Select visible columns", "Vybra\u0165 vidite\u013En\xE9 st\u013Apce");
+injectString("sv", "Select visible columns", "V\xE4lj synbara kolumner");
+injectString("th", "Select visible columns", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C\u0E17\u0E35\u0E48\u0E21\u0E2D\u0E07\u0E40\u0E2B\u0E47\u0E19\u0E44\u0E14\u0E49");
+injectString("tr", "Select visible columns", "G\xF6r\xFCn\xFCr s\xFCtunlar\u0131 se\xE7");
+injectString("zh-Hans", "Select visible columns", "\u9009\u62E9\u53EF\u89C1\u5217");
+injectString("zh-TW", "Select visible columns", "\u9078\u53D6\u53EF\u898B\u6B04");
+injectString("ro-RO", "Select visible columns", "Selecta\u021Bi coloanele vizibile");
+injectString("ar-SA", "Select visible columns", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0623\u0639\u0645\u062F\u0629 \u0627\u0644\u0645\u0631\u0626\u064A\u0629");
+const useLanguage_1 = require("../../../utils/localization/useLanguage");
+const SubColumnsList = ({
+  title,
+  columns,
+  settings,
+  disabledColumns,
+  onChange,
+  sortColumns
+}) => {
+  const id = (0, react_1.useId)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
+    if (sortColumns) {
+      return sortColumns(a.title, b.title);
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-columns-list__sub-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__title zen-ellipsis", children: title }), list] }));
+    return 0;
+  }, [sortColumns]);
+  const items = (0, react_1.useMemo)(() => columns.sort(sortColumnsInt).map(c => ({
+    id: c.id,
+    title: c.title,
+    disabled: (disabledColumns === null || disabledColumns === void 0 ? void 0 : disabledColumns.includes(c.name)) || false,
+    showCheckbox: true,
+    children: c.title
+  })), [columns, disabledColumns, sortColumnsInt]);
+  const allDisabled = (0, react_1.useMemo)(() => items.every(item => item.disabled), [items]);
+  const state = columns.reduce((res, c) => {
+    res.set(c.id, settings.get(c.name) !== false ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
+    return res;
+  }, new Map());
+  const onChangeItem = (0, react_1.useCallback)(newState => {
+    const newSettings = new Map(settings);
+    newState.forEach((stateVal, itemId) => {
+      var _a;
+      newSettings.set((_a = columns.find(c => c.id === itemId)) === null || _a === void 0 ? void 0 : _a.name, stateVal === checkboxState_1.CheckboxState.On);
+    });
+    onChange && onChange(newSettings);
+  }, [columns, settings, onChange]);
+  const list = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(selectList_1.SelectList, {
+    id: id,
+    items: items,
+    value: state,
+    title: title || translate("Select visible columns"),
+    multiselect: true,
+    showCheckbox: true,
+    onChange: onChangeItem,
+    disabled: allDisabled
+  }), [id, items, state, title, translate, onChangeItem, allDisabled]);
+  if (!title) {
+    return list;
+  }
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-columns-list__sub-section",
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-columns-list__title zen-ellipsis",
+      children: title
+    }), list]
+  });
 };
-function ColumnSettingsList({ columns, settings, disabledColumns, onChange, sortGroups, sortColumns }) {
-    const groupped = (0, groupColumns_1.groupColumns)(columns);
-    const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
-        if (sortGroups) {
-            return sortGroups(a[0], b[0]);
-        }
-        return 0;
-    }, [sortGroups]);
-    return Array.from(groupped.entries())
-        .sort(sortGroupsInt)
-        .map(([title, cs]) => ((0, jsx_runtime_1.jsx)(SubColumnsList, { title: title, columns: cs, settings: settings, disabledColumns: disabledColumns, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
+function ColumnSettingsList({
+  columns,
+  settings,
+  disabledColumns,
+  onChange,
+  sortGroups,
+  sortColumns
+}) {
+  const groupped = (0, groupColumns_1.groupColumns)(columns);
+  const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
+    if (sortGroups) {
+      return sortGroups(a[0], b[0]);
+    }
+    return 0;
+  }, [sortGroups]);
+  return Array.from(groupped.entries()).sort(sortGroupsInt).map(([title, cs]) => (0, jsx_runtime_1.jsx)(SubColumnsList, {
+    title: title,
+    columns: cs,
+    settings: settings,
+    disabledColumns: disabledColumns,
+    onChange: onChange,
+    sortColumns: sortColumns
+  }, cs.map(c => c.id).join("-")));
 }
-exports.ColumnSettingsList = ColumnSettingsList;
+exports.ColumnSettingsList = ColumnSettingsList;

package/dist/index.css

@@ -5008,7 +5008,10 @@ html:lang(ar) .zen-select-item {
 .zen-select-item:not(.zen-select-item--with-checkbox).zen-select-item--focused[aria-selected="true"] > .zen-select-item__wrapper {
   background-color: var(--action-primary--hover);
 }
-.zen-select-item--focused .zen-select-item__wrapper {
+.zen-select-item--focused:not(.zen-select-item--with-checkbox) > .zen-select-item__wrapper {
+  background-color: var(--backgrounds-hover);
+}
+.zen-select-item--focused.zen-select-item--with-checkbox:focus > .zen-select-item__wrapper {
   background-color: var(--backgrounds-hover);
 }
 .zen-select-item .zen-select-item__wrapper--with-arrow {

package/dist/pillExpandable/pillExpandable.js

@@ -35,33 +35,6 @@ injectString("zh-Hans", "View all", "\u67E5\u770B\u5168\u90E8");
 injectString("zh-TW", "View all", "\u6AA2\u8996\u5168\u90E8");
 injectString("ro-RO", "View all", "Vezi tot");
 injectString("ar-SA", "View all", "\u0639\u0631\u0636 \u0627\u0644\u0643\u0644");
-injectString("cs", "Expand", "Rozbalit");
-injectString("da-DK", "Expand", "Udvid");
-injectString("de", "Expand", "Erweitern");
-injectString("en", "Expand", "Expand");
-injectString("es", "Expand", "Expandir");
-injectString("fi-FI", "Expand", "Laajenna");
-injectString("fr", "Expand", "D\xE9velopper");
-injectString("fr-FR", "Expand", "D\xE9velopper");
-injectString("hu-HU", "Expand", "B\u0151v\xEDtsd ki");
-injectString("id", "Expand", "Perluas");
-injectString("it", "Expand", "Espandere");
-injectString("ja", "Expand", "\u5C55\u958B");
-injectString("ko-KR", "Expand", "\uD655\uC7A5");
-injectString("ms", "Expand", "Kembangkan");
-injectString("nb-NO", "Expand", "Utvide");
-injectString("nl", "Expand", "Uitvouwen");
-injectString("pl", "Expand", "Rozwi\u0144");
-injectString("pt-BR", "Expand", "Expandir");
-injectString("pt-PT", "Expand", "Expandir");
-injectString("sk-SK", "Expand", "Roz\u0161\xEDr.");
-injectString("sv", "Expand", "Expandera");
-injectString("th", "Expand", "\u0E02\u0E22\u0E32\u0E22");
-injectString("tr", "Expand", "Geni\u015Flet");
-injectString("zh-Hans", "Expand", "\u5C55\u5F00");
-injectString("zh-TW", "Expand", "\u5C55\u958B");
-injectString("ro-RO", "Expand", "Extinde\u021Bi");
-injectString("ar-SA", "Expand", "\u062A\u0648\u0633\u064A\u0639");
 const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
 const focusableSelector_1 = require("../utils/focusableSelector");
@@ -201,9 +174,6 @@ const PillExpandableChild = ({
 }) => {
   const pillId = (0, react_1.useId)();
   const descriptionId = (0, react_1.useId)();
-  const {
-    translate
-  } = (0, useLanguage_1.useLanguage)();
   const {
     level,
     expandedChildPillIds,
@@ -256,7 +226,6 @@ const PillExpandableChild = ({
       text: text,
       expanded: isExpanded,
       onExpand: handleChildToggle,
-      expandAriaText: translate("Expand"),
       type: type,
       errorHandler: errorHandler,
       descriptionId: descriptionId
@@ -439,9 +408,6 @@ const PillExpandableBase = ({
 }) => {
   const popupId = (0, react_1.useId)();
   const descriptionId = (0, react_1.useId)();
-  const {
-    translate
-  } = (0, useLanguage_1.useLanguage)();
   const isDrive = (0, useDrive_1.useDrive)();
   const [isMobile, setIsMobile] = (0, react_1.useState)(false);
   const handleDeviceTypeChange = (0, react_1.useCallback)(deviceType => {
@@ -603,7 +569,6 @@ const PillExpandableBase = ({
           icon: effectiveIcon,
           text: text,
           expanded: isPopupOpen,
-          expandAriaText: translate("Expand"),
           ref: triggerRef,
           type: type,
           errorHandler: errorHandler,
@@ -643,4 +608,4 @@ const PillExpandableBase = ({
 const PillExpandableMemo = (0, react_1.memo)(PillExpandableBase);
 PillExpandableMemo.displayName = "PillExpandable";
 exports.PillExpandable = PillExpandableMemo;
-exports.TRANSLATIONS = ["Expand", "View all"];
+exports.TRANSLATIONS = ["View all"];

package/dist/pillExpandable/pillExpandableSimple.d.ts

@@ -4,7 +4,6 @@ import { IIcon } from "../icons/icon";
 interface IPillExpandableSimple extends IPillExpandableBase {
     includeExpandIcon?: boolean;
     expanded?: boolean;
-    expandAriaText?: string;
     onExpand?: () => void;
     icon?: FC<IIcon> | false;
     isBeta?: boolean;
@@ -14,7 +13,7 @@ interface IPillExpandableSimple extends IPillExpandableBase {
     type?: TPillType;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ onExpand, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/pillExpandable/pillExpandableSimple.js

@@ -8,7 +8,9 @@ const iconChevronTop_1 = require("../icons/iconChevronTop");
 const iconChevronBottom_1 = require("../icons/iconChevronBottom");
 const iconException_1 = require("../icons/iconException");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId }) => {
+const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId
+// eslint-disable-next-line complexity
+ }) => {
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
     const containerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill__container");
     const onExpandHandler = (0, react_1.useCallback)(() => {
@@ -25,7 +27,7 @@ const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includ
             containerDriveClassName || "",
             className || "",
             "zen-ellipsis"
-        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-describedby": descriptionId, children: [icon !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-expanded": includeExpandIcon ? (expanded !== null && expanded !== void 0 ? expanded : false) : undefined, "aria-describedby": descriptionId, children: [icon !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,
                     isLargeIcon ? "zen-status-pill__icon--large" : "",
@@ -37,7 +39,7 @@ const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includ
                     `zen-status-pill__text--${type}`,
                     "zen-ellipsis",
                     isTextCentered ? "zen-status-pill__text--centered" : ""
-                ]), children: text })), includeExpandIcon && ((0, jsx_runtime_1.jsx)("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, "aria-label": expandAriaText, children: (0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill__icon", children: (0, react_1.createElement)(ChevronIcon, {
+                ]), children: text })), includeExpandIcon && ((0, jsx_runtime_1.jsx)("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, children: (0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill__icon", children: (0, react_1.createElement)(ChevronIcon, {
                         size: iconSize
                     }) }) }))] }));
 };

package/dist/selectList/selectList.actionTypes.d.ts

@@ -9,6 +9,7 @@ export declare enum ListAction {
     FocusPrev = "focusPrev",
     FocusNextPage = "focusNextPage",
     FocusPrevPage = "focusPrevPage",
+    FocusItem = "focusItem",
     SelectFirst = "selectFirst",
     SelectLast = "selectLast",
     SelectNext = "selectNext",
@@ -37,6 +38,9 @@ interface IToggleCurrentPayload {
 interface IFocusItemPayload {
     items: ISelectListItem[];
 }
+interface IFocusItemByIndexPayload {
+    index: number;
+}
 interface ISetLevelPayload {
     items: ISelectListItem[];
 }
@@ -75,6 +79,7 @@ interface IResetPayload {
 type TChangeItemStateAction = IAction<ListAction.ChangeItemState, IChangeItemStatePayload>;
 type TToggleCurrentAction = IAction<ListAction.ToggleCurrent, IToggleCurrentPayload>;
 type TFocusItemAction = IAction<ListAction.FocusFirst | ListAction.FocusLast | ListAction.FocusNext | ListAction.FocusPrev, IFocusItemPayload>;
+type TFocusItemByIndexAction = IAction<ListAction.FocusItem, IFocusItemByIndexPayload>;
 type TFocusNextPageItemAction = IAction<ListAction.FocusNextPage | ListAction.FocusPrevPage, IFocusNextPageItemPayload>;
 type TSelectItemAction = IAction<ListAction.SelectFirst | ListAction.SelectLast | ListAction.SelectNext | ListAction.SelectPrev, ISelectItemPayload>;
 type TSelectItemsAction = IAction<ListAction.SelectAllToTheBeginning | ListAction.SelectAllToTheEnd, ISelectItemsPayload>;
@@ -84,5 +89,5 @@ type TSetLevelAction = IAction<ListAction.SetLevel, ISetLevelPayload | undefined
 type TFocusAction = IAction<ListAction.Focus, IFocusPayload>;
 type TBlurAction = IAction<ListAction.Blur, IBlurPayload>;
 type TResetAction = IAction<ListAction.Reset, IResetPayload>;
-export type TAction = TChangeItemStateAction | TToggleCurrentAction | TFocusItemAction | TFocusNextPageItemAction | TSelectItemAction | TSelectItemsAction | TToggleAllAction | TSearchItemAction | TFocusAction | TBlurAction | TResetAction | TSetLevelAction;
+export type TAction = TChangeItemStateAction | TToggleCurrentAction | TFocusItemAction | TFocusNextPageItemAction | TFocusItemByIndexAction | TSelectItemAction | TSelectItemsAction | TToggleAllAction | TSearchItemAction | TFocusAction | TBlurAction | TResetAction | TSetLevelAction;
 export {};

package/dist/selectList/selectList.actionTypes.js

@@ -11,6 +11,7 @@ var ListAction;
     ListAction["FocusPrev"] = "focusPrev";
     ListAction["FocusNextPage"] = "focusNextPage";
     ListAction["FocusPrevPage"] = "focusPrevPage";
+    ListAction["FocusItem"] = "focusItem";
     ListAction["SelectFirst"] = "selectFirst";
     ListAction["SelectLast"] = "selectLast";
     ListAction["SelectNext"] = "selectNext";

package/dist/selectList/selectList.d.ts

@@ -36,6 +36,6 @@ export interface IListStateProps {
     items: ISelectListItem[];
 }
 export declare const defaultListItemHeight = 40;
-export declare const SelectList: ({ items: outerItems, value, multiselect, selectItemOnFocus, forceSelection, disabled, onChange, onClick, ...rest }: ISelectList) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectList: ({ items: outerItems, value, multiselect, selectItemOnFocus, forceSelection, showCheckbox, disabled, onChange, onClick, ...rest }: ISelectList) => import("react/jsx-runtime").JSX.Element;
 export declare const PassiveSelectList: (props: any) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/selectList/selectList.helpers.d.ts

@@ -5,7 +5,7 @@ export declare const getItemIdByIndex: (state: Map<string, CheckboxState>, index
 export declare const getItemIndexById: (state: Map<string, CheckboxState>, id: string) => number;
 export declare const updateItemState: (initialState: Map<string, CheckboxState>, multiselect: boolean, updatedId: string, newState: CheckboxState) => [Map<string, CheckboxState>, boolean];
 export declare const searchItemIndex: (items: ISelectListItem[], searchStr: string) => number;
-export declare const getFirstIndex: (items: ISelectListItem[]) => 0 | -1;
+export declare const getFirstIndex: (items: ISelectListItem[]) => number;
 export declare const getLastIndex: (items: ISelectListItem[]) => number;
 export declare const getNextIndex: (currIndex: number, items: ISelectListItem[]) => number;
 export declare const getPrevIndex: (currIndex: number, items: ISelectListItem[]) => number;

package/dist/selectList/selectList.helpers.js

@@ -42,22 +42,47 @@ const searchItemIndex = (items, searchStr) => {
     });
 };
 exports.searchItemIndex = searchItemIndex;
-const getFirstIndex = (items) => (items.length > 0 ? 0 : -1);
+const getFirstIndex = (items) => items.findIndex(item => !item.disabled);
 exports.getFirstIndex = getFirstIndex;
-const getLastIndex = (items) => (items.length > 0 ? items.length - 1 : -1);
+const getLastIndex = (items) => {
+    for (let i = items.length - 1; i >= 0; i--) {
+        if (!items[i].disabled) {
+            return i;
+        }
+    }
+    return -1;
+};
 exports.getLastIndex = getLastIndex;
 const getNextIndex = (currIndex, items) => {
+    var _a;
     if (items.length === 0) {
         return -1;
     }
-    return currIndex + 1 >= items.length ? 0 : currIndex + 1;
+    let nextIndex = currIndex + 1 >= items.length ? 0 : currIndex + 1;
+    const startIndex = nextIndex;
+    while ((_a = items[nextIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+        nextIndex = nextIndex + 1 >= items.length ? 0 : nextIndex + 1;
+        if (nextIndex === startIndex) {
+            return currIndex;
+        }
+    }
+    return nextIndex;
 };
 exports.getNextIndex = getNextIndex;
 const getPrevIndex = (currIndex, items) => {
+    var _a;
     if (items.length === 0) {
         return -1;
     }
-    return currIndex <= 0 || currIndex >= items.length ? items.length - 1 : currIndex - 1;
+    let prevIndex = currIndex <= 0 || currIndex >= items.length ? items.length - 1 : currIndex - 1;
+    const startIndex = prevIndex;
+    while ((_a = items[prevIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+        prevIndex = prevIndex <= 0 ? items.length - 1 : prevIndex - 1;
+        if (prevIndex === startIndex) {
+            return currIndex;
+        }
+    }
+    return prevIndex;
 };
 exports.getPrevIndex = getPrevIndex;
 const getFirstActiveIndex = (state, items, multiselect) => {