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

package/dist/table/selectable/useSelectableRows.js

@@ -1,11 +1,65 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.useSelectableRows = exports.getEmptySelection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const interfaces_1 = require("./interfaces");
 const checkboxCell_1 = require("../../dataGrid/columns/checkboxColumn/checkboxCell");
 const selectableHeader_1 = require("./selectableHeader");
+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", "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 getSelection_1 = require("./utils/getSelection");
 const calculateSelectionState_1 = require("./utils/calculateSelectionState");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
@@ -13,206 +67,231 @@ const checkRow_1 = require("./utils/checkRow");
 const isRowChecked_1 = require("./utils/isRowChecked");
 const getCurrentPageSelection_1 = require("./utils/getCurrentPageSelection");
 const getEmptySelection = () => ({
-    all: false,
-    selected: []
+  all: false,
+  selected: []
 });
 exports.getEmptySelection = getEmptySelection;
 const SelectableWrapperName = "Selectable";
 const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable) => {
+  var _a;
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const selections = (0, react_1.useMemo)(() => (0, getSelection_1.getSelections)(selectable === null || selectable === void 0 ? void 0 : selectable.selection), [selectable === null || selectable === void 0 ? void 0 : selectable.selection]);
+  const [state, setState] = (0, react_1.useState)(interfaces_1.SelectionState.None);
+  const checkboxVisible = (0, react_1.useMemo)(() => {
+    if (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) {
+      return selectable.checkboxVisible;
+    }
+    if ((selectable === null || selectable === void 0 ? void 0 : selectable.strategy) !== "nested") {
+      return (_, isNested) => !isNested;
+    }
+    return () => true;
+  }, [selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const checkboxDisabled = (0, react_1.useMemo)(() => {
+    if (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) {
+      return selectable.checkboxDisabled;
+    }
+    if (selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit) {
+      const limit = selectable.selectionLimit;
+      return entity => selections.size >= limit && !selections.has(entity.id);
+    }
+    return () => false;
+  }, [selectable, selections]);
+  const checkboxPlaceholder = (0, react_1.useMemo)(() => {
+    if ((selectable === null || selectable === void 0 ? void 0 : selectable.checkboxPlaceholder) !== undefined) {
+      return selectable.checkboxPlaceholder;
+    }
+    // don't change it when user takes control over checkbox visibility
+    if (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) {
+      return true;
+    }
+    return (selectable === null || selectable === void 0 ? void 0 : selectable.strategy) === "nested";
+  }, [selectable === null || selectable === void 0 ? void 0 : selectable.checkboxPlaceholder, selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const isAllSelected = (0, react_1.useMemo)(() => {
     var _a;
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const selections = (0, react_1.useMemo)(() => (0, getSelection_1.getSelections)(selectable === null || selectable === void 0 ? void 0 : selectable.selection), [selectable === null || selectable === void 0 ? void 0 : selectable.selection]);
-    const [state, setState] = (0, react_1.useState)(interfaces_1.SelectionState.None);
-    const checkboxVisible = (0, react_1.useMemo)(() => {
-        if (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) {
-            return selectable.checkboxVisible;
-        }
-        if ((selectable === null || selectable === void 0 ? void 0 : selectable.strategy) !== "nested") {
-            return (_, isNested) => !isNested;
-        }
-        return (() => true);
-    }, [selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
-    const checkboxDisabled = (0, react_1.useMemo)(() => {
-        if (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) {
-            return selectable.checkboxDisabled;
-        }
-        if (selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit) {
-            const limit = selectable.selectionLimit;
-            return (entity) => selections.size >= limit && !selections.has(entity.id);
-        }
-        return () => false;
-    }, [selectable, selections]);
-    const checkboxPlaceholder = (0, react_1.useMemo)(() => {
-        if ((selectable === null || selectable === void 0 ? void 0 : selectable.checkboxPlaceholder) !== undefined) {
-            return selectable.checkboxPlaceholder;
-        }
-        // don't change it when user takes control over checkbox visibility
-        if (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) {
-            return true;
-        }
-        return (selectable === null || selectable === void 0 ? void 0 : selectable.strategy) === "nested";
-    }, [selectable === null || selectable === void 0 ? void 0 : selectable.checkboxPlaceholder, selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
-    const isAllSelected = (0, react_1.useMemo)(() => { var _a; return ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false; }, [(_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all]);
-    const selectableState = (0, react_1.useMemo)(() => (0, calculateSelectionState_1.calculateSelectionState)(entities, selections, isAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy), [checkboxDisabled, checkboxVisible, entities, isAllSelected, selections, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
-    const firstColumnId = (0, react_1.useMemo)(() => columns.length > 0 ? columns[0].id : null, [columns]);
-    (0, react_1.useEffect)(() => {
-        if (selectable && selectable.selection) {
-            const newSelections = new Set(selectable.selection.selected);
-            const newState = (0, calculateSelectionState_1.calculateSelectionState)(entities, newSelections, selectable.selection.all || false, checkboxVisible, checkboxDisabled, selectable.strategy);
-            setState(newState);
-        }
-    }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
-    const getNewSelection = (0, react_1.useCallback)((id, checked) => {
-        if (state === interfaces_1.SelectionState.All) {
-            const newSelection = (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, selectable);
-            (0, checkRow_1.checkRow)(newSelection, selectable, entities, id, false);
-            return newSelection;
-        }
-        (0, checkRow_1.checkRow)(selections, selectable, entities, id, checked);
-        return selections;
-    }, [state, entities, selectable, selections]);
-    const onSelectListener = (0, react_1.useCallback)((id, checked) => {
-        var _a;
-        const newSelection = getNewSelection(id, checked);
-        const newState = (0, calculateSelectionState_1.calculateSelectionState)(entities, newSelection, ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
-        const newValue = {
-            selected: [...newSelection],
-            all: newState === interfaces_1.SelectionState.All
-        };
-        setState(newState);
-        selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
-        setSelectMode(newValue.all || newValue.selected.length > 0);
-    }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection]);
-    const onChangeSelectionState = (0, react_1.useCallback)((newState) => {
-        if (newState === interfaces_1.SelectionState.All) {
-            (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
-                selected: [],
-                all: true
-            });
-            setSelectMode(true);
-            return;
-        }
-        if (newState === interfaces_1.SelectionState.None) {
-            (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
-                selected: [],
-                all: false
-            });
-            setSelectMode(false);
-            return;
-        }
-        const newSelections = (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, selectable);
-        setState(newState);
-        const newValue = { selected: [...newSelections], all: false };
-        selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
-        setSelectMode(newValue.all || newValue.selected.length > 0);
-    }, [selectable, entities, setSelectMode]);
-    const checkboxTitle = (0, react_1.useCallback)((entity) => (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxTitle) ? selectable.checkboxTitle(entity) : firstColumnId ? entity[firstColumnId] || entity.id : entity.id, [firstColumnId, selectable]);
-    const headerTitle = (0, react_1.useCallback)(() => {
-        if (selectable === null || selectable === void 0 ? void 0 : selectable.headerTitle) {
-            return selectable.headerTitle(selectableState);
-        }
-        if (state === interfaces_1.SelectionState.None || state === interfaces_1.SelectionState.Partial) {
-            return translate("Select all");
-        }
-        return translate("Deselect all");
-    }, [selectable, selectableState, state, translate]);
-    const isEntityChecked = (0, react_1.useCallback)((entity, isNested) => (0, isRowChecked_1.isRowChecked)(selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
-    const wrapper = (0, react_1.useMemo)(() => {
-        if (!selectable) {
-            return null;
-        }
-        return {
-            name: SelectableWrapperName,
-            render(value, entity, isNested) {
-                if (!entity) {
-                    return null;
-                }
-                if (isMobile) {
-                    return value;
-                }
-                if (entity.isLoading) {
-                    return value;
-                }
-                const allowed = checkboxVisible(entity, isNested);
-                if (!allowed && !checkboxPlaceholder) {
-                    return value;
-                }
-                const isDisable = checkboxDisabled(entity, isNested);
-                const checked = isEntityChecked(entity, isNested || false);
-                const cell = (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell, { id: entity.id, className: allowed ? "zen-selectable-row" : "zen-selectable-row zen-selectable-column--no-checkbox", checked: checked.checked, indeterminate: checked.indeterminate, disabled: isDisable, label: checkboxTitle(entity), onChange: onSelectListener, children: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, { children: value }) });
-                return cell;
-            },
-            renderHeader(title) {
-                const cell = (0, jsx_runtime_1.jsx)(selectableHeader_1.SelectableHeader, { title: title, label: headerTitle(), checked: state === interfaces_1.SelectionState.CurrentPage || state === interfaces_1.SelectionState.All, indeterminate: state === interfaces_1.SelectionState.Partial, onChange: (newValue) => {
-                        const newState = newValue
-                            ? selectable.turnOffSelectAll ? interfaces_1.SelectionState.CurrentPage : interfaces_1.SelectionState.All
-                            : interfaces_1.SelectionState.None;
-                        setState(newState);
-                        onChangeSelectionState(newState);
-                    }, calculateSelectionState: () => selectableState, checkboxInHeader: selectable.checkboxInHeader !== undefined
-                        ? selectable.checkboxInHeader
-                        : (selectable.selectionLimit !== undefined ? false : undefined), header: selectable.header, onSelect: (newState) => {
-                        setState(newState);
-                        onChangeSelectionState(newState);
-                    }, turnOffSelectAll: selectable.turnOffSelectAll });
-                return cell;
-            }
-        };
-    }, [
-        checkboxDisabled,
-        checkboxTitle,
-        checkboxVisible,
-        headerTitle,
-        onChangeSelectionState,
-        onSelectListener,
-        selectable,
-        selectableState,
-        state,
-        isMobile,
-        checkboxPlaceholder,
-        isEntityChecked
-    ]);
-    const selectableFeedWrapper = (0, react_1.useCallback)((primaryData, secondaryData, entity, isNested) => {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    return ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false;
+  }, [(_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all]);
+  const selectableState = (0, react_1.useMemo)(() => (0, calculateSelectionState_1.calculateSelectionState)(entities, selections, isAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy), [checkboxDisabled, checkboxVisible, entities, isAllSelected, selections, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const firstColumnId = (0, react_1.useMemo)(() => columns.length > 0 ? columns[0].id : null, [columns]);
+  (0, react_1.useEffect)(() => {
+    if (selectable && selectable.selection) {
+      const newSelections = new Set(selectable.selection.selected);
+      const newState = (0, calculateSelectionState_1.calculateSelectionState)(entities, newSelections, selectable.selection.all || false, checkboxVisible, checkboxDisabled, selectable.strategy);
+      setState(newState);
+    }
+  }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const getNewSelection = (0, react_1.useCallback)((id, checked) => {
+    if (state === interfaces_1.SelectionState.All) {
+      const newSelection = (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, selectable);
+      (0, checkRow_1.checkRow)(newSelection, selectable, entities, id, false);
+      return newSelection;
+    }
+    (0, checkRow_1.checkRow)(selections, selectable, entities, id, checked);
+    return selections;
+  }, [state, entities, selectable, selections]);
+  const onSelectListener = (0, react_1.useCallback)((id, checked) => {
+    var _a;
+    const newSelection = getNewSelection(id, checked);
+    const newState = (0, calculateSelectionState_1.calculateSelectionState)(entities, newSelection, ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
+    const newValue = {
+      selected: [...newSelection],
+      all: newState === interfaces_1.SelectionState.All
+    };
+    setState(newState);
+    selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
+    setSelectMode(newValue.all || newValue.selected.length > 0);
+  }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection]);
+  const onChangeSelectionState = (0, react_1.useCallback)(newState => {
+    if (newState === interfaces_1.SelectionState.All) {
+      (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
+        selected: [],
+        all: true
+      });
+      setSelectMode(true);
+      return;
+    }
+    if (newState === interfaces_1.SelectionState.None) {
+      (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
+        selected: [],
+        all: false
+      });
+      setSelectMode(false);
+      return;
+    }
+    const newSelections = (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, selectable);
+    setState(newState);
+    const newValue = {
+      selected: [...newSelections],
+      all: false
+    };
+    selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
+    setSelectMode(newValue.all || newValue.selected.length > 0);
+  }, [selectable, entities, setSelectMode]);
+  const checkboxTitle = (0, react_1.useCallback)(entity => (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxTitle) ? selectable.checkboxTitle(entity) : firstColumnId ? entity[firstColumnId] || entity.id : entity.id, [firstColumnId, selectable]);
+  const headerTitle = (0, react_1.useCallback)(() => {
+    if (selectable === null || selectable === void 0 ? void 0 : selectable.headerTitle) {
+      return selectable.headerTitle(selectableState);
+    }
+    if (state === interfaces_1.SelectionState.None || state === interfaces_1.SelectionState.Partial) {
+      return translate("Select all");
+    }
+    return translate("Deselect all");
+  }, [selectable, selectableState, state, translate]);
+  const isEntityChecked = (0, react_1.useCallback)((entity, isNested) => (0, isRowChecked_1.isRowChecked)(selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const wrapper = (0, react_1.useMemo)(() => {
+    if (!selectable) {
+      return null;
+    }
+    return {
+      name: SelectableWrapperName,
+      render(value, entity, isNested) {
         if (!entity) {
-            return [primaryData, secondaryData];
+          return null;
         }
-        if (!isMobile) {
-            return [primaryData, secondaryData];
+        if (isMobile) {
+          return value;
         }
-        if (!selectMode) {
-            return [primaryData, secondaryData];
+        if (entity.isLoading) {
+          return value;
         }
-        const allowed = checkboxVisible(entity);
-        const isDisable = checkboxDisabled(entity);
-        const checked = isEntityChecked(entity, isNested || false);
-        const cell = (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell, { id: entity.id, className: allowed ? "zen-selectable-row" : "zen-selectable-row zen-selectable-column--no-checkbox", checked: checked.checked, indeterminate: checked.indeterminate, disabled: isDisable, label: checkboxTitle(entity), onChange: onSelectListener, children: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, { children: primaryData }) });
-        return [
-            cell,
-            (0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox-column__padding", children: secondaryData }, "1")
-        ];
-    }, [checkboxDisabled, checkboxTitle, checkboxVisible, isMobile, selectMode, onSelectListener, isEntityChecked]);
-    const selectableColumns = (0, react_1.useMemo)(() => {
-        if (!selectable) {
-            return columns;
+        const allowed = checkboxVisible(entity, isNested);
+        if (!allowed && !checkboxPlaceholder) {
+          return value;
         }
-        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.name !== SelectableWrapperName);
-            }
+        const isDisable = checkboxDisabled(entity, isNested);
+        const checked = isEntityChecked(entity, isNested || false);
+        const cell = (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell, {
+          id: entity.id,
+          className: allowed ? "zen-selectable-row" : "zen-selectable-row zen-selectable-column--no-checkbox",
+          checked: checked.checked,
+          indeterminate: checked.indeterminate,
+          disabled: isDisable,
+          label: checkboxTitle(entity),
+          onChange: onSelectListener,
+          children: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, {
+            children: value
+          })
         });
-        // Add selectable wrappers of the first column
-        const firstColumn = newColumns.find(c => c.id === firstColumnId);
-        if (firstColumn && wrapper) {
-            firstColumn.wrappers = [...firstColumn.wrappers || [], wrapper];
-        }
-        return newColumns;
-    }, [columns, firstColumnId, selectable, wrapper]);
-    return { selectableColumns, selectableFeedWrapper };
+        return cell;
+      },
+      renderHeader(title) {
+        const cell = (0, jsx_runtime_1.jsx)(selectableHeader_1.SelectableHeader, {
+          title: title,
+          label: headerTitle(),
+          checked: state === interfaces_1.SelectionState.CurrentPage || state === interfaces_1.SelectionState.All,
+          indeterminate: state === interfaces_1.SelectionState.Partial,
+          onChange: newValue => {
+            const newState = newValue ? selectable.turnOffSelectAll ? interfaces_1.SelectionState.CurrentPage : interfaces_1.SelectionState.All : interfaces_1.SelectionState.None;
+            setState(newState);
+            onChangeSelectionState(newState);
+          },
+          calculateSelectionState: () => selectableState,
+          checkboxInHeader: selectable.checkboxInHeader !== undefined ? selectable.checkboxInHeader : selectable.selectionLimit !== undefined ? false : undefined,
+          header: selectable.header,
+          onSelect: newState => {
+            setState(newState);
+            onChangeSelectionState(newState);
+          },
+          turnOffSelectAll: selectable.turnOffSelectAll
+        });
+        return cell;
+      }
+    };
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked]);
+  const selectableFeedWrapper = (0, react_1.useCallback)((primaryData, secondaryData, entity, isNested) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!entity) {
+      return [primaryData, secondaryData];
+    }
+    if (!isMobile) {
+      return [primaryData, secondaryData];
+    }
+    if (!selectMode) {
+      return [primaryData, secondaryData];
+    }
+    const allowed = checkboxVisible(entity);
+    const isDisable = checkboxDisabled(entity);
+    const checked = isEntityChecked(entity, isNested || false);
+    const cell = (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell, {
+      id: entity.id,
+      className: allowed ? "zen-selectable-row" : "zen-selectable-row zen-selectable-column--no-checkbox",
+      checked: checked.checked,
+      indeterminate: checked.indeterminate,
+      disabled: isDisable,
+      label: checkboxTitle(entity),
+      onChange: onSelectListener,
+      children: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, {
+        children: primaryData
+      })
+    });
+    return [cell, (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-checkbox-column__padding",
+      children: secondaryData
+    }, "1")];
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, isMobile, selectMode, onSelectListener, isEntityChecked]);
+  const selectableColumns = (0, react_1.useMemo)(() => {
+    if (!selectable) {
+      return columns;
+    }
+    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.name !== SelectableWrapperName);
+      }
+    });
+    // Add selectable wrappers of the first column
+    const firstColumn = newColumns.find(c => c.id === firstColumnId);
+    if (firstColumn && wrapper) {
+      firstColumn.wrappers = [...(firstColumn.wrappers || []), wrapper];
+    }
+    return newColumns;
+  }, [columns, firstColumnId, selectable, wrapper]);
+  return {
+    selectableColumns,
+    selectableFeedWrapper
+  };
 };
 exports.useSelectableRows = useSelectableRows;
-exports.TRANSLATIONS = [
-    "Select all", "Deselect all"
-];
+exports.TRANSLATIONS = ["Select all", "Deselect all"];