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

package/dist/table/actions/actionsMenu.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.ActionsMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -10,86 +16,173 @@ const menu_1 = require("../../menu/menu");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const skeletonList_1 = require("../../skeletonList/skeletonList");
 const menuErrorItem_1 = require("../../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_1.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_1.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) => ((0, jsx_runtime_1.jsx)(menuErrorItem_1.MenuErrorItem, { id: id, onClick: onClick }));
-const ActionsMenu = ({ entity, isNested, render, renderAsync, primaryActions }) => {
+const getErrorItem = (id, onClick) => (0, jsx_runtime_1.jsx)(menuErrorItem_1.MenuErrorItem, {
+  id: id,
+  onClick: onClick
+});
+const ActionsMenu = ({
+  entity,
+  isNested,
+  render,
+  renderAsync,
+  primaryActions
+}) => {
+  var _a;
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const generatedId = (0, react_1.useId)();
+  const buttonId = `ariaLabelBy-${entity.id || generatedId}`;
+  const errorId = `errorItem-${(0, react_1.useId)()}`;
+  const ref = (0, react_1.useRef)(null);
+  const menuItems = (0, react_1.useMemo)(() => getMenuItems(entity, isNested, render, primaryActions), [entity, isNested, render, primaryActions]);
+  const [menuItemsAsync, setMenuItemsAsync] = (0, react_1.useState)(null);
+  const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+  const [isError, setIsError] = (0, react_1.useState)(false);
+  const handleClickTrigger = (0, react_1.useCallback)(async () => {
     var _a;
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const generatedId = (0, react_1.useId)();
-    const buttonId = `ariaLabelBy-${entity.id || generatedId}`;
-    const errorId = `errorItem-${(0, react_1.useId)()}`;
-    const ref = (0, react_1.useRef)(null);
-    const menuItems = (0, react_1.useMemo)(() => getMenuItems(entity, isNested, render, primaryActions), [entity, isNested, render, primaryActions]);
-    const [menuItemsAsync, setMenuItemsAsync] = (0, react_1.useState)(null);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [isError, setIsError] = (0, react_1.useState)(false);
-    const handleClickTrigger = (0, react_1.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 = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: [...primaryActions.props.children, ...resolvedMenuItems.props.children] });
-            }
-            if (resolvedMenuItems.props.children) {
-                setMenuItemsAsync(resolvedMenuItems);
-            }
-            else {
-                setMenuItemsAsync((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: errorItem }));
-                setIsError(true);
-            }
-        }
-        catch (err) {
-            setMenuItemsAsync((0, jsx_runtime_1.jsx)(jsx_runtime_1.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 = (0, react_1.useMemo)(() => {
-        if (renderAsync) {
-            return (0, jsx_runtime_1.jsx)(button_1.Button, { title: translate("More"), disabled: isLoading, id: buttonId, ref: ref, onClick: handleClickTrigger, type: "tertiary-black", className: (0, classNames_1.classNames)([
-                    "zen-caption",
-                    "zen-actions-column__action",
-                    isError ? "zen-actions-column__action_error" : ""
-                ]), children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: "bigger" }) });
-        }
-        return (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", title: translate("More"), className: "zen-caption zen-actions-column__action", children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: "bigger" }) });
-    }, [buttonId, isLoading, isError, renderAsync, handleClickTrigger, translate]);
-    if (renderAsync) {
-        const menuItemsToRender = isLoading ?
-            (0, jsx_runtime_1.jsx)(skeletonList_1.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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(menu_1.Menu, { ariaLabelledBy: buttonId, title: translate("Actions"), triggerRef: ref, alignment: "bottom-right", children: menuItemsToRender })] });
+    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 = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+          children: [...primaryActions.props.children, ...resolvedMenuItems.props.children]
+        });
+      }
+      if (resolvedMenuItems.props.children) {
+        setMenuItemsAsync(resolvedMenuItems);
+      } else {
+        setMenuItemsAsync((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+          children: errorItem
+        }));
+        setIsError(true);
+      }
+    } catch (err) {
+      setMenuItemsAsync((0, jsx_runtime_1.jsx)(jsx_runtime_1.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);
     }
-    if (!menuItems || menuItems.length === 0) {
-        return null;
+  }, [entity, isNested, isLoading, primaryActions, errorId, renderAsync]);
+  const trigger = (0, react_1.useMemo)(() => {
+    if (renderAsync) {
+      return (0, jsx_runtime_1.jsx)(button_1.Button, {
+        title: translate("More"),
+        disabled: isLoading,
+        id: buttonId,
+        ref: ref,
+        onClick: handleClickTrigger,
+        type: "tertiary-black",
+        className: (0, classNames_1.classNames)(["zen-caption", "zen-actions-column__action", isError ? "zen-actions-column__action_error" : ""]),
+        children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, {
+          size: "bigger"
+        })
+      });
     }
-    return (0, jsx_runtime_1.jsx)(menu_1.Menu, { title: translate("Actions"), trigger: trigger, alignment: "bottom-right", children: menuItems });
+    return (0, jsx_runtime_1.jsx)(button_1.Button, {
+      type: "tertiary-black",
+      title: translate("More"),
+      className: "zen-caption zen-actions-column__action",
+      children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, {
+        size: "bigger"
+      })
+    });
+  }, [buttonId, isLoading, isError, renderAsync, handleClickTrigger, translate]);
+  if (renderAsync) {
+    const menuItemsToRender = isLoading ? (0, jsx_runtime_1.jsx)(skeletonList_1.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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [trigger, (0, jsx_runtime_1.jsx)(menu_1.Menu, {
+        ariaLabelledBy: buttonId,
+        title: translate("Actions"),
+        triggerRef: ref,
+        alignment: "bottom-right",
+        children: menuItemsToRender
+      })]
+    });
+  }
+  if (!menuItems || menuItems.length === 0) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsx)(menu_1.Menu, {
+    title: translate("Actions"),
+    trigger: trigger,
+    alignment: "bottom-right",
+    children: menuItems
+  });
 };
-exports.ActionsMenu = ActionsMenu;
+exports.ActionsMenu = ActionsMenu;

package/dist/table/flexible/columnSettings.js

@@ -1,17 +1,87 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.ColumnSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const button_1 = require("../../button/button");
-const ColumnSettings = ({ onReset, showFooter = true, children }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-columns-list", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__content", children: children }), showFooter
-                ? (0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__footer", children: (0, jsx_runtime_1.jsx)(button_1.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");
+const ColumnSettings = ({
+  onReset,
+  showFooter = true,
+  children
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-columns-list",
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-columns-list__content",
+      children: children
+    }), showFooter ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-columns-list__footer",
+      children: (0, jsx_runtime_1.jsx)(button_1.Button, {
+        "aria-label": translate("Reset column settings"),
+        className: "zen-columns-list__reset",
+        type: "tertiary",
+        onClick: onReset,
+        children: translate("Reset")
+      })
+    }) : null]
+  });
 };
 exports.ColumnSettings = ColumnSettings;
-exports.TRANSLATIONS = [
-    "Reset column settings",
-    "Reset"
-];
+exports.TRANSLATIONS = ["Reset column settings", "Reset"];

package/dist/table/flexible/columnsList.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.ColumnSettingsList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -7,48 +13,109 @@ const checkboxState_1 = require("../../checkbox/checkboxState");
 const selectList_1 = require("../../selectList/selectList");
 const groupColumns_1 = require("./groupColumns");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortColumns }) => {
-    const id = (0, react_1.useId)();
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
-        if (sortColumns) {
-            return sortColumns(a.title, b.title);
-        }
-        return 0;
-    }, [sortColumns]);
-    const items = (0, react_1.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_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
-        return res;
-    }, new Map());
-    const onChangeItem = (0, react_1.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_1.CheckboxState.On);
-        });
-        onChange && onChange(newSettings);
-    }, [columns, settings, onChange]);
-    const list = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(selectList_1.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 = (0, react_1.useId)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
+    if (sortColumns) {
+      return sortColumns(a.title, b.title);
     }
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-columns-list__sub-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__title zen-ellipsis", children: title }), list] });
+    return 0;
+  }, [sortColumns]);
+  const items = (0, react_1.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_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
+    return res;
+  }, new Map());
+  const onChangeItem = (0, react_1.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_1.CheckboxState.On);
+    });
+    onChange && onChange(newSettings);
+  }, [columns, settings, onChange]);
+  const list = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(selectList_1.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 (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-columns-list__sub-section",
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-columns-list__title zen-ellipsis",
+      children: title
+    }), list]
+  });
 };
-function ColumnSettingsList({ columns, settings, firstColumn, onChange, sortGroups, sortColumns }) {
-    const groupped = (0, groupColumns_1.groupColumns)(columns);
-    const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
-        if (sortGroups) {
-            return sortGroups(a[0], b[0]);
-        }
-        return 0;
-    }, [sortGroups]);
-    return Array.from(groupped.entries()).sort(sortGroupsInt).map(([title, cs]) => (0, jsx_runtime_1.jsx)(SubColumnsList, { title: title, columns: cs, settings: settings, firstColumn: firstColumn, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-")));
+function ColumnSettingsList({
+  columns,
+  settings,
+  firstColumn,
+  onChange,
+  sortGroups,
+  sortColumns
+}) {
+  const groupped = (0, groupColumns_1.groupColumns)(columns);
+  const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
+    if (sortGroups) {
+      return sortGroups(a[0], b[0]);
+    }
+    return 0;
+  }, [sortGroups]);
+  return Array.from(groupped.entries()).sort(sortGroupsInt).map(([title, cs]) => (0, jsx_runtime_1.jsx)(SubColumnsList, {
+    title: title,
+    columns: cs,
+    settings: settings,
+    firstColumn: firstColumn,
+    onChange: onChange,
+    sortColumns: sortColumns
+  }, cs.map(c => c.id).join("-")));
 }
-exports.ColumnSettingsList = ColumnSettingsList;
+exports.ColumnSettingsList = ColumnSettingsList;

package/dist/table/flexible/columnsPopup.js

@@ -1,29 +1,86 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ColumnsPopup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const columnSettings_1 = require("./columnSettings");
 const popup_1 = require("../../popup/popup");
 const columnsList_1 = require("./columnsList");
+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("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");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const ColumnsPopup = ({ onReset, onChange, columnSettings, columns, sortGroups, sortColumns, triggerRef }) => {
-    const onResetListener = (0, react_1.useCallback)(() => {
-        onReset();
-    }, [onReset]);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const listOfColumns = (0, react_1.useMemo)(() => {
-        var _a;
-        const firstColumn = ((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.id) || "";
-        const columnSettingsMap = new Map(columnSettings.map(s => [s.name, s.visible]));
-        return (0, jsx_runtime_1.jsx)(columnsList_1.ColumnSettingsList, { columns: columns.filter(c => c.title), settings: columnSettingsMap, firstColumn: firstColumn, onChange: (newSettings) => {
-                const settings = (columnSettings.map(s => {
-                    const visible = newSettings.get(s.name) !== false;
-                    return Object.assign(Object.assign({}, s), { visible });
-                }));
-                onChange(settings);
-            }, sortGroups: sortGroups, sortColumns: sortColumns });
-    }, [columns, columnSettings, sortGroups, sortColumns, onChange]);
-    return (0, jsx_runtime_1.jsx)(popup_1.Popup, { ariaLabel: translate("Column Settings"), triggerRef: triggerRef, alignment: "bottom-right", children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup");
+const ColumnsPopup = ({
+  onReset,
+  onChange,
+  columnSettings,
+  columns,
+  sortGroups,
+  sortColumns,
+  triggerRef
+}) => {
+  const onResetListener = (0, react_1.useCallback)(() => {
+    onReset();
+  }, [onReset]);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const listOfColumns = (0, react_1.useMemo)(() => {
+    var _a;
+    const firstColumn = ((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.id) || "";
+    const columnSettingsMap = new Map(columnSettings.map(s => [s.name, s.visible]));
+    return (0, jsx_runtime_1.jsx)(columnsList_1.ColumnSettingsList, {
+      columns: columns.filter(c => c.title),
+      settings: columnSettingsMap,
+      firstColumn: firstColumn,
+      onChange: newSettings => {
+        const settings = columnSettings.map(s => {
+          const visible = newSettings.get(s.name) !== false;
+          return Object.assign(Object.assign({}, s), {
+            visible
+          });
+        });
+        onChange(settings);
+      },
+      sortGroups: sortGroups,
+      sortColumns: sortColumns
+    });
+  }, [columns, columnSettings, sortGroups, sortColumns, onChange]);
+  return (0, jsx_runtime_1.jsx)(popup_1.Popup, {
+    ariaLabel: translate("Column Settings"),
+    triggerRef: triggerRef,
+    alignment: "bottom-right",
+    children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, {
+      onReset: onResetListener,
+      children: listOfColumns
+    })
+  }, "flexible-popup");
 };
-exports.ColumnsPopup = ColumnsPopup;
+exports.ColumnsPopup = ColumnsPopup;