@geotab/zenith 3.11.0 → 3.11.1

package/esm/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { ColumnsSettingsStorage, mergeColumnsSettings } from "./flexibleColumnsStorage";
@@ -12,140 +13,220 @@ import { ColumnSettingsList } from "./components/columnSettingsList";
 import { ColumnSettingsSidePanel } from "./components/columnSettingsSidePanel";
 import { EmptySearchList } from "../emptySearchList/emptySearchList";
 import { zen } from "../../utils/zen";
+import { useLanguage } from "../../utils/localization/useLanguage";
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const withFlexibleColumns = (DataGridComponent) => {
-    const FlexibleColumnsComponent = (props) => {
-        var _a, _b;
-        const { columns, options, popupTriggerRef, onChangeSettings, onResetSettings = () => { }, sortGroups, sortColumns } = props;
-        const settingsStore = useMemo(() => { var _a, _b; return new ColumnsSettingsStorage(((_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName) || "", (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage); }, [(_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName, (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage]);
-        const [isPanelOpen, setIsPanelOpen] = useState(false);
-        const allColumns = useMemo(() => columns.map(column => (Object.assign(Object.assign({}, toBasicColumn(Object.assign({}, column))), { visible: column.visible !== false, group: column.group || "" }))), [columns]);
-        const columnsSettings = useMemo(() => mergeColumnsSettings(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
-        const hasConfigurableColumns = useMemo(() => allColumns.filter(c => c.title).some(c => !c.alwaysVisible), [allColumns]);
-        const visibleColumns = useMemo(() => {
-            const visibleColumnsMap = new Map(allColumns.map(c => [c.name, c]));
-            return columnsSettings
-                .map((s, index) => {
-                const column = visibleColumnsMap.get(s.name);
-                if (column === undefined || !s.visible) {
-                    return undefined;
-                }
-                const wrappers = column.wrappers;
-                return Object.assign(Object.assign({}, column), { meta: Object.assign(Object.assign({}, column.meta), { defaultWidth: s.width }), wrappers: wrappers.some(w => w instanceof FlexibleColumnWrapper)
-                        ? wrappers
-                        : [
-                            ...wrappers,
-                            new FlexibleColumnWrapper({
-                                draggable: !(column.columnComponent instanceof ActionsColumn),
-                                resizable: index !== 0
-                            })
-                        ] });
-            })
-                .filter(c => c !== undefined);
-        }, [allColumns, columnsSettings]);
-        const gridRef = useRef(null);
-        const resizerRef = useRef(null);
-        const reordererRef = useRef(null);
-        useImperativeHandle(props.ref, () => gridRef.current, []);
-        const saveSettingsToTheStore = useCallback((newSettings) => 
-        // not to block main thread this operation can be postponed
-        new Promise((resolve, reject) => {
-            var _a;
-            (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
-                try {
-                    settingsStore.setItem(newSettings);
-                    resolve();
-                }
-                catch (e) {
-                    // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-                    reject(e);
-                }
-            }, 0);
-        }), [settingsStore]);
-        const listOfColumns = useMemo(() => {
-            const configurableColumnNames = new Set(allColumns.filter(c => c.title).map(c => c.name));
-            const visibleConfigurableSettings = columnsSettings.filter(s => s.visible && configurableColumnNames.has(s.name));
-            const lastVisibleColumn = visibleConfigurableSettings.length === 1 ? [visibleConfigurableSettings[0].name] : [];
-            const disabledColumns = [...allColumns.filter(c => c.alwaysVisible).map(c => c.name), ...lastVisibleColumn];
-            const columnSettingsMap = new Map(columnsSettings.map(s => [s.name, s.visible]));
-            return (_jsx(ColumnSettingsList, { columns: allColumns.filter(c => c.title), settings: columnSettingsMap, disabledColumns: disabledColumns, onChange: async (newSettings) => {
-                    const settings = columnsSettings.map(s => {
-                        const visible = newSettings.get(s.name) !== false;
-                        return Object.assign(Object.assign({}, s), { visible });
-                    });
-                    await saveSettingsToTheStore(settings);
-                    onChangeSettings(settings);
-                }, sortGroups: sortGroups, sortColumns: sortColumns }));
-        }, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, sortGroups, sortColumns]);
-        const onReorderListener = useCallback(async ([from, to]) => {
-            if (from === to) {
-                return;
-            }
-            const column = visibleColumns[from];
-            // we should avoid moving actions column
-            const limitedTo = Math.min(to, visibleColumns.length - 1);
-            const where = visibleColumns[limitedTo];
-            if (column === undefined) {
-                return;
-            }
-            // update order in settings
-            const settingsWithoutColumn = columnsSettings.filter(s => s.name !== column.name);
-            const originalSettings = columnsSettings.filter(s => s.name === column.name)[0];
-            const sIndex = settingsWithoutColumn.findIndex(s => s.name === where.name);
-            const newColumnSettings = [...settingsWithoutColumn.slice(0, sIndex), originalSettings, ...settingsWithoutColumn.slice(sIndex)];
-            await saveSettingsToTheStore(newColumnSettings);
-            onChangeSettings(newColumnSettings);
-        }, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
-        const onResizeColumn = useCallback(async ([index, width]) => {
-            const column = visibleColumns[index];
-            if (column === undefined) {
-                return;
-            }
-            const newColumnSettings = columnsSettings.map(s => {
-                if (s.name === column.name) {
-                    return Object.assign(Object.assign({}, s), { width });
-                }
-                return s;
+injectString("cs", "Column Settings", "Nastaven\xED sloupc\u016F");
+injectString("da-DK", "Column Settings", "Kolonneindstillinger");
+injectString("de", "Column Settings", "Spalteneinstellungen");
+injectString("en", "Column Settings", "Column Settings");
+injectString("es", "Column Settings", "Configuraci\xF3n de columnas");
+injectString("fi-FI", "Column Settings", "Sarakkeiden asetukset");
+injectString("fr", "Column Settings", "Param\xE8tres des colonnes");
+injectString("fr-FR", "Column Settings", "Param\xE8tres des colonnes");
+injectString("hu-HU", "Column Settings", "Oszlopbe\xE1ll\xEDt\xE1sok");
+injectString("id", "Column Settings", "Pengaturan Kolom");
+injectString("it", "Column Settings", "Impostazioni colonna");
+injectString("ja", "Column Settings", "\u5217\u306E\u8A2D\u5B9A");
+injectString("ko-KR", "Column Settings", "\uC5F4 \uC124\uC815");
+injectString("ms", "Column Settings", "Tetapan Lajur");
+injectString("nb-NO", "Column Settings", "Kolonneinnstillinger");
+injectString("nl", "Column Settings", "Kolominstellingen");
+injectString("pl", "Column Settings", "Ustawienia kolumn");
+injectString("pt-BR", "Column Settings", "Configura\xE7\xF5es da coluna");
+injectString("pt-PT", "Column Settings", "Configura\xE7\xF5es de coluna");
+injectString("sk-SK", "Column Settings", "Nastavenia st\u013Apcov");
+injectString("sv", "Column Settings", "Kolumninst\xE4llningar");
+injectString("th", "Column Settings", "\u0E01\u0E32\u0E23\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C");
+injectString("tr", "Column Settings", "S\xFCtun Ayarlar\u0131");
+injectString("zh-Hans", "Column Settings", "\u5217\u8BBE\u7F6E");
+injectString("zh-TW", "Column Settings", "\u6B04\u8A2D\u5B9A");
+injectString("ro-RO", "Column Settings", "Set\u0103ri coloane");
+injectString("ar-SA", "Column Settings", "\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0623\u0639\u0645\u062F\u0629");
+export const withFlexibleColumns = DataGridComponent => {
+  const FlexibleColumnsComponent = props => {
+    var _a, _b;
+    const {
+      columns,
+      options,
+      popupTriggerRef,
+      onChangeSettings,
+      onResetSettings = () => {},
+      sortGroups,
+      sortColumns
+    } = props;
+    const {
+      translate
+    } = useLanguage();
+    const settingsStore = useMemo(() => {
+      var _a, _b;
+      return new ColumnsSettingsStorage(((_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName) || "", (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage);
+    }, [(_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName, (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage]);
+    const [isPanelOpen, setIsPanelOpen] = useState(false);
+    const allColumns = useMemo(() => columns.map(column => Object.assign(Object.assign({}, toBasicColumn(Object.assign({}, column))), {
+      visible: column.visible !== false,
+      group: column.group || ""
+    })), [columns]);
+    const columnsSettings = useMemo(() => mergeColumnsSettings(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
+    const hasConfigurableColumns = useMemo(() => allColumns.filter(c => c.title).some(c => !c.alwaysVisible), [allColumns]);
+    const visibleColumns = useMemo(() => {
+      const visibleColumnsMap = new Map(allColumns.map(c => [c.name, c]));
+      return columnsSettings.map((s, index) => {
+        const column = visibleColumnsMap.get(s.name);
+        if (column === undefined || !s.visible) {
+          return undefined;
+        }
+        const wrappers = column.wrappers;
+        return Object.assign(Object.assign({}, column), {
+          meta: Object.assign(Object.assign({}, column.meta), {
+            defaultWidth: s.width
+          }),
+          wrappers: wrappers.some(w => w instanceof FlexibleColumnWrapper) ? wrappers : [...wrappers, new FlexibleColumnWrapper({
+            draggable: !(column.columnComponent instanceof ActionsColumn),
+            resizable: index !== 0
+          })]
+        });
+      }).filter(c => c !== undefined);
+    }, [allColumns, columnsSettings]);
+    const gridRef = useRef(null);
+    const resizerRef = useRef(null);
+    const reordererRef = useRef(null);
+    useImperativeHandle(props.ref, () => gridRef.current, []);
+    const saveSettingsToTheStore = useCallback(newSettings =>
+    // not to block main thread this operation can be postponed
+    new Promise((resolve, reject) => {
+      var _a;
+      (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
+        try {
+          settingsStore.setItem(newSettings);
+          resolve();
+        } catch (e) {
+          // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+          reject(e);
+        }
+      }, 0);
+    }), [settingsStore]);
+    const listOfColumns = useMemo(() => {
+      const configurableColumnNames = new Set(allColumns.filter(c => c.title).map(c => c.name));
+      const visibleConfigurableSettings = columnsSettings.filter(s => s.visible && configurableColumnNames.has(s.name));
+      const lastVisibleColumn = visibleConfigurableSettings.length === 1 ? [visibleConfigurableSettings[0].name] : [];
+      const disabledColumns = [...allColumns.filter(c => c.alwaysVisible).map(c => c.name), ...lastVisibleColumn];
+      const columnSettingsMap = new Map(columnsSettings.map(s => [s.name, s.visible]));
+      return _jsx(ColumnSettingsList, {
+        columns: allColumns.filter(c => c.title),
+        settings: columnSettingsMap,
+        disabledColumns: disabledColumns,
+        onChange: async newSettings => {
+          const settings = columnsSettings.map(s => {
+            const visible = newSettings.get(s.name) !== false;
+            return Object.assign(Object.assign({}, s), {
+              visible
             });
-            await saveSettingsToTheStore(newColumnSettings);
-            onChangeSettings(newColumnSettings);
-        }, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
-        useEffect(() => {
-            if (!gridRef.current) {
-                return;
-            }
-            // resizer
-            if (!resizerRef.current) {
-                const resizer = new FlexibleColumnResizer(gridRef.current);
-                resizerRef.current = resizer;
-            }
-            resizerRef.current.detach("resize");
-            resizerRef.current.attach("resize", onResizeColumn);
-            resizerRef.current.add(visibleColumns);
-            // reorder
-            if (!reordererRef.current) {
-                const reorder = new FlexibleColumnReorder(gridRef.current, resizerRef.current, () => true);
-                reordererRef.current = reorder;
-            }
-            reordererRef.current.detach("reorder");
-            reordererRef.current.attach("reorder", onReorderListener);
-            reordererRef.current.add();
-        }, [columnsSettings, visibleColumns, onResizeColumn, onReorderListener]);
-        const onResetListener = useCallback(async () => {
-            await saveSettingsToTheStore([]);
-            onResetSettings();
-            setIsPanelOpen(false);
-        }, [onResetSettings, saveSettingsToTheStore]);
-        useEffect(() => {
-            if (popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) {
-                popupTriggerRef.current.style.display = hasConfigurableColumns ? "" : "none";
-            }
-        }, [popupTriggerRef, hasConfigurableColumns]);
-        return (_jsxs(_Fragment, { children: [popupTriggerRef && hasConfigurableColumns ? (options.isFeed ? (_jsx(ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: _jsx(ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })) : (_jsx(Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: _jsx(ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup"))) : null, visibleColumns.length === 0 && hasConfigurableColumns ? (_jsx("div", { className: "zen-data-grid__empty", children: _jsx(EmptySearchList, {}) })) : (_jsx(DataGridComponent, Object.assign({}, props, { columns: [...visibleColumns], ref: gridRef }), "grid"))] }));
-    };
-    FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
-    return FlexibleColumnsComponent;
+          });
+          await saveSettingsToTheStore(settings);
+          onChangeSettings(settings);
+        },
+        sortGroups: sortGroups,
+        sortColumns: sortColumns
+      });
+    }, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, sortGroups, sortColumns]);
+    const onReorderListener = useCallback(async ([from, to]) => {
+      if (from === to) {
+        return;
+      }
+      const column = visibleColumns[from];
+      // we should avoid moving actions column
+      const limitedTo = Math.min(to, visibleColumns.length - 1);
+      const where = visibleColumns[limitedTo];
+      if (column === undefined) {
+        return;
+      }
+      // update order in settings
+      const settingsWithoutColumn = columnsSettings.filter(s => s.name !== column.name);
+      const originalSettings = columnsSettings.filter(s => s.name === column.name)[0];
+      const sIndex = settingsWithoutColumn.findIndex(s => s.name === where.name);
+      const newColumnSettings = [...settingsWithoutColumn.slice(0, sIndex), originalSettings, ...settingsWithoutColumn.slice(sIndex)];
+      await saveSettingsToTheStore(newColumnSettings);
+      onChangeSettings(newColumnSettings);
+    }, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
+    const onResizeColumn = useCallback(async ([index, width]) => {
+      const column = visibleColumns[index];
+      if (column === undefined) {
+        return;
+      }
+      const newColumnSettings = columnsSettings.map(s => {
+        if (s.name === column.name) {
+          return Object.assign(Object.assign({}, s), {
+            width
+          });
+        }
+        return s;
+      });
+      await saveSettingsToTheStore(newColumnSettings);
+      onChangeSettings(newColumnSettings);
+    }, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
+    useEffect(() => {
+      if (!gridRef.current) {
+        return;
+      }
+      // resizer
+      if (!resizerRef.current) {
+        const resizer = new FlexibleColumnResizer(gridRef.current);
+        resizerRef.current = resizer;
+      }
+      resizerRef.current.detach("resize");
+      resizerRef.current.attach("resize", onResizeColumn);
+      resizerRef.current.add(visibleColumns);
+      // reorder
+      if (!reordererRef.current) {
+        const reorder = new FlexibleColumnReorder(gridRef.current, resizerRef.current, () => true);
+        reordererRef.current = reorder;
+      }
+      reordererRef.current.detach("reorder");
+      reordererRef.current.attach("reorder", onReorderListener);
+      reordererRef.current.add();
+    }, [columnsSettings, visibleColumns, onResizeColumn, onReorderListener]);
+    const onResetListener = useCallback(async () => {
+      await saveSettingsToTheStore([]);
+      onResetSettings();
+      setIsPanelOpen(false);
+    }, [onResetSettings, saveSettingsToTheStore]);
+    useEffect(() => {
+      if (popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) {
+        popupTriggerRef.current.style.display = hasConfigurableColumns ? "" : "none";
+      }
+    }, [popupTriggerRef, hasConfigurableColumns]);
+    return _jsxs(_Fragment, {
+      children: [popupTriggerRef && hasConfigurableColumns ? options.isFeed ? _jsx(ColumnSettingsSidePanel, {
+        triggerRef: popupTriggerRef,
+        isOpen: isPanelOpen,
+        onOpen: () => setIsPanelOpen(true),
+        onClose: () => setIsPanelOpen(false),
+        onReset: onResetListener,
+        children: _jsx(ColumnSettings, {
+          onReset: onResetListener,
+          showFooter: false,
+          children: listOfColumns
+        })
+      }) : _jsx(Popup, {
+        ariaLabel: translate("Column Settings"),
+        triggerRef: popupTriggerRef,
+        alignment: "bottom-right",
+        children: _jsx(ColumnSettings, {
+          onReset: onResetListener,
+          children: listOfColumns
+        })
+      }, "flexible-popup") : null, visibleColumns.length === 0 && hasConfigurableColumns ? _jsx("div", {
+        className: "zen-data-grid__empty",
+        children: _jsx(EmptySearchList, {})
+      }) : _jsx(DataGridComponent, Object.assign({}, props, {
+        columns: [...visibleColumns],
+        ref: gridRef
+      }), "grid")]
+    });
+  };
+  FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
+  return FlexibleColumnsComponent;
 };
-withFlexibleColumns.translations = [...ColumnSettings.translations, ...ColumnSettingsSidePanel.translations, ...EmptySearchList.translations];
+withFlexibleColumns.translations = ["Column Settings", ...ColumnSettings.translations, ...ColumnSettingsSidePanel.translations, ...EmptySearchList.translations];

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++) {