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

package/dist/table/nested/useNestedRows.js

@@ -1,87 +1,177 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.useNestedRows = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const iconChevronTop_1 = require("../../icons/iconChevronTop");
 const iconChevronBottom_1 = require("../../icons/iconChevronBottom");
+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 useLanguage_1 = require("../../utils/localization/useLanguage");
 const NestedWrapperName = "Nested";
 const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const [intExpanded, setExpanded] = (0, react_1.useState)([]);
-    const expanded = (0, react_1.useMemo)(() => {
-        if (expandedRows) {
-            return expandedRows;
-        }
-        return intExpanded;
-    }, [expandedRows, intExpanded]);
-    const onExpandedChange = (0, react_1.useCallback)((id, isExpanded) => {
-        if (onExpand) {
-            onExpand(id, isExpanded);
-            return;
-        }
-        if (isExpanded) {
-            setExpanded([id]);
-        }
-        else {
-            setExpanded(intExpanded.filter(i => i !== id));
-        }
-    }, [intExpanded, onExpand]);
-    const firstColumnId = (0, react_1.useMemo)(() => columns.length > 0 ? columns[0].id : null, [columns]);
-    const wrapper = (0, react_1.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 (0, jsx_runtime_1.jsxs)("div", { className: "zen-nested-button", children: [(0, jsx_runtime_1.jsx)("button", { className: "zen-nested-button__button", onClick: onExpandCallback, "aria-label": translate(isExpanded ? "Collapse" : "Expand"), children: isExpanded ? (0, jsx_runtime_1.jsx)(iconChevronTop_1.IconChevronTop, { size: "large" }) : (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, { size: "large" }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-nested-button__content", children: value })] });
-            }
-            return value;
-        },
-        renderHeader(title) {
-            return title;
-        }
-    }), [expanded, onExpandedChange, isMobile, translate]);
-    const nestedColumns = (0, react_1.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 = (0, react_1.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 [
-            (0, jsx_runtime_1.jsxs)("div", { className: "zen-nested-button", children: [(0, jsx_runtime_1.jsx)("button", { className: "zen-nested-button__button", onClick: onExpandCallback, "aria-label": translate(isExpanded ? "Collapse" : "Expand"), children: isExpanded ? (0, jsx_runtime_1.jsx)(iconChevronTop_1.IconChevronTop, { size: "large" }) : (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, { size: "large" }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-nested-button__content", children: primaryData })] }, "nested-button"),
-            (0, jsx_runtime_1.jsx)("div", { className: "zen-nested-button__padding", children: secondaryData }, "nested-value")
-        ];
-    }, [expanded, onExpandedChange, isMobile, translate]);
-    return { nestedColumns, nestedFeedWrapper, expanded, onExpandedChange };
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const [intExpanded, setExpanded] = (0, react_1.useState)([]);
+  const expanded = (0, react_1.useMemo)(() => {
+    if (expandedRows) {
+      return expandedRows;
+    }
+    return intExpanded;
+  }, [expandedRows, intExpanded]);
+  const onExpandedChange = (0, react_1.useCallback)((id, isExpanded) => {
+    if (onExpand) {
+      onExpand(id, isExpanded);
+      return;
+    }
+    if (isExpanded) {
+      setExpanded([id]);
+    } else {
+      setExpanded(intExpanded.filter(i => i !== id));
+    }
+  }, [intExpanded, onExpand]);
+  const firstColumnId = (0, react_1.useMemo)(() => columns.length > 0 ? columns[0].id : null, [columns]);
+  const wrapper = (0, react_1.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 (0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-nested-button",
+          children: [(0, jsx_runtime_1.jsx)("button", {
+            className: "zen-nested-button__button",
+            onClick: onExpandCallback,
+            "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
+            children: isExpanded ? (0, jsx_runtime_1.jsx)(iconChevronTop_1.IconChevronTop, {
+              size: "large"
+            }) : (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, {
+              size: "large"
+            })
+          }), (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-nested-button__content",
+            children: value
+          })]
+        });
+      }
+      return value;
+    },
+    renderHeader(title) {
+      return title;
+    }
+  }), [expanded, onExpandedChange, isMobile, translate]);
+  const nestedColumns = (0, react_1.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 = (0, react_1.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 [(0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-nested-button",
+      children: [(0, jsx_runtime_1.jsx)("button", {
+        className: "zen-nested-button__button",
+        onClick: onExpandCallback,
+        "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
+        children: isExpanded ? (0, jsx_runtime_1.jsx)(iconChevronTop_1.IconChevronTop, {
+          size: "large"
+        }) : (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, {
+          size: "large"
+        })
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-nested-button__content",
+        children: primaryData
+      })]
+    }, "nested-button"), (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-nested-button__padding",
+      children: secondaryData
+    }, "nested-value")];
+  }, [expanded, onExpandedChange, isMobile, translate]);
+  return {
+    nestedColumns,
+    nestedFeedWrapper,
+    expanded,
+    onExpandedChange
+  };
 };
-exports.useNestedRows = useNestedRows;
+exports.useNestedRows = useNestedRows;

package/dist/table/selectable/selectableHeader.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.TRANSLATIONS = exports.SelectableHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -9,45 +15,178 @@ const iconChevronDownSmall_1 = require("../../icons/iconChevronDownSmall");
 const menu_1 = require("../../menu/menu");
 const checkbox_1 = require("../../checkbox/checkbox");
 const interfaces_1 = require("./interfaces");
-const selectionOptions = [{
-        id: "all",
-        value: interfaces_1.SelectionState.All,
-        element: "all",
-        label: "Select all"
-    }, {
-        id: "page",
-        value: interfaces_1.SelectionState.CurrentPage,
-        element: "page",
-        label: "Select current page"
-    }, {
-        id: "none",
-        value: interfaces_1.SelectionState.None,
-        element: "none",
-        label: "Deselect all"
-    }];
-const SelectableHeader = ({ label, title, checked, indeterminate, disabled, onChange, calculateSelectionState, onSelect, checkboxInHeader, header, turnOffSelectAll }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const listItems = (0, react_1.useMemo)(() => selectionOptions
-        .filter(option => !turnOffSelectAll || option.value !== interfaces_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(menu_1.Menu, { title: translate("Select menu"), className: "zen-selectable-column__menu", trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-selectable-column__popup", iconClasses: "zen-icon--no-events", icon: iconChevronDownSmall_1.IconChevronDownSmall, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", title: translate("Multiple row selection menu"), "aria-label": translate("Multiple row selection menu"), type: "tertiary-black" }), children: listItems.map(item => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: item.id, name: item.name, onClick: item.onClick }, item.id)) }), [listItems, translate]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-selectable-column zen-selectable-column--with-actions", children: [checkboxInHeader !== false
-                ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-selectable-column__checkbox", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-selectable-column__checkbox-input", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, "aria-label": label, onChange: e => onChange && onChange(e.target.checked) }) }), actionsMenu] })
-                : null, header !== false
-                ? (0, jsx_runtime_1.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: interfaces_1.SelectionState.All,
+  element: "all",
+  label: translate("Select all")
+}, {
+  id: "page",
+  value: interfaces_1.SelectionState.CurrentPage,
+  element: "page",
+  label: translate("Select current page")
+}, {
+  id: "none",
+  value: interfaces_1.SelectionState.None,
+  element: "none",
+  label: translate("Deselect all")
+}];
+const SelectableHeader = ({
+  label,
+  title,
+  checked,
+  indeterminate,
+  disabled,
+  onChange,
+  calculateSelectionState,
+  onSelect,
+  checkboxInHeader,
+  header,
+  turnOffSelectAll
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const listItems = (0, react_1.useMemo)(() => getSelectionOptions(translate).filter(option => !turnOffSelectAll || option.value !== interfaces_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(menu_1.Menu, {
+    title: translate("Select menu"),
+    className: "zen-selectable-column__menu",
+    trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+      className: "zen-selectable-column__popup",
+      iconClasses: "zen-icon--no-events",
+      icon: iconChevronDownSmall_1.IconChevronDownSmall,
+      iconPosition: textIconButton_1.ButtonIconPosition.Start,
+      iconSize: "large",
+      title: translate("Multiple row selection menu"),
+      "aria-label": translate("Multiple row selection menu"),
+      type: "tertiary-black"
+    }),
+    children: listItems.map(item => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, {
+      id: item.id,
+      name: item.name,
+      onClick: item.onClick
+    }, item.id))
+  }), [listItems, translate]);
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-selectable-column zen-selectable-column--with-actions",
+    children: [checkboxInHeader !== false ? (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-selectable-column__checkbox",
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: "zen-selectable-column__checkbox-input",
+        children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, {
+          checked: checked,
+          indeterminate: indeterminate,
+          disabled: disabled,
+          title: label,
+          "aria-label": label,
+          onChange: e => onChange && onChange(e.target.checked)
+        })
+      }), actionsMenu]
+    }) : null, header !== false ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-selectable-column__content",
+      children: title
+    }) : null]
+  });
 };
 exports.SelectableHeader = SelectableHeader;
-exports.TRANSLATIONS = [
-    "Select menu",
-    "Select all",
-    "Select current page",
-    "Deselect all",
-    "Select menu",
-    "Multiple row selection menu"
-];
+exports.TRANSLATIONS = ["Select menu", "Select all", "Select current page", "Deselect all", "Select menu", "Multiple row selection menu"];