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

package/dist/dataGrid/withFlexibleColumns/components/columnSettings.js

@@ -1,18 +1,92 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ColumnSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("../../../button/button");
 const buttonType_1 = require("../../../button/buttonType");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
-const ColumnSettingsInner = ({ onReset, showFooter = true, children, ref }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-columns-list", ref: ref, 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: buttonType_1.ButtonType.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 ColumnSettingsInner = ({
+  onReset,
+  showFooter = true,
+  children,
+  ref
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-columns-list",
+    ref: ref,
+    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: buttonType_1.ButtonType.Tertiary,
+        onClick: onReset,
+        children: translate("Reset")
+      })
+    }) : null]
+  });
 };
 const ColumnSettingsComp = ColumnSettingsInner;
-exports.ColumnSettings = Object.assign(ColumnSettingsComp, { translations: [
-        "Reset column settings",
-        "Reset"
-    ] });
+exports.ColumnSettings = Object.assign(ColumnSettingsComp, {
+  translations: ["Reset column settings", "Reset"]
+});

package/dist/dataGrid/withFlexibleColumns/components/columnSettingsSidePanel.js

@@ -1,24 +1,56 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ColumnSettingsSidePanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const mobileSheet_1 = require("../../../mobileSheet/mobileSheet");
 const button_1 = require("../../../button/button");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
-const ColumnSettingsSidePanelComp = ({ triggerRef, isOpen, onOpen, onClose, onReset, children }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const abortEventsControllerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {
-            (_a = abortEventsControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
-            abortEventsControllerRef.current = new AbortController();
-            triggerRef.current.addEventListener("click", () => onOpen(!isOpen), { signal: abortEventsControllerRef.current.signal });
-        }
-    }, [triggerRef, isOpen, onOpen]);
-    return (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { panelPosition: "right", triggerRef: triggerRef, label: translate("Customize view"), isOpen: isOpen, onCloseClick: onClose, onHidePanel: onClose, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: translate("Customize view") }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: children }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onReset, type: "tertiary", children: "Reset" }) })] });
+const ColumnSettingsSidePanelComp = ({
+  triggerRef,
+  isOpen,
+  onOpen,
+  onClose,
+  onReset,
+  children
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const abortEventsControllerRef = (0, react_1.useRef)(null);
+  (0, react_1.useEffect)(() => {
+    var _a;
+    if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {
+      (_a = abortEventsControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+      abortEventsControllerRef.current = new AbortController();
+      triggerRef.current.addEventListener("click", () => onOpen(!isOpen), {
+        signal: abortEventsControllerRef.current.signal
+      });
+    }
+  }, [triggerRef, isOpen, onOpen]);
+  return (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
+    panelPosition: "right",
+    triggerRef: triggerRef,
+    label: translate("Customize view"),
+    isOpen: isOpen,
+    onCloseClick: onClose,
+    onHidePanel: onClose,
+    children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, {
+      children: translate("Customize view")
+    }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, {
+      children: children
+    }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, {
+      children: (0, jsx_runtime_1.jsx)(button_1.Button, {
+        onClick: onReset,
+        type: "tertiary",
+        children: "Reset"
+      })
+    })]
+  });
 };
-exports.ColumnSettingsSidePanel = Object.assign(ColumnSettingsSidePanelComp, { translations: [
-        "Customize view"
-    ] });
+exports.ColumnSettingsSidePanel = Object.assign(ColumnSettingsSidePanelComp, {
+  translations: ["Customize view"]
+});

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.js

@@ -1,7 +1,133 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.BulkActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "{1} selected", "{1} vybran\xFD/vybran\xE9");
+injectString("da-DK", "{1} selected", "{1} valgt");
+injectString("de", "{1} selected", "{1} ausgew\xE4hlt");
+injectString("en", "{1} selected", "{1} selected");
+injectString("es", "{1} selected", "Seleccionados: {1}");
+injectString("fi-FI", "{1} selected", "{1} valittu");
+injectString("fr", "{1} selected", "{1} s\xE9lectionn\xE9(s)");
+injectString("fr-FR", "{1} selected", "{1} s\xE9lectionn\xE9(s)");
+injectString("hu-HU", "{1} selected", "Kiv\xE1lasztva: .");
+injectString("id", "{1} selected", "{1} dipilih");
+injectString("it", "{1} selected", "Elementi selezionati: {1}");
+injectString("ja", "{1} selected", "{1} \u3064\u9078\u629E");
+injectString("ko-KR", "{1} selected", "{1} \uC120\uD0DD\uB428");
+injectString("ms", "{1} selected", "{1} dipilih");
+injectString("nb-NO", "{1} selected", "{1} valgt");
+injectString("nl", "{1} selected", "{1} geselecteerd");
+injectString("pl", "{1} selected", "Wybrano {1}");
+injectString("pt-BR", "{1} selected", "{1} selecionado(s)");
+injectString("sk-SK", "{1} selected", "{1} vybran\xE9");
+injectString("sv", "{1} selected", "{1} vald");
+injectString("th", "{1} selected", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E25\u0E49\u0E27 {1}");
+injectString("tr", "{1} selected", "{1} se\xE7ildi");
+injectString("zh-Hans", "{1} selected", "\u5DF2\u9009\u4E2D {1} \u9879");
+injectString("zh-TW", "{1} selected", "\u5DF2\u9078\u53D6 {1} \u500B");
+injectString("cs", "All", "V\u0161e");
+injectString("da-DK", "All", "Alle");
+injectString("de", "All", "Alle");
+injectString("en", "All", "All");
+injectString("es", "All", "Todo");
+injectString("fi-FI", "All", "Kaikki");
+injectString("fr", "All", "Tout");
+injectString("fr-FR", "All", "Tous");
+injectString("hu-HU", "All", "Minden");
+injectString("id", "All", "Semua");
+injectString("it", "All", "Tutti");
+injectString("ja", "All", "\u3059\u3079\u3066");
+injectString("ko-KR", "All", "\uC804\uCCB4");
+injectString("ms", "All", "Semua");
+injectString("nb-NO", "All", "Alle");
+injectString("nl", "All", "Alle");
+injectString("pl", "All", "Wszystkie");
+injectString("pt-BR", "All", "Tudo");
+injectString("sk-SK", "All", "V\u0161etko");
+injectString("sv", "All", "Alla");
+injectString("th", "All", "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "All", "T\xFCm\xFC");
+injectString("zh-Hans", "All", "\u5168\u90E8");
+injectString("zh-TW", "All", "\u5168\u90E8");
+injectString("cs", "Clear selection", "Vymazat v\xFDb\u011Br");
+injectString("da-DK", "Clear selection", "Ryd markering");
+injectString("de", "Clear selection", "Auswahl l\xF6schen");
+injectString("en", "Clear selection", "Clear selection");
+injectString("es", "Clear selection", "Borrar selecci\xF3n");
+injectString("fi-FI", "Clear selection", "Tyhjenn\xE4 valinta");
+injectString("fr", "Clear selection", "Effacer la s\xE9lection");
+injectString("fr-FR", "Clear selection", "Effacer la s\xE9lection");
+injectString("hu-HU", "Clear selection", "T\xF6r\xF6ld a kijel\xF6l\xE9st.");
+injectString("id", "Clear selection", "Hapus pilihan");
+injectString("it", "Clear selection", "Cancellare selezione");
+injectString("ja", "Clear selection", "\u9078\u629E\u3092\u30AF\u30EA\u30A2\u3057\u307E\u3059");
+injectString("ko-KR", "Clear selection", "\uC120\uD0DD \uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear selection", "Kosongkan pilihan");
+injectString("nb-NO", "Clear selection", "Fjern utvalg");
+injectString("nl", "Clear selection", "Selectie wissen");
+injectString("pl", "Clear selection", "Wyczy\u015B\u0107 wyb\xF3r");
+injectString("pt-BR", "Clear selection", "Limpar sele\xE7\xE3o");
+injectString("sk-SK", "Clear selection", "Vyma\u017E v\xFDber.");
+injectString("sv", "Clear selection", "Rensa val");
+injectString("th", "Clear selection", "\u0E25\u0E49\u0E32\u0E07\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01");
+injectString("tr", "Clear selection", "Se\xE7imi temizle");
+injectString("zh-Hans", "Clear selection", "\u6E05\u9664\u9009\u62E9");
+injectString("zh-TW", "Clear selection", "\u6E05\u9664\u9078\u53D6\u9805\u76EE");
+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", "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");
 const textIconButton_1 = require("../../../../textIconButton/textIconButton");
 const classNames_1 = require("../../../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
@@ -15,38 +141,103 @@ const useResizeObserver_1 = require("../../../../commonHelpers/hooks/useResizeOb
 const menu_1 = require("../../../../menu/menu");
 const iconDotVertical_1 = require("../../../../icons/iconDotVertical");
 const button_1 = require("../../../../button/button");
-const BulkActions = ({ selected, allSelected, className, onClearSelection, onSelectAll, gridType = deviceType_1.DeviceType.Desktop, children, turnOffSelectAll }) => {
-    var _a;
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const childrenArray = (0, react_1.useMemo)(() => react_1.Children.toArray(children), [children]);
-    const buttonHolder = (0, react_1.useRef)(null);
-    const bulkActionsElement = (0, react_1.useRef)(null);
-    const moreButtonRef = (0, react_1.useRef)(null);
-    const { result } = (0, useResizeObserver_1.useResizeObserver)({ target: buttonHolder.current });
-    const widthDelta = ((_a = moreButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 32;
-    const maxWidth = (result === null || result === void 0 ? void 0 : result.contentRect.width) || 1000;
-    const { visibleElements, nonFittingElements, hiddenContainerRef } = (0, useNonFittingElements_1.useNonFittingElements)({ maxWidth, data: childrenArray, hiddenElementsCountToRender: 10, widthDelta });
-    const isMobile = gridType === deviceType_1.DeviceType.Mobile;
-    const text = translate("{1} selected").replace("{1}", allSelected ? translate("All") : selected.toFixed());
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-bulk-actions", className || "", isMobile ? "zen-bulk-actions--condensed" : ""]), ref: bulkActionsElement, children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-bulk-actions__button-clear", icon: iconClose_1.IconClose, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", type: "tertiary-black", title: translate("Clear selection"), "aria-label": translate("Clear selection"), onClick: onClearSelection }), (0, jsx_runtime_1.jsx)("span", { className: "zen-bulk-actions__number-of-selected ellipsis", children: text }), onSelectAll && !turnOffSelectAll
-                ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", className: "zen-bulk-actions__select-all", disabled: allSelected, onClick: onSelectAll, children: translate("Select all") })
-                : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-bulk-actions__action-button-holder", ref: buttonHolder, children: [react_1.Children.map(visibleElements, element => (0, react_1.cloneElement)(element, {
-                        disabled: selected > 0 || allSelected ? element.props.disabled : true
-                    })), nonFittingElements.length > 0
-                        ? (0, jsx_runtime_1.jsx)(menu_1.Menu, { title: translate("More"), trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: moreButtonRef, className: "zen-bulk-actions__action-button zen-bulk-actions__action-button-more", icon: iconDotVertical_1.IconDotVertical, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", type: isMobile ? "tertiary-black" : "secondary", title: translate("More"), "aria-label": translate("More") }), children: nonFittingElements.map(child => {
-                                const props = child.props;
-                                const clickHandler = "clickHandler" in props ? props.clickHandler : undefined;
-                                const link = "link" in props ? props.link : undefined;
-                                return (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: props.id || "", name: props.title, icon: props.icon, disabled: props.disabled, onClick: clickHandler, link: link }, props.id);
-                            }) })
-                        : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-bulk-actions__hidden-elements", ref: hiddenContainerRef, children: childrenArray })] })] });
+const BulkActions = ({
+  selected,
+  allSelected,
+  className,
+  onClearSelection,
+  onSelectAll,
+  gridType = deviceType_1.DeviceType.Desktop,
+  children,
+  turnOffSelectAll
+}) => {
+  var _a;
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const childrenArray = (0, react_1.useMemo)(() => react_1.Children.toArray(children), [children]);
+  const buttonHolder = (0, react_1.useRef)(null);
+  const bulkActionsElement = (0, react_1.useRef)(null);
+  const moreButtonRef = (0, react_1.useRef)(null);
+  const {
+    result
+  } = (0, useResizeObserver_1.useResizeObserver)({
+    target: buttonHolder.current
+  });
+  const widthDelta = ((_a = moreButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 32;
+  const maxWidth = (result === null || result === void 0 ? void 0 : result.contentRect.width) || 1000;
+  const {
+    visibleElements,
+    nonFittingElements,
+    hiddenContainerRef
+  } = (0, useNonFittingElements_1.useNonFittingElements)({
+    maxWidth,
+    data: childrenArray,
+    hiddenElementsCountToRender: 10,
+    widthDelta
+  });
+  const isMobile = gridType === deviceType_1.DeviceType.Mobile;
+  const text = translate("{1} selected").replace("{1}", allSelected ? translate("All") : selected.toFixed());
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-bulk-actions", className || "", isMobile ? "zen-bulk-actions--condensed" : ""]),
+    ref: bulkActionsElement,
+    children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+      className: "zen-bulk-actions__button-clear",
+      icon: iconClose_1.IconClose,
+      iconPosition: textIconButton_1.ButtonIconPosition.Start,
+      iconSize: "large",
+      type: "tertiary-black",
+      title: translate("Clear selection"),
+      "aria-label": translate("Clear selection"),
+      onClick: onClearSelection
+    }), (0, jsx_runtime_1.jsx)("span", {
+      className: "zen-bulk-actions__number-of-selected ellipsis",
+      children: text
+    }), onSelectAll && !turnOffSelectAll ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+      type: "tertiary",
+      className: "zen-bulk-actions__select-all",
+      disabled: allSelected,
+      onClick: onSelectAll,
+      children: translate("Select all")
+    }) : null, (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-bulk-actions__action-button-holder",
+      ref: buttonHolder,
+      children: [react_1.Children.map(visibleElements, element => (0, react_1.cloneElement)(element, {
+        disabled: selected > 0 || allSelected ? element.props.disabled : true
+      })), nonFittingElements.length > 0 ? (0, jsx_runtime_1.jsx)(menu_1.Menu, {
+        title: translate("More"),
+        trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+          ref: moreButtonRef,
+          className: "zen-bulk-actions__action-button zen-bulk-actions__action-button-more",
+          icon: iconDotVertical_1.IconDotVertical,
+          iconPosition: textIconButton_1.ButtonIconPosition.Start,
+          iconSize: "large",
+          type: isMobile ? "tertiary-black" : "secondary",
+          title: translate("More"),
+          "aria-label": translate("More")
+        }),
+        children: nonFittingElements.map(child => {
+          const props = child.props;
+          const clickHandler = "clickHandler" in props ? props.clickHandler : undefined;
+          const link = "link" in props ? props.link : undefined;
+          return (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, {
+            id: props.id || "",
+            name: props.title,
+            icon: props.icon,
+            disabled: props.disabled,
+            onClick: clickHandler,
+            link: link
+          }, props.id);
+        })
+      }) : null, (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-bulk-actions__hidden-elements",
+        ref: hiddenContainerRef,
+        children: childrenArray
+      })]
+    })]
+  });
 };
 exports.BulkActions = BulkActions;
 exports.BulkActions.ActionLink = bulkActionLink_1.BulkActionLink;
 exports.BulkActions.ActionButton = bulkActionButton_1.BulkActionButton;
-exports.BulkActions.translations = [
-    "Clear selection",
-    "More options",
-    "{1} selected",
-    "Selecting..."
-];
+exports.BulkActions.translations = ["Clear selection", "More options", "{1} selected", "Selecting..."];