@geotab/zenith 3.11.0 → 3.11.1

package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.withFlexibleColumns = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -15,141 +21,221 @@ const columnSettingsList_1 = require("./components/columnSettingsList");
 const columnSettingsSidePanel_1 = require("./components/columnSettingsSidePanel");
 const emptySearchList_1 = require("../emptySearchList/emptySearchList");
 const zen_1 = require("../../utils/zen");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const withFlexibleColumns = (DataGridComponent) => {
-    const FlexibleColumnsComponent = (props) => {
-        var _a, _b;
-        const { columns, options, popupTriggerRef, onChangeSettings, onResetSettings = () => { }, sortGroups, sortColumns } = props;
-        const settingsStore = (0, react_1.useMemo)(() => { var _a, _b; return new flexibleColumnsStorage_1.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] = (0, react_1.useState)(false);
-        const allColumns = (0, react_1.useMemo)(() => columns.map(column => (Object.assign(Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))), { visible: column.visible !== false, group: column.group || "" }))), [columns]);
-        const columnsSettings = (0, react_1.useMemo)(() => (0, flexibleColumnsStorage_1.mergeColumnsSettings)(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
-        const hasConfigurableColumns = (0, react_1.useMemo)(() => allColumns.filter(c => c.title).some(c => !c.alwaysVisible), [allColumns]);
-        const visibleColumns = (0, react_1.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_1.FlexibleColumnWrapper)
-                        ? wrappers
-                        : [
-                            ...wrappers,
-                            new flexibleColumnWrapper_1.FlexibleColumnWrapper({
-                                draggable: !(column.columnComponent instanceof actionsColumn_1.ActionsColumn),
-                                resizable: index !== 0
-                            })
-                        ] });
-            })
-                .filter(c => c !== undefined);
-        }, [allColumns, columnsSettings]);
-        const gridRef = (0, react_1.useRef)(null);
-        const resizerRef = (0, react_1.useRef)(null);
-        const reordererRef = (0, react_1.useRef)(null);
-        (0, react_1.useImperativeHandle)(props.ref, () => gridRef.current, []);
-        const saveSettingsToTheStore = (0, react_1.useCallback)((newSettings) => 
-        // not to block main thread this operation can be postponed
-        new Promise((resolve, reject) => {
-            var _a;
-            (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
-                try {
-                    settingsStore.setItem(newSettings);
-                    resolve();
-                }
-                catch (e) {
-                    // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-                    reject(e);
-                }
-            }, 0);
-        }), [settingsStore]);
-        const listOfColumns = (0, react_1.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 ((0, jsx_runtime_1.jsx)(columnSettingsList_1.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 = (0, react_1.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 = (0, react_1.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");
+const withFlexibleColumns = DataGridComponent => {
+  const FlexibleColumnsComponent = props => {
+    var _a, _b;
+    const {
+      columns,
+      options,
+      popupTriggerRef,
+      onChangeSettings,
+      onResetSettings = () => {},
+      sortGroups,
+      sortColumns
+    } = props;
+    const {
+      translate
+    } = (0, useLanguage_1.useLanguage)();
+    const settingsStore = (0, react_1.useMemo)(() => {
+      var _a, _b;
+      return new flexibleColumnsStorage_1.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] = (0, react_1.useState)(false);
+    const allColumns = (0, react_1.useMemo)(() => columns.map(column => Object.assign(Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))), {
+      visible: column.visible !== false,
+      group: column.group || ""
+    })), [columns]);
+    const columnsSettings = (0, react_1.useMemo)(() => (0, flexibleColumnsStorage_1.mergeColumnsSettings)(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
+    const hasConfigurableColumns = (0, react_1.useMemo)(() => allColumns.filter(c => c.title).some(c => !c.alwaysVisible), [allColumns]);
+    const visibleColumns = (0, react_1.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_1.FlexibleColumnWrapper) ? wrappers : [...wrappers, new flexibleColumnWrapper_1.FlexibleColumnWrapper({
+            draggable: !(column.columnComponent instanceof actionsColumn_1.ActionsColumn),
+            resizable: index !== 0
+          })]
+        });
+      }).filter(c => c !== undefined);
+    }, [allColumns, columnsSettings]);
+    const gridRef = (0, react_1.useRef)(null);
+    const resizerRef = (0, react_1.useRef)(null);
+    const reordererRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(props.ref, () => gridRef.current, []);
+    const saveSettingsToTheStore = (0, react_1.useCallback)(newSettings =>
+    // not to block main thread this operation can be postponed
+    new Promise((resolve, reject) => {
+      var _a;
+      (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
+        try {
+          settingsStore.setItem(newSettings);
+          resolve();
+        } catch (e) {
+          // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+          reject(e);
+        }
+      }, 0);
+    }), [settingsStore]);
+    const listOfColumns = (0, react_1.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 (0, jsx_runtime_1.jsx)(columnSettingsList_1.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]);
-        (0, react_1.useEffect)(() => {
-            if (!gridRef.current) {
-                return;
-            }
-            // resizer
-            if (!resizerRef.current) {
-                const resizer = new flexibleColumnsResizer_1.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 flexibleColumnsReorder_1.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 = (0, react_1.useCallback)(async () => {
-            await saveSettingsToTheStore([]);
-            onResetSettings();
-            setIsPanelOpen(false);
-        }, [onResetSettings, saveSettingsToTheStore]);
-        (0, react_1.useEffect)(() => {
-            if (popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) {
-                popupTriggerRef.current.style.display = hasConfigurableColumns ? "" : "none";
-            }
-        }, [popupTriggerRef, hasConfigurableColumns]);
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [popupTriggerRef && hasConfigurableColumns ? (options.isFeed ? ((0, jsx_runtime_1.jsx)(columnSettingsSidePanel_1.ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })) : ((0, jsx_runtime_1.jsx)(popup_1.Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup"))) : null, visibleColumns.length === 0 && hasConfigurableColumns ? ((0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid__empty", children: (0, jsx_runtime_1.jsx)(emptySearchList_1.EmptySearchList, {}) })) : ((0, jsx_runtime_1.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 = (0, react_1.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 = (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+      if (!gridRef.current) {
+        return;
+      }
+      // resizer
+      if (!resizerRef.current) {
+        const resizer = new flexibleColumnsResizer_1.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 flexibleColumnsReorder_1.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 = (0, react_1.useCallback)(async () => {
+      await saveSettingsToTheStore([]);
+      onResetSettings();
+      setIsPanelOpen(false);
+    }, [onResetSettings, saveSettingsToTheStore]);
+    (0, react_1.useEffect)(() => {
+      if (popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) {
+        popupTriggerRef.current.style.display = hasConfigurableColumns ? "" : "none";
+      }
+    }, [popupTriggerRef, hasConfigurableColumns]);
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [popupTriggerRef && hasConfigurableColumns ? options.isFeed ? (0, jsx_runtime_1.jsx)(columnSettingsSidePanel_1.ColumnSettingsSidePanel, {
+        triggerRef: popupTriggerRef,
+        isOpen: isPanelOpen,
+        onOpen: () => setIsPanelOpen(true),
+        onClose: () => setIsPanelOpen(false),
+        onReset: onResetListener,
+        children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, {
+          onReset: onResetListener,
+          showFooter: false,
+          children: listOfColumns
+        })
+      }) : (0, jsx_runtime_1.jsx)(popup_1.Popup, {
+        ariaLabel: translate("Column Settings"),
+        triggerRef: popupTriggerRef,
+        alignment: "bottom-right",
+        children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, {
+          onReset: onResetListener,
+          children: listOfColumns
+        })
+      }, "flexible-popup") : null, visibleColumns.length === 0 && hasConfigurableColumns ? (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-data-grid__empty",
+        children: (0, jsx_runtime_1.jsx)(emptySearchList_1.EmptySearchList, {})
+      }) : (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, {
+        columns: [...visibleColumns],
+        ref: gridRef
+      }), "grid")]
+    });
+  };
+  FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
+  return FlexibleColumnsComponent;
 };
 exports.withFlexibleColumns = withFlexibleColumns;
-exports.withFlexibleColumns.translations = [...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];
+exports.withFlexibleColumns.translations = ["Column Settings", ...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];

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