@geotab/zenith 3.11.0 → 3.11.1

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("-")));
+}