@geotab/zenith 3.11.0 → 3.11.1-beta.0

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

@@ -239,6 +239,8 @@
     "This field is required.": "Bu alan zorunludur.",
     "On": "Açık",
     "Off": "Kapalı",
+    "Checked": "İşaretlendi",
+    "Unchecked": "İşaretlenmedi",
     "Scroll left": "Sola kaydır",
     "Scroll right": "Sağa Kaydır",
     "Send feedback": "Geri bildirim gönder",
@@ -323,5 +325,7 @@
     "Supported Formats:": "Supported Formats:",
     "Upload files.": "Upload files.",
     "File upload area": "File upload area",
-    "Uploaded": "Uploaded"
+    "Uploaded": "Uploaded",
+    "Ascending": "Artan",
+    "Descending": "Azalan"
 }

package/dist/utils/localization/translations/zh-Hans.json

@@ -239,6 +239,8 @@
     "This field is required.": "该字段为必填项。",
     "On": "开启",
     "Off": "关闭",
+    "Checked": "已选中",
+    "Unchecked": "未选中",
     "Scroll left": "向左滚动",
     "Scroll right": "向右滚动",
     "Send feedback": "发送反馈",
@@ -323,5 +325,7 @@
     "Supported Formats:": "Supported Formats:",
     "Upload files.": "Upload files.",
     "File upload area": "File upload area",
-    "Uploaded": "Uploaded"
+    "Uploaded": "Uploaded",
+    "Ascending": "升序",
+    "Descending": "降序"
 }

package/dist/utils/localization/translations/zh-TW.json

@@ -248,6 +248,8 @@
     "This field is required.": "此欄位為必填。",
     "On": "開啟",
     "Off": "關閉",
+    "Checked": "已勾選",
+    "Unchecked": "未勾選",
     "Loading": "載入中",
     "Value": "值",
     "Data": "資料",
@@ -323,5 +325,7 @@
     "Supported Formats:": "Supported Formats:",
     "Upload files.": "Upload files.",
     "File upload area": "File upload area",
-    "Uploaded": "Uploaded"
+    "Uploaded": "Uploaded",
+    "Ascending": "遞增",
+    "Descending": "遞減"
 }

package/esm/checkboxListWithAction/checkboxListWithAction.js

@@ -184,18 +184,10 @@ export const CheckboxListWithAction = ({
     });
     return elements;
   }, [options]);
-  const updateTabIndex = 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 = useCallback((rowIndex, elementType, blocked) => {
+    if (blocked) return -1;
+    return rowIndex === focusedRowIndex && elementType === focusedElementType ? 0 : -1;
+  }, [focusedRowIndex, focusedElementType]);
   const handleKeyDown = useCallback(
   // eslint-disable-next-line complexity
   e => {
@@ -269,7 +261,6 @@ export const CheckboxListWithAction = ({
       e.preventDefault();
       setFocusedRowIndex(newRowIndex);
       setFocusedElementType(newElementType);
-      updateTabIndex(newRowIndex, newElementType);
       // Find and focus the target element
       const targetElement = elements.find(({
         rowIndex,
@@ -278,7 +269,7 @@ export 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 = useCallback(e => {
     const elements = getFocusableElements();
     const focusedElement = e.target;
@@ -288,10 +279,9 @@ export 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
   useEffect(() => {
     if (options && options.length > 0 && !isInitialized.current) {
       // Find first non-blocked row
@@ -302,17 +292,25 @@ export 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
   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;
@@ -342,7 +340,7 @@ export 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 = classNames(["zen-checkbox-list-with-action__label", "zen-ellipsis", option.isWithAction ? "zen-checkbox-list-with-action__label--action" : ""]);
@@ -371,7 +369,8 @@ export const CheckboxListWithAction = ({
       onClick: handleClick,
       title: title,
       className: classN,
-      tabIndex: -1
+      tabIndex: getTabIndex(rowIndex, "button", option.blocked),
+      disabled: option.blocked
     }, otherArgs, {
       children: childEl
     })) : _jsx("div", {
@@ -407,7 +406,7 @@ export 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 _jsxs("li", {
           className: classNames(["zen-checkbox-list-with-action__action-item", opt.isWithAction ? "zen-checkbox-list-with-action__action-item--action" : ""]),
           "data-item": opt.property,
@@ -421,7 +420,7 @@ export 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/esm/dataGrid/withFlexibleColumns/components/columnSettingsList.js

@@ -1,50 +1,117 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo } from "react";
 import { groupColumns } from "../../extensions/groupColumns";
 import { SelectList } from "../../../selectList/selectList";
 import { CheckboxState } from "../../../checkbox/checkboxState";
-const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, sortColumns }) => {
-    const id = useId();
-    const sortColumnsInt = useCallback((a, b) => {
-        if (sortColumns) {
-            return sortColumns(a.title, b.title);
-        }
-        return 0;
-    }, [sortColumns]);
-    const items = 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.On : CheckboxState.Off);
-        return res;
-    }, new Map());
-    const onChangeItem = 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.On);
-        });
-        onChange && onChange(newSettings);
-    }, [columns, settings, onChange]);
-    const list = useMemo(() => _jsx(SelectList, { id: id, items: items, value: state, title: title || "", multiselect: true, showCheckbox: true, onChange: onChangeItem }), [id, items, state, title, onChangeItem]);
-    if (!title) {
-        return list;
+import { useLanguage } from "../../../utils/localization/useLanguage";
+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 SubColumnsList = ({
+  title,
+  columns,
+  settings,
+  disabledColumns,
+  onChange,
+  sortColumns
+}) => {
+  const id = useId();
+  const {
+    translate
+  } = useLanguage();
+  const sortColumnsInt = useCallback((a, b) => {
+    if (sortColumns) {
+      return sortColumns(a.title, b.title);
     }
-    return (_jsxs("div", { className: "zen-columns-list__sub-section", children: [_jsx("div", { className: "zen-columns-list__title zen-ellipsis", children: title }), list] }));
+    return 0;
+  }, [sortColumns]);
+  const items = 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 = useMemo(() => items.every(item => item.disabled), [items]);
+  const state = columns.reduce((res, c) => {
+    res.set(c.id, settings.get(c.name) !== false ? CheckboxState.On : CheckboxState.Off);
+    return res;
+  }, new Map());
+  const onChangeItem = 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.On);
+    });
+    onChange && onChange(newSettings);
+  }, [columns, settings, onChange]);
+  const list = useMemo(() => _jsx(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 _jsxs("div", {
+    className: "zen-columns-list__sub-section",
+    children: [_jsx("div", {
+      className: "zen-columns-list__title zen-ellipsis",
+      children: title
+    }), list]
+  });
 };
-export function ColumnSettingsList({ columns, settings, disabledColumns, onChange, sortGroups, sortColumns }) {
-    const groupped = groupColumns(columns);
-    const sortGroupsInt = useCallback((a, b) => {
-        if (sortGroups) {
-            return sortGroups(a[0], b[0]);
-        }
-        return 0;
-    }, [sortGroups]);
-    return Array.from(groupped.entries())
-        .sort(sortGroupsInt)
-        .map(([title, cs]) => (_jsx(SubColumnsList, { title: title, columns: cs, settings: settings, disabledColumns: disabledColumns, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
-}
+export function ColumnSettingsList({
+  columns,
+  settings,
+  disabledColumns,
+  onChange,
+  sortGroups,
+  sortColumns
+}) {
+  const groupped = groupColumns(columns);
+  const sortGroupsInt = useCallback((a, b) => {
+    if (sortGroups) {
+      return sortGroups(a[0], b[0]);
+    }
+    return 0;
+  }, [sortGroups]);
+  return Array.from(groupped.entries()).sort(sortGroupsInt).map(([title, cs]) => _jsx(SubColumnsList, {
+    title: title,
+    columns: cs,
+    settings: settings,
+    disabledColumns: disabledColumns,
+    onChange: onChange,
+    sortColumns: sortColumns
+  }, cs.map(c => c.id).join("-")));
+}

package/esm/pillExpandable/pillExpandable.js

@@ -46,33 +46,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 MAX_PILLS_TO_DISPLAY_IN_POPUP = 2;
 const PillContext = createContext({
   level: 0,
@@ -193,9 +166,6 @@ const PillExpandableChild = ({
 }) => {
   const pillId = useId();
   const descriptionId = useId();
-  const {
-    translate
-  } = useLanguage();
   const {
     level,
     expandedChildPillIds,
@@ -248,7 +218,6 @@ const PillExpandableChild = ({
       text: text,
       expanded: isExpanded,
       onExpand: handleChildToggle,
-      expandAriaText: translate("Expand"),
       type: type,
       errorHandler: errorHandler,
       descriptionId: descriptionId
@@ -431,9 +400,6 @@ const PillExpandableBase = ({
 }) => {
   const popupId = useId();
   const descriptionId = useId();
-  const {
-    translate
-  } = useLanguage();
   const isDrive = useDrive();
   const [isMobile, setIsMobile] = useState(false);
   const handleDeviceTypeChange = useCallback(deviceType => {
@@ -595,7 +561,6 @@ const PillExpandableBase = ({
           icon: effectiveIcon,
           text: text,
           expanded: isPopupOpen,
-          expandAriaText: translate("Expand"),
           ref: triggerRef,
           type: type,
           errorHandler: errorHandler,
@@ -635,4 +600,4 @@ const PillExpandableBase = ({
 const PillExpandableMemo = memo(PillExpandableBase);
 PillExpandableMemo.displayName = "PillExpandable";
 export const PillExpandable = PillExpandableMemo;
-export const TRANSLATIONS = ["Expand", "View all"];
+export const TRANSLATIONS = ["View all"];

package/esm/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/esm/pillExpandable/pillExpandableSimple.js

@@ -5,7 +5,9 @@ import { IconChevronTop } from "../icons/iconChevronTop";
 import { IconChevronBottom } from "../icons/iconChevronBottom";
 import { IconException } from "../icons/iconException";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, isMobile, ref, className, descriptionId }) => {
+export const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, isMobile, ref, className, descriptionId
+// eslint-disable-next-line complexity
+ }) => {
     const iconDriveClassName = useDriveClassName("icon");
     const containerDriveClassName = useDriveClassName("zen-status-pill__container");
     const onExpandHandler = useCallback(() => {
@@ -22,7 +24,7 @@ export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded,
             containerDriveClassName || "",
             className || "",
             "zen-ellipsis"
-        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-describedby": descriptionId, children: [icon !== false && (_jsx("div", { className: 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 && (_jsx("div", { className: classNames([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,
                     isLargeIcon ? "zen-status-pill__icon--large" : "",
@@ -34,7 +36,7 @@ export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded,
                     `zen-status-pill__text--${type}`,
                     "zen-ellipsis",
                     isTextCentered ? "zen-status-pill__text--centered" : ""
-                ]), children: text })), includeExpandIcon && (_jsx("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, "aria-label": expandAriaText, children: _jsx("div", { className: "zen-status-pill__icon", children: createElement(ChevronIcon, {
+                ]), children: text })), includeExpandIcon && (_jsx("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, children: _jsx("div", { className: "zen-status-pill__icon", children: createElement(ChevronIcon, {
                         size: iconSize
                     }) }) }))] }));
 };

package/esm/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/esm/selectList/selectList.actionTypes.js

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

package/esm/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/esm/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/esm/selectList/selectList.helpers.js

@@ -35,19 +35,44 @@ export const searchItemIndex = (items, searchStr) => {
         return content.toLocaleLowerCase().indexOf(searchStr.toLocaleLowerCase()) > -1;
     });
 };
-export const getFirstIndex = (items) => (items.length > 0 ? 0 : -1);
-export const getLastIndex = (items) => (items.length > 0 ? items.length - 1 : -1);
+export const getFirstIndex = (items) => items.findIndex(item => !item.disabled);
+export const getLastIndex = (items) => {
+    for (let i = items.length - 1; i >= 0; i--) {
+        if (!items[i].disabled) {
+            return i;
+        }
+    }
+    return -1;
+};
 export 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;
 };
 export 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;
 };
 export const getFirstActiveIndex = (state, items, multiselect) => {
     for (let i = 0; i < items.length; i++) {