@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/esm/summary/summary.js

@@ -1,13 +1,94 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Tooltip } from "../tooltip/tooltip";
 import { IconInfoCircle } from "../icons/iconInfoCircle";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useLanguage } from "../utils/localization/useLanguage";
-export const Summary = ({ color, title, value, unit, tooltip, more, isEnabled, onToggle, description }) => {
-    const isClickable = useMemo(() => color && onToggle, [color, onToggle]);
-    const { translate } = useLanguage();
-    return _jsxs("div", { className: "zen-summary", children: [(color || title || tooltip) && _jsxs("div", { className: "zen-summary__header", children: [color && _jsx("button", { "aria-label": translate("Summary color"), className: classNames(["zen-summary__color", isClickable ? "zen-summary__clickable" : ""]), style: { backgroundColor: color }, onClick: onToggle }), isClickable ?
-                        _jsx("button", { className: classNames(["zen-summary__title-text zen-ellipsis heading-05 zen-summary__clickable", isEnabled ? "zen-summary__crossed-out" : ""]), onClick: onToggle, children: title }) :
-                        _jsx("div", { className: "zen-summary__title-text zen-ellipsis heading-05", children: title }), tooltip && _jsx(Tooltip, { alignment: "top", size: "auto", trigger: _jsx("div", { className: "zen-summary__trigger", children: _jsx(IconInfoCircle, { size: "large", className: "zen-summary__title-icon" }) }), children: tooltip })] }), _jsxs("div", { className: "zen-summary__data", children: [_jsx("div", { className: "zen-summary__value zen-ellipsis", children: typeof value === "string" ? value : value.toFixed(2) }), unit && _jsx("div", { className: "zen-summary__unit", children: unit }), more && _jsx("div", { className: "zen-summary__more zen-ellipsis", children: more })] }), description && _jsx("div", { className: "zen-summary__content", children: description })] });
-};
+injectString("cs", "Summary color", "Barva souhrnu");
+injectString("da-DK", "Summary color", "Oversigt farve");
+injectString("de", "Summary color", "\xDCbersichtsfarbe");
+injectString("en", "Summary color", "Summary color");
+injectString("es", "Summary color", "Color de resumen");
+injectString("fi-FI", "Summary color", "Yhteenvetov\xE4ri");
+injectString("fr", "Summary color", "Couleur du sommaire");
+injectString("fr-FR", "Summary color", "Couleur du r\xE9sum\xE9");
+injectString("hu-HU", "Summary color", "\xD6sszefoglal\xF3 sz\xEDn");
+injectString("id", "Summary color", "Warna ringkasan");
+injectString("it", "Summary color", "Colore riepilogo");
+injectString("ja", "Summary color", "\u30B5\u30DE\u30EA\u30FC\u306E\u8272");
+injectString("ko-KR", "Summary color", "\uC694\uC57D \uADF8\uB798\uD504 \uC0C9\uC0C1");
+injectString("ms", "Summary color", "Warna ringkasan");
+injectString("nb-NO", "Summary color", "Sammendragsfarge");
+injectString("nl", "Summary color", "Overzichtskleur");
+injectString("pl", "Summary color", "Kolor podsumowania");
+injectString("pt-BR", "Summary color", "Cor do resumo");
+injectString("sk-SK", "Summary color", "S\xFAhrn farieb");
+injectString("sv", "Summary color", "F\xE4rg p\xE5 sammanfattning");
+injectString("th", "Summary color", "\u0E2A\u0E35\u0E02\u0E2D\u0E07\u0E2A\u0E23\u0E38\u0E1B");
+injectString("tr", "Summary color", "\xD6zet rengi");
+injectString("zh-Hans", "Summary color", "\u6458\u8981\u989C\u8272");
+injectString("zh-TW", "Summary color", "\u6458\u8981\u8272\u5F69");
+export const Summary = ({
+  color,
+  title,
+  value,
+  unit,
+  tooltip,
+  more,
+  isEnabled,
+  onToggle,
+  description
+}) => {
+  const isClickable = useMemo(() => color && onToggle, [color, onToggle]);
+  const {
+    translate
+  } = useLanguage();
+  return _jsxs("div", {
+    className: "zen-summary",
+    children: [(color || title || tooltip) && _jsxs("div", {
+      className: "zen-summary__header",
+      children: [color && _jsx("button", {
+        "aria-label": translate("Summary color"),
+        className: classNames(["zen-summary__color", isClickable ? "zen-summary__clickable" : ""]),
+        style: {
+          backgroundColor: color
+        },
+        onClick: onToggle
+      }), isClickable ? _jsx("button", {
+        className: classNames(["zen-summary__title-text zen-ellipsis heading-05 zen-summary__clickable", isEnabled ? "zen-summary__crossed-out" : ""]),
+        onClick: onToggle,
+        children: title
+      }) : _jsx("div", {
+        className: "zen-summary__title-text zen-ellipsis heading-05",
+        children: title
+      }), tooltip && _jsx(Tooltip, {
+        alignment: "top",
+        size: "auto",
+        trigger: _jsx("div", {
+          className: "zen-summary__trigger",
+          children: _jsx(IconInfoCircle, {
+            size: "large",
+            className: "zen-summary__title-icon"
+          })
+        }),
+        children: tooltip
+      })]
+    }), _jsxs("div", {
+      className: "zen-summary__data",
+      children: [_jsx("div", {
+        className: "zen-summary__value zen-ellipsis",
+        children: typeof value === "string" ? value : value.toFixed(2)
+      }), unit && _jsx("div", {
+        className: "zen-summary__unit",
+        children: unit
+      }), more && _jsx("div", {
+        className: "zen-summary__more zen-ellipsis",
+        children: more
+      })]
+    }), description && _jsx("div", {
+      className: "zen-summary__content",
+      children: description
+    })]
+  });
+};

package/esm/table/actions/actionsMenu.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, useId, useMemo, useRef, useState } from "react";
 import { Button } from "../../button/button";
@@ -7,85 +8,172 @@ import { Menu } from "../../menu/menu";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { SkeletonList } from "../../skeletonList/skeletonList";
 import { MenuErrorItem } from "../../menu/components/menuErrorItem";
+injectString("cs", "More", "V\xEDce");
+injectString("da-DK", "More", "Mere");
+injectString("de", "More", "Mehr");
+injectString("en", "More", "More");
+injectString("es", "More", "M\xE1s");
+injectString("fi-FI", "More", "Lis\xE4\xE4");
+injectString("fr", "More", "Plus");
+injectString("fr-FR", "More", "En savoir plus");
+injectString("hu-HU", "More", "M\xE9g t\xF6bb.");
+injectString("id", "More", "Lainnya");
+injectString("it", "More", "Altro");
+injectString("ja", "More", "\u305D\u306E\u4ED6");
+injectString("ko-KR", "More", "\uC790\uC138\uD788");
+injectString("ms", "More", "Lagi");
+injectString("nb-NO", "More", "Mer");
+injectString("nl", "More", "Meer");
+injectString("pl", "More", "Wi\u0119cej");
+injectString("pt-BR", "More", "Mais");
+injectString("sk-SK", "More", "Viac");
+injectString("sv", "More", "Mer");
+injectString("th", "More", "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21");
+injectString("tr", "More", "Di\u011Fer");
+injectString("zh-Hans", "More", "\u66F4\u591A");
+injectString("zh-TW", "More", "\u66F4\u591A");
+injectString("cs", "Actions", "Akce");
+injectString("da-DK", "Actions", "Handlinger");
+injectString("de", "Actions", "Aktionen");
+injectString("en", "Actions", "Actions");
+injectString("es", "Actions", "Acciones");
+injectString("fi-FI", "Actions", "Toimet");
+injectString("fr", "Actions", "Actions");
+injectString("fr-FR", "Actions", "Actions");
+injectString("hu-HU", "Actions", "M\u0171veletek");
+injectString("id", "Actions", "Tindakan");
+injectString("it", "Actions", "Azioni");
+injectString("ja", "Actions", "\u30A2\u30AF\u30B7\u30E7\u30F3");
+injectString("ko-KR", "Actions", "\uC870\uCE58");
+injectString("ms", "Actions", "Tindakan");
+injectString("nb-NO", "Actions", "Handlinger");
+injectString("nl", "Actions", "Acties");
+injectString("pl", "Actions", "Dzia\u0142ania");
+injectString("pt-BR", "Actions", "A\xE7\xF5es");
+injectString("sk-SK", "Actions", "Akcie");
+injectString("sv", "Actions", "\xC5tg\xE4rder");
+injectString("th", "Actions", "\u0E01\u0E32\u0E23\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23");
+injectString("tr", "Actions", "Eylemler");
+injectString("zh-Hans", "Actions", "\u64CD\u4F5C");
+injectString("zh-TW", "Actions", "\u52D5\u4F5C");
 const getMenuItems = (entity, isNested, render, primaryActions) => {
-    if (!render && !primaryActions) {
-        return null;
-    }
-    const result = render === null || render === void 0 ? void 0 : render(entity, isNested);
-    if (!result) {
-        return null;
-    }
-    if (result.type === Menu.Item) {
-        return primaryActions ? [...primaryActions.props.children, result] : [result];
-    }
-    if (!result.props.children) {
-        return null;
-    }
-    const menuItems = ((Array.isArray(result.props.children)
-        ? result.props.children
-        : [result.props.children]) || []);
-    return primaryActions ? [...primaryActions.props.children, ...menuItems] : menuItems;
+  if (!render && !primaryActions) {
+    return null;
+  }
+  const result = render === null || render === void 0 ? void 0 : render(entity, isNested);
+  if (!result) {
+    return null;
+  }
+  if (result.type === Menu.Item) {
+    return primaryActions ? [...primaryActions.props.children, result] : [result];
+  }
+  if (!result.props.children) {
+    return null;
+  }
+  const menuItems = (Array.isArray(result.props.children) ? result.props.children : [result.props.children]) || [];
+  return primaryActions ? [...primaryActions.props.children, ...menuItems] : menuItems;
 };
-const getErrorItem = (id, onClick) => (_jsx(MenuErrorItem, { id: id, onClick: onClick }));
-export const ActionsMenu = ({ entity, isNested, render, renderAsync, primaryActions }) => {
+const getErrorItem = (id, onClick) => _jsx(MenuErrorItem, {
+  id: id,
+  onClick: onClick
+});
+export const ActionsMenu = ({
+  entity,
+  isNested,
+  render,
+  renderAsync,
+  primaryActions
+}) => {
+  var _a;
+  const {
+    translate
+  } = useLanguage();
+  const generatedId = useId();
+  const buttonId = `ariaLabelBy-${entity.id || generatedId}`;
+  const errorId = `errorItem-${useId()}`;
+  const ref = useRef(null);
+  const menuItems = useMemo(() => getMenuItems(entity, isNested, render, primaryActions), [entity, isNested, render, primaryActions]);
+  const [menuItemsAsync, setMenuItemsAsync] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const handleClickTrigger = useCallback(async () => {
     var _a;
-    const { translate } = useLanguage();
-    const generatedId = useId();
-    const buttonId = `ariaLabelBy-${entity.id || generatedId}`;
-    const errorId = `errorItem-${useId()}`;
-    const ref = useRef(null);
-    const menuItems = useMemo(() => getMenuItems(entity, isNested, render, primaryActions), [entity, isNested, render, primaryActions]);
-    const [menuItemsAsync, setMenuItemsAsync] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isError, setIsError] = useState(false);
-    const handleClickTrigger = useCallback(async () => {
-        var _a;
-        if (!renderAsync || isLoading) {
-            return;
-        }
-        const errorItem = getErrorItem(errorId, handleClickTrigger);
-        setIsLoading(true);
-        setIsError(false);
-        setMenuItemsAsync(null);
-        try {
-            let resolvedMenuItems = await renderAsync(entity, isNested);
-            if (primaryActions) {
-                resolvedMenuItems = _jsx(_Fragment, { children: [...primaryActions.props.children, ...resolvedMenuItems.props.children] });
-            }
-            if (resolvedMenuItems.props.children) {
-                setMenuItemsAsync(resolvedMenuItems);
-            }
-            else {
-                setMenuItemsAsync(_jsx(_Fragment, { children: errorItem }));
-                setIsError(true);
-            }
-        }
-        catch (err) {
-            setMenuItemsAsync(_jsx(_Fragment, { children: [((_a = primaryActions === null || primaryActions === void 0 ? void 0 : primaryActions.props) === null || _a === void 0 ? void 0 : _a.children) || null, errorItem] }));
-            setIsError(true);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [entity, isNested, isLoading, primaryActions, errorId, renderAsync]);
-    const trigger = useMemo(() => {
-        if (renderAsync) {
-            return _jsx(Button, { title: translate("More"), disabled: isLoading, id: buttonId, ref: ref, onClick: handleClickTrigger, type: "tertiary-black", className: classNames([
-                    "zen-caption",
-                    "zen-actions-column__action",
-                    isError ? "zen-actions-column__action_error" : ""
-                ]), children: _jsx(IconDotVertical, { size: "bigger" }) });
-        }
-        return _jsx(Button, { type: "tertiary-black", title: translate("More"), className: "zen-caption zen-actions-column__action", children: _jsx(IconDotVertical, { size: "bigger" }) });
-    }, [buttonId, isLoading, isError, renderAsync, handleClickTrigger, translate]);
-    if (renderAsync) {
-        const menuItemsToRender = isLoading ?
-            _jsx(SkeletonList, { className: "zen-actions-column__waiting" }) :
-            ((_a = menuItemsAsync === null || menuItemsAsync === void 0 ? void 0 : menuItemsAsync.props) === null || _a === void 0 ? void 0 : _a.children) || null;
-        return _jsxs(_Fragment, { children: [trigger, _jsx(Menu, { ariaLabelledBy: buttonId, title: translate("Actions"), triggerRef: ref, alignment: "bottom-right", children: menuItemsToRender })] });
+    if (!renderAsync || isLoading) {
+      return;
     }
-    if (!menuItems || menuItems.length === 0) {
-        return null;
+    const errorItem = getErrorItem(errorId, handleClickTrigger);
+    setIsLoading(true);
+    setIsError(false);
+    setMenuItemsAsync(null);
+    try {
+      let resolvedMenuItems = await renderAsync(entity, isNested);
+      if (primaryActions) {
+        resolvedMenuItems = _jsx(_Fragment, {
+          children: [...primaryActions.props.children, ...resolvedMenuItems.props.children]
+        });
+      }
+      if (resolvedMenuItems.props.children) {
+        setMenuItemsAsync(resolvedMenuItems);
+      } else {
+        setMenuItemsAsync(_jsx(_Fragment, {
+          children: errorItem
+        }));
+        setIsError(true);
+      }
+    } catch (err) {
+      setMenuItemsAsync(_jsx(_Fragment, {
+        children: [((_a = primaryActions === null || primaryActions === void 0 ? void 0 : primaryActions.props) === null || _a === void 0 ? void 0 : _a.children) || null, errorItem]
+      }));
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
     }
-    return _jsx(Menu, { title: translate("Actions"), trigger: trigger, alignment: "bottom-right", children: menuItems });
-};
+  }, [entity, isNested, isLoading, primaryActions, errorId, renderAsync]);
+  const trigger = useMemo(() => {
+    if (renderAsync) {
+      return _jsx(Button, {
+        title: translate("More"),
+        disabled: isLoading,
+        id: buttonId,
+        ref: ref,
+        onClick: handleClickTrigger,
+        type: "tertiary-black",
+        className: classNames(["zen-caption", "zen-actions-column__action", isError ? "zen-actions-column__action_error" : ""]),
+        children: _jsx(IconDotVertical, {
+          size: "bigger"
+        })
+      });
+    }
+    return _jsx(Button, {
+      type: "tertiary-black",
+      title: translate("More"),
+      className: "zen-caption zen-actions-column__action",
+      children: _jsx(IconDotVertical, {
+        size: "bigger"
+      })
+    });
+  }, [buttonId, isLoading, isError, renderAsync, handleClickTrigger, translate]);
+  if (renderAsync) {
+    const menuItemsToRender = isLoading ? _jsx(SkeletonList, {
+      className: "zen-actions-column__waiting"
+    }) : ((_a = menuItemsAsync === null || menuItemsAsync === void 0 ? void 0 : menuItemsAsync.props) === null || _a === void 0 ? void 0 : _a.children) || null;
+    return _jsxs(_Fragment, {
+      children: [trigger, _jsx(Menu, {
+        ariaLabelledBy: buttonId,
+        title: translate("Actions"),
+        triggerRef: ref,
+        alignment: "bottom-right",
+        children: menuItemsToRender
+      })]
+    });
+  }
+  if (!menuItems || menuItems.length === 0) {
+    return null;
+  }
+  return _jsx(Menu, {
+    title: translate("Actions"),
+    trigger: trigger,
+    alignment: "bottom-right",
+    children: menuItems
+  });
+};

package/esm/table/flexible/columnSettings.js

@@ -1,13 +1,78 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { Button } from "../../button/button";
-export const ColumnSettings = ({ onReset, showFooter = true, children }) => {
-    const { translate } = useLanguage();
-    return _jsxs("div", { className: "zen-columns-list", children: [_jsx("div", { className: "zen-columns-list__content", children: children }), showFooter
-                ? _jsx("div", { className: "zen-columns-list__footer", children: _jsx(Button, { "aria-label": translate("Reset column settings"), className: "zen-columns-list__reset", type: "tertiary", onClick: onReset, children: translate("Reset") }) })
-                : null] });
+injectString("cs", "Reset column settings", "Obnovit nastaven\xED sloupce");
+injectString("da-DK", "Reset column settings", "Nulstil kolonneindstillinger");
+injectString("de", "Reset column settings", "Spalteneinstellungen zur\xFCcksetzen");
+injectString("en", "Reset column settings", "Reset column settings");
+injectString("es", "Reset column settings", "Restablecer configuraci\xF3n de columna");
+injectString("fi-FI", "Reset column settings", "Palauta sarakeasetukset");
+injectString("fr", "Reset column settings", "R\xE9initialiser les param\xE8tres de la colonne");
+injectString("fr-FR", "Reset column settings", "R\xE9initialiser les param\xE8tres des colonnes");
+injectString("hu-HU", "Reset column settings", "Oszlopbe\xE1ll\xEDt\xE1sok alaphelyzetbe \xE1ll\xEDt\xE1sa");
+injectString("id", "Reset column settings", "Reset pengaturan kolom");
+injectString("it", "Reset column settings", "Ripristinare impostazioni colonna");
+injectString("ja", "Reset column settings", "\u5217\u8A2D\u5B9A\u3092\u30EA\u30BB\u30C3\u30C8");
+injectString("ko-KR", "Reset column settings", "\uC5F4 \uC124\uC815 \uC7AC\uC124\uC815");
+injectString("ms", "Reset column settings", "Tetapkan semula tetapan lajur");
+injectString("nb-NO", "Reset column settings", "Tilbakestill kolonneinnstillinger");
+injectString("nl", "Reset column settings", "Reset kolominstellingen");
+injectString("pl", "Reset column settings", "Zresetuj ustawienia kolumny");
+injectString("pt-BR", "Reset column settings", "Redefinir configura\xE7\xF5es de coluna");
+injectString("sk-SK", "Reset column settings", "Obnov nastavenia st\u013Apca.");
+injectString("sv", "Reset column settings", "\xC5terst\xE4ll kolumninst\xE4llningar");
+injectString("th", "Reset column settings", "\u0E23\u0E35\u0E40\u0E0B\u0E47\u0E15\u0E01\u0E32\u0E23\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C");
+injectString("tr", "Reset column settings", "S\xFCtun ayarlar\u0131n\u0131 s\u0131f\u0131rla");
+injectString("zh-Hans", "Reset column settings", "\u91CD\u7F6E\u5217\u8BBE\u7F6E");
+injectString("zh-TW", "Reset column settings", "\u91CD\u8A2D\u6B04\u8A2D\u5B9A");
+injectString("cs", "Reset", "Obnovit");
+injectString("da-DK", "Reset", "Nulstil");
+injectString("de", "Reset", "Zur\xFCcksetzen");
+injectString("en", "Reset", "Reset");
+injectString("es", "Reset", "Restaurar");
+injectString("fi-FI", "Reset", "Palauta");
+injectString("fr", "Reset", "R\xE9initialiser");
+injectString("fr-FR", "Reset", "R\xE9initialiser");
+injectString("hu-HU", "Reset", "\xC1ll\xEDtsd vissza.");
+injectString("id", "Reset", "Atur Ulang");
+injectString("it", "Reset", "Ripristinare");
+injectString("ja", "Reset", "\u30EA\u30BB\u30C3\u30C8");
+injectString("ko-KR", "Reset", "\uC7AC\uC124\uC815");
+injectString("ms", "Reset", "Tetap Semula");
+injectString("nb-NO", "Reset", "Tilbakestill");
+injectString("nl", "Reset", "Herstellen");
+injectString("pl", "Reset", "Resetuj");
+injectString("pt-BR", "Reset", "Redefinir");
+injectString("sk-SK", "Reset", "Obnov");
+injectString("sv", "Reset", "\xC5terst\xE4ll");
+injectString("th", "Reset", "\u0E23\u0E35\u0E40\u0E0B\u0E47\u0E15");
+injectString("tr", "Reset", "S\u0131f\u0131rla");
+injectString("zh-Hans", "Reset", "\u91CD\u7F6E");
+injectString("zh-TW", "Reset", "\u91CD\u8A2D");
+export const ColumnSettings = ({
+  onReset,
+  showFooter = true,
+  children
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  return _jsxs("div", {
+    className: "zen-columns-list",
+    children: [_jsx("div", {
+      className: "zen-columns-list__content",
+      children: children
+    }), showFooter ? _jsx("div", {
+      className: "zen-columns-list__footer",
+      children: _jsx(Button, {
+        "aria-label": translate("Reset column settings"),
+        className: "zen-columns-list__reset",
+        type: "tertiary",
+        onClick: onReset,
+        children: translate("Reset")
+      })
+    }) : null]
+  });
 };
-export const TRANSLATIONS = [
-    "Reset column settings",
-    "Reset"
-];
+export const TRANSLATIONS = ["Reset column settings", "Reset"];

package/esm/table/flexible/columnsList.js

@@ -1,50 +1,112 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo } from "react";
 import { CheckboxState } from "../../checkbox/checkboxState";
 import { SelectList } from "../../selectList/selectList";
 import { groupColumns } from "./groupColumns";
 import { useLanguage } from "../../utils/localization/useLanguage";
-const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortColumns }) => {
-    const id = useId();
-    const { translate } = useLanguage();
-    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: c.id === firstColumn,
-        showCheckbox: true,
-        children: c.title
-    })), [columns, firstColumn, sortColumnsInt]);
-    const state = columns.reduce((res, c) => {
-        res.set(c.id, settings.get(c.id) !== 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.id, 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 }), [id, items, state, title, translate, onChangeItem]);
-    if (!title) {
-        return list;
+injectString("cs", "Select visible columns", "Vyberte viditeln\xE9 sloupce");
+injectString("da-DK", "Select visible columns", "V\xE6lg synlige kolonner");
+injectString("de", "Select visible columns", "Sichtbare Spalten ausw\xE4hlen");
+injectString("en", "Select visible columns", "Select visible columns");
+injectString("es", "Select visible columns", "Seleccionar columnas visibles");
+injectString("fi-FI", "Select visible columns", "Valitse n\xE4kyv\xE4t sarakkeet");
+injectString("fr", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("fr-FR", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("hu-HU", "Select visible columns", "L\xE1that\xF3 oszlopok kiv\xE1laszt\xE1sa");
+injectString("id", "Select visible columns", "Pilih kolom yang terlihat");
+injectString("it", "Select visible columns", "Selezionare colonne visibili");
+injectString("ja", "Select visible columns", "\u8868\u793A\u5217\u3092\u9078\u629E");
+injectString("ko-KR", "Select visible columns", "\uD45C\uC2DC\uB418\uB294 \uC5F4 \uC120\uD0DD");
+injectString("ms", "Select visible columns", "Pilih lajur yang boleh dilihat");
+injectString("nb-NO", "Select visible columns", "Velg synlige kolonner");
+injectString("nl", "Select visible columns", "Zichtbare kolommen selecteren");
+injectString("pl", "Select visible columns", "Wybierz widoczne kolumny");
+injectString("pt-BR", "Select visible columns", "Selecionar colunas vis\xEDveis");
+injectString("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");
+const SubColumnsList = ({
+  title,
+  columns,
+  settings,
+  firstColumn,
+  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: c.id === firstColumn,
+    showCheckbox: true,
+    children: c.title
+  })), [columns, firstColumn, sortColumnsInt]);
+  const state = columns.reduce((res, c) => {
+    res.set(c.id, settings.get(c.id) !== 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.id, 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
+  }), [id, items, state, title, translate, onChangeItem]);
+  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, firstColumn, 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, firstColumn: firstColumn, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-")));
-}
+export function ColumnSettingsList({
+  columns,
+  settings,
+  firstColumn,
+  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,
+    firstColumn: firstColumn,
+    onChange: onChange,
+    sortColumns: sortColumns
+  }, cs.map(c => c.id).join("-")));
+}