@addev-be/ui 0.19.0 → 0.19.2

package/dist/components/data/DataGrid/DataGridColumnsModal/hooks.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataGridColumnsModal = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var lodash_1 = require("lodash");
 var react_1 = require("react");
 var forms_1 = require("../../../forms");
 var _1 = require(".");
 var Modal_1 = require("../../../layout/Modal");
+var lodash_1 = require("lodash");
 var useDataGridColumnsModal = function (context) {
     var _a = (0, react_1.useState)(false), isVisible = _a[0], setIsVisible = _a[1];
     var _b = (0, react_1.useContext)(context), columns = _b.columns, setSettings = _b.setSettings, saveSettings = _b.saveSettings;
@@ -19,7 +19,7 @@ var useDataGridColumnsModal = function (context) {
         setIsVisible(false);
     }, []);
     var onApplyClicked = (0, react_1.useCallback)(function () {
-        var newSettings = (0, lodash_1.mapValues)((0, lodash_1.keyBy)(currentColumns, 'key'), function (col) {
+        var newSettings = (0, lodash_1.mapValues)(currentColumns, function (col) {
             var _a, _b;
             return ({
                 order: (_a = col.order) !== null && _a !== void 0 ? _a : 0,
@@ -31,7 +31,7 @@ var useDataGridColumnsModal = function (context) {
         closeModal();
     }, [currentColumns, closeModal, saveSettings, setSettings]);
     var modal = (0, react_1.useMemo)(function () {
-        return isVisible ? ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { "$width": 600, "$height": 400, children: [(0, jsx_runtime_1.jsx)(Modal_1.Modal.Header, { children: "Param\u00E8tres des colonnes" }), (0, jsx_runtime_1.jsx)(Modal_1.Modal.Content, { children: (0, jsx_runtime_1.jsx)(_1.DataGridColumnsEditor, { columns: currentColumns, onColumnsChanged: setCurrentColumns }) }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.Footer, { children: [(0, jsx_runtime_1.jsx)(forms_1.Button, { onClick: closeModal, children: "Annuler" }), (0, jsx_runtime_1.jsx)(forms_1.Button, { "$color": "primary", style: { marginLeft: 'auto' }, onClick: onApplyClicked, children: "Appliquer" })] })] })) : null;
+        return isVisible ? ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { "$width": 600, "$height": 400, children: [(0, jsx_runtime_1.jsx)(Modal_1.Modal.Header, { children: "Param\u00E8tres des colonnes" }), (0, jsx_runtime_1.jsx)(Modal_1.Modal.Content, { children: (0, jsx_runtime_1.jsx)(_1.DataGridColumnsEditor, { columns: currentColumns, onColumnsChanged: setCurrentColumns }) }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.Footer, { children: [(0, jsx_runtime_1.jsx)(forms_1.Button, { onClick: closeModal, children: "Annuler" }), (0, jsx_runtime_1.jsx)(forms_1.Button, { color: "primary", style: { marginLeft: 'auto' }, onClick: onApplyClicked, children: "Appliquer" })] })] })) : null;
     }, [closeModal, currentColumns, isVisible, onApplyClicked]);
     return { openModal: openModal, closeModal: closeModal, modal: modal };
 };

package/dist/components/data/DataGrid/DataGridColumnsModal/index.js

@@ -62,16 +62,19 @@ var DataGridColumnItem = function (_a) {
 exports.DataGridColumnItem = DataGridColumnItem;
 var DataGridColumnsEditor = function (_a) {
     var columns = _a.columns, onColumnsChanged = _a.onColumnsChanged;
-    console.log('DataGridColumnsEditor columns:', columns);
     var _b = (0, hooks_1.useVisibleAndHiddenColumns)(columns), visibleColumns = _b[0], hiddenColumns = _b[1];
-    var sortedVisibleColumnsEntries = (0, helpers_1.normalizeColumnsOrders)(lodash_1.default.sortBy(visibleColumns, function (col) { var _a; return (_a = col.order) !== null && _a !== void 0 ? _a : 0; }));
+    var sortedVisibleColumnsEntries = (0, helpers_1.normalizeColumnsOrders)(lodash_1.default.sortBy(Object.entries(visibleColumns), function (_a) {
+        var _b;
+        var col = _a[1];
+        return (_b = col.order) !== null && _b !== void 0 ? _b : 0;
+    }));
     var onUpButtonClicked = (0, react_1.useCallback)(function (index) {
         if (index > 0) {
             var newArray_1 = (0, helpers_1.normalizeColumnsOrders)(__spreadArray(__spreadArray(__spreadArray([], sortedVisibleColumnsEntries.slice(0, index - 1), true), [
                 sortedVisibleColumnsEntries[index],
                 sortedVisibleColumnsEntries[index - 1]
             ], false), sortedVisibleColumnsEntries.slice(index + 1), true));
-            onColumnsChanged(function () { return __spreadArray(__spreadArray([], newArray_1, true), hiddenColumns, true); });
+            onColumnsChanged(function () { return (__assign(__assign({}, Object.fromEntries(newArray_1)), hiddenColumns)); });
         }
     }, [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]);
     var onDownButtonClicked = (0, react_1.useCallback)(function (index) {
@@ -80,27 +83,29 @@ var DataGridColumnsEditor = function (_a) {
                 sortedVisibleColumnsEntries[index + 1],
                 sortedVisibleColumnsEntries[index]
             ], false), sortedVisibleColumnsEntries.slice(index + 2), true));
-            onColumnsChanged(function () { return __spreadArray(__spreadArray([], newArray_2, true), hiddenColumns, true); });
+            onColumnsChanged(function () { return (__assign(__assign({}, Object.fromEntries(newArray_2)), hiddenColumns)); });
         }
     }, [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]);
     var onHideButtonClicked = (0, react_1.useCallback)(function (columnKey) {
         onColumnsChanged(function (prev) {
-            return prev.map(function (column) {
-                return column.key === columnKey
-                    ? __assign(__assign({}, column), { order: -1 }) : column;
-            });
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[columnKey] = __assign(__assign({}, prev[columnKey]), { order: -1 }), _a)));
         });
     }, [onColumnsChanged]);
     var onShowButtonClicked = (0, react_1.useCallback)(function (columnKey) {
         onColumnsChanged(function (prev) {
-            return prev.map(function (column) {
-                return column.key === columnKey
-                    ? __assign(__assign({}, column), { order: Object.keys(prev).length }) : column;
-            });
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[columnKey] = __assign(__assign({}, hiddenColumns[columnKey]), { order: Object.keys(prev).length }), _a)));
         });
-    }, [onColumnsChanged]);
-    return ((0, jsx_runtime_1.jsxs)(styles.Container, { children: [(0, jsx_runtime_1.jsxs)(styles.Panel, { children: [(0, jsx_runtime_1.jsx)(styles.Title, { children: "Colonnes visibles" }), (0, jsx_runtime_1.jsx)(styles.ColumnsList, { children: sortedVisibleColumnsEntries.map(function (column, index) { return ((0, jsx_runtime_1.jsx)(exports.DataGridColumnItem, { columnKey: column.key, columnIndex: index, column: column, visible: true, onUpButtonClicked: index > 0 ? onUpButtonClicked : undefined, onDownButtonClicked: index < sortedVisibleColumnsEntries.length - 1
-                                ? onDownButtonClicked
-                                : undefined, onVisibleButtonClicked: onHideButtonClicked }, column.key)); }) })] }), (0, jsx_runtime_1.jsxs)(styles.Panel, { children: [(0, jsx_runtime_1.jsx)(styles.Title, { children: "Colonnes masqu\u00E9es" }), (0, jsx_runtime_1.jsx)(styles.ColumnsList, { children: hiddenColumns.map(function (column, index) { return ((0, jsx_runtime_1.jsx)(exports.DataGridColumnItem, { columnKey: column.key, columnIndex: index, column: column, visible: false, onVisibleButtonClicked: onShowButtonClicked }, column.key)); }) })] })] }));
+    }, [hiddenColumns, onColumnsChanged]);
+    return ((0, jsx_runtime_1.jsxs)(styles.Container, { children: [(0, jsx_runtime_1.jsxs)(styles.Panel, { children: [(0, jsx_runtime_1.jsx)(styles.Title, { children: "Colonnes visibles" }), (0, jsx_runtime_1.jsx)(styles.ColumnsList, { children: sortedVisibleColumnsEntries.map(function (_a, index) {
+                            var key = _a[0], column = _a[1];
+                            return ((0, jsx_runtime_1.jsx)(exports.DataGridColumnItem, { columnKey: key, columnIndex: index, column: column, visible: true, onUpButtonClicked: index > 0 ? onUpButtonClicked : undefined, onDownButtonClicked: index < sortedVisibleColumnsEntries.length - 1
+                                    ? onDownButtonClicked
+                                    : undefined, onVisibleButtonClicked: onHideButtonClicked }, key));
+                        }) })] }), (0, jsx_runtime_1.jsxs)(styles.Panel, { children: [(0, jsx_runtime_1.jsx)(styles.Title, { children: "Colonnes masqu\u00E9es" }), (0, jsx_runtime_1.jsx)(styles.ColumnsList, { children: Object.entries(hiddenColumns).map(function (_a, index) {
+                            var key = _a[0], column = _a[1];
+                            return ((0, jsx_runtime_1.jsx)(exports.DataGridColumnItem, { columnKey: key, columnIndex: index, column: column, visible: false, onVisibleButtonClicked: onShowButtonClicked }, key));
+                        }) })] })] }));
 };
 exports.DataGridColumnsEditor = DataGridColumnsEditor;

package/dist/components/data/DataGrid/DataGridFilterMenu/FilterValuesScroller.js

@@ -33,15 +33,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterValuesScroller = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -70,14 +61,7 @@ var FilterValuesScroller = function (_a) {
         setScrollTop(function () { return target.scrollTop; });
     }, 50), []);
     var checkboxes = (0, react_1.useMemo)(function () { return (0, helpers_1.getCheckboxes)(values, '', renderer, formatter, groups); }, [values, groups, renderer, formatter]);
-    var visibleCheckboxes = (0, react_1.useMemo)(function () { return __spreadArray([
-        {
-            title: 'Sélectionner tout',
-            values: checkboxes.map(function (checkbox) { return checkbox.values; }).flat(),
-            displayValue: 'Sélectionner tout',
-            level: 0,
-        }
-    ], checkboxes.slice(Math.max(0, index - tolerance), index + length + 1 + tolerance), true); }, [checkboxes, index, length, tolerance]);
+    var visibleCheckboxes = checkboxes.slice(Math.max(0, index - tolerance), index + length + 1 + tolerance);
     var firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
     (0, react_1.useEffect)(function () {
         onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(index, length);

package/dist/components/data/DataGrid/DataGridFilterMenu/hooks.d.ts

@@ -1,8 +1,7 @@
-import { DataGridColumnWithFilter, DataGridContext } from '../types';
-export declare const useFilterModal: <R>({ column, context, onClose, }: {
-    column: DataGridColumnWithFilter<R>;
+import { DataGridContext } from '../types';
+export declare const useFilterModal: <R>({ columnKey, context, }: {
+    columnKey: string;
     context: DataGridContext<R>;
-    onClose?: () => void;
 }) => {
     openModal: () => void;
     closeModal: () => void;

package/dist/components/data/DataGrid/DataGridFilterMenu/hooks.js

@@ -20,32 +20,33 @@ var FilterModalContent_1 = require("../FilterModalContent");
 var Modal_1 = require("../../../layout/Modal");
 var hooks_1 = require("../hooks");
 var useFilterModal = function (_a) {
-    var column = _a.column, context = _a.context, onClose = _a.onClose;
-    var _b = (0, react_1.useState)(false), isVisible = _b[0], setIsVisible = _b[1];
-    var _c = (0, hooks_1.useDataGridContext)(context), _d = _c.filters, filters = _d === void 0 ? {} : _d, setFilters = _c.setFilters;
-    var _e = (0, react_1.useState)(column.filter), currentFilter = _e[0], setCurrentFilter = _e[1];
+    var _b;
+    var columnKey = _a.columnKey, context = _a.context;
+    var _c = (0, react_1.useState)(false), isVisible = _c[0], setIsVisible = _c[1];
+    var _d = (0, hooks_1.useDataGridContext)(context), _e = _d.filters, filters = _e === void 0 ? {} : _e, columns = _d.columns, setFilters = _d.setFilters;
+    var column = columns[columnKey];
+    var _f = (0, react_1.useState)((_b = filters[columnKey]) !== null && _b !== void 0 ? _b : column === null || column === void 0 ? void 0 : column.filter), currentFilter = _f[0], setCurrentFilter = _f[1];
     var openModal = (0, react_1.useCallback)(function () {
         setIsVisible(true);
     }, []);
     var closeModal = (0, react_1.useCallback)(function () {
         setIsVisible(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [onClose]);
+    }, []);
     var onClearClicked = (0, react_1.useCallback)(function () {
         var newFilters = __assign({}, filters);
-        delete newFilters[column.key];
+        delete newFilters[columnKey];
         setFilters(newFilters);
         closeModal();
-    }, [closeModal, column.key, filters, setFilters]);
+    }, [closeModal, columnKey, filters, setFilters]);
     var onApplyClicked = (0, react_1.useCallback)(function () {
         var _a;
-        setFilters(__assign(__assign({}, filters), (_a = {}, _a[column.key] = currentFilter, _a)));
+        setFilters(__assign(__assign({}, filters), (_a = {}, _a[columnKey] = currentFilter, _a)));
         closeModal();
-    }, [closeModal, column.key, currentFilter, filters, setFilters]);
+    }, [closeModal, columnKey, currentFilter, filters, setFilters]);
     var onCancelClicked = (0, react_1.useCallback)(function () {
         closeModal();
     }, [closeModal]);
-    var modal = isVisible ? ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { children: [(0, jsx_runtime_1.jsxs)(Modal_1.Modal.Header, { children: ["Filtrer \"", column.name, "\""] }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.ContentWithIcon, { children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterIcon, { fill: "var(--color-primary-400)" }), (0, jsx_runtime_1.jsx)(FilterModalContent_1.FilterModalContent, { filter: currentFilter, onFilterChanged: setCurrentFilter })] }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.Buttons, { children: [(0, jsx_runtime_1.jsx)(forms_1.Button, { "$color": "danger", icon: Icons_1.FilterSlashIcon, onClick: onClearClicked, children: "Supprimer" }), (0, jsx_runtime_1.jsx)(forms_1.Button, { style: { marginLeft: 'auto' }, "$color": "primary", icon: Icons_1.FilterIcon, onClick: onApplyClicked, children: "Filtrer" }), (0, jsx_runtime_1.jsx)(forms_1.Button, { onClick: onCancelClicked, children: "Annuler" })] })] })) : null;
+    var modal = isVisible ? ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { children: [(0, jsx_runtime_1.jsxs)(Modal_1.Modal.Header, { children: ["Filtrer \"", column.name, "\""] }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.ContentWithIcon, { children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterIcon, { fill: "var(--color-primary-400)" }), (0, jsx_runtime_1.jsx)(FilterModalContent_1.FilterModalContent, { filter: currentFilter, onFilterChanged: setCurrentFilter })] }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.Buttons, { children: [(0, jsx_runtime_1.jsx)(forms_1.Button, { color: "danger", icon: Icons_1.FilterSlashIcon, onClick: onClearClicked, children: "Supprimer" }), (0, jsx_runtime_1.jsx)(forms_1.Button, { style: { marginLeft: 'auto' }, color: "primary", icon: Icons_1.FilterIcon, onClick: onApplyClicked, children: "Filtrer" }), (0, jsx_runtime_1.jsx)(forms_1.Button, { onClick: onCancelClicked, children: "Annuler" })] })] })) : null;
     return { openModal: openModal, closeModal: closeModal, modal: modal };
 };
 exports.useFilterModal = useFilterModal;

package/dist/components/data/DataGrid/DataGridFilterMenu/index.d.ts

@@ -1,10 +1,9 @@
-import { DataGridColumnWithFilter, DataGridContext } from '../types';
+import { DataGridContext } from '../types';
 type FilterValuesProps<R> = {
-    column: DataGridColumnWithFilter<R>;
+    columnKey: string;
+    columnIndex: number;
     context: DataGridContext<R>;
     onClose?: () => void;
-    contextMenu?: boolean;
-    showTotalButton?: boolean;
 };
-export declare const DataGridFilterMenu: <R>({ column, context, onClose, contextMenu, showTotalButton, }: FilterValuesProps<R>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridFilterMenu: <R>({ columnKey, context, onClose, }: FilterValuesProps<R>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data/DataGrid/DataGridFilterMenu/index.js

@@ -66,7 +66,6 @@ var react_1 = require("react");
 var ContextMenu_1 = require("../../../ui/ContextMenu");
 var FilterValuesScroller_1 = require("./FilterValuesScroller");
 var forms_1 = require("../../../forms");
-var styles_1 = require("../../../ui/ContextMenu/styles");
 var hooks_1 = require("./hooks");
 var sortAsc = {
     number: ['Trier du plus petit au plus grand', Icons_1.ArrowDown19Icon],
@@ -95,16 +94,17 @@ var footerFunctionsIcons = {
     sum: Icons_1.SigmaIcon,
 };
 var DataGridFilterMenu = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var column = _a.column, context = _a.context, onClose = _a.onClose, _j = _a.contextMenu, contextMenu = _j === void 0 ? true : _j, _k = _a.showTotalButton, showTotalButton = _k === void 0 ? true : _k;
-    var _l = (0, hooks_1.useFilterModal)({ column: column, context: context, onClose: onClose }), openModal = _l.openModal, modal = _l.modal;
-    var _m = (0, react_1.useContext)(context), _o = _m.filters, filters = _o === void 0 ? {} : _o, _p = _m.footers, footers = _p === void 0 ? {} : _p, rows = _m.rows, setFilters = _m.setFilters, filterValuesLoader = _m.filterValuesLoader, setSorts = _m.setSorts, setFooters = _m.setFooters;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var columnKey = _a.columnKey, context = _a.context, onClose = _a.onClose;
+    var _k = (0, hooks_1.useFilterModal)({ columnKey: columnKey, context: context }), openModal = _k.openModal, modal = _k.modal;
+    var _l = (0, react_1.useContext)(context), _m = _l.filters, filters = _m === void 0 ? {} : _m, _o = _l.footers, footers = _o === void 0 ? {} : _o, rows = _l.rows, columns = _l.columns, setFilters = _l.setFilters, filterValuesLoader = _l.filterValuesLoader, setSorts = _l.setSorts, setFooters = _l.setFooters;
+    var column = (_b = columns[columnKey]) !== null && _b !== void 0 ? _b : {};
     var textFilterInputRef = (0, react_1.useRef)(null);
-    var _q = (0, react_1.useState)(''), textFilter = _q[0], setTextFilter = _q[1];
-    var _r = (0, react_1.useState)([]), availableValues = _r[0], setAvailableValues = _r[1];
+    var _p = (0, react_1.useState)(''), textFilter = _p[0], setTextFilter = _p[1];
+    var _q = (0, react_1.useState)([]), availableValues = _q[0], setAvailableValues = _q[1];
     (0, react_1.useEffect)(function () {
         if (filterValuesLoader) {
-            filterValuesLoader(column.key).then(function (values) {
+            filterValuesLoader(columnKey).then(function (values) {
                 setAvailableValues(function () { return values; });
             });
         }
@@ -112,7 +112,7 @@ var DataGridFilterMenu = function (_a) {
             var otherFilters = Object.entries(filters)
                 .filter(function (_a) {
                 var key = _a[0];
-                return key !== column.key;
+                return key !== columnKey;
             })
                 .map(function (_a) {
                 var filter = _a[1];
@@ -127,35 +127,35 @@ var DataGridFilterMenu = function (_a) {
                     : function (a, b) { return a.localeCompare(b); });
             });
         }
-    }, [column.filter, column.key, filterValuesLoader, filters, rows]);
-    var selectedValues = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = filters === null || filters === void 0 ? void 0 : filters[column.key]) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []; }, [column.key, filters]);
+    }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
+    var selectedValues = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = filters === null || filters === void 0 ? void 0 : filters[columnKey]) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []; }, [columnKey, filters]);
     var clearFilter = (0, react_1.useCallback)(function () {
         var newFilters = __assign({}, filters);
-        delete newFilters[column.key];
+        delete newFilters[columnKey];
         setFilters(newFilters);
         onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [filters, column.key, setFilters, onClose]);
+    }, [filters, columnKey, setFilters, onClose]);
     var setValuesChecked = (0, react_1.useCallback)(function (values, checked) {
         setFilters(function (prevFilters) {
             var _a, _b, _c, _d, _e;
             var newValues = checked
-                ? __spreadArray(__spreadArray([], ((_b = (_a = prevFilters[column.key]) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []), true), values, true) : lodash_1.without.apply(void 0, __spreadArray([(_d = (_c = prevFilters[column.key]) === null || _c === void 0 ? void 0 : _c.values) !== null && _d !== void 0 ? _d : []], values, false));
+                ? __spreadArray(__spreadArray([], ((_b = (_a = prevFilters[columnKey]) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []), true), values, true) : lodash_1.without.apply(void 0, __spreadArray([(_d = (_c = prevFilters[columnKey]) === null || _c === void 0 ? void 0 : _c.values) !== null && _d !== void 0 ? _d : []], values, false));
             var newFilters = __assign({}, prevFilters);
             if (newValues.length === 0) {
-                delete newFilters[column.key];
+                delete newFilters[columnKey];
             }
             else {
-                newFilters[column.key] = __assign(__assign({}, ((_e = prevFilters[column.key]) !== null && _e !== void 0 ? _e : column.filter)), { operator: 'inArray', values: newValues });
+                newFilters[columnKey] = __assign(__assign({}, ((_e = prevFilters[columnKey]) !== null && _e !== void 0 ? _e : column.filter)), { operator: 'inArray', values: newValues });
             }
             return newFilters;
         });
-    }, [setFilters, column.key, column.filter]);
+    }, [setFilters, columnKey, column.filter]);
     var toggleValues = (0, react_1.useCallback)(function (values) {
         var checked = (0, lodash_1.intersection)(selectedValues, values).length === values.length;
         setValuesChecked(values, !checked);
     }, [setValuesChecked, selectedValues]);
-    var formatter = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.formatter) !== null && _b !== void 0 ? _b : helpers_1.defaultRendererAndFormatter; }, [(_b = column.filter) === null || _b === void 0 ? void 0 : _b.formatter]);
-    var renderer = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.renderer) !== null && _b !== void 0 ? _b : helpers_1.defaultRendererAndFormatter; }, [(_c = column.filter) === null || _c === void 0 ? void 0 : _c.renderer]);
+    var formatter = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.formatter) !== null && _b !== void 0 ? _b : helpers_1.defaultRendererAndFormatter; }, [(_c = column.filter) === null || _c === void 0 ? void 0 : _c.formatter]);
+    var renderer = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.renderer) !== null && _b !== void 0 ? _b : helpers_1.defaultRendererAndFormatter; }, [(_d = column.filter) === null || _d === void 0 ? void 0 : _d.renderer]);
     var filteredAvailableValues = (0, react_1.useMemo)(function () {
         return !textFilter
             ? availableValues
@@ -181,45 +181,41 @@ var DataGridFilterMenu = function (_a) {
     ]);
     var onSortAscClicked = (0, react_1.useCallback)(function () {
         var _a;
-        setSorts((_a = {}, _a[column.key] = 'asc', _a));
+        setSorts((_a = {}, _a[columnKey] = 'asc', _a));
         onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [column.key, onClose, setSorts]);
+    }, [columnKey, onClose, setSorts]);
     var onSortDescClicked = (0, react_1.useCallback)(function () {
         var _a;
-        setSorts((_a = {}, _a[column.key] = 'desc', _a));
+        setSorts((_a = {}, _a[columnKey] = 'desc', _a));
         onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [column.key, onClose, setSorts]);
-    var hasFilters = ((_d = filters[column.key]) === null || _d === void 0 ? void 0 : _d.values.length) > 0;
-    var _s = [
-        sortAsc[(_f = (_e = column.filter) === null || _e === void 0 ? void 0 : _e.type) !== null && _f !== void 0 ? _f : 'text'],
-        sortDesc[(_h = (_g = column.filter) === null || _g === void 0 ? void 0 : _g.type) !== null && _h !== void 0 ? _h : 'text'],
-    ], _t = _s[0], sortAscText = _t[0], SortAscIcon = _t[1], _u = _s[1], sortDescText = _u[0], SortDescIcon = _u[1];
-    var isFooterVisible = column.key in footers && footers[column.key] !== undefined;
+    }, [columnKey, onClose, setSorts]);
+    var hasFilters = ((_e = filters[columnKey]) === null || _e === void 0 ? void 0 : _e.values.length) > 0;
+    var _r = [
+        sortAsc[(_g = (_f = column.filter) === null || _f === void 0 ? void 0 : _f.type) !== null && _g !== void 0 ? _g : 'text'],
+        sortDesc[(_j = (_h = column.filter) === null || _h === void 0 ? void 0 : _h.type) !== null && _j !== void 0 ? _j : 'text'],
+    ], _s = _r[0], sortAscText = _s[0], SortAscIcon = _s[1], _t = _r[1], sortDescText = _t[0], SortDescIcon = _t[1];
+    var isFooterVisible = columnKey in footers && footers[columnKey] !== undefined;
     var showFooter = (0, react_1.useCallback)(function (key) {
         setFooters(function (prevFooters) {
             var _a;
-            return (__assign(__assign({}, prevFooters), (_a = {}, _a[column.key] = key, _a)));
+            return (__assign(__assign({}, prevFooters), (_a = {}, _a[columnKey] = key, _a)));
         });
         onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [column.key, onClose, setFooters]);
+    }, [columnKey, onClose, setFooters]);
     var hideFooter = (0, react_1.useCallback)(function () {
         setFooters(function (prevFooters) {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            var _a = prevFooters, _b = column.key, _ = _a[_b], newFooters = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+            var _a = prevFooters, _b = columnKey, _ = _a[_b], newFooters = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
             return newFooters;
         });
         onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [column.key, onClose, setFooters]);
-    var content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal, column.sortGetter && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: onSortAscClicked, children: [(0, jsx_runtime_1.jsx)(SortAscIcon, {}), sortAscText] }), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: onSortDescClicked, children: [(0, jsx_runtime_1.jsx)(SortDescIcon, {}), sortDescText] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), isFooterVisible && typeof column.footer === 'function' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: hideFooter, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterSlashIcon, {}), "Masquer le total"] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), showTotalButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isFooterVisible && typeof column.footer === 'function' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: function () { return showFooter('count'); }, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterIcon, {}), "Afficher le total"] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), showTotalButton && typeof column.footer === 'object' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.ParentItem, { children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterIcon, {}), "Afficher le total", (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.SubMenu, { children: [Object.keys(column.footer).map(function (key) {
-                                                var _a;
-                                                var TotalIcon = (_a = footerFunctionsIcons[key]) !== null && _a !== void 0 ? _a : Icons_1.TableFooterIcon;
-                                                return ((0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: function () { return showFooter(key); }, children: [(0, jsx_runtime_1.jsx)(TotalIcon, {}), key in footerFunctionsTexts
-                                                            ? footerFunctionsTexts[key]
-                                                            : key] }, key));
-                                            }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {}), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: hideFooter, disabled: !isFooterVisible, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterSlashIcon, {}), "Masquer le total"] })] })] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] }))] })), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: openModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterIcon, {}), "Filtrer ..."] }), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { "$color": "danger", onClick: clearFilter, disabled: !hasFilters, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterSlashIcon, {}), "Supprimer le filtre"] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {}), (0, jsx_runtime_1.jsxs)(styles.InputContainer, { children: [(0, jsx_runtime_1.jsx)(Icons_1.MagnifierIcon, {}), (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: textFilterInputRef, type: "text", name: "search", id: "search", placeholder: "Rechercher ...", value: textFilter, onChange: function (e) { return setTextFilter(e.target.value); } })] }), (0, jsx_runtime_1.jsx)(styles.CheckboxesContainer, { children: checkboxesComponent })] }));
-    if (!contextMenu) {
-        return (0, jsx_runtime_1.jsx)(styles_1.MenuContainer, { children: content });
-    }
-    return (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: content });
+    }, [columnKey, onClose, setFooters]);
+    return ((0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu, { children: [modal, column.sortGetter && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: onSortAscClicked, children: [(0, jsx_runtime_1.jsx)(SortAscIcon, {}), sortAscText] }), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: onSortDescClicked, children: [(0, jsx_runtime_1.jsx)(SortDescIcon, {}), sortDescText] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), isFooterVisible && typeof column.footer === 'function' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: hideFooter, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterSlashIcon, {}), "Masquer le total"] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), !isFooterVisible && typeof column.footer === 'function' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: function () { return showFooter('count'); }, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterIcon, {}), "Afficher le total"] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), typeof column.footer === 'object' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.ParentItem, { children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterIcon, {}), "Afficher le total", (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.SubMenu, { children: [Object.keys(column.footer).map(function (key) {
+                                        var _a;
+                                        var TotalIcon = (_a = footerFunctionsIcons[key]) !== null && _a !== void 0 ? _a : Icons_1.TableFooterIcon;
+                                        return ((0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: function () { return showFooter(key); }, children: [(0, jsx_runtime_1.jsx)(TotalIcon, {}), key in footerFunctionsTexts
+                                                    ? footerFunctionsTexts[key]
+                                                    : key] }, key));
+                                    }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {}), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: hideFooter, disabled: !isFooterVisible, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterSlashIcon, {}), "Masquer le total"] })] })] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: openModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterIcon, {}), "Filtrer ..."] }), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { "$color": "danger", onClick: clearFilter, disabled: !hasFilters, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterSlashIcon, {}), "Supprimer le filtre"] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {}), (0, jsx_runtime_1.jsxs)(styles.InputContainer, { children: [(0, jsx_runtime_1.jsx)(Icons_1.MagnifierIcon, {}), (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: textFilterInputRef, type: "text", name: "search", id: "search", placeholder: "Rechercher ...", value: textFilter, onChange: function (e) { return setTextFilter(e.target.value); } })] }), (0, jsx_runtime_1.jsx)(styles.CheckboxesContainer, { children: checkboxesComponent })] }));
 };
 exports.DataGridFilterMenu = DataGridFilterMenu;

package/dist/components/data/DataGrid/DataGridFilterMenu/styles.js

@@ -24,7 +24,7 @@ exports.FilterValueContainer = styled_components_1.default.div.attrs({
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: var(--color-neutral-50);\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: var(--color-neutral-50);\n  }\n"])));
 exports.FilterValuesScrollerContainer = styled_components_1.default.div.attrs({
     className: 'FilterValuesScrollerContainer',
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & ", " {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n      flex-shrink: 0;\n    }\n  }\n"], ["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & ", " {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n      flex-shrink: 0;\n    }\n  }\n"])), exports.FilterValueContainer, function (_a) {
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & ", " {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"], ["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & ", " {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"])), exports.FilterValueContainer, function (_a) {
     var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_FILTER_ROW_HEIGHT : _b;
     return "".concat($rowHeight, "px");
 });

package/dist/components/data/DataGrid/DataGridFooter.js

@@ -28,17 +28,17 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 var styles = __importStar(require("./styles"));
-var constants_1 = require("./constants");
 var hooks_1 = require("./hooks");
 var DataGridFooter = function (_a) {
     var context = _a.context;
-    var _b = (0, hooks_1.useDataGridContext)(context), visibleColumns = _b.visibleColumns, rows = _b.rows, selectedRows = _b.selectedRows, sortedRows = _b.sortedRows, selectable = _b.selectable, headerColor = _b.headerColor, _c = _b.footers, footers = _c === void 0 ? {} : _c, gridTemplateColumns = _b.gridTemplateColumns, footerFunctions = _b.footerFunctions;
+    var _b = (0, hooks_1.useDataGridContext)(context), visibleColumns = _b.visibleColumns, rows = _b.rows, selectedRows = _b.selectedRows, sortedRows = _b.sortedRows, selectable = _b.selectable, _c = _b.footers, footers = _c === void 0 ? {} : _c, gridTemplateColumns = _b.gridTemplateColumns, footerFunctions = _b.footerFunctions;
     if (!Object.keys(footers).length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(styles.DataGridFooterRow, { "$gridTemplateColumns": gridTemplateColumns, children: [!!selectable && (0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, {}), visibleColumns.map(function (col) {
-                var _a, _b, _c;
-                return ((0, jsx_runtime_1.jsx)(styles.DataGridHeaderCellContainer, { style: { width: ((_a = col.width) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_COLUMN_WIDTH) + 'px' }, "$headerColor": (_b = col.color) !== null && _b !== void 0 ? _b : headerColor, children: (_c = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[col.key]) === null || _c === void 0 ? void 0 : _c.call(footerFunctions, rows, sortedRows, selectedRows) }, col.key));
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridFooterRow, { "$gridTemplateColumns": gridTemplateColumns, children: [!!selectable && (0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, {}), visibleColumns.map(function (_a) {
+                var _b, _c;
+                var key = _a[0], col = _a[1];
+                return ((0, jsx_runtime_1.jsx)(styles.DataGridHeaderCellContainer, { style: { width: ((_b = col.width) !== null && _b !== void 0 ? _b : 150) + 'px' }, children: (_c = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[key]) === null || _c === void 0 ? void 0 : _c.call(footerFunctions, rows, sortedRows, selectedRows) }, key));
             })] }));
 };
 exports.DataGridFooter = DataGridFooter;

package/dist/components/data/DataGrid/DataGridHeader.js

@@ -74,7 +74,7 @@ var hooks_1 = require("./DataGridColumnsModal/hooks");
 var hooks_2 = require("./hooks");
 var DataGridHeader = function (_a) {
     var context = _a.context;
-    var _b = (0, hooks_2.useDataGridContext)(context), name = _b.name, visibleColumns = _b.visibleColumns, selectable = _b.selectable, rows = _b.rows, selectedKeys = _b.selectedKeys, setSelectedKeys = _b.setSelectedKeys, copyTable = _b.copyTable, setFilters = _b.setFilters, refresh = _b.refresh, headerColor = _b.headerColor, rowKeyGetter = _b.rowKeyGetter, gridTemplateColumns = _b.gridTemplateColumns, getAllIds = _b.getAllIds, editable = _b.editable, onSaveClicked = _b.onSaveClicked, onAddClicked = _b.onAddClicked, addedRows = _b.addedRows, updatedRows = _b.updatedRows, addRow = _b.addRow, clearChangedRows = _b.clearChangedRows;
+    var _b = (0, hooks_2.useDataGridContext)(context), name = _b.name, visibleColumns = _b.visibleColumns, selectable = _b.selectable, rows = _b.rows, selectedKeys = _b.selectedKeys, setSelectedKeys = _b.setSelectedKeys, copyTable = _b.copyTable, setFilters = _b.setFilters, refresh = _b.refresh, headerColor = _b.headerColor, rowKeyGetter = _b.rowKeyGetter, gridTemplateColumns = _b.gridTemplateColumns, getAllIds = _b.getAllIds;
     var _c = (0, react_1.useState)(), visibleFilter = _c[0], setVisibleFilter = _c[1];
     var _d = (0, hooks_1.useDataGridColumnsModal)(context), openModal = _d.openModal, modal = _d.modal;
     var checkboxStatus = selectedKeys.length === 0
@@ -110,44 +110,10 @@ var DataGridHeader = function (_a) {
         setIsLoadingVisible(true);
         copyTable().then(function () { return setIsLoadingVisible(false); });
     }, [copyTable]);
-    var save = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var savedIds;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!(Object.keys(addedRows).length + Object.keys(updatedRows).length > 0 &&
-                        onSaveClicked)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, onSaveClicked(addedRows, updatedRows)];
-                case 1:
-                    savedIds = _a.sent();
-                    clearChangedRows(savedIds);
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
-            }
-        });
-    }); }, [addedRows, clearChangedRows, onSaveClicked, updatedRows]);
-    var add = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var row, key;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!onAddClicked) return [3 /*break*/, 2];
-                    return [4 /*yield*/, onAddClicked()];
-                case 1:
-                    row = _a.sent();
-                    key = rowKeyGetter(row);
-                    addRow(key, row);
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
-            }
-        });
-    }); }, [addRow, onAddClicked, rowKeyGetter]);
-    var onRefreshClicked = (0, react_1.useCallback)(function () {
-        refresh === null || refresh === void 0 ? void 0 : refresh();
-        clearChangedRows();
-        setSelectedKeys([]);
-    }, [clearChangedRows, refresh, setSelectedKeys]);
-    var toolsRow = ((0, jsx_runtime_1.jsx)(styles.DataGridToolsRow, { children: (0, jsx_runtime_1.jsxs)(styles.DataGridToolsRowButtonsContainer, { children: [(0, jsx_runtime_1.jsx)(layout_1.Loading, { visible: isLoadingVisible }), editable && onSaveClicked && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", "$color": "primary", onClick: save, children: [(0, jsx_runtime_1.jsx)(Icons_1.FloppyDiskIcon, {}), "Enregistrer"] })), editable && onAddClicked && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", "$color": "success", onClick: add, children: [(0, jsx_runtime_1.jsx)(Icons_1.PlusIcon, {}), "Ajouter"] })), (0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", onClick: onRefreshClicked, children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowsRotateIcon, {}), "Rafra\u00EEchir"] }), (0, jsx_runtime_1.jsxs)(forms_1.Button, { "$color": "emerald", size: "small", onClick: runCopyTable, children: [(0, jsx_runtime_1.jsx)(Icons_1.CopyIcon, {}), "Copier la table"] }), (0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", "$color": "danger", onClick: function () { return setFilters({}); }, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterSlashIcon, {}), "Supprimer les filtres"] }), name && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { "$color": "info", size: "small", onClick: openModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableColumnsIcon, {}), "Param\u00E8tres des colonnes"] }))] }) }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal, toolsRow, (0, jsx_runtime_1.jsxs)(styles.DataGridHeaderRow, { "$gridTemplateColumns": gridTemplateColumns, "$headerColor": headerColor, children: [!!selectable && ((0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, { "$headerColor": headerColor, onClick: function () { return toggleAll(!(checkboxStatus !== null && checkboxStatus !== void 0 ? checkboxStatus : true)); }, children: (0, jsx_runtime_1.jsx)(IndeterminateCheckbox_1.IndeterminateCheckbox, { checked: checkboxStatus, readOnly: true }) })), visibleColumns.map(function (col, index) { return ((0, jsx_runtime_1.jsx)(DataGridHeaderCell_1.DataGridHeaderCell, { columnKey: col.key, column: col, context: context, columnIndex: index, isFilterOpen: visibleFilter === col.key, onFilterButtonClicked: onFilterButtonClicked }, col.key)); })] })] }));
+    var toolsRow = ((0, jsx_runtime_1.jsxs)(styles.DataGridToolsRow, { children: [(0, jsx_runtime_1.jsx)(layout_1.Loading, { visible: isLoadingVisible }), refresh && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", onClick: refresh, children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowsRotateIcon, {}), "Rafra\u00EEchir"] })), (0, jsx_runtime_1.jsxs)(forms_1.Button, { color: "emerald", size: "small", onClick: runCopyTable, children: [(0, jsx_runtime_1.jsx)(Icons_1.CopyIcon, {}), "Copier la table"] }), (0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", color: "danger", onClick: function () { return setFilters({}); }, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterSlashIcon, {}), "Supprimer les filtres"] }), name && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { color: "info", size: "small", onClick: openModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableColumnsIcon, {}), "Param\u00E8tres des colonnes"] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal, toolsRow, (0, jsx_runtime_1.jsxs)(styles.DataGridHeaderRow, { "$gridTemplateColumns": gridTemplateColumns, "$headerColor": headerColor, children: [!!selectable && ((0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, { "$headerColor": headerColor, onClick: function () { return toggleAll(!(checkboxStatus !== null && checkboxStatus !== void 0 ? checkboxStatus : true)); }, children: (0, jsx_runtime_1.jsx)(IndeterminateCheckbox_1.IndeterminateCheckbox, { checked: checkboxStatus, readOnly: true }) })), visibleColumns.map(function (_a, index) {
+                        var key = _a[0], col = _a[1];
+                        return ((0, jsx_runtime_1.jsx)(DataGridHeaderCell_1.DataGridHeaderCell, { columnKey: key, column: col, context: context, columnIndex: index, isFilterOpen: visibleFilter === key, onFilterButtonClicked: onFilterButtonClicked }, key));
+                    })] })] }));
 };
 exports.DataGridHeader = DataGridHeader;

package/dist/components/data/DataGrid/DataGridHeaderCell.d.ts

@@ -1,2 +1,2 @@
 import { DataGridHeaderCellProps } from './types';
-export declare const DataGridHeaderCell: <R>({ columnKey, column, context, }: DataGridHeaderCellProps<R>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridHeaderCell: <R>({ columnKey, columnIndex, column, context, }: DataGridHeaderCellProps<R>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data/DataGrid/DataGridHeaderCell.js

@@ -36,27 +36,40 @@ var IconButton_1 = require("../../forms/IconButton");
 var hooks_1 = require("./hooks");
 var providers_1 = require("../../../providers");
 var DataGridHeaderCell = function (_a) {
-    var _b, _c;
-    var columnKey = _a.columnKey, column = _a.column, context = _a.context;
+    var _b;
+    var columnKey = _a.columnKey, columnIndex = _a.columnIndex, column = _a.column, context = _a.context;
     var getElementScreenRect = (0, providers_1.useUi)().getElementScreenRect;
     var contextValue = (0, hooks_1.useDataGridContext)(context);
-    var _d = contextValue.filters, filters = _d === void 0 ? {} : _d, headerColor = contextValue.headerColor, resizingColumnKey = contextValue.resizingColumnKey, startResizing = contextValue.startResizing;
+    var _c = contextValue.filters, filters = _c === void 0 ? {} : _c, setColumnWidth = contextValue.setColumnWidth, saveSettings = contextValue.saveSettings, headerColor = contextValue.headerColor;
     var filterButtonRef = (0, react_1.useRef)(null);
     /** RESIZING */
+    var _d = (0, react_1.useState)(false), isResizing = _d[0], setIsResizing = _d[1];
+    var resizingOffset = (0, react_1.useRef)(0);
+    var onResizeStart = (0, react_1.useCallback)(function (e) {
+        resizingOffset.current = e.screenX - (column.width || 150);
+        setIsResizing(true);
+    }, [column.width]);
+    var onResizeMove = (0, react_1.useCallback)(function (e) {
+        if (isResizing) {
+            var newWidth = Math.max(86, e.screenX - resizingOffset.current);
+            setColumnWidth(columnKey, newWidth);
+        }
+    }, [columnKey, isResizing, setColumnWidth]);
+    var onResizeEnd = (0, react_1.useCallback)(function () {
+        setIsResizing(false);
+        saveSettings();
+    }, [saveSettings]);
     var _e = (0, react_1.useState)(false), isFilterDropdownVisible = _e[0], setIsFilterDropdownVisible = _e[1];
     var filterDropdown = (0, react_1.useMemo)(function () {
-        if (!isFilterDropdownVisible ||
-            !filterButtonRef.current ||
-            !columnKey ||
-            !column.filter) {
+        if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
             return null;
         }
         var filterButtonRect = getElementScreenRect(filterButtonRef.current);
         filterButtonRect.x += window.scrollX;
         filterButtonRect.y += window.scrollY;
-        return ((0, jsx_runtime_1.jsx)(layout_1.Dropdown, { "$sourceRect": filterButtonRect, onClose: function () { return setIsFilterDropdownVisible(false); }, "$width": 320, "$height": [350, 500], "$autoPositionX": true, children: (0, jsx_runtime_1.jsx)(DataGridFilterMenu_1.DataGridFilterMenu, { column: column, context: context, onClose: function () { return setIsFilterDropdownVisible(false); } }) }));
+        return ((0, jsx_runtime_1.jsx)(layout_1.Dropdown, { "$sourceRect": filterButtonRect, onClose: function () { return setIsFilterDropdownVisible(false); }, "$width": 320, "$height": [250, 400], "$autoPositionX": true, children: (0, jsx_runtime_1.jsx)(DataGridFilterMenu_1.DataGridFilterMenu, { columnKey: columnKey, columnIndex: columnIndex, context: context, onClose: function () { return setIsFilterDropdownVisible(false); } }) }));
     }, [
-        column,
+        columnIndex,
         columnKey,
         context,
         getElementScreenRect,
@@ -65,8 +78,7 @@ var DataGridHeaderCell = function (_a) {
     var onFilterButtonClicked = (0, react_1.useCallback)(function () {
         setIsFilterDropdownVisible(true);
     }, []);
-    var isResizing = resizingColumnKey === columnKey;
     var hasFilters = ((_b = filters[columnKey]) === null || _b === void 0 ? void 0 : _b.values.length) > 0;
-    return ((0, jsx_runtime_1.jsxs)(styles.DataGridHeaderCellContainer, { "$headerColor": (_c = column.color) !== null && _c !== void 0 ? _c : headerColor, "$isResizing": isResizing, children: [filterDropdown, typeof column.name === 'string' ? ((0, jsx_runtime_1.jsx)("span", { children: column.name })) : ((0, jsx_runtime_1.jsx)(styles.DataGridHeaderTextContainer, { children: column.name })), !!column.filter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", className: hasFilters ? 'danger' : '', ref: filterButtonRef, icon: Icons_1.ChevronDownIcon, color: hasFilters ? 'danger' : headerColor, onClick: onFilterButtonClicked })), column.resizable !== false && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(styles.DataGridResizeGrip, { className: isResizing ? 'active' : '', "$headerColor": headerColor, onMouseDown: function (e) { return startResizing(e, columnKey); } }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridHeaderCellContainer, { "$headerColor": headerColor, "$isResizing": isResizing, children: [filterDropdown, (0, jsx_runtime_1.jsx)("span", { children: column.name }), !!column.filter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", className: hasFilters ? 'danger' : '', ref: filterButtonRef, icon: Icons_1.ChevronDownIcon, color: hasFilters ? 'danger' : headerColor, onClick: onFilterButtonClicked })), column.resizable !== false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles.DataGridResizeGrip, { className: isResizing ? 'active' : '', "$headerColor": headerColor, onMouseDown: onResizeStart }), isResizing && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: onResizeMove, onMouseUp: onResizeEnd }))] }))] }));
 };
 exports.DataGridHeaderCell = DataGridHeaderCell;

package/dist/components/data/DataGrid/DataGridRowTemplate.d.ts

@@ -1,3 +1,3 @@
 import { DataGridRowTemplateProps } from './types';
 import { VirtualScrollerTemplateProps } from '../VirtualScroller/types';
-export declare const DataGridRowTemplate: <R>({ item, index: rowIndex, context, }: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridRowTemplate: <R>({ item, index, context, }: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data/DataGrid/DataGridRowTemplate.js

@@ -52,19 +52,20 @@ var DataGridCell_1 = require("./DataGridCell");
 var react_1 = require("react");
 var DataGridRowTemplate = function (_a) {
     var _b, _c;
-    var item = _a.item, rowIndex = _a.index, context = _a.context;
-    var _d = (0, react_1.useContext)(context), visibleColumns = _d.visibleColumns, rowKeyGetter = _d.rowKeyGetter, toggleSelection = _d.toggleSelection, updatedRows = _d.updatedRows, addedRows = _d.addedRows, props = __rest(_d, ["visibleColumns", "rowKeyGetter", "toggleSelection", "updatedRows", "addedRows"]);
+    var item = _a.item, index = _a.index, context = _a.context;
+    var _d = (0, react_1.useContext)(context), visibleColumns = _d.visibleColumns, rowKeyGetter = _d.rowKeyGetter, toggleSelection = _d.toggleSelection, props = __rest(_d, ["visibleColumns", "rowKeyGetter", "toggleSelection"]);
     if (!item) {
-        return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) })), visibleColumns.map(function (_, colIndex) { return ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) }, "loading-".concat(rowIndex, "-").concat(colIndex))); })] }, "loading-row-".concat(rowIndex)));
+        return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) })), visibleColumns.map(function (_, colIndex) { return ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) }, "loading-".concat(index, "-").concat(colIndex))); })] }, "loading-row-".concat(index)));
     }
-    var rowKey = rowKeyGetter(item);
-    var selected = props.selectedKeys.includes(rowKey);
+    var key = rowKeyGetter(item);
+    var selected = props.selectedKeys.includes(key);
     var _e = (_c = (_b = props.rowClassNameGetter) === null || _b === void 0 ? void 0 : _b.call(props, item)) !== null && _c !== void 0 ? _c : {
         className: '',
         style: undefined,
     }, className = _e.className, style = _e.style;
-    var isAdded = rowKey in addedRows;
-    var isUpdated = rowKey in updatedRows;
-    return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { "$edited": isAdded || isUpdated, children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.SelectionCell, { onClick: function () { return toggleSelection(rowKey); }, children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", value: rowKey, checked: selected, readOnly: true }) }, "__select_checkbox__")), visibleColumns.map(function (col, colIndex) { return ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, __assign({}, (colIndex === 0 ? { className: className, style: style } : {}), { row: item, rowIndex: rowIndex, column: col, columnIndex: colIndex, context: context, columnKey: col.key, color: col.color }), "loading-".concat(colIndex, "-").concat(colIndex))); })] }, rowKey));
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.SelectionCell, { onClick: function () { return toggleSelection(key); }, children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", value: key, checked: selected, readOnly: true }) }, "__select_checkbox__")), visibleColumns.map(function (_a, index) {
+                var key = _a[0], col = _a[1];
+                return ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, __assign({}, (index === 0 ? { className: className, style: style } : {}), { row: item, rowIndex: index, column: col, columnIndex: index, context: context, columnKey: key }), "loading-".concat(index, "-").concat(index)));
+            })] }, key));
 };
 exports.DataGridRowTemplate = DataGridRowTemplate;