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

package/esm/table/flexible/columnsPopup.js

@@ -1,25 +1,77 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { ColumnSettings } from "./columnSettings";
 import { Popup } from "../../popup/popup";
 import { ColumnSettingsList } from "./columnsList";
 import { useLanguage } from "../../utils/localization/useLanguage";
-export const ColumnsPopup = ({ onReset, onChange, columnSettings, columns, sortGroups, sortColumns, triggerRef }) => {
-    const onResetListener = useCallback(() => {
-        onReset();
-    }, [onReset]);
-    const { translate } = useLanguage();
-    const listOfColumns = 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 _jsx(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 _jsx(Popup, { ariaLabel: translate("Column Settings"), triggerRef: triggerRef, alignment: "bottom-right", children: _jsx(ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup");
-};
+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");
+export const ColumnsPopup = ({
+  onReset,
+  onChange,
+  columnSettings,
+  columns,
+  sortGroups,
+  sortColumns,
+  triggerRef
+}) => {
+  const onResetListener = useCallback(() => {
+    onReset();
+  }, [onReset]);
+  const {
+    translate
+  } = useLanguage();
+  const listOfColumns = 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 _jsx(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 _jsx(Popup, {
+    ariaLabel: translate("Column Settings"),
+    triggerRef: triggerRef,
+    alignment: "bottom-right",
+    children: _jsx(ColumnSettings, {
+      onReset: onResetListener,
+      children: listOfColumns
+    })
+  }, "flexible-popup");
+};

package/esm/table/nested/useNestedRows.js

@@ -1,83 +1,168 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import { IconChevronTop } from "../../icons/iconChevronTop";
 import { IconChevronBottom } from "../../icons/iconChevronBottom";
 import { useLanguage } from "../../utils/localization/useLanguage";
+injectString("cs", "Collapse", "Sbalit");
+injectString("da-DK", "Collapse", "Fold sammen");
+injectString("de", "Collapse", "Ausblenden");
+injectString("en", "Collapse", "Collapse");
+injectString("es", "Collapse", "Contraer");
+injectString("fi-FI", "Collapse", "Tiivist\xE4");
+injectString("fr", "Collapse", "R\xE9duire");
+injectString("fr-FR", "Collapse", "R\xE9duire");
+injectString("hu-HU", "Collapse", "\xD6sszecsuk\xE1s");
+injectString("id", "Collapse", "Ciutkan");
+injectString("it", "Collapse", "Comprimi");
+injectString("ja", "Collapse", "\u6298\u308A\u7573\u3080");
+injectString("ko-KR", "Collapse", "\uBB34\uB108\uC9C0\uB2E4");
+injectString("ms", "Collapse", "Runtuhkan");
+injectString("nb-NO", "Collapse", "Kollapse");
+injectString("nl", "Collapse", "Samenvouwen");
+injectString("pl", "Collapse", "Zwi\u0144");
+injectString("pt-BR", "Collapse", "Recolher");
+injectString("sk-SK", "Collapse", "Zlo\u017E.");
+injectString("sv", "Collapse", "Komprimera");
+injectString("th", "Collapse", "\u0E22\u0E38\u0E1A");
+injectString("tr", "Collapse", "Daralt");
+injectString("zh-Hans", "Collapse", "\u6298\u53E0");
+injectString("zh-TW", "Collapse", "\u647A\u758A");
+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("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");
 const NestedWrapperName = "Nested";
 export const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
-    const { translate } = useLanguage();
-    const [intExpanded, setExpanded] = useState([]);
-    const expanded = useMemo(() => {
-        if (expandedRows) {
-            return expandedRows;
-        }
-        return intExpanded;
-    }, [expandedRows, intExpanded]);
-    const onExpandedChange = useCallback((id, isExpanded) => {
-        if (onExpand) {
-            onExpand(id, isExpanded);
-            return;
-        }
-        if (isExpanded) {
-            setExpanded([id]);
-        }
-        else {
-            setExpanded(intExpanded.filter(i => i !== id));
-        }
-    }, [intExpanded, onExpand]);
-    const firstColumnId = useMemo(() => columns.length > 0 ? columns[0].id : null, [columns]);
-    const wrapper = useMemo(() => ({
-        name: NestedWrapperName,
-        render(value, entity, isNested) {
-            if (!entity) {
-                return null;
-            }
-            if (isMobile) {
-                return value;
-            }
-            if (isNested) {
-                return value;
-            }
-            const isExpanded = expanded.indexOf(entity.id) !== -1;
-            const onExpandCallback = () => {
-                onExpandedChange(entity.id, !isExpanded);
-            };
-            if ("children" in entity) {
-                return _jsxs("div", { className: "zen-nested-button", children: [_jsx("button", { className: "zen-nested-button__button", onClick: onExpandCallback, "aria-label": translate(isExpanded ? "Collapse" : "Expand"), children: isExpanded ? _jsx(IconChevronTop, { size: "large" }) : _jsx(IconChevronBottom, { size: "large" }) }), _jsx("div", { className: "zen-nested-button__content", children: value })] });
-            }
-            return value;
-        },
-        renderHeader(title) {
-            return title;
-        }
-    }), [expanded, onExpandedChange, isMobile, translate]);
-    const nestedColumns = useMemo(() => {
-        const newColumns = columns.map(c => (Object.assign({}, c)));
-        // Add nested wrapper to the first column
-        const firstColumn = newColumns.find(c => c.id === firstColumnId);
-        if (firstColumn) {
-            firstColumn.wrappers = [...firstColumn.wrappers || [], wrapper];
-        }
-        return newColumns;
-    }, [columns, firstColumnId, wrapper]);
-    const nestedFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
-        if (!entity.children) {
-            return [primaryData, secondaryData];
-        }
-        if (isNested) {
-            return [primaryData, secondaryData];
-        }
-        if (!isMobile) {
-            return [primaryData, secondaryData];
-        }
-        const isExpanded = expanded.indexOf(entity.id) !== -1;
-        const onExpandCallback = () => {
-            onExpandedChange(entity.id, !isExpanded);
-        };
-        return [
-            _jsxs("div", { className: "zen-nested-button", children: [_jsx("button", { className: "zen-nested-button__button", onClick: onExpandCallback, "aria-label": translate(isExpanded ? "Collapse" : "Expand"), children: isExpanded ? _jsx(IconChevronTop, { size: "large" }) : _jsx(IconChevronBottom, { size: "large" }) }), _jsx("div", { className: "zen-nested-button__content", children: primaryData })] }, "nested-button"),
-            _jsx("div", { className: "zen-nested-button__padding", children: secondaryData }, "nested-value")
-        ];
-    }, [expanded, onExpandedChange, isMobile, translate]);
-    return { nestedColumns, nestedFeedWrapper, expanded, onExpandedChange };
-};
+  const {
+    translate
+  } = useLanguage();
+  const [intExpanded, setExpanded] = useState([]);
+  const expanded = useMemo(() => {
+    if (expandedRows) {
+      return expandedRows;
+    }
+    return intExpanded;
+  }, [expandedRows, intExpanded]);
+  const onExpandedChange = useCallback((id, isExpanded) => {
+    if (onExpand) {
+      onExpand(id, isExpanded);
+      return;
+    }
+    if (isExpanded) {
+      setExpanded([id]);
+    } else {
+      setExpanded(intExpanded.filter(i => i !== id));
+    }
+  }, [intExpanded, onExpand]);
+  const firstColumnId = useMemo(() => columns.length > 0 ? columns[0].id : null, [columns]);
+  const wrapper = useMemo(() => ({
+    name: NestedWrapperName,
+    render(value, entity, isNested) {
+      if (!entity) {
+        return null;
+      }
+      if (isMobile) {
+        return value;
+      }
+      if (isNested) {
+        return value;
+      }
+      const isExpanded = expanded.indexOf(entity.id) !== -1;
+      const onExpandCallback = () => {
+        onExpandedChange(entity.id, !isExpanded);
+      };
+      if ("children" in entity) {
+        return _jsxs("div", {
+          className: "zen-nested-button",
+          children: [_jsx("button", {
+            className: "zen-nested-button__button",
+            onClick: onExpandCallback,
+            "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
+            children: isExpanded ? _jsx(IconChevronTop, {
+              size: "large"
+            }) : _jsx(IconChevronBottom, {
+              size: "large"
+            })
+          }), _jsx("div", {
+            className: "zen-nested-button__content",
+            children: value
+          })]
+        });
+      }
+      return value;
+    },
+    renderHeader(title) {
+      return title;
+    }
+  }), [expanded, onExpandedChange, isMobile, translate]);
+  const nestedColumns = useMemo(() => {
+    const newColumns = columns.map(c => Object.assign({}, c));
+    // Add nested wrapper to the first column
+    const firstColumn = newColumns.find(c => c.id === firstColumnId);
+    if (firstColumn) {
+      firstColumn.wrappers = [...(firstColumn.wrappers || []), wrapper];
+    }
+    return newColumns;
+  }, [columns, firstColumnId, wrapper]);
+  const nestedFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
+    if (!entity.children) {
+      return [primaryData, secondaryData];
+    }
+    if (isNested) {
+      return [primaryData, secondaryData];
+    }
+    if (!isMobile) {
+      return [primaryData, secondaryData];
+    }
+    const isExpanded = expanded.indexOf(entity.id) !== -1;
+    const onExpandCallback = () => {
+      onExpandedChange(entity.id, !isExpanded);
+    };
+    return [_jsxs("div", {
+      className: "zen-nested-button",
+      children: [_jsx("button", {
+        className: "zen-nested-button__button",
+        onClick: onExpandCallback,
+        "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
+        children: isExpanded ? _jsx(IconChevronTop, {
+          size: "large"
+        }) : _jsx(IconChevronBottom, {
+          size: "large"
+        })
+      }), _jsx("div", {
+        className: "zen-nested-button__content",
+        children: primaryData
+      })]
+    }, "nested-button"), _jsx("div", {
+      className: "zen-nested-button__padding",
+      children: secondaryData
+    }, "nested-value")];
+  }, [expanded, onExpandedChange, isMobile, translate]);
+  return {
+    nestedColumns,
+    nestedFeedWrapper,
+    expanded,
+    onExpandedChange
+  };
+};

package/esm/table/selectable/selectableHeader.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useLanguage } from "../../utils/localization/useLanguage";
@@ -6,44 +7,177 @@ import { IconChevronDownSmall } from "../../icons/iconChevronDownSmall";
 import { Menu } from "../../menu/menu";
 import { Checkbox } from "../../checkbox/checkbox";
 import { SelectionState } from "./interfaces";
-const selectionOptions = [{
-        id: "all",
-        value: SelectionState.All,
-        element: "all",
-        label: "Select all"
-    }, {
-        id: "page",
-        value: SelectionState.CurrentPage,
-        element: "page",
-        label: "Select current page"
-    }, {
-        id: "none",
-        value: SelectionState.None,
-        element: "none",
-        label: "Deselect all"
-    }];
-export const SelectableHeader = ({ label, title, checked, indeterminate, disabled, onChange, calculateSelectionState, onSelect, checkboxInHeader, header, turnOffSelectAll }) => {
-    const { translate } = useLanguage();
-    const listItems = useMemo(() => selectionOptions
-        .filter(option => !turnOffSelectAll || option.value !== SelectionState.All)
-        .map(option => ({
-        id: option.id,
-        name: translate(option.label),
-        onClick: () => onSelect && onSelect(option.id)
-    }))
-        .filter(option => option.id !== calculateSelectionState()), [calculateSelectionState, onSelect, translate, turnOffSelectAll]);
-    const actionsMenu = useMemo(() => _jsx(Menu, { title: translate("Select menu"), className: "zen-selectable-column__menu", trigger: _jsx(TextIconButton, { className: "zen-selectable-column__popup", iconClasses: "zen-icon--no-events", icon: IconChevronDownSmall, iconPosition: ButtonIconPosition.Start, iconSize: "large", title: translate("Multiple row selection menu"), "aria-label": translate("Multiple row selection menu"), type: "tertiary-black" }), children: listItems.map(item => _jsx(Menu.Item, { id: item.id, name: item.name, onClick: item.onClick }, item.id)) }), [listItems, translate]);
-    return _jsxs("div", { className: "zen-selectable-column zen-selectable-column--with-actions", children: [checkboxInHeader !== false
-                ? _jsxs("div", { className: "zen-selectable-column__checkbox", children: [_jsx("div", { className: "zen-selectable-column__checkbox-input", children: _jsx(Checkbox, { checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, "aria-label": label, onChange: e => onChange && onChange(e.target.checked) }) }), actionsMenu] })
-                : null, header !== false
-                ? _jsx("div", { className: "zen-selectable-column__content", children: title })
-                : null] });
+injectString("cs", "Select all", "Vybrat v\u0161e");
+injectString("da-DK", "Select all", "V\xE6lg alle");
+injectString("de", "Select all", "Alle ausw\xE4hlen");
+injectString("en", "Select all", "Select all");
+injectString("es", "Select all", "Seleccionar todo");
+injectString("fi-FI", "Select all", "Valitse kaikki");
+injectString("fr", "Select all", "S\xE9lectionner tout");
+injectString("fr-FR", "Select all", "S\xE9lectionner tout");
+injectString("hu-HU", "Select all", "V\xE1laszd ki az \xF6sszeset.");
+injectString("id", "Select all", "Pilih semua");
+injectString("it", "Select all", "Selezionare tutto");
+injectString("ja", "Select all", "\u3059\u3079\u3066\u9078\u629E");
+injectString("ko-KR", "Select all", "\uBAA8\uB450 \uC120\uD0DD");
+injectString("ms", "Select all", "Pilih semua");
+injectString("nb-NO", "Select all", "Velg alle");
+injectString("nl", "Select all", "Alles selecteren");
+injectString("pl", "Select all", "Wybierz wszystko");
+injectString("pt-BR", "Select all", "Selecionar tudo");
+injectString("sk-SK", "Select all", "Vyber v\u0161etko.");
+injectString("sv", "Select all", "V\xE4lj alla");
+injectString("th", "Select all", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "Select all", "T\xFCm\xFCn\xFC se\xE7");
+injectString("zh-Hans", "Select all", "\u5168\u9009");
+injectString("zh-TW", "Select all", "\u5168\u9078");
+injectString("cs", "Select current page", "Vybrat aktu\xE1ln\xED str\xE1nku");
+injectString("da-DK", "Select current page", "V\xE6lg aktuel side");
+injectString("de", "Select current page", "Aktuelle Seite ausw\xE4hlen");
+injectString("en", "Select current page", "Select current page");
+injectString("es", "Select current page", "Seleccionar p\xE1gina actual");
+injectString("fi-FI", "Select current page", "Valitse nykyinen sivu");
+injectString("fr", "Select current page", "S\xE9lectionner la page actuelle");
+injectString("fr-FR", "Select current page", "S\xE9lectionner toute la page");
+injectString("hu-HU", "Select current page", "V\xE1laszd ki az aktu\xE1lis oldalt.");
+injectString("id", "Select current page", "Pilih halaman saat ini");
+injectString("it", "Select current page", "Selezionare pagina corrente");
+injectString("ja", "Select current page", "\u73FE\u5728\u306E\u30DA\u30FC\u30B8\u3092\u9078\u629E");
+injectString("ko-KR", "Select current page", "\uD604\uC7AC \uD398\uC774\uC9C0 \uC120\uD0DD");
+injectString("ms", "Select current page", "Pilih halaman semasa");
+injectString("nb-NO", "Select current page", "Velg n\xE5v\xE6rende side");
+injectString("nl", "Select current page", "Huidige pagina selecteren");
+injectString("pl", "Select current page", "Wybierz bie\u017C\u0105c\u0105 stron\u0119");
+injectString("pt-BR", "Select current page", "Selecionar p\xE1gina atual");
+injectString("sk-SK", "Select current page", "Vyber aktu\xE1lnu str\xE1nku.");
+injectString("sv", "Select current page", "V\xE4lj nuvarande sida");
+injectString("th", "Select current page", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19");
+injectString("tr", "Select current page", "Ge\xE7erli sayfay\u0131 se\xE7");
+injectString("zh-Hans", "Select current page", "\u9009\u62E9\u5F53\u524D\u9875\u9762");
+injectString("zh-TW", "Select current page", "\u9078\u53D6\u76EE\u524D\u9801\u9762");
+injectString("cs", "Deselect all", "Zru\u0161it v\xFDb\u011Br v\u0161ech");
+injectString("da-DK", "Deselect all", "Frav\xE6lg alle");
+injectString("de", "Deselect all", "Auswahl f\xFCr alle aufheben");
+injectString("en", "Deselect all", "Deselect all");
+injectString("es", "Deselect all", "Deseleccionar todo");
+injectString("fi-FI", "Deselect all", "Poista kaikki valinnat");
+injectString("fr", "Deselect all", "D\xE9s\xE9lectionner tout");
+injectString("fr-FR", "Deselect all", "D\xE9s\xE9lectionner tout");
+injectString("hu-HU", "Deselect all", "Ne v\xE1lassz ki semmit.");
+injectString("id", "Deselect all", "Batalkan pilih semua");
+injectString("it", "Deselect all", "Deselezionare tutto");
+injectString("ja", "Deselect all", "\u3059\u3079\u3066\u3092\u9078\u629E\u89E3\u9664");
+injectString("ko-KR", "Deselect all", "\uBAA8\uB450 \uC120\uD0DD \uCDE8\uC18C");
+injectString("ms", "Deselect all", "Nyahpilih semua");
+injectString("nb-NO", "Deselect all", "Fjern alle valg");
+injectString("nl", "Deselect all", "Alles deselecteren");
+injectString("pl", "Deselect all", "Usu\u0144 wyb\xF3r wszystkich");
+injectString("pt-BR", "Deselect all", "Desmarcar tudo");
+injectString("sk-SK", "Deselect all", "Zru\u0161 v\xFDber v\u0161etk\xFDch.");
+injectString("sv", "Deselect all", "Avmarkera alla");
+injectString("th", "Deselect all", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "Deselect all", "T\xFCm\xFCn\xFCn se\xE7imini iptal et");
+injectString("zh-Hans", "Deselect all", "\u53D6\u6D88\u5168\u9009");
+injectString("zh-TW", "Deselect all", "\u53D6\u6D88\u5168\u9078");
+injectString("cs", "Multiple row selection menu", "Nab\xEDdka s\xA0v\xEDcen\xE1sobn\xFDm v\xFDb\u011Brem \u0159\xE1dk\u016F");
+injectString("da-DK", "Multiple row selection menu", "Menu til valg af flere r\xE6kker");
+injectString("de", "Multiple row selection menu", "Men\xFC Auswahl mehrerer Reihen");
+injectString("en", "Multiple row selection menu", "Multiple row selection menu");
+injectString("es", "Multiple row selection menu", "Men\xFA de selecci\xF3n de varias filas");
+injectString("fi-FI", "Multiple row selection menu", "Usean rivin valintavalikko");
+injectString("fr", "Multiple row selection menu", "Menu de s\xE9lection \xE0 plusieurs lignes");
+injectString("fr-FR", "Multiple row selection menu", "Menu de s\xE9lection \xE0 lignes multiples");
+injectString("hu-HU", "Multiple row selection menu", "T\xF6bb soros kijel\xF6l\xE9s men\xFC");
+injectString("id", "Multiple row selection menu", "Menu pilihan baris ganda");
+injectString("it", "Multiple row selection menu", "Menu di selezione a righe multiple");
+injectString("ja", "Multiple row selection menu", "\u8907\u6570\u884C\u9078\u629E\u30E1\u30CB\u30E5\u30FC");
+injectString("ko-KR", "Multiple row selection menu", "\uC5EC\uB7EC \uD589 \uC120\uD0DD \uBA54\uB274");
+injectString("ms", "Multiple row selection menu", "Menu pemilihan berbilang baris");
+injectString("nb-NO", "Multiple row selection menu", "Meny for valg av flere rader");
+injectString("nl", "Multiple row selection menu", "Selectiemenu meerdere rijen");
+injectString("pl", "Multiple row selection menu", "Menu wielokrotnego wyboru wiersza");
+injectString("pt-BR", "Multiple row selection menu", "Menu de sele\xE7\xE3o de v\xE1rias linhas");
+injectString("sk-SK", "Multiple row selection menu", "Ponuka v\xFDberu viacer\xFDch riadkov");
+injectString("sv", "Multiple row selection menu", "Meny f\xF6r val av flera rader");
+injectString("th", "Multiple row selection menu", "\u0E40\u0E21\u0E19\u0E39\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2B\u0E25\u0E32\u0E22\u0E41\u0E16\u0E27");
+injectString("tr", "Multiple row selection menu", "\xC7oklu s\u0131ra se\xE7imi men\xFCs\xFC");
+injectString("zh-Hans", "Multiple row selection menu", "\u591A\u884C\u9009\u62E9\u83DC\u5355");
+injectString("zh-TW", "Multiple row selection menu", "\u591A\u5217\u9078\u64C7\u9078\u55AE");
+const getSelectionOptions = translate => [{
+  id: "all",
+  value: SelectionState.All,
+  element: "all",
+  label: translate("Select all")
+}, {
+  id: "page",
+  value: SelectionState.CurrentPage,
+  element: "page",
+  label: translate("Select current page")
+}, {
+  id: "none",
+  value: SelectionState.None,
+  element: "none",
+  label: translate("Deselect all")
+}];
+export const SelectableHeader = ({
+  label,
+  title,
+  checked,
+  indeterminate,
+  disabled,
+  onChange,
+  calculateSelectionState,
+  onSelect,
+  checkboxInHeader,
+  header,
+  turnOffSelectAll
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const listItems = useMemo(() => getSelectionOptions(translate).filter(option => !turnOffSelectAll || option.value !== SelectionState.All).map(option => ({
+    id: option.id,
+    name: option.label,
+    onClick: () => onSelect && onSelect(option.id)
+  })).filter(option => option.id !== calculateSelectionState()), [calculateSelectionState, onSelect, translate, turnOffSelectAll]);
+  const actionsMenu = useMemo(() => _jsx(Menu, {
+    title: translate("Select menu"),
+    className: "zen-selectable-column__menu",
+    trigger: _jsx(TextIconButton, {
+      className: "zen-selectable-column__popup",
+      iconClasses: "zen-icon--no-events",
+      icon: IconChevronDownSmall,
+      iconPosition: ButtonIconPosition.Start,
+      iconSize: "large",
+      title: translate("Multiple row selection menu"),
+      "aria-label": translate("Multiple row selection menu"),
+      type: "tertiary-black"
+    }),
+    children: listItems.map(item => _jsx(Menu.Item, {
+      id: item.id,
+      name: item.name,
+      onClick: item.onClick
+    }, item.id))
+  }), [listItems, translate]);
+  return _jsxs("div", {
+    className: "zen-selectable-column zen-selectable-column--with-actions",
+    children: [checkboxInHeader !== false ? _jsxs("div", {
+      className: "zen-selectable-column__checkbox",
+      children: [_jsx("div", {
+        className: "zen-selectable-column__checkbox-input",
+        children: _jsx(Checkbox, {
+          checked: checked,
+          indeterminate: indeterminate,
+          disabled: disabled,
+          title: label,
+          "aria-label": label,
+          onChange: e => onChange && onChange(e.target.checked)
+        })
+      }), actionsMenu]
+    }) : null, header !== false ? _jsx("div", {
+      className: "zen-selectable-column__content",
+      children: title
+    }) : null]
+  });
 };
-export const TRANSLATIONS = [
-    "Select menu",
-    "Select all",
-    "Select current page",
-    "Deselect all",
-    "Select menu",
-    "Multiple row selection menu"
-];
+export const TRANSLATIONS = ["Select menu", "Select all", "Select current page", "Deselect all", "Select menu", "Multiple row selection menu"];