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

package/dist/dataGrid/withSelectableRows/withSelectableRows.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.withSelectableRows = exports.getSelections = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -9,225 +15,292 @@ const selectList_1 = require("../../selectList/selectList");
 const checkboxState_1 = require("../../checkbox/checkboxState");
 const selectableRowsColumnWrapper_1 = require("./columns/selectableRowsColumnWrapper");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const selectionOptions = [{
-        id: "all",
-        value: checkboxColumnWrapper_1.SelectionState.All,
-        element: "all",
-        label: "Select all"
-    }, {
-        id: "page",
-        value: checkboxColumnWrapper_1.SelectionState.CurrentPage,
-        element: "page",
-        label: "Select current page"
-    }, {
-        id: "none",
-        value: checkboxColumnWrapper_1.SelectionState.None,
-        element: "none",
-        label: "Deselect all"
-    }];
-const getSelections = (selections) => {
-    const res = new Set();
-    if (selections !== undefined) {
-        selections.selected.forEach(id => res.add(id));
-    }
-    return res;
+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");
+const getSelectionOptions = translate => [{
+  id: "all",
+  value: checkboxColumnWrapper_1.SelectionState.All,
+  element: "all",
+  label: translate("Select all")
+}, {
+  id: "page",
+  value: checkboxColumnWrapper_1.SelectionState.CurrentPage,
+  element: "page",
+  label: translate("Select current page")
+}, {
+  id: "none",
+  value: checkboxColumnWrapper_1.SelectionState.None,
+  element: "none",
+  label: translate("Deselect all")
+}];
+const getSelections = selections => {
+  const res = new Set();
+  if (selections !== undefined) {
+    selections.selected.forEach(id => res.add(id));
+  }
+  return res;
 };
 exports.getSelections = getSelections;
 const calculateSelectionState = (entities, selections, allSelected, options) => {
-    if (selections.size === 0) {
-        return allSelected ? checkboxColumnWrapper_1.SelectionState.All : checkboxColumnWrapper_1.SelectionState.None;
+  if (selections.size === 0) {
+    return allSelected ? checkboxColumnWrapper_1.SelectionState.All : checkboxColumnWrapper_1.SelectionState.None;
+  }
+  return entities.every(entity => {
+    if (options.condition && !options.condition(entity)) {
+      return true;
     }
-    return entities.every(entity => {
-        if (options.condition && !options.condition(entity)) {
-            return true;
-        }
-        if (options.checkboxVisible && !options.checkboxVisible(entity)) {
-            return true;
-        }
-        if (options.checkboxDisabled && options.checkboxDisabled(entity)) {
-            return true;
-        }
-        return selections.has(entity.id);
-    }) ? checkboxColumnWrapper_1.SelectionState.CurrentPage : checkboxColumnWrapper_1.SelectionState.Partial;
+    if (options.checkboxVisible && !options.checkboxVisible(entity)) {
+      return true;
+    }
+    if (options.checkboxDisabled && options.checkboxDisabled(entity)) {
+      return true;
+    }
+    return selections.has(entity.id);
+  }) ? checkboxColumnWrapper_1.SelectionState.CurrentPage : checkboxColumnWrapper_1.SelectionState.Partial;
 };
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const withSelectableRows = (DataGridComponent) => {
-    const WithSelectableRowsInner = (props) => {
-        const { selectMode, selection, columns, entities, options, onSelect } = props;
-        const { translate } = (0, useLanguage_1.useLanguage)();
-        const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-        const selectId = (0, react_1.useId)();
-        const selectMenuRef = (0, react_1.useRef)(null);
-        const selections = (0, exports.getSelections)(selection);
-        const allSelected = selection !== undefined && selection.allSelected;
-        const wrapper = (0, react_1.useMemo)(() => selectMode ? new selectableRowsColumnWrapper_1.SelectableRowsColumnWrapper(selections, {
-            createTitle: options.createTitle,
-            headerTitle: options.headerTitle,
-            condition: options.condition || options.checkboxVisible,
-            disabled: options.checkboxDisabled
-                ? options.checkboxDisabled
-                : (entity) => options.selectionLimit !== undefined
-                    ? (!selections.has(entity.id) && selections.size >= options.selectionLimit)
-                    : false,
-            header: (options.selectionLimit === undefined
-                && options.checkboxDisabled === undefined
-                && options.checkboxVisible === undefined
-                && options.condition === undefined) || (options.checkboxInHeader === true && !options.selectionLimit)
-        }, selectMenuRef) : null, [
-            selectMode,
-            selections,
-            options.createTitle,
-            options.headerTitle,
-            options.condition,
-            options.checkboxVisible,
-            options.checkboxDisabled,
-            options.selectionLimit,
-            options.checkboxInHeader
-        ]);
-        if (wrapper) {
-            wrapper.selectionState = calculateSelectionState(entities, selections, allSelected, options);
+const withSelectableRows = DataGridComponent => {
+  const WithSelectableRowsInner = props => {
+    const {
+      selectMode,
+      selection,
+      columns,
+      entities,
+      options,
+      onSelect
+    } = props;
+    const {
+      translate
+    } = (0, useLanguage_1.useLanguage)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const selectId = (0, react_1.useId)();
+    const selectMenuRef = (0, react_1.useRef)(null);
+    const selections = (0, exports.getSelections)(selection);
+    const allSelected = selection !== undefined && selection.allSelected;
+    const wrapper = (0, react_1.useMemo)(() => selectMode ? new selectableRowsColumnWrapper_1.SelectableRowsColumnWrapper(selections, {
+      createTitle: options.createTitle,
+      headerTitle: options.headerTitle,
+      condition: options.condition || options.checkboxVisible,
+      disabled: options.checkboxDisabled ? options.checkboxDisabled : entity => options.selectionLimit !== undefined ? !selections.has(entity.id) && selections.size >= options.selectionLimit : false,
+      header: options.selectionLimit === undefined && options.checkboxDisabled === undefined && options.checkboxVisible === undefined && options.condition === undefined || options.checkboxInHeader === true && !options.selectionLimit
+    }, selectMenuRef) : null, [selectMode, selections, options.createTitle, options.headerTitle, options.condition, options.checkboxVisible, options.checkboxDisabled, options.selectionLimit, options.checkboxInHeader]);
+    if (wrapper) {
+      wrapper.selectionState = calculateSelectionState(entities, selections, allSelected, options);
+    }
+    const selectAll = (0, react_1.useCallback)(checked => {
+      const newSelections = new Set(selections);
+      entities.forEach(entity => {
+        if (checked) {
+          const isVisible = options.condition ? options.condition(entity) : options.checkboxVisible ? options.checkboxVisible(entity) : true;
+          const isEnabled = !options.checkboxDisabled || !options.checkboxDisabled(entity);
+          if (isVisible && isEnabled) {
+            newSelections.add(entity.id);
+          }
+          return;
+        }
+        newSelections.delete(entity.id);
+      });
+      const newState = calculateSelectionState(entities, newSelections, false, options);
+      onSelect({
+        selected: [...newSelections],
+        allSelected: newState === checkboxColumnWrapper_1.SelectionState.All,
+        turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+      });
+    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    const onSelectListener = (0, react_1.useCallback)(([id, checked]) => {
+      if (allSelected) {
+        const newSelection = new Set(entities.map(entity => entity.id));
+        newSelection.delete(id);
+        onSelect({
+          selected: [...newSelection],
+          allSelected: false,
+          turnOffSelectAll: selection.turnOffSelectAll
+        });
+        return;
+      }
+      if (checked) {
+        selections.add(id);
+      } else {
+        selections.delete(id);
+      }
+      const newState = calculateSelectionState(entities, selections, allSelected, options);
+      onSelect({
+        selected: [...selections],
+        allSelected: newState === checkboxColumnWrapper_1.SelectionState.All,
+        turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+      });
+    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    const onSelectAll = (0, react_1.useCallback)(([checked]) => {
+      if (checked && ((selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) || options.turnOffSelectAll)) {
+        selectAll(true);
+        return;
+      }
+      onSelect({
+        selected: [],
+        allSelected: checked,
+        turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+      });
+    }, [onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, options.turnOffSelectAll, selectAll]);
+    const onTriggerClick = (0, react_1.useCallback)(() => {
+      setIsOpen(!isOpen);
+    }, [isOpen]);
+    const onSelectMenuChange = (0, react_1.useCallback)(state => {
+      var _a, _b;
+      const selectedId = (_a = [...state].find(([_, v]) => v === checkboxState_1.CheckboxState.On)) === null || _a === void 0 ? void 0 : _a[0];
+      const value = selectedId && ((_b = getSelectionOptions(translate).find(o => o.id === selectedId)) === null || _b === void 0 ? void 0 : _b.value);
+      if (value === undefined) {
+        return;
+      }
+      setIsOpen(false);
+      if (value === checkboxColumnWrapper_1.SelectionState.All) {
+        onSelect({
+          selected: [],
+          allSelected: true,
+          turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+        });
+        return;
+      }
+      if (value === checkboxColumnWrapper_1.SelectionState.None) {
+        onSelect({
+          selected: [],
+          allSelected: false,
+          turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+        });
+        return;
+      }
+      selectAll(true);
+    }, [onSelect, selectAll, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, translate]);
+    (0, react_1.useEffect)(() => {
+      if (!wrapper) {
+        return () => {};
+      }
+      wrapper.detach();
+      wrapper.attach("change", onSelectListener);
+      wrapper.attach("change-all", onSelectAll);
+      wrapper.attach("toggle", onTriggerClick);
+      return () => {
+        wrapper.detach();
+      };
+    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick]);
+    const listColumns = (0, react_1.useMemo)(() => {
+      const newColumns = columns.map(c => Object.assign({}, c));
+      // Remove CheckboxColumnWrappers from wrappers list
+      newColumns.forEach(c => {
+        if (c.wrappers) {
+          c.wrappers = c.wrappers.filter(w => !(w instanceof selectableRowsColumnWrapper_1.SelectableRowsColumnWrapper));
         }
-        const selectAll = (0, react_1.useCallback)((checked) => {
-            const newSelections = new Set(selections);
-            entities.forEach(entity => {
-                if (checked) {
-                    const isVisible = options.condition
-                        ? options.condition(entity)
-                        : options.checkboxVisible
-                            ? options.checkboxVisible(entity)
-                            : true;
-                    const isEnabled = !options.checkboxDisabled || !options.checkboxDisabled(entity);
-                    if (isVisible && isEnabled) {
-                        newSelections.add(entity.id);
-                    }
-                    return;
-                }
-                newSelections.delete(entity.id);
-            });
-            const newState = calculateSelectionState(entities, newSelections, false, options);
-            onSelect({
-                selected: [...newSelections],
-                allSelected: newState === checkboxColumnWrapper_1.SelectionState.All,
-                turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
-            });
-        }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
-        const onSelectListener = (0, react_1.useCallback)(([id, checked]) => {
-            if (allSelected) {
-                const newSelection = new Set(entities.map(entity => entity.id));
-                newSelection.delete(id);
-                onSelect({
-                    selected: [...newSelection],
-                    allSelected: false,
-                    turnOffSelectAll: selection.turnOffSelectAll
-                });
-                return;
-            }
-            if (checked) {
-                selections.add(id);
-            }
-            else {
-                selections.delete(id);
-            }
-            const newState = calculateSelectionState(entities, selections, allSelected, options);
-            onSelect({
-                selected: [...selections],
-                allSelected: newState === checkboxColumnWrapper_1.SelectionState.All,
-                turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
-            });
-        }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
-        const onSelectAll = (0, react_1.useCallback)(([checked]) => {
-            if (checked && ((selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) || options.turnOffSelectAll)) {
-                selectAll(true);
-                return;
-            }
-            onSelect({
-                selected: [],
-                allSelected: checked,
-                turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
-            });
-        }, [onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, options.turnOffSelectAll, selectAll]);
-        const onTriggerClick = (0, react_1.useCallback)(() => {
-            setIsOpen(!isOpen);
-        }, [isOpen]);
-        const onSelectMenuChange = (0, react_1.useCallback)((state) => {
-            var _a, _b;
-            const selectedId = (_a = [...state].find(([_, v]) => v === checkboxState_1.CheckboxState.On)) === null || _a === void 0 ? void 0 : _a[0];
-            const value = selectedId && ((_b = selectionOptions.find(o => o.id === selectedId)) === null || _b === void 0 ? void 0 : _b.value);
-            if (value === undefined) {
-                return;
-            }
-            setIsOpen(false);
-            if (value === checkboxColumnWrapper_1.SelectionState.All) {
-                onSelect({
-                    selected: [],
-                    allSelected: true,
-                    turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
-                });
-                return;
-            }
-            if (value === checkboxColumnWrapper_1.SelectionState.None) {
-                onSelect({
-                    selected: [],
-                    allSelected: false,
-                    turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
-                });
-                return;
-            }
-            selectAll(true);
-        }, [onSelect, selectAll, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
-        (0, react_1.useEffect)(() => {
-            if (!wrapper) {
-                return () => { };
-            }
-            wrapper.detach();
-            wrapper.attach("change", onSelectListener);
-            wrapper.attach("change-all", onSelectAll);
-            wrapper.attach("toggle", onTriggerClick);
-            return () => {
-                wrapper.detach();
-            };
-        }, [wrapper, onSelectListener, onSelectAll, onTriggerClick]);
-        const listColumns = (0, react_1.useMemo)(() => {
-            const newColumns = columns.map(c => (Object.assign({}, c)));
-            // Remove CheckboxColumnWrappers from wrappers list
-            newColumns.forEach(c => {
-                if (c.wrappers) {
-                    c.wrappers = c.wrappers.filter(w => !(w instanceof selectableRowsColumnWrapper_1.SelectableRowsColumnWrapper));
-                }
-            });
-            // Add new CheckboxColumnWrapper to wrappers list of the first column
-            const firstColumn = newColumns.find(c => c.id === options.firstColumnId);
-            if (firstColumn && wrapper) {
-                firstColumn.wrappers = [...firstColumn.wrappers || [], wrapper];
-            }
-            return newColumns;
-        }, [columns, options.firstColumnId, wrapper]);
-        const listItems = (0, react_1.useMemo)(() => selectionOptions
-            .filter(option => (!(selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) && !options.turnOffSelectAll) || option.value !== checkboxColumnWrapper_1.SelectionState.All)
-            .map(option => ({
-            id: option.id,
-            value: option.value,
-            label: translate(option.label),
-            children: translate(option.label)
-        })).filter(option => option.value !== calculateSelectionState(entities, selections, allSelected, options)), [selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, translate, entities, selections, allSelected, options]);
-        const listValue = (0, react_1.useMemo)(() => listItems.reduce((res, item) => {
-            res.set(item.id, checkboxState_1.CheckboxState.Off);
-            return res;
-        }, new Map()), [listItems]);
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [columns.length > 0
-                    ? (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { triggerRef: selectMenuRef, isOpen: isOpen, onOpenChange: setIsOpen, alignment: "bottom-left", children: (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { id: selectId, title: translate("Select menu"), items: listItems, value: listValue, selectItemOnFocus: false, onChange: onSelectMenuChange }) })
-                    : null, (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: listColumns, ref: props.ref }))] });
-    };
-    WithSelectableRowsInner.displayName = `withSelectableRows(${DataGridComponent.displayName || DataGridComponent.name})`;
-    WithSelectableRowsInner.translations = [
-        "Select menu",
-        "Select all",
-        "Select current page",
-        "Deselect all",
-        ...checkboxColumnWrapper_1.CheckboxColumnWrapper.translations
-    ];
-    return WithSelectableRowsInner;
+      });
+      // Add new CheckboxColumnWrapper to wrappers list of the first column
+      const firstColumn = newColumns.find(c => c.id === options.firstColumnId);
+      if (firstColumn && wrapper) {
+        firstColumn.wrappers = [...(firstColumn.wrappers || []), wrapper];
+      }
+      return newColumns;
+    }, [columns, options.firstColumnId, wrapper]);
+    const listItems = (0, react_1.useMemo)(() => getSelectionOptions(translate).filter(option => !(selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) && !options.turnOffSelectAll || option.value !== checkboxColumnWrapper_1.SelectionState.All).map(option => ({
+      id: option.id,
+      value: option.value,
+      label: option.label,
+      children: option.label
+    })).filter(option => option.value !== calculateSelectionState(entities, selections, allSelected, options)), [selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, translate, entities, selections, allSelected, options]);
+    const listValue = (0, react_1.useMemo)(() => listItems.reduce((res, item) => {
+      res.set(item.id, checkboxState_1.CheckboxState.Off);
+      return res;
+    }, new Map()), [listItems]);
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [columns.length > 0 ? (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, {
+        triggerRef: selectMenuRef,
+        isOpen: isOpen,
+        onOpenChange: setIsOpen,
+        alignment: "bottom-left",
+        children: (0, jsx_runtime_1.jsx)(selectList_1.SelectList, {
+          id: selectId,
+          title: translate("Select menu"),
+          items: listItems,
+          value: listValue,
+          selectItemOnFocus: false,
+          onChange: onSelectMenuChange
+        })
+      }) : null, (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, {
+        columns: listColumns,
+        ref: props.ref
+      }))]
+    });
+  };
+  WithSelectableRowsInner.displayName = `withSelectableRows(${DataGridComponent.displayName || DataGridComponent.name})`;
+  WithSelectableRowsInner.translations = ["Select menu", "Select all", "Select current page", "Deselect all", ...checkboxColumnWrapper_1.CheckboxColumnWrapper.translations];
+  return WithSelectableRowsInner;
 };
-exports.withSelectableRows = withSelectableRows;
+exports.withSelectableRows = withSelectableRows;